본문 바로가기

분류 전체보기70

[Front-End] Turborepo 새로운 프로젝트를 진행하며 적용한 모노레포! 모노레포란? 하나의 레포지토리에서 독립적인 여러 프로젝트를 관리하는 방법. 기존에 많이 쓰던 Multi Repo 장점 - 빠른 코드 수정 utilA, utilB를 변경 하더라도 App에 바로 반영 - 멀티 레포의 경우 버전을 올리고 의존성을 다시 설치해야만 사용할 수 있었음 각 레포마다 사용했던 같은 코드들의 중복을 제거하므로서 util, component를 한곳에 관리하여 코드의 중복을 줄이고 생산성을 높일 수 있었습니다. 수월한 코드 리팩토링 - 코드를 한번에 관리하기. 때문에 대규모 리팩토링이 쉬워짐. 코드 컨벤션 통일 - 멀티 레포에서는 각 레포마다 다른 컨벤션을 가졌다면 모노레포에서 한 곳에서 관리하여 통일하기 수월함, eslint 패키지 주입하여 컨.. 2024. 4. 19.
[Front-End] FSD 저도 제일 처음 시작할 때 직면하는 문제 중 하나였습니다. 누가 정해주면 참 좋지만 그게 협업을 하면서도 다 다르게 아키텍처 문제가 발생하니 이 점을 확장할 수 있는 FSD를 보겠습니다. 기능 분할 설계 (Feature-Sliced Design, FSD) 레이어(layer), 슬라이스(slice), 세그먼트(segment)의 세가지 개념을 구분합니다. 레이어 레이어는 최상위 디렉토리이자 애플리케이션 분해의 첫 번째 단계입니다. 레이어의 수는 최대 7개로 제한되어 있으며, 일부는 선택 사항이지만 표준화되어 있습니다. app: 애플리케이션 로직이 초기화되는 곳. Provider, Router, 전역 스타일, 전역 타입 선언 등이 정의 되며, 애플리케이션 진입점 역할을 합니다. processes: 이 레이어는.. 2024. 4. 3.
[Front-End] nvm(npm/node) 설치 아래 코드를 터미널에 입력합니다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" NVM 설치 $ brew install nvm 환경변수 설정 $ echo $SHELL /bin/zsh // or /bin/bash $ sudo vim ~/.zshrc // zsh $ sudo vim ~/.bash_profile // bash nvm -v $ nvm -v 0.39.5 Node 설치 $ nvm install 16 v16.20.2 $ node -v v16.20.2 $ npm -v 8.19.4 $ nvm list // nvm 버전 리스트 $ nvm use 14 // 14 버전으로 낮추기 2024. 3. 17.
Next.js 13 버전과 14버전의 차이 Next.js는 무엇인가? 개발자가 웹서비스를 만들기 위한 필요한 도구를 제공하는 React의 프레임워크다. 라우티, 데이터 패칭, 렌더링 같은 성능 최적화나 개발자 경험 조금 쉽게 생산성 높이 하는 고려를 할 수 있는것. 화면을 그리는 것 외에 성능 seo 전반적인 개발자 도구들을 제공하는 Next.js입니다. pre-rendering Next.js 13 - 파일 시스템 기반의 라우팅: 디렉토리 구조를 어떻게 짜냐에 따라 라우팅이 달라진다는 의미. 12 이하) pages 디렉토리들 기준으로 라우팅을 지원했다. 13) app 디렉토리로 바꾼다. App Directory 13.4 -> App Router - 서버 컴포넌트: React Server Components (RSC) react18에서 도입한 걸 .. 2023. 12. 18.

티스토리툴바