HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 3기 교육생/
😎
재호팀/
👍
리팩토링
👍

리팩토링

화 목 (2시간) 2시

  • components 폴더 구조 (1 순위)
    • 도메인 별로 좀 더 묶어주고, 나눠주는 연습이 필요할 것 같다고 느꼈습니다.
    • 파일이나 폴더의 수가 너무 많아지면, 나중에 프로젝트를 유지보수하는 것이 어려워질 수 있어요. 그렇기 때문에 이런 부분에 대한 습관을 가지는 것이 좋습니다.
    • hooks들로 api 통신 등을 분리한 부분은 아주 잘 되어있어요! 다만 hooks라는 별도의 폴더에 모두 몰아놓기보다는 전체적으로 공통적으로 사용할 만한 것들만 공통 폴더에 두고 (useDebounce, useTimeoutFn 같은) ‘인증’ ‘검색’ ‘글 작성’ 등의 도메인으로 컴포넌트들과 colocation(가까이 놓기)를 하는 것도 고려해주시면 좋을 것 같아요.
      •  
      >> 통일성이 없다
      >> 찾기 힘들다
      >> 훅을 너무 빼놨어.. (기준없이) - 여러 번 쓰이는 것만 뺐어야 했다
       
      >> hype : 기능별로 type, api 등
 
 
  • SWR, React-query(Tanstack query) 같은 data sync 라이브러리 사용 (2 순위)
    • fetch state를 관리할 수 있어 큰 앱에서는 이런 류의 라이브러리가 도움이 많이 되고, 최근들어 많이 사용하고 있는 추세입니다.
    • 이를 사용하면, recoil 같은 라이브러리가 필요하지 않아질 수도 있습니다. (좀 더 앱이 간단해짐)
      • >> Recoil vs React-query vs context-api?
      >> 왜 썼나 고민..?
       
       
  • TS 마이그레이션 (3 순위)
 
 
  • eslint 설정…
 
 
  • absolute path 사용하기 (한명이 ㅋㅋㅋ)
    • https://medium.com/@davidmieloch/tilde-paths-with-eslint-typescript-and-webpack-971f694c9b15 같은 가이드를 참조해보시면 좋을 것 같습니다!
    • relative path의 장점도 있지만, 트랜스파일러 설정을 조정하여 absolute path를 사용하면 어떤 임포트 패스를 사용하고 있는지가 모든 파일에서 동일하게 나타나기 때문에 좀 더 임포트 상황을 파악하기가 쉬워집니다.
 
  • 간단한 지적사항들
    • 일부 빌드툴 등 개발환경에서만 사용되는 의존성들을 devDependencies로 정리 (실제 프로그램에 특별히 큰 영향을 주는 것은 아니지만, 늘 정리해 두는 것이 좋아요)
      • https://github.com/prgrms-fe-devcourse/FEDC3_Tripend_JAEHO/blob/develop/package.json#L23-L34
 
  • Header 컴포넌트 Common으로 빼기

더 생각했으면 하는 점

  • 로그인/회원가입 - 동우
    • Auth
      • Signin
      • Signup
      • RequireAuth
    • api
      • auth.ts
      • core
        • index.ts
    • util
      • constants
        • auth
      • validate
        • signup
      • storage.js
 
  • 메인 페이지 - 은지
    • ChannelList
    • MainSection
    • AddPost
 
  • Common - 지연
    • Common
    • hooks
      • useClickAway
 
  • 유저리스트 - 성현
    • UserSideBar
      • UserList
      • UserSearchBar
    • Pagination
    • Header
      • SearchPost
       
      폴더 구조 변경안(페이지 별)
      • common
        • Avatar
        • Button
        • Icons
        • Image
        • Skeleton
        • Modal
        • Alarm
      • mypage
        • userInfo
        • userPosterItem
        • userPoster
          • pagination
        • sidebar
      • main
        • channelList
        • UserSidebar
      • auth
        • signin
        • signup
        • requireAuth
      • post
        • post
          • like (동행신청)
        • postDetail →detail
        • AddPost →create
          • uploadimage
        • update → UserPoster에 들어있는 모달 분리해서 여기로 넣기, create랑 코드 어떻게 하나로 합쳐서 컴포넌트화 하기
        • SearchPost → Search (from header)
          •  
       

      📢 폴더 구조 (주제 별)

    • common
      • Avatar
      • Button
      • Icons
      • Image
      • Skeleton
      • Modal
      • Alarm
    • user
      • UserInfo → 마이페이지의 유저 정보
      • userPost
        • UserPoster → index.tsx
        • UserPosterItem
        • Pagination
      • UserList (from main ← UserSidebar) → 메인 페이지의 유저 리스트(오른쪽)(이건 파일명 괜찮은듯)
      • UserPageSidebar → 마이페이지의 왼쪽 사이드
    • post
      • PostCard
        • like (동행신청)
      • PostDetail
      • AddPost → postCreate
        • uploadimage
      • update → UserPoster에 들어있는 모달 분리해서 여기로 넣기, create랑 코드 어떻게 하나로 합쳐서 컴포넌트화 해서 가져다쓰기
      • SearchPost → postSearch (from header)
      • postCategoryList (← channelList)
    • auth
      • Signin
      • Signup
      • RequireAuth