[Project] 감정 일기장

01프로젝트 소개이 프로젝트는 "한입 크기로 잘라먹는 리액트" 강의의 마지막 실습 프로젝트입니다.React와 JavaScript를 활용하여 감정 일기장을 제작하였으며, 단순한 일기가 아니라 감정을 함께 기록할 수 있는 특별한 일기장입니다. 이번 프로젝트에서는 외부 폰트 적용법, 이미지 최적화 방법, 다양한 페이지 구성, 자주 사용하는 요소의 컴포넌트화, 그리고 실제 웹 배포 과정까지 실습했습니다. 1. 폴더 구조컴포넌트를 분리하여 구조를 깔끔하게 유지하였고, 스타일(CSS) 파일은 styles 폴더에서 관리한 후 global.css에서 한 번에 export하여 사용했습니다.\---src | App.jsx | index.css | main.jsx +---assets |..

• format_list_bulleted DEVELOPMENT/PROJECTS
• · 2025. 2. 17.
• textsms

Vercel 배포, 누르기 전에 딱 5분만 확인!

React 프로젝트를 배포하기 전에 반드시 체크해야 할 사항들이 있습니다.이 과정을 건너뛰면 배포 후에 제목이 이상하게 나오거나, 썸네일이 안 뜨거나, 파비콘이 적용되지 않는 문제가 생길 수 있습니다.이 글에서는 배포 전 사전 작업부터 Vercel을 이용한 배포 과정까지 한 번에 정리해 보겠습니다!01배포 전 작업1. 페이지 타이틀 설정하기브라우저 탭에 표시되는 제목은 기본적으로 index.html의 태그에서 설정됩니다.  하지만 React는 SPA(Single Page Application)이므로,각 페이지마다 다른 타이틀을 설정하려면 추가 작업이 필요합니다.이를 위해 커스텀 훅을 사용하여 페이지별로 동적으로 타이틀을 변경할 수 있습니다.import { useEffect } from "react";..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2025. 2. 17.
• textsms