개발일기

Page RouterApp Router기본단위페이지컴포넌트 분리렌더링CSR/SSR/SSG를 페이지 단위로 선택RSC 기본데이터 패칭getServerSideProps, getStaticProps서버 컴포넌트에서 fetch구조레이아웃 재사용 불편(공통 layout 직접 처리)layout.tsx로 중첩 레이아웃 자연스럽게 구성한계서버, 클라이언트 책임이 엮이기 쉬움Streaming, Suspense, Route Segment App Router 1. 서버, 클라이언트 책임 분리 명확 : 기본이 Server Component -> 클라이언트 JS 감소 2. 성능 - 불필요한 Hydration 최소화- Streaming으로 초기 응답 빠름3. 구조적 설계- 레이아웃/라우팅이 트리구조로 명확- 서비스 단위 확장에..

✨ 2편: imperative(명령형) vs declarative(선언형) ― React와 Vue로 이해하기✅ 선언형 vs 명령형, 한 줄 요약 명령형 (Imperative)“어떻게 할지” 직접 지시“불 켜! → 스위치 찾아! → 눌러!”선언형 (Declarative)“무엇을 하고 싶은지”만 말함“불을 켜줘” (방법은 시스템이 알아서) 📦 코드로 비교하면?🟥 명령형 예제 (Vanilla JS)const button = document.querySelector('#btn'); button.textContent = '클릭!'; button.style.backgroundColor = 'red'; 직접 DOM을 찾고, 바꾸고, 조작함로직이 길고, 흐름이 개발자 중심이다.예전 jQuery 스타일을 생각하면 좋..

✨ 1편: Virtual DOM, memo, useCallback ― React의 렌더링 최적화 핵심✅ 1. Virtual DOM이란?React에서 JSX는 결국 JS 객체(트리)로 파싱됩니다. 실제 DOM을 직접 건드리지 않고, 메모리 상에 가상의 DOM 트리를 만들어 저장한다. 상태가 바뀌면 Virtual DOM을 생성하고, 이전 Virtual DOM과 비교한다. 바뀐 부분만 실제 DOM에 적용한다. 강의를 통해서 알게 된 내용이 있다. Jason Miller 라는 사람이 Preact를 만들었다. jsx없이 템플릿 리터럴로 html을 작성할 수 있는 일종의 html 파서 라이브러리를 만들었다. 그 라이브러리가 표현하는 바와 같이 오브젝트 형태의 virtual DOM을 가지고 새로운 DOM과 비교한다...

1️⃣ 싱글 스레드 구조자바스크립트는 단일 Call Stack으로 동작한 번에 하나의 작업만 실행 가능2️⃣ Call Stack함수 호출 → Call Stack에 push실행 완료 → pop순차적으로 동작 (동기 처리)3️⃣ Web APIs & 비동기 작업setTimeout, DOM, AJAX, fetch 등은 브라우저(Web APIs)가 처리완료 후 Callback Queue / Microtask Queue에 콜백 등록4️⃣ Event LoopCall Stack이 비면, Queue에서 콜백을 가져와 실행Microtask Queue → Macrotask Queue 순서로 처리5️⃣ Microtask & MacrotaskMicrotaskPromise.then, MutationObserverCall Stac..

Cypress 웹 애플리케이션의 E2E(end-to-end) 테스트를 위한 javascript 기반 프레임워크이다. 브라우저에서 직접 실행되어 실제 사용자 경험을 시뮬레이션하고 테스트할 수 있다.  E2E(end-to-end) 테스트의 중요성- 실제 사용자 관점에서 애플리케이션의 전체 흐름을 테스트- 통합테스트와 단위테스트로는 발견하기 어려운 문제 식별- 주요 기능이 예상대로 작동하는지 확인  Cypress 설정 및 실행우선 개념 파악을 위한 설치이기 때문에 기본 설정만 // npm install --save-dev cypressimport { defineConfig } from "cypress";export default defineConfig({  e2e: {    baseUrl: 'http://lo..

테스트 용이성을 높이기 위한 몇가지 조건들이 있다.  1. 순수함수가 테스트하기 용이하다. 순수 함수란 동일한 입력에 대해 항상 동일한 출력을 반환하는, 부수 효과가 없는 함수를 의미한다. 부수 효과를 일으키는 비순수 함수를 테스트하는 것은 까다롭다. 예를 들어, 함수 외부의 상태에 의존하거나, API 호출을 하거나, DOM을 직접 조작하는 등의 동작이 포함된 함수는 외부의 영향을 받으므로 테스트의 정확성을 보장받기 어렵다. 입력을 받아 단순한 계산 값을 반환하는 순수함수는 독립적으로 테스트하기 좋다. 2. 단일 책임 원칙을 준수한 코드가 테스트하기 용이하다.하나의 함수나 모듈이 한 번에 많은 역할을 수행하면 테스트를 작성하기 어려워진다. 예를 들어, 데이터를 가져오는 함수가 UI를 렌더링하는 기능까지 ..

infer 키워드는 조건부 타입에서 특정 타입을 추론하는데 사용된다. 즉, 타입을 직접 지정하는 것이 아니라 타입스크립트가 해당 타입을 유추할 수 있도록 돕는 역할을 한다. infer는 extends를 사용하는 조건부 타입 안에서 활용되며, 특정 타입을 분해하여 사용할 수 있다.type GetReturnType = T extends (...args: any[]) => infer R ? R:never;함수 타입 T의 반환 타입을 추출하는 유틸리티 타입이다. T가 함수 타입이라면 infer R에 의해서 타입을 R로 추론하고, 그렇지않으면 never를 반환한다.주의할 점은 infer은 반드시 조건부 타입 안에서만 사용되어야 한다. 독립적으로 사용 불가.extends 키워드의 용도제네릭에서 타입을 제한하는 역할..

를 이용해 외부 링크를 연결할 때는 rel 속성을 적절히 설정하여 중요 정보가 유출되지 않도록 해야한다.  1. rel="noopener"를 설정하여 외부 페이지에서 opener 객체에 접근할 수 없도록 막아야 한다. 기본적으로, target= "_blank"가 설정된 를 통해 열린 외부 사이트에서 window.opener 객체에 접근할 수 있다. 이에 객체에 대한 접근을 허용하면, 악의적으로 피싱 사이트로 연결시키는 탭 내빙(Tabnabbing) 공격이 가능해진다. 이를 방지하기 위해서는 noopener를 설정해야한다.  2. rel="noreferrrer"를 설정하여 Referer 헤더 정보가 노출되지 않도록 막아야한다. 브라우저는 링크 연결시 referer 헤더를 통해 사용자가 어떤 웹사이트에서 ..

git ActionCI/CD를 자동화 하는 gitHub의 내장 도구즉, 코드를 푸시할 때 자동으로 테스트, 빌드,배포하는 작업을 설정할 수 있는 개념개념워크플로우 : 자동화된 작업의 전체 프로세스이벤트 : 워크플로우를 실행하는 트리거(pull, pull_request, schedule 등)잡(job) : 하나 이상의 작업 단위(”빌드”작업, “테스트”작업)스텝 : 특정한 명령어(스크립트) 실행 단계러너 : github Action을 실행하는 환경(github이 제공하는 VM)Vercel정적 사이트 및 서버리스 애플리케이션을 쉽게 배포할 수 있는 플랫폼주요기능자동배포 : 깃헙, 깃랩, 빗버킷과 연동하여 자동으로 배포프리뷰 배포 : PR이 생성될 때 미리보기 배포 제공서버리스 함수 : 백엔드 기능을 추가할 ..

컴포넌트에 props 전달하기부모 컴포넌트에서 전달받을 인자를 Avatar({person, size}) 이렇게 표현 !!!== function Avatar(props) { // 구조분해할당 let person = props.person; .. }props를 전달하지않거나, undefinded로 전달 되었을때 기본값이 사용된다.function Avatar({person, size = 100})https://ko.react.dev/learn/passing-props-to-a-component부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법const Parent = () => { return ;}const Child = (props) => { return ( 이름 : {props.name}, 나..