맨 땅에 프론트엔드 개발자 되기

리액트 React State, Props 리액트를 사용할 때 꼭 알아야 하는 개념인 State와 Props에 대해 알아보자. Props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터 State는 컴포넌트 내부에서 대상의 상태를 나타내는 데이터 State 리액트를 사용하여 개발하는 것과 바닐라 자바스크립트를 사용하여 개발하는 것의 가장 큰 차이는 직접 DOM을 조작하지 않는다는 것이다. DOM을 직접 조작하지 않는 이유 = 리액트를 사용하는 이유 (아래 글 참고) 리액트를 사용하는 이유 (SPA, CSR, SSR) 리액트를 사용하는 이유 (SPA, CSR, SSR) 많은 개발자들에게 사랑받고 있는 리액트!! 현재, 많은 현업 개발자들에 의해 쓰이고 있고, 프론트엔드 개발에 관심이 있다면 다들 한번씩은 들어봤..

리액트 React 시작하기 (CDN & CRA) 1. CodePen 으로 시작하기 CodePen은 웹에서 코딩을 작성할 수 있는 애플리케이션이다. CodePen에서 시작하는 방법은 실제 프로젝트를 만들 수 있는 방법은 아니고, React를 경험해보거나 간단한 테스트 코드를 실행해볼 때 사용하는 방법이다. CodePen https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io CodePen에 간단하게..

HTML 시맨틱 태그를 사용하는 이유 시맨틱(Semantic) 태그란? 시맨틱 태그란 의미가 있는 태그를 말한다. 모든 block 영역은 div 태그로, inline 요소는 span 태그와 달리, header, main, footer, section, article과 같은 태그 자체에 의미가 담긴 태그를 말한다. 시맨틱 태그를 왜 써야하는데? 영역마다 무슨 태그를 써야하는지 생각하는 게 귀찮고 그냥 다 div 태그를 써버리면 되는데 뭐하러 시맨틱 태그를 사용하나? 라고 생각이 들 수도 있겠지만, 시맨틱 태그를 사용하는 것과 아닌 것에 차이점이 있다. 1. 검색엔진 최적화(SEO) 검색엔진이 알맞은 검색결과를 내기 위해 웹사이트를 크롤링할 때 웹사이트의 내부에 담긴 정보를 토대로 사이트를 분석한다. 그럴 ..

JavaScript 동기와 비동기, 콜백함수 JavaScript를 공부하다보면 자주 듣게 되는 용어인 ‘동기’와 ‘비동기’. 한자어로 되어 있어서 직관적으로 무슨 뜻인지 알기가 어려운데, 알고보면 쉽기도 하고 CS적으로 깊이 들어가다 보면 어렵기도 한 용어다. 일단 얕게 이해할 수 있을만큼 공부해본다. 동기(Synchronous)와 비동기(Asynchronous) 동기와 비동기를 간단하게 설명하자면, 동기는 순차적으로 이행되는 방식, 비동기는 비순차적으로 이행되는 방식이라고 할 수 있다. 순차, 비순차라는 말을 보면 무엇엔가 순서가 있다는 말이 된다. 자바스크립트는 싱글스레드 언어다. 그 말인 즉, 문서의 위에서부터 아래로 순서대로 스크립트를 읽어나가며 일을 처리하며, 하나의 순서대로 처리된다는 뜻이다...

호이스팅 (Hoisting) 호이스팅(Hoisting)의 뜻은 영어로 ‘끌어올리다, 게양하다’ 라는 뜻으로 자바스크립트가 실행될 때 끌어올려지는 현상을 말한다. 그렇다면 무엇이 끌어올려지느냐?!! var로 선언된 변수와 함수 선언문에만 호이스팅이 일어난다. 잠깐, 함수표현식과 함수선언문을 짚고 넘어가자. 함수표현식 const sayHello = function() { console.log('Hello!'); } 함수선언문 function sayHello() { console.log('Hello!') } 호이스팅은 유효범위 (전역 변수라면 최상단, 지역 변수라면 변수가 선언된 영역의 최상단) 안에서 최상단으로 끌어올려진다. 왜 호이스팅 현상이 일어나느냐고 묻는다면, 자바스크립트의 문법을 해석하는 parse..

리액트를 사용하는 이유 (SPA, CSR, SSR) 많은 개발자들에게 사랑받고 있는 리액트!! 현재, 많은 현업 개발자들에 의해 쓰이고 있고, 프론트엔드 개발에 관심이 있다면 다들 한번씩은 들어봤을 것 같다. 그러나 다른 사람들이 다 쓰니까, 인기 있으니까 무작정 리액트를 쓰게 된다면 우리는 리액트가 주는 장점이나 본질을 이해하지 못하고 제대로 사용하지 못 하게 된다. SSR (서버사이드 렌더링) 과 CSR (클라이언트사이드 렌더링) 우선 리액트의 장점을 이해하려면 SSR과 CSR의 개념에 대해서 알아야 한다. 웹문서는 브라우저에 표시되어야 할 정보들을 담고 있다. 이 정보들은 브라우저가 해석할 수 있는 프로그래밍 언어로 되어 있으며, 서비스를 제공하는 회사 혹은 개인의 서버(요즘엔 클라우드 서버)에 저..