게으른 개발노트

오는 4월 원티드 프리온보딩 프론트엔드 챌린지에 지원했고, 사전과제가 있어서 겸사겸사 오랜만에 포스팅하려고 한다. 이번 프리온보딩 챌린지 기간은 다음과 같다. 챌린지 일정 3.15 (수) ~ 3.30 (목) 참가 신청 및 사전 미션 수행 4.3 (월) ~ 4.16 (일) 기술 역량 향상 (2주) 월요일 & 목요일 20시 Online (3시간) 4.17 (월) ~ 5.14 (일) 취업 챌린지 (4주) 이번에 처음으로 지원해봤는데 단기간에 취업하는 챌린지고, 원티드를 통해 20건 이상을 지원한 챌린저들에게는 상금을 나누어주는 혜택도 있다고 한다. 이제 막 데브코스 수료한 나에게는 안할 이유가 없어서 데브코스 동기들에게도 알려주고 바로 지원하게 되었다. 이제 사전과제와 React 18버전의 새로운 기능들에 대..

Redux와 MobX보다 러닝커브가 적은 Recoil을 프로젝트에서 주로 사용을 했지만 뭔가 제대로 썼다는 느낌을 못 받아서 앞으로 남은 데브코스 최종 플젝때는 제대로 써보는걸 목표로 잡고 블로그에 공부내용을 정리하려고 한다. (+FE스터디 발표) Recoil은 Redux와 MobX와 다르게 React를 위해 출시된 Facebook에서 개발한 전역상태관리 라이브러리이다. React의 hooks와 어울리면서 React스럽게 제작했다고 한다. Installation npm install recoil RecoilRoot 모든 곳에서 recoil을 사용하기 때문에 루트 컴포넌트가 RecoilRoot를 넣기에 가장 적합하다. import React from 'react'; import { RecoilRoot, a..

리액트의 모든 컴포넌트에는 라이프사이클이 존재한다. 컴포넌트는 생성(mount) => 업데이트(update) => 제거(unmount)의 생명주기를 갖는다. 여기서 클래스 컴포넌트는 라이프사이클 메서드를 활용하고, 함수형 컴포넌트는 Hook을 사용한다. 리액트 라이프사이클 개념은 클래스컴포넌트를 사용할때 명확히 사용되는 부분인데 16.8이후 함수형 컴포넌트의 개념이 등장하면서 생명주기의 개념이 이전처럼 명확히 구분되어 사용되지 않는다. 그럼에도 리액트에서는 공식적으로 클래스,함수형 컴포넌트 모두 지원할 것이라고 발표했고, 이전에 작성된 코드들은 대부분 클래스 컴포넌트로 작성되어 있기 때문에 라이프 사이클에 대해 알고 넘어가야한다. 그리고 함수형 컴포넌트에서 클래스 컴포넌트처럼 명확히 모든 케이스를 구분해..

먼저, 리액트에서 리렌더링되는 조건을 알아보자 1. 함수 컴포넌트 자기자신의 상태가 변경될 때 2. 부모 컴포넌트로부터 받은 prop의 상태가 변경될 때 3. 부모 컴포넌트의 상태가 변경될 때 리액트는 이름답게 변화를 감지하여 리렌더링이 되는것이 특징이고, 이런 특징은 빠른 개발속도를 자랑하지만 코드를 잘못 짜면 성능적으로 봤을 때 단점이 될 수도 있다. 예를 들어서 십억번의 연산을 하는 컴포넌트가 있다고 할때, 리렌더링 될 때마다 십억번의 연산을 하게 되면 큰 성능낭비가 될 수 있다. 아래 예제로 확인해보자. 1부터 n만큼의 숫자를 더하고 버튼 클릭을 할 때마다 label뒤에 ":"을 하나씩 붙혀주는 코드다. // App.js import {useState} from "react"; import Sho..

개발하면서 앱이 커질수록 타입체크는 더욱 잘해야하고 타입 검사를 잘 활용하면 많은 버그를 잡을 수 있다. React에는 내장된 타입 검사 기능들을 갖고 있다. 컴포넌트간 데이터를 전달하는 prop에 타입체크를 하는 것은 필수적으로 해줘야 미래의 내가 덜 고생하는 길이 될 수 있다. PropTypes 컴포넌트의 prop에 타입 검사를 하기 위해 prop를 받는 하위컴포넌트에 PropTypes를 선언해준다. import PropTypes from "prop-types"; prop에 유효하지 않은 값이 전달되면 콘솔에 경고문이 보일 것이다. 타입이 다르면 실행을 아예 안시키는 타입스크립트와 달리 자바스크립트에선 실행은 시켜주는 대신 콘솔에 저런 경고문을 띄워준다. 그리고 저 경고문은 propTypes 성능상의..