프론트엔드3

• 

  [CI] TurboRepo를 이용해서 monorepo 환경 구축하기+vercel 배포까지 (기초) 개요 개발환경 구축하는 거에 나름 스트레스를 갖고 있었다. 왜냐면, 일전에는 시니어 개발자가 세팅해준 환경아래서 코드를 수정하고 작업해왔었으니까. 그래서, 시도해보기로 했다. 글을 찾아보니까 yarn workspace -> Turborepo로 트렌드가 이동 중인 것을 확인하였다. 그래서, Turborepo를 사용하기로 하게 되었다. 과정 1. node 설치 (생략) 2. pnpm 설치 - yarn or npm 으로 해도 무방하나, turbo에서 pnpm 사용할 것을 권장하고 있음 npm install -g pnpm 3. create-turbo 을 이용해서 모노레포 설치 pnpm dlx create-turbo@latest 참고 : https://turbo.build/repo/docs/getting-star.. CI & CD/CI 2023. 10. 12.

• 

  [React] React.memo로 만드는 성능 최적화 기법 개요 가끔씩 React.memo에 대해 왜 쓰는지 이해가 안가는 경우가 많았다. 이건 또 뭔가 싶고. 개선해도 얼마 되지도 않고.. 오늘에서야 그 이유를 정확히 알게 된 것 같아서 글을 정리하게 되었다. 😁 React.memo 라는 것 한문장으로 정리하면, props가 변경되지 않으면, 재 렌더링 하지 않게 하는 것 그렇다. 이게 끝이다. 그럼 언제 사용할까? 당연하게도, props가 변경되지 않는데, 자꾸 재 렌더링해서 성능이 저하 되는 경우에 사용한다. 예제 코드 // parents.tsx // ... {toDos.map((toDo, index) => ( ))} {magic.placeholder} // ... // children.tsx import React, { memo } from "react".. React & TypeScript/React 2023. 1. 26.

• 

  [React / Recoil] 예제로 알아보는 Recoil (컨셉, 환경세팅, Atom, Selector) This Document wrote based Recoil v0.7.6 at 2022.12.30. 1. Concept 전역 상태 관리를 하는 상태 관리 라이브러리이다. key, value를 한 쌍으로 이루어서 사용한다. React를 만든 메타에서 직접 만든 Library이기 때문에, React답게 유지하려고 만들었다고 한다. 나는 redux(현재까지 좀 더 많이 사용 중인)를 안써봤기 때문에 잘 모르지만, 비교 사용해본 사람들은 redux보다 사용하기에 단순하고 편리하다고 한다. 실제 익혀서 사용까지 매우 금방이었다. (결국은 짬바인가? 얼마되진 않지만 전보다는 쉬워졌다. 오히려 개념을 익히는 게 더 시간이 많이 걸리지 않을까 싶다.) 공식 사이트에 있는 아래 영상을 보면서 개념을 익히는 것도 매우 유용.. React & TypeScript/Recoil 2023. 1. 9.