본문 바로가기

Front-End52

[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.
[Next.js] Next 13 기존 Next.js 12 버전에서 최신버전으로 업데이트 하는 방법 npm i next@latest react@latest react-dom@latest eslint-config-next@latest Next.js 공식문서에서 설명하고 있는 변화에 대해서 적으며, 다음과 같이 app/Direact - Easier, faster, less, less client JS - 쉽고, 빠르고, 적은 클라이언트 JS layout React Server Components (리액트 서버 컴포넌트) Streaming Turbopack - Up to 700x faster Rust-based webpack replacement. - 700배 빠른 Rust 기반의 웹팩 대체품 New next/image - 더 빨라진 레이지 .. 2022. 11. 24.

티스토리툴바