본문 바로가기
반응형

안뇽

전체 글
172

[React] 컴포넌트 생명주기(Lifecycle) 컴포넌트의 생명주기는 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.
[Github] 깃헙 업적뱃지(Achievements) 획득방법 깃헙 프로필에 어느샌가 뱃지가 3개나 됐다. (오늘 리뷰없이 머지했다고 YOLO획득)세번째로 보이는 Arctic Code Vault Contributor뱃지의 의미를 이제 알았는데,내 코드가 북극저장소에 저장되었다는 거다!! 신기함 ^^ 다른뱃지도 하나하나 퀘스트깨듯 받고싶어서 찾아봤다. GitHub의 Achievements(업적 뱃지)는 특정 조건을 달성하면 자동으로 프로필에 표시되는 요소이다.아직은 베타 기능에 가까우며, 일부는 공식 문서에 없지만 커뮤니티에서 알려진 조건들이 있다.대표적인 GitHub Achievements 뱃지 목록과 획득 방법뱃지 이름 조건Arctic Code Vault Contributor2020년 2월 기준 GitHub에서 오픈소스에 기여한 기록이 있는 경우 (코드가 북극 저.. 2025. 4. 4.
[Git&Github] Git에서 PR 전에 커밋 정리하는 방법 (리베이스, 체리픽, 브랜치 전략) Pull Request(PR)를 할 때의도하지 않은 커밋이나 다른 주제의 커밋 이력이 함께 들어간 경우,상황에 따라 정리하는 것이 좋다.  1. 커밋 이력이 섞여 있으면 문제가 되는 이유리뷰어가 의도를 파악하기 어려워짐기능별 변경 사항 추적이 어려움히스토리 관리가 지저분해짐다른 이슈에 대한 코드가 PR에 포함되어 충돌 발생 위험 ↑ 2. 커밋 이력이 섞여 있을 때 해결 방법① 커밋 분리 (인터랙티브 리베이스)git rebase -i HEAD~n # 최근 n개의 커밋을 인터랙티브하게 수정pick → drop 또는 edit으로 불필요한 커밋을 제거하거나 수정정리 후 강제 푸시git push origin 브랜치명 --force② 새로운 브랜치에서 필요한 커밋만 cherry-pickgit checkout -b.. 2025. 4. 3.
새로운 개발 패러다임, 바이브 코딩(Vibe Coding) 1. 핵심 주제: 바이브 코딩(Vibe Coding)이란?바이브 코딩의 개념Andrej Karpathy가 제안한 개념코드를 직접 작성하기보다, AI와 협업하며 감각(vibe)으로 코드를 생성함GPT나 Cursor 등 AI 코드 생성기 도구의 활용이 중심더 이상 전통적 방식(문법, 구현 위주)의 코딩이 아님2. 개발자 역할 변화코딩 → 프로덕트 엔지니어로기술력보다 제품 감각(taste)이 더 중요이제 누구나 10배 빠른 엔지니어(10x Engineer)가 될 수 있음"나는 더 이상 엔지니어가 아니라 프로덕트 사람이다"는 창업자 인터뷰 다수3. 사용 도구 및 트렌드주요 도구Cursor: 가장 많이 사용됨WindSurf: 코드 전체를 인덱싱하여 Cursor보다 자동화 수준이 높음ChatGPT / Claude .. 2025. 4. 2.
Javascript 계산기 프로젝트 자바스크립트 마지막 과제, 계산기 만들기부트캠프 두번째 커리큘럼,3주간의 자바스크립트 과목이 끝났다.자바스크립트를 배운지는 꽤 됐지만,다시 강의를 들으며 내가 헷갈렸던 것을 재점검하는 시간이 되었다. 다끝나가는 시점이지만, 모던자바스크립트딥다이브 스터디도 들어서다시 한번 자바스크립트에 딥다이브 할 예정이다! 그래서,막바지가 된 저번주 금요일에 최종과제인 계산기만들기에 대한 설명회가 있었다.지난 기수의 최종결과물과 진행방식을 설명해주셨는데,구현은 개인이지만 팀단위로 진행이된다는걸 알았고..팀장이되어 조를 이끌게되었다. 계산기 작동방식먼저 계산기 구현을 위해각 단계별로 상세한 요구사항이 있어서 아예 백지부터 혼자 하는건 아니었고,지시에 따라 힌트를 얻으며 작성해나갔다. 계산기 작동방식은 이러하다.숫자 버튼을.. 2025. 3. 27.
반응형

최근댓글

최근글

© Copyright 2024 ttutta

티스토리툴바