본문 바로가기

전체 글

 (78)
[NextJS] 서버 컴포넌트와 클라이언트 컴포넌트 NextJS 13버전부터는 서버 컴포넌트와 클라이언트 컴포넌트 두 가지 개념을 통해 렌더링 방식을 규정했다.일단 기본적으로 서버 컴포넌트와 클라이언트 컴포넌트가 무엇인지 이해해보자.server component서버 컴포넌트는 서버에서만 실행되고 렌더링 되는 React의 컴포넌트이다.여기서 말하는 서버 는 애플리케이션이 실행되는 NodeJS 등의 런타임 환경을 의미한다. 서버 컴포넌트는 애플리케이션의 일부 UI를 서버에서 처리하고 완성된 HTML을 브라우저에 전달해준다. 이 방식 덕분에 브라우저에서는 별도의 자바스크립트 실행 없이 즉시 화면을 볼 수 있으며, 서버 측에서 데이터 패칭 및 비즈니스 로직이 모두 처리된 상태의 최종 결과물만 전송된다는 점이 특징이다. 이를 통해 다음과 같은 장점이 있다:번들 크..
[React] Zustand 지난 Recoil에 이어 React의 전역 상태 관리 도구 중 하나인 Zustand에 대해서 알아보자. https://memo-code.tistory.com/68 [React] Recoil지난 Context-API에 이어, props drilling을 해결하기 위한 React의 전역 상태 관리 도구 중 하나인 Recoil에 대해서 알아보자. [https://memo-code.tistory.com/67 [React] Context-APIReact를 사용하다보면, 값을 전역적으memo-code.tistory.com Zustand? Zustand는 전역 상태 관리를 돕는 React의 라이브러리이다. Zustand는 낮은 러닝커브를 가지고 있기에 간단하게 이해와 적용이 가능하고, 가볍다는 장점이 있기 때문에..
[React] Tailwind CSS Tailwind CSSTailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크이다.기존의 css 스타일링 방식과 달리, 미리 정의된 작은 클래스들을 조합하여서 스타일할 수 있다는 점이 특징이다.이 특징만으로 Tailwind를 사용하게되면, 빠른 개발 속도와 일관된 디자인이라는 결과를 얻을 수 있다. Install & Settingnpm install -D tailwindcss@3.4.17 postcss autoprefixernpx tailwindcss init 설치 후 생성되는 tailwind.config.js 파일을 다음과 같이 수정해준다.// tailwind.config.jsexport default { content: [ "./index.html", "./src/**/*..

티스토리툴바