본문 바로가기

전체 글54

[실전에서 바로쓰는 NextJS] 렌더링 전략 넥스트는 어떤 페이지를 빌드 시점에 정적으로 생성하고 어떤 페이지를 실행 시점에 동적으로 제공할 것인지 쉽게 정할 수 있다 2.1 서버 사이드 렌더링(SSR) 서버 사이드 렌더링은 PHP처럼 HTML 페이지를 웹 브라우저로 전송하기 전에 서버에서 전부 렌더링 함. 그리고 해당 페이지의 모든 자바스크립트 코드가 적재되면 동적으로 페이지 내용을 렌더링함. Next도 용청에 따라 서버에서 HTML 페이지를 동적으로 렌더링하고 웹 브라우저로 전송할 수 있음. 서버에서 렌더링 한 페이지에 스크립트 코드를 집어넣어서 나중에 웹 페이지를 동적으로 처리할 수도 있는데 이를 하이드레이션이라고 함 더 안전한 웹 애플리케이션 페이지를 서버에서 렌더링 한다는 것은 쿠키 관리, 주요 API, 데이터 검증 등과 같은 작업을 서버.. 2023. 3. 14.
합성 컴포넌트(Compound Component Pattern) 가끔 리액트로 컴포넌트를 만들다보면 이렇게 까지 나눠야해? 이런 느낌도 들기도 하고 얼마나 나눠야하지 라는 생각이 들기도 하다. 그래서 합성 컴포넌트에 대해서 알아보자 합성 컴포넌트란? 하나의 컴포넌트를 여러 가지 집합체로 분리한 뒤, 분리된 각 컴포넌트를 사용하는 쪽에서 조합해 사용하는 컴포넌트 패턴을 의미한다. (우선 아래와 같은 다이얼 로그가 있다. 디자인은 무시 바랍니다.) 코드는 이러하다. type Props = { isOpen: boolean; title: string; buttonLabel: string; }; export default function Dialog(data: Props) { const { isOpen, title, buttonLabel } = data; return ( {t.. 2023. 3. 12.
BEM CSS BEM (Block-Element-Modifier)은 CSS를 보다 예측 가능하고 유지 보수하기 쉬운 코드로 작성하기 위한 방법론 중 하나입니다. BEM은 CSS 작성 방식에 대한 공식적인 표준은 아니지만, 많은 개발자들이 사용하고 있는 인기있는 방법론 중 하나입니다. BEM은 HTML 요소의 구조를 기반으로 CSS 클래스를 작성하는 방법입니다. BEM의 핵심 개념은 블록(Block), 요소(Element), 수정자(Modifier)입니다. 블록(Block): 웹 페이지의 모듈 또는 컴포넌트와 같이 화면에서 독립적으로 존재할 수 있는 대상을 나타냅니다. 블록은 보통 하나 이상의 요소로 구성되며, 하나 이상의 수정자를 가질 수 있습니다. 블록 클래스의 이름은 단순하고 명확해야하며, 스타일시트 전체에.. 2023. 3. 12.
CRA없이 리액트(타입스크립트) 프로젝트 생성하기 웹팩이란? 모듈 번들러 중 하나이다. 그럼 번들러는 또 뭔데 번들러는 여러 개의 모듈을 하나의 파일로 묶어주는 도구이다. 이걸 사용하는 이유는 모듈 시스템 사용: 모듈 시스템의 필요성 즉 변수를 파일 단위로 관리 가능 파일 크기 최적화: 여러 개의 파일을 하나로 묶으면, 네트워크 비용 감소. 번들러는 여러 파일을 하나의 파일로 묶어서 요청 횟수를 줄이고, 파일 크기를 최적화해줌 코드 최적화: 번들러는 불필요한 코드를 제거하거나, 코드를 압축하여 파일 크기를 최소화해줌 다양한 형식의 파일 로드: 번들러는 자바스크립트 파일뿐만 아니라 CSS, 이미지, 폰트 등 다양한 혁신의 파일도 로드할 수 있음. 근데 왜 웹팩 써야 함? 웹팩이 선호되는 이유 중 몇 가지는 다양한 플러그인 시스템과 로더를 통해서 훨씬 많은.. 2023. 3. 12.

티스토리툴바