본문 바로가기
반응형

분류 전체보기
172

[React] 클래스, 함수형 컴포넌트 생명주기(Lifecycle)와 생명주기 함수(Hook) 컴포넌트의 생명주기는 React 애플리케이션에서 컴포넌트가 생성되고 업데이트되며 사라지는 과정을 의미한다. 먼저, 컴포넌트의 생명주기는 크게 3단계로 나뉜다.Mount(화면에 그려짐): 컴포넌트가 생성될 때.Update(화면 업데이트): 컴포넌트의 props가 변경되거나 setState()함수 호출에 의해 state가 변경되거나, forceUpdate()라는 강제 업데이트 함수 호출로 인해 컴포넌트가 다시 렌더링 될 때.Unmount(화면에서 사라짐): 상위컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않게 될 때.  생명주기 함수는 이 일련의 과정 속에서 특정 시점에 자동으로 호출되는 함수를 말한다. 생명주기 함수들을 사용하면 컴포넌트가 렌더링되기 전이나 후, 상태나 props가 변경될 때, 컴.. 2025. 4. 10.
Tailwind CSS Intellisense 작동 안됨 문제 증상className 작성할때 어제까지 잘 되던게 오늘 갑자기 아예 안뜨기 시작했음tsconfig문제도 겹쳐서 이게 원인인 줄 알았는데 eslint까지 다시 작업하고나니,여전히 tailwind css intellisense가 안됨!해결시도먼저 상태 확인한다.Cmd + Shift + P → Tailwind CSS: Show Output → 출력 탭에서 "Found tailwind.config.js" 로그가 나오는지 확인"No matching project for document" 오류 메시지는 Tailwind CSS IntelliSense 확장 프로그램이 현재 파일(Header.tsx)을 올바른 Tailwind 프로젝트의 일부로 인식하지 못하고 있다는 뜻이다. 파일경로 확인tailwind.config.js.. 2025. 4. 10.
[React] React Router 기초(동물 정보 사이트 만들기) React Router 기초 실습: 동물 정보 사이트 만들기최종 결과물메인페이지, 상세페이지, 검색페이지(검색기능) 구현이 완료되었다.깃커밋을 브랜치를 나눠 작업했다.메인 페이지에서 동물 목록 화면에 표시하기React Router리액트 라우터(React Router)는 싱글 페이지 애플리케이션(SPA)에서 페이지 이동처럼 보이는 동작을 가능하게 해주는 라이브러리다. react-router-dom 패키지를 설치하여 사용한다.BrouserRouter: 라우팅 기능을 제공하는 최상위 컴포넌트. 라우팅 기능을 사용하려면 앱 전체를 BrowserRouter로 감싸야 한다.Routes: 여러 개의 Route를 묶어주는 컨테이너 역할.Route: 특정 URL 경로(path)에 대해 어떤 컴포넌트(element)를 보.. 2025. 4. 9.
React가 SPA를 구현하는 방법 React가 어떤 방법으로 SPA를 구현하는 것인가?1. 클라이언트 사이드 라우팅 (Client-side Routing)React는 전체 페이지를 새로고침하지 않고, URL 경로에 따라 특정 컴포넌트를 동적으로 렌더링함으로써 SPA를 구현한다. 이때 사용하는 대표적인 라이브러리가 react-router-dom이다.import { BrowserRouter, Routes, Route } from "react-router-dom";import Home from "./Home";import About from "./About";function App() { return ( } /> } /> );}2. 조건부 렌더링 (Conditional Rende.. 2025. 4. 7.
SPA vs MPA SPA vs MPA현대 웹 개발에서 애플리케이션의 구조는 사용자 경험에 큰 영향을 준다. 특히 프론트엔드 개발에서 SPA(Single Page Application) 와 MPA(Multi Page Application) 중 어떤 구조를 선택할지 고민하는 경우가 많다. 두 방식은 각각의 장단점이 있으며, 프로젝트의 목적에 따라 적절히 선택해야 한다.1. SPA (Single Page Application)란?SPA는 이름 그대로 단일 페이지에서 동작하는 애플리케이션이다. 최초에 하나의 HTML 파일을 로드한 후, 필요한 데이터나 UI는 JavaScript를 통해 동적으로 갱신된다. 페이지 이동 시 전체를 새로 불러오는 대신, 필요한 부분만 업데이트하기 때문에 빠르고 부드러운 사용자 경험을 제공할 수 있다... 2025. 4. 7.
[Javascript] 5. 표현식과 문 (모던자바스크립트딥다이브) 5-1. 값값: 식(표현식 expression)이 평가(evaluate)되어 생성된 결과메모리에 저장된 값은 데이터 타임에 따라 다르게 해석될 수 있다.0100 001을 숫자로 해석하면 65지만, 문자로 해석하면 ‘A’값의 생성식리터럴(가장 기본적)var sum = 10 + 20; // 30변수에 할당되는것은 값10+20이 평가된 결과인 숫자 30이 할당된다.5-2. 리터럴리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(notation)자바스크립트 엔진은 코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성33은 단순한 아라비아 숫자가 아니라, 숫자 리터럴자바스크립트 엔진은 이를 평가해 숫자 값 3을 생성5-3. 표현식표현식(expression): 값으로 평가될.. 2025. 4. 6.
[Javascript] 4. 변수 (모던자바스크립트딥다이브) 4-1. 변수란 무엇인가?10 + 20위 식을 계산하려면 자바스크립트 엔진은 사람과 유사한 방식으로 코드를 실행한다.계산(평가 evaluation)하려면 먼저 10(리터럴), 20(리터럴), +(연산자)라는 기호의 의미를 알고 있어야 하고, 10 + 20이라는 식의 의미도 해석(parsing)할 수 있어야 한다.먼저 피연산자인 10, 20을 메모리에 기억하고, CPU를 사용해 연산한다.메모리데이터를 저장할 수 있는 메모리셀의 집합체.메모리 셀하나의 크기는 1바이트(8비트)컴퓨터는 메모리셀의 크기인 1바이트 단위로 데이터를 저장하거나 읽어들인다.각 셀은 고유의 메모리주소를 가짐.메모리에 저장되는 모든 값은 2진수로 저장된다.10 + 20의 연산을 해서 30이란 결과도 메모리에 저장되었지만, 이 결과값 30.. 2025. 4. 6.
커밋 전략: 어느 단위로 커밋해야 할까? 기능별로 커밋을 잘게 나누면 나중에 코드 리팩토링이나 디버깅할 때 큰 도움이 된다.예시로, 리액트 투두리스트 실습 프로젝트(초간단)의 작업에 커밋단위를 나눠보자.투두리스트 구현 순서todo 상태 만들기 (useState 사용, 구조: {id, content})map()을 이용해 리스트 UI 출력TodoList 컴포넌트 생성TodoListItem 컴포넌트 생성 (각 항목 전용)input, button 요소 만들기input에 onChange로 입력값 상태 관리 (Controlled Component 방식)button에 onClick 등록 → 새 todo 추가(id 생성 후 setTodoList([...]), 입력창 초기화)TodoInput 컴포넌트로 분리삭제 기능 구현(filter() 사용해 선택한 항목 제.. 2025. 4. 4.
반응형

최근댓글

최근글

© Copyright 2024 ttutta

티스토리툴바