Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 리덕스, 리액트 라우터, styled-components 등의 라이브러리는 Context API 기반으로 구현되어있다.프로젝트 내에서 환경설정, 사용자 정보와 같은 전역적으

앞에 설명은 모두 이 부분을 이해하기 위한 배경지식 설명이었습니다. 그럼 이제 본격적으로 주소창에 url 입력 시 브라우저에서 어던 일이 벌어지는지 백엔드 관점에서 살펴보겠습니다.주소창에 URL 입력 시 브라우저는 먼저 입력받은 URL의 구조를 해석(Parsing)합니

주소창에 특정 웹페이지 주소를 입력 시 일어나는 과정은 개발자 면접에서 단골 질문입니다. 이는 백엔드와 프론트엔드 상관없이 둘 다 알아야 하는 기본이기 때문에 많은 회사에서 특히 주로 신입 개발자 분들에게 자주 물어보는 질문인 것 같습니다. 브라우저는 웹과 뗄레야 뗄

다른 주소에서 다른 화면을 보여주는 것을 라우팅이라고 한다.클라이언트 사이드에서 이루어지는 라우팅을 구현하여 SPA를 쉽게 만들어 주는 라이브러가 react-router다.설치 : npm install react-router-dom프로젝트에 라우터 적용프로젝트에 리액트

이 글은 react todo-list 프로젝트 기준으로 작성되었습니다.아래의 상황에서 컴포넌트 리랜더링이 발생한다.자신이 전달받은 props가 변경될 때자신의 state가 변경될 때부모 컴포넌트가 리렌더링 될 때forceUpdate() 함수가 실행될 때todo list

리액트에서는 아래 4가지 스타일링 방식을 가장 많이 사용한다.일반 CSS : 가장 기본적인 방식Sass : CSS 전처리기(pre-process) 중 하나로 확장된 CSS 문법을 사용하여 CSS코드를 더욱 쉽게 작성 할 수 있게 해준다.CSS Module : 스타일을

Hook은 리액트 v16.8에 새로 도입된 기능으로 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수다. Hook은 class 안에서 동작하지 않으며, class를 사용하지

리액트 프로젝트 개발환경 구축을 처음부터 설정하는 것은 굉장히 복잡하다. 그러나 create-react-app을 사용하면 쉽게 개발환경을 설정할 수 있다.create-react-app은 페이스북에서 만든 공식적인 React 웹 개발용 Boilerplate이다. 직접 모

몇 년 전부터 도커는 핫한 기술이었으며, 지금은 거의 업계 표준이 되면서 개발자라면 필수로 알아야할 기술이 되었습니다. 이직 준비를 공부를 하기 위해 도커에 대해 검색 해보니, 아래의 내용들을 알 수 있었습니다.도커는 리눅스의 컨테이너라는 기술(LXC)를 이용한 소프트

자바스크릅트에서 제공하는 API를 이용해 DOM 조작을 하는 것이 리액트 방식을 이용하는 것보다 더 쉬운 경우가 있다.이를 위해 리액트는 HTML 엘리먼트에 대한 DOM API에 접근할 수 있게하는 ref라는 도구를 제공한다.또한 페이지 안의 어떤 HTML 엘리먼트든

이전 글과 이어집니다...이전 글에서 내가 구현한 화면은 백엔드에서 데이터를 받아 같은 날짜끼리는 행이 병합되는 테이블이었다.이번에는 아래의 조건을 추가된 화면을 작업해야했다.api 요청 시 백엔드에서 프론트로 위와 같은 형식의 데이터를 내려준다.사용자가 해당 검색 조

리액트도 결국에는 자바스크립트이기 때문에 이벤트를 처리하는 방식은 순수 자바스크립트와 동일하다. 먼저 이벤트를 리스닝 후 리스너를 작성하는 것이다. 이벤트 리스닝 : 특정 엘리먼트가 어떤 이벤트를 수신할지 결정하는 것이벤트 리스너 : 이벤트 리스너란 이벤트가 발생했을

리액트 컴포넌트 생명주기(Life Cycle) 리액트의 컴포넌트는 생명주기를 가진다. 생명주기란 컴포넌트가 생성되고 사용되고 소멸될 때 까지 일련의 과정을 말한다. 생명주기 안에서는 특정 시점에 자동으로 호출되는 메서드가 있는데, 이를 라이프 사이클 이벤트라고 한다.

컴포넌트에 저장하여 사용(변경)가능한 데이터를 상태(state)라고 한다.props는 부모로 부터 전달받은 데이터이며 변경이 불가능한 읽기전용 데이터인 반면, state는 캡슐화 되어있어 비공개이며 컴포넌트에 의해 제어(변경)이 가능하다.클래스 내부에서 생성자를 만든다

JS에서 함수는 코드를 더 명확하고 재사용 가능하게 해준다. 함수는 함수 안에 다른 함수를 호출 할 수 있는데, 이는 함수가 해야 할 일을 명확히 분리할 수 있게 해준다. 즉 모든 명령을 하나의 함수 안에 다 작성할 필요가 없고, 각 작업에 특화된 여러 함수를 만들어

이 글은 사수 없는 주니어 프론트 개발자가 혼자서 구글링도 해보고 혼자 머리 싸매고 고민해서 겨우겨우 간신히 해결한 경험을 바탕으로 작성되었습니다.나는 JAVA 국비 6개월 과정을 수료하고, 어쩌다보니 프론트 개발자로 취업을 하게 되었다. 입사한 회사(현 직장)에서 내

이 시리즈는 리액트 공식문서 및 '리액트를 다루는 기술(김민준 저)', '리액트 교과서(아자트 마르단 저)'를 바탕으로 작성되었습니다. 개인 노션에만 정리한 내용을 옮기다 보니 저도 모르게 출처 없는 타 블로그 등의 글이 있을 수 있습니다. 혹 출처를 아시는 분들은 알

이 시리즈는 리액트 공식문서 및 '리액트를 다루는 기술(김민준 저)', '리액트 교과서(아자트 마르단 저)'를 바탕으로 작성되었습니다. 개인 노션에만 정리한 내용을 옮기다 보니 저도 모르게 출처 없는 타 블로그 등의 글이 있을 수 있습니다. 혹 출처를 아시는 분들은 알

자바스크립트의 영역이 커지면서 자바스크립트 만으로 대규모 어플리케이션을 만들 수 있는 시대가 왔다. 대규모 어플리케에션 중 프론트 사이드에서 돌아가는 애플리케이션 구조를 관리하기 위해 많은 프레임 워크들이 나왔다.이 프레임워크들은 주로 MVC, MVVM, MVW 아키택