Fall in IT.

Context API란? Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을때 유용한 기술이다 예를 들면, 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 Context API 사용법 익히기 color.tsx - Context API 만들기 const ColorContext = createContext({ state: { color: 'black', subColor: 'tomato' }, actions: { setColor: (color: string) => {}, setSubColor: (color: string) => {}, } }) export default ColorContext interface ColorProviderIProps { children: React.R..

안녕하세요. 오늘은 immer 라이브러리를 사용하여 쉽게 데이터의 불변성을 유지하는 방법에 대해서 알아보겠습니다. 데이터 불변성의 중요성 리액트 컴포넌트에서 상태를 업데이트할때 불변성을 지키는 것은 매우 중요하다. 리액트에서는 React.memo를 사용했을때 props가 바뀌었는지 혹은 바뀌지 않았는지를 알아내서 리렌더링 성능을 최적화해줄수있다. 불병성이 지켜지지 않는다면 React.memo와 같은 최적화는 불가능하다 immer가 꼭 필요한가? 반드시 필요하진 않다. 전개 연산자와 배열의 내장함수를 사용하면 쉽게 새로운 값을 만들 수 있다. 하지만 객체 구조가 깊어질수록 불변성을 유지하면서 업데이트하는것은 힘들어진다. 컴포넌트의 상태 업데이트가 까다로울때 immer 라이브러리를 사용하면 좋다. // 사용..

안녕하세요. 오늘은 컴포넌트를 스타일링하는 방법에 대해서 간단히 알아보겠습니다. 컴포넌트 스타일링 방식은 다양하게 존재한다. 일반 CSS Scss, Sass 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS 문법을 사용하여 CSS 코드를 더욱 쉽게 작성할 수 있도록 해준다. CSS Module 스타일을 작성할 때 CSS 클래스가 다른 CSS 클래스의 이름과 절대 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션 styled-components 스타일을 자바스크립트 파일에 내장시키는 방식으로 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있다 일반 CSS 중요한 점은 CSS 클래스명을 중복되지 않게 만드는 것이다 [컴포넌트 이름] - [클래스 이름] 형태로 이름을 짓..

안녕하세요. 오늘은 ESLint와 Prettier를 사용해서 개발환경을 만들어보겠습니다. 여러명이서 개발을 할때 코드 품질/포맷팅 도구의 도움을 받지않고 일관된 코드로 작성을 하기란 매우 어렵습니다. 최근에 많이 사용되는 ESLint와 Prettier를 사용해서 여러명이서 협업을 할때 일관된 코드를 작성할 수 있는 자동화된 환경을 만들어보겠습니다. 알아둬야할 키워드 ESLint Prettier (eslint-config-prettier, eslint-plugin-prettier) husky lint-staged git hooks ESLint란? lint란 보풀이란 의미로 코드상의 보풀을 제거해주는 도구를 말한다. 코드에서 보풀이란 선언한 변수를 사용하지 않았거나 들여쓰기를 일관되게 하지 않았거나 긴 코드..

안녕하세요. 오늘은 리액트 컴포넌트를 상대경로가 아닌 절대경로로 임포트하는 방법에 대해서 알아보겠습니다. 아래 설명은 CRA 프로젝트를 기준으로 설명합니다 : ) 왜 절대경로인가? 상대경로로 설정할 경우 디렉터리 구조가 깊어질수록 import 하기 어려워진다. import Common from "../../../../utils/common"; 절대경로로 설정할 경우 디렉터리 구조와 관계없이 손쉽게 import를 할 수 있다. import Common from "src/utils/common"; 설정 방법 프로젝트의 루트에 .env 파일을 생성하고 아래의 내용을 붙여넣습니다. NODE_PATH=src/ VSCODE에서도 Path를 잡아줘야하기 때문에 프로젝트의 루트에 jsconfig.json 파일을 생성하..

안녕하세요. 오늘은 lodash의 debounce 메소드에 대해서 알아보도록 하겠습니다. debounce란? 특정 이벤트가 발생할때 작동하는 비즈니스 로직이 과도하게 발생하는 것을 방지하기위해 사용되는 함수이다. input box에서 검색어를 입력할때마다 서버에서 연관된 검색어 정보를 가져와 보여주는 기능을 구현할때 주로 사용한다. 마지막 이벤트가 호출된 이후에 일정시간이 지난 후에 함수를 지연호출 시키는 역할을 한다. Sample Code 샘플 코드는 여기에서 다운로드 받으실 수 있습니다. :) import React from "react"; import "./App.css"; import { debounce } from "lodash"; const somthingFunc = () => { consol..

CRA(create-react-app)을 사용한 프로젝트에서 Moment.js 모듈을 사용할때 Locale이 적용되지 않는 문제가 있습니다. 그 이유는, create-react-app에는 moment locale 설정이 추가되어 있지 않다고 합니다. 자세한 내용은 링크를 참조해주세요 : ) Moment.js의 locale 을 적용하기 위해서는 직접 import 해주면 됩니다. import moment from "moment"; import "moment/locale/ko"; moment.locale("ko"); 참조 https://stackoverflow.com/questions/49788259/moment-js-change-locale-not-working

간혹, CRA로 만든 프로젝트를 여러개 실행해야할때가 있습니다. package.json 파일 수정없이 1회만 변경하여 실행하고 싶은 경우 아래와 같이 사용하시면 됩니다. # create-react-app 프로젝트에서 실행시 PORT 변경하는 방법 $ PORT=8888 yarn start

React HoC(Higher-order Component)란? 리액트 컴포넌트를 인자로 받아서 다른 리액트 컴포넌트를 반환하는 함수를 고차함수라고 한다. 조금 더 자세히 설명하면, HoC의 원리는 파라미터로 컴포넌트를 받고, 함수 내부에서 새 컴포넌트를 만든 다음에 해당 컴포넌트 안에서 파라미터로 받아온 컴포넌트를 렌더링 하는 것이다. React HoC는 언제 사용할까? 리액트 컴포넌트를 작성하게 될 때 반복될 수 있는 코드들을 HoC를 만들어서 해결할 수 있다. 코드 예를들어, 중복되는 HTTP 요청 코드가 존재할때 HoC를 사용하여 중복되는 코드를 제거할 수 있다. Github에 전체코드를 확인해보세요. NewPost.tsx import React from 'react'; import withReq..

안녕하세요. 오늘은 웹 작업을 할때 발생하는 Target container is not a DOM element 에러에 대해서 알아보겠습니다. 리액트를 사용할때, (리액트를 사용하지 않을때도 발생할 수 있습니다.) UInvariant Violation: Target container is not a DOM element 가 발생하는 이유는 DOM(Document Object Model 즉, HTML)이 렌더링 되기 전에 DOM element를 참조할 경우에 발생합니다. 예제코드 아래 예제 코드처럼 javascript 파일을 head에서 불러올 경우 하단에 있는 body 엘리먼트가 읽혀지지 않은 상태에서 javascript 파일이 호출되어 DOM element를 참조할 경우 에러가 발생하게 됩니다. 해결 ..