👩🏻‍💻 프로그래밍 언어

CSR과 SSR 비교 및 CSR의 단점 보완 방법우선 SPA와 MPA에 대해서 알아보자1. SPA와 MPA의 기본 개념1️⃣ SPA (Single Page Application)하나의 페이지로 구성된 웹 애플리케이션입니다. 페이지 전환 시 화면이 깜빡이지 않고, 새로운 페이지를 요청할 때 서버로부터 필요한 데이터만 전달받아 렌더링합니다.즉, CSR(Client-Side Rendering) 방식을 사용합니다.2️⃣ MPA (Multi Page Application)전통적인 웹 애플리케이션 방식입니다. 페이지 전환 시마다 서버에서 새로운 HTML을 받아와 전체 페이지를 새로 렌더링합니다. 이때 페이지가 깜빡일 수 있으며, SSR(Server-Side Rendering) 방식을 사용합니다.2. CSR(Clie..

public 폴더정적 파일: public 폴더는 정적 파일(이미지, 폰트, 아이콘 등)을 저장하는 곳입니다. 이 폴더에 있는 파일은 / 경로로 접근할 수 있습니다.용도: 정적 파일을 저장하는 폴더로, 웹 애플리케이션의 리소스를 관리합니다.예시: public/images/logo.png 파일은 /images/logo.png로 접근할 수 있습니다._app.js 파일커스텀 App 컴포넌트: _app.js 파일은 Next.js 애플리케이션의 전체 레이아웃과 상태 관리를 위한 진입점입니다. 모든 페이지에서 공통으로 사용할 컴포넌트를 설정할 수 있습니다.용도: 각 페이지에서 공통적으로 적용할 설정을 정의합니다.상태 관리: 전역 스타일이나 레이아웃, 컨텍스트 제공 등을 설정할 수 있어, 페이지 전환 시 일관된 UI를..

1. Styled ComponentsStyled Components는 CSS-in-JS 라이브러리 중 하나로, 스타일을 자바스크립트 파일 안에 작성하고, 컴포넌트 단위로 캡슐화할 수 있다.장점 😄자동 최적화: 불필요한 클래스 생성이나 중복된 스타일 제거 등 최적화가 자동으로 이루어진다.동적 스타일링: Prop에 따라 동적으로 스타일을 변경할 수 있다.CSS의 범위: CSS가 컴포넌트 단위로 캡슐화되어 전역 네임스페이스 충돌 문제가 없다.단점 😞런타임 성능 저하: Styled Components는 스타일을 자바스크립트로 처리하기 때문에 런타임 성능에 영향을 미칠 수 있다. 특히 많은 컴포넌트가 있을 경우 스타일을 계산하고 적용하는 시간이 증가할 수 있다.패키지 크기 증가: 추가적인 라이브러리를 포함해야..

Scssnav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }}CSSnav ul { margin: 0; padding: 0; list-style: none;}nav li { display: inline-block;}nav a { display: block; padding: 6px 12px; text-decoration: none;}믹스인 예시Scss@mixin theme($theme: DarkGray) { background: $theme; ..

🚪 먼저 알아야할 개념컴포넌트 언마운트란 ?컴포넌트 언마운트(Unmount)는 React 컴포넌트가 DOM에서 제거되는 상태를 의미합니다. 즉, 컴포넌트가 화면에서 사라지거나 더 이상 필요 없을 때 발생합니다.일반적으로 컴포넌트가 언마운트되는 경우 💭사용자가 페이지를 이동할 때조건부 렌더링을 통해 컴포넌트가 숨겨지거나 제거될 때부모 컴포넌트가 언마운트될 때 이벤트 리스너와 클린업이벤트 리스너는 브라우저에서 특정 이벤트(예: 클릭, 리사이즈, 입력 등)가 발생할 때 호출되는 함수입니다. 예를 들어, window.addEventListener('resize', handleResize)는 브라우저 창의 크기가 조정될 때마다 handleResize 함수를 호출합니다. 왜 클린업이 필요한가?컴포넌트가 언마운트..

첫 번째 코드React 18import React from 'react';import ReactDOM from 'react-dom/client';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(안녕 리액트 !); React 18 이상: React 18에서는 새로운 Root API인 ReactDOM.createRoot를 사용합니다.Concurrent Mode 지원: 이 새로운 API는 React의 Concurrent Mode와 더 나은 성능 최적화를 지원합니다.사용법createRoot를 사용하여 root를 생성합니다.생성된 root에서 render 메서드를 호출합니다. 두 번째 코드React 17import Reac..