project 3 [감정 일기장] 만들기  이 장에서는 요구사항 분석, 리액트 앱 만들기, 폰트 설정, 이미지 준비의 과정을 거쳐 [감정 일기장 앱]을 만든다.   1. 프로젝트 준비하기 [ 요구사항 분석하기 ]  [감정 일기장]은 일기를 작성하면서 그날의 감정을 표현하고 기록하는 서비스이다. 4페이지로 이루어져 있으므로 각 페이지의 요구사항을 파악한다.      가장 먼저 만나는 홈 페이지는 인덱스 페이지라고도 하며, 경로는 '/'이다. 이미지와 같이 상단 헤더 섹션과 일기 리스트로 구성되어 있다.  상단 헤더 섹션은 월 단위로 일기를 조회하는 기능으로 좌우 버튼을 클릭하면 월 단위로 날짜를 이동한다.  일기 리스트 섹션은 '최신순', '오래된 순'으로 일기 리스트를 정렬하는 기능, 새로운 일기를 추가..

24-25/React.js 2 2025. 1. 24. 10:00

프로젝트 준비하기 [감정 일기장] 앱을 만들기 위한 순서는 다음과 같다. 요구사항 분석하기 리액트 앱 만들기 폰트 설정하기 이미지 준비하기 요구사항 분석하기 [감정 일기장]은 일기를 작성하면서 그날의 자기감정을 표현하는 서비스이다. 총 4페이지로 구성되어 있다. Home 페이지 인덱스 페이지: 사용자가 앱에 접속하면 처음으로 만나는 페이지이며, 경로는 '/'이다. 상단 헤더 섹션과 일기 리스트로 구성되어 있다. 상단 헤더 섹션: 월 단위로 일기를 조회하는 기능, 좌우 버튼을 클릭하면 월 단위로 날짜를 이동한다. 일기 리스트 섹션: '최신순', '오래된 순'으로 일기 리스트를 정렬하는 기능, 새로운 일기를 추가하는 기능이 있다. 버튼을 누르면 새로운 일기를 작성하는 New 페이지로 이동한다. New 페이지..

23-24/React.js 2 2024. 1. 12. 10:00

20.1 서버 사이드 렌더링의 이해 클라이언트 사이드 렌더링 : UI 렌더링을 브라우저에서 모두 처리하는 것 ⇒ 리액트는 기본적으로 클라이언트 사이드 렌더링! 서버 사이드 렌더링 : UI를 서버에서 렌더링하는 것 [서버 사이드 렌더링의 장점] 웹 서비스의 검색 엔진 최적화 초기 렌더링 성능 개선 자바스크립트 파일이 다운로드되지 않은 시점에도 html 상에 사용자가 볼 수 있는 콘텐츠가 있어 대기 시간 최소화, 사용자 경험 향상 클라이언트 사이드 렌더링은 로딩되고 실행될 때까지 빈 페이지를 보며 대기해야 함 [서버 사이드 렌더링의 단점] 서버 리소스가 사용된다 ⇒ 사용자가 동시에 몰릴 시, 서버에 과부하 발생 고려사항이 많아 개발 어려움 서버 사이드 렌더링과 코드 스플리팅 충돌 서버 사이드 렌더링과 코드 ..

21-22/21-22 리액트 마스터 2022. 1. 31. 13:00