[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

[Project] TODO LIST

01UI 구현1. 폴더구조 잡기먼저 컴포넌트의 역할을 명확히 구분하기 위해 폴더 구조를 설계했습니다.각 컴포넌트가 독립적으로 관리될 수 있도록 /components 폴더를 만들고 기능별 디렉터리를 생성했습니다. 각 폴더에는 index.jsx파일을 배치해서 import 경로를 단순화했습니다.이렇게 하면 코드가 모듈화 되어각 컴포넌트를 독립적으로 관리할 수 있게 됩니다. 또한 CSS는 module.css 파일을 활용해 스타일 충돌 방지를 했습니다.\---src |---App.css | App.jsx | index.css \---components +---header //상단 헤더 | index.jsx ..

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