✍🏻 개발 시작 전, 약식 기획서 작성해두면 훨씬 수월 !프로젝트 개요이 프로젝트는 어떤 용도로 만드는지 간단히 설명(예: "가위바위보 게임 웹앱")전체 와이프레임화면 흐름이 어떻게 되는지 대략적으로 그림으로 정리확정된 디자인이 있으면 첨부없다면 색상, 폰트, 버튼 스타일 정도라도 간단히비즈니스 로직 설명웹/앱이 어떤 규칙으로 동작하는 지 설명(예: 가위바위보 게임 → 유저 선택 → 컴퓨터 랜덤 선택 → 승패 판정)주요 기능 리스트프로젝트에 들어갈 핵심 기능 나열(예: 사용자 선택 , 컴퓨터 랜덤 선택, 승패 결과 표시, 리셋 기능) 📚 어디에 정리하면 좋을까?Figma→ 와이어프레임, 시안 정리하기 최고GitHub README→ 개발 전에 간단한 기획서 내용을 정리해두면→ 팀원이랑 공유하거나 기록용..

useState- 컴포넌트에 상태를 추가하는 Hook- 화면에 보여주는 데이터를 저장하고 변경할 수 있게 해주는 기능기본 사용법const [상태, 상태변경함수] = useState(초기값);const [state, setState] = useState(초기값);state: 현재 상태 값setState: 상태를 업데이트하는 함수초기값: 처음 렌더링 시 사용할 값 📍 특징1️⃣ 상태 업데이트상태를 업데이트하면 컴포넌트가 리렌더링 됨2️⃣ 중요한 규칙Hook은 컴포넌트 최상위 레벨에서만 호출조건문이나 반복문 안에서 사용 불가이벤트 핸들러나 생명주기 내에서 호출 가능3️⃣ 여러 상태 변수하나의 컴포넌트에 여러 상태 변수 사용 가능function 상품목록페이지() { const [검색어, 검색어변경] = us..

React 설치(feat. Vite)npm create viteProject name: my-react-appSelect a framework: ReactSelect a variant: JavaScriptnpm installnpm run dev✨ Vite를 사용하는 이유더보기1. 빠른 개발 서버Vite는 번들링 없이 네이티브 ES 모듈을 활용하여 매우 빠른 개발 서버를 제공기존의 webpack 기반 도구(create-react-app)보다 훨씬 빠르게 시작2. 빠른 핫 모듈 교체(HMR)코드를 변경할 때 페이지가 거의 즉시 업데이트되어 개발 경험이 크게 향상3. 최적화된 빌드프로덕션 빌드 시 Rollup(JavaScript 파일들을 번들링해주는 툴)을 사용하여 최적화된 결과물을 생성> 번들링: 여러 개의..

컴포넌트- 특정 기능을 수행하는 독립적인 단위- 재사용 가능한 단위함수형 컴포넌트 ⬅️ 현재 많이 사용클래스형 컴포넌트 화살표 함수ES6에서 도입된 함수 표현식으로, 기존 function 키워드 대신 간결한 문법을 제공⚠️ this 바인딩이 다름기존 함수는 this가 호출된 객체를 가리킴화살표 함수의 this는 선언된 환경(렉시컬 컨텍스트)을 따름// 일반 함수const obj = { name: "Alice", sayHello: function () { console.log(this.name); },};obj.sayHello(); // "Alice"// 화살표 함수const obj = { name: "Alice", sayHello: () => { console.log(this.nam..

JavaScript웹 애플리케이션에 가장 핵심적인 역할 다양한 프레임워크순수 자바스크립트의 문제를 해결하기 위해 프레임워크들이 등장프레임워크는 항상 발전하고 새롭게 등장React 점유율 압도적다른 프레임워크의 경우 MVC 아키텍쳐 사용리액트와 공통점은 모델과 뷰가 있다는 것모델: 애플리케이션이 사용하는 데이터를 관리뷰: 사용자에게 보여짐애플리케이션 규모가 크면 복잡해지고 관리를 제대로 하지 않으면 성능 저하 React어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하지 않고 기존의 뷰를 날려버리고 새롭게 렌더하는 것뷰가 어떻게 생길지만 고민하면 됨다만, 이러한 방식은 CPU 점유율이 크게 증가 ➡️ DOM은 느림DOM: 트리 구조, 규모가 커지거나 복잡해지면 느려짐최대한 성능을 아끼고 더 나은 사용자 경..