✍️ 6주차 복습

김수진·2025년 7월 15일

개발코스 시작

개발을 들어가기 전, 화면을 구현한 figma를 토대로 components를 나눠보았다. 컴포넌트를 나누기 전, figma로 공통부분들을 정리한 후, 파일 구조를 만들어보았다.

사진에 나온 대로 공통 부분들만 뽑아내고, 나머지 부분들의 파일 구조를 해당 슬라이드에 작성하여 나중에 합쳤다!

파일 구조

src/
├── pages/        
#### 로그인 페이지                     
│   ├── LoginPage.jsx  
#### 라우팅되는 페이지들 
│   ├── MainPage.jsx                   # 전체 게시글 홈
│   ├── PostListPage.jsx              # 지역/카테고리별 게시글
│   ├── PostCoursePage.jsx            # 게시글 상세 (코스)
│   ├── CertificationPage.jsx         # 위치 인증
│   ├── ScrapbookPage.jsx             # 스크랩북
│   ├── PostCreatePage.jsx            # 게시글 작성
│   └── MyPage.jsx                    # 마이페이지

├── components/
│
│   ├── layout/                        # 공통 레이아웃
│   │   ├── Sidebar.jsx
│   │   ├── Layout.jsx
│   │   ├── MapLayout.jsx
│   │   ├── MenuButtons.jsx
│   │   └── UserProfileSection.jsx

│   ├── common/                        # 전역 공통 UI
│   │   └── Logo.jsx

│   ├── auth/                          # 인증 관련
│   │   └── LogoutButton.jsx

│   ├── post/                          # 공통 게시글 컴포넌트 (중복 제거)
│   │   ├── PostList.jsx
│   │   ├── PostCard.jsx
│   │   ├── PostMeta.jsx
│   │   ├── PostTag.jsx
│   │   ├── CategoryTabs.jsx
│   │   ├── SortSelector.jsx
│   │   ├── RegionFilterList.jsx
│   │   ├── RegionTitle.jsx
│   │   └── DeleteButton.jsx

│   ├── main/                         # MainPage 전용
│   │   └── MapView.jsx               # 메인 페이지용 지도

│   ├── postlist/                      # PostListPage 전용
│   │   └── MapView.jsx               # 지역 게시글용 지도

│   ├── postcourse/                    # 게시글 상세 페이지 (코스 기반)
│   │   ├── PostTitleBar.jsx
│   │   ├── AuthorInfo.jsx
│   │   ├── CourseList.jsx
│   │   ├── CourseItem.jsx
│   │   ├── FinalNote.jsx
│   │   ├── CourseMapView.jsx

│   ├── postcreate/                    # 게시글 작성 전용
│   │   ├── PostTitleInput.jsx
│   │   ├── TagSelector.jsx
│   │   ├── PlaceEditorList.jsx
│   │   ├── PlaceEditorItem.jsx
│   │   ├── AddPlaceButton.jsx
│   │   ├── ActionButtons.jsx
│   │   └── PostCreateMapView.jsx

│   ├── certification/                  # 위치 인증 전용
│   │   ├── StampHeader.jsx
│   │   ├── StampImage.jsx
│   │   ├── LocationAuthButton.jsx
│   │   ├── BottomTabs.jsx
│   │   ├── LocationResultBox.jsx
│   │   └── CertificationMapView.jsx

│   ├── scrapbook/                      # 스크랩북
│   │   └── ScrapMapView.jsx

│   └── mypage/                         # 마이페이지 전용
│       ├── ProfileHeader.jsx
│       ├── PostList.jsx
│       └── TerritoryMap.jsx

디자인 완성

파일 구조를 만드는 동안, 디자인이 완성이 되었다!
사실 기획을 하면서 빼먹은 부분들이 많았던 것 같다. 기획코스에서 충분히 고민했다고 생각했는데...
팀원분들이 해당 부분에 대해 고생해주셔서 감사합니다... (여행 중이라 나는 신경을 많이 못 썼던것 같아서 죄송스럽습니다...)

React 강의

프론트엔드 파일 구조를 만들면서 코딩 실력을 키우고자 인프런 react 강의를 열심히 들었다. 강의를 들으면서 다음에 개념을 쉽게 볼 수 있도록 블로그에 정리를 하였다.

느낀점

사실 개인적인 여행 일정 때문에 프로젝트 개발에 충분한 시간을 들이기 어려웠다 ㅜㅜ 그래서 최소한 React 강의만이라도 끝까지 듣자는 목표를 세우고 여행을 떠났다. ✈️ (다행히 밀리지 않고 듣고 있다.!)

강의를 듣기 전, 처음에는 프로젝트를 어떻게 시작해야 할지, 어떤 흐름으로 개발이 진행되는지 전혀 감이 없었다. 하지만 강의에서 제공한 프로젝트를 직접 따라 만들어보면서, 개발이 어떤 과정을 거쳐 완성되는지 이해할 수 있었다. 단순히 코드를 짜는 것만이 아니라, 전체적인 개발 흐름을 이해하게 되었다.

강의를 들으면서, 가장 흥미로웠던 부분은 라이프사이클과 최적화에 관한 내용이었다. 이전까지는 내가 원하는 화면만 잘 나오면 개발을 완료했었었다. 하지만 강의를 듣고 나서는, React는 언제 렌더링이 일어나는지, 불필요한 렌더링은 어떻게 줄일 수 있는지 같은 부분도 굉장히 중요하다는 걸 알게 됐다. 프론트엔드 개발자로 성장하기 위해서는 단순히 화면을 구현하는 수준을 넘어서, 화면 속의 최적화를 구현할 수 있어야 한다는 생각이 들었다.