1. 폰트, 이미지, 레이아웃 설정하기 폰트 적용 폰트 파일을 드래그하여 public 폴더 안에 넣기 ```css @font-face { font-family: “NanumPenScript”; /* 전역 등록 폰트 이름 / src: url(“/NanumPenScript-Regular.ttf”); / 설치 폰트 경로 ...

1. 일기 관리 기능 구현하기 mockData 생성 App.jsx const mockData = [ { id: 1, createdDate: new Date().getTime(), emotionId: 1, // 감정은 1~5까지 존재 content: "1번 일기 내용", }, { id: 2, create...

1. 페이지 라우팅 페이지 라우팅이란? 경로에 따라 알맞은 페이지를 렌더링하는 과정 Multi Page Application (MPA) 서버가 여러개의 페이지를 갖고있는 것 브라우저가 특정 주소를 갖고있는 페이지를 요청하게 되면 서버가 요청에 맞는 페이지...

1. 공통 컴포넌트 구현하기 버튼 컴포넌트 구현 Button.jsx ```jsx import “./Button.css”; const Button = ({ text, type, onClick }) => { return ( <button onClick={onClick} clas...

최적화 1. 최적화 최적화(Optimization) 웹 서비스의 성능을 개선하는 모든 행위 아주 단순한 것부터 어려운 방법까지 다양힘 일반적인 웹 서비스 최적화 방법 서버 응답속도 개선 이미지, 폰트, 코드파일 등 정적 파일 로딩 개선 불필요한 네트워크 요...

useReducer 1. useReducer useReducer란? 컴포넌트 내부에 새로운 State를 생성하는 React Hook 모든 useState는 useReducer로 대체 가능 useState와 useReducer의 차이점? ...

Context 1. Context React Context 컴포넌트 간 데이터를 전달하는 또 다른 방법 기존의 Props가 갖고있던 단점 해결 가능 Props 의 단점? 부모 -> 자식으로만 전달이 가능하다. (Props Drilling) App에서 To...

투두리스트 투두리스트 1. 프로젝트 준비하기 요구사항 분석하기 기능 분석 오늘의 날짜를 요일, 월, 일, 연도 순 표시 할일 작성 입력 폼, 추가버튼 클릭 시 할일 아이템 생성 [할 일 관리] 앱은 생성한 아이템을 페이지 하단에 리스트로 표시하는데, 키워드 검색으로 원하는 할 일만 추출...

라이프 사이클 라이프사이클 1. 라이프 사이클(LifeCycle) 이란? 생애주기. 인간의 탄생부터 죽음까지의 타임라인을 단계로 나눈 것. Mount 컴포넌트가 탄생하는 순간. 컴포넌트가 화면에 처음으로 렌더링되는 순간. Update 컴포넌트가 리렌더링 되는 순간...

카운터앱 만들기 카운터앱 만들기 1. 프로젝트 준비하기 요구사항 분석하기 컴포넌트 단위로 생각하기 App 컴포넌트 : Viewer, Controller 컴포넌트를 감싸는 템플릿 Viewer 컴포넌트 : 현재의 컴포넌트 표시 Controller 컴포넌트 : 카운트를 제어할 수 있는 기능을...