HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
💌
JJong’s Archive
/
🖍️
개발일지
/
프로젝트 NextJS vs React 승자는?!

프로젝트 NextJS vs React 승자는?!

생성 일시
Nov 17, 2024 04:42 PM

📌 오늘 진행 사항

  1. 풀스택 개발, react(w. apollo server) vs NextJS 결정하기!
    1. react(w. apollo server)를 채택..?
      1. (단) apollo를 채용공고에서 몇몇회사들이 원하는걸 발견하기도 했고, 이전 회사에서도 썼기 때문에 한번 경험해보고 싶었다.
      1. (짠) 노마드 강의가 지원 중단,, << 대세가 아니라는 것의 증거일걸까..? 그렇다면 좀 짜침; 어쨌거나 나는 취준생인데 회사에서 많이 쓰는 nextjs를 나몰라라 한다면.. 개발 중간중간 찝찝할듯
      1. (단) 하지만 apollo에 초점을 맞추기 보단, react에 초점을 맞춘다면..?
        1. 여러회사(내카라쿠배 포함) 요구사항을 본 결과, react를 원하는 곳이 더 많았다. 또한 나는 react를 더 깊게 공부하고 싶은 마음도 있었다.
      nextjs를 채택..?
      1. (짠?) 사실 SSR이 사실 뭔지도 제대로 몰랐다. 그래서 이전 경험으론, 이도저도 아니게 되어서 react에 집중하는게 좋다고 판단했었음. == nextjs의 그다지 긍정적인 기억이 없었음
        1. ⇒ 이건 공부를 안해서, 아는게 없어서 생긴 문제였음. 즉, 장점은 모르고, 단점만 경험했으니 긍정적인 기억이 없는 것이 당연한 지사..
          ⇒ 이번에 좀 찾아보니 SSR에 대해 감을 알 수 있었다. 좋은 놈인건 확실.. 그러니 좀 끌림ㅋ
      1. (짠) 아 tailwind 사용 필수도 좀 짱났음.. 나는 styled-component가 좋다고~광광ㅠ >> 이건 쩔수xㅎ
      1. (짠) 어쨌거나 nextjs를 쓰면 제약된 점도 많았는데.. 이건 내가 개발을 하는 도중에 느끼게 될 것 같아서 좀 아쉽다. ⇒ 그래두.. (tailwind처럼) 돌아가야 하는거지 길이 없는 것은 아닐거라고 굳게 믿으며..ㅠ
      1. (짠) 안쓰는 react 문법(usestate 등)도 좀 걸리는 이유였다. 왜냐하면 나는 react 지식도 복습을 해야하는디..
        1. >> 사실 잊어먹은거지 다 아는거자나ㅋ 좀만 찾아봐도 바로 느낌 알것이다. 또한 nextjs 하면서도 마주칠 날은 있을거라 생각함. 쨌든 모호했던 개념들을 바로잡을 수 있는 기회는 얼마든지 있을거라고 생각함 but, 깊게 공부가 필요한건 사실. 어쩌면 nextjs보다 더!
      1. (단) 요즘 대세는 nextjs인건 빼박임. 채용공고만 봐도 nextjs를 너무너무너무 자주 볼 수 있었다. 안하면 손해보는 느낌;
        1. (짠?) 사실 회사에서 nextjs는 깊이 공부보단.. 기본적인 것만 하면 되는 느낌이긴 했다. 오히려 react를 더 깊게 공부해야하구.
      1. (단) apollo에 대한 갈증도 nextjs+apollo client 조합이 가능하다고 하니 해결 쌉가능~
      1. (단) 혼터뷰도 제대로 갈아엎을 수 있을 것 같다!!! 그래도 고생해서 만든건데 포폴에 쓰면 좋자나
      1. (단) 노마드 강의 넘나 들어보고 싶음. 활발하게 진행되는 강의로 전체적인 지식 흡수해서 공부시간을 줄일 수 있을 것 같음. (물론 디테일한건, 또 경쟁력이 되려면 내가 플러스 알파로 하는게 매우 중요하지만~)

      결론 : 둘 다 채택ㅋ

      • nextjs 공부 후, 혼터뷰 풀스택으로 다시 만들기 (즉시 포폴용 + nextjs 경험용)
      • 새 프로젝트는 react + nestjs로 (react 깊게 공부용 + 여러 스택 경험용)
      같이 병행하기,, 쉽지 않겠지만 가보자고!! 특히 nextjs야 잘해보자 ^.^ㅎㅎ
       
  1. 혼터뷰 Reboot : 기존 혼터뷰 코드의 아쉬웠던 점들을 리팩토링해, 새로운 혼터뷰를 만들자!
      • 프로젝트 빌드 후 github에 push 했음
      기존 혼터뷰의 아쉬웠던 점 & 해결방안
      1. nextJS를 제대로 알고 쓰지 못해서, use-client만 주구장창 썼다.
        1. < 해결방안 > nextJS를 제대로 배워서 필요한 부분을 적재적소에 잘 써먹어 보자!
      1. 다른 팀원의 코드리뷰를 제대로 하지 않아서, 내가 손대지 않은 부분은 어떻게 굴러가는지 모른다.
        1. < 해결방안 > 내가 처음부터 끝까지 다시 만들어서, 모르는 부분을 없게 한다. (ex. msw, stt, 카메라, 다운로드, 토큰 등)
      1. aws 지원이 종료되어 현재 배포된 사이트가 없다.
        1. < 해결방안 > 풀스택으로 개발할 것이기 때문에, 배포까지도 살려볼 수 있을 듯!
      1. 비즈니스 로직에 치중한 부분이 없지 않아 있어서, 매끄럽지 않은 부분들이 있다.
        1. < 해결방안 > 기술적인 도전을 먼저할 것! 따라서 기술적으로 도움이 되는 기본 기능만 제공하도록 수정. (ex. AI가 생성해주는 질문들은 형태가 어색한 부분이 많아서, 질문 리스트에는 등록하지 않는다.)
      1. 회사의 요구사항과 우대사항에 필요한 스택들이 다소 부족하다. (추가사항)
        1. < 해결방안 > 여러 도전을 덧붙여서 기술적으로 더 풍요로운 앱으로 만들자!(ex. 테스트, CI/CD, 디자인 패턴 적용, 캐싱 전략, 랜더링 최적화 전략 등등)
 
  1. 앞으로 2주간 계획 (11/18~11/30)
    1. == 노마드 강의 듣는 시간
      • nextjs 강의(4시간), 당근마켓 클론코딩(22시간) ⇒ 매일 2시간씩. 월~토!
      • 모르는 것, 설명이 부족한 것, 생각나는 다른 개념들 모조리 찾으면서 듣기
      • 강의 듣고 > 따라 해보면서 정리
 
  1. 추후 예상 일정 (변동 가능성 oooo)
      • 혼터뷰 Reboot : 12/1~12/31 (1달)
      • NestJS, Apollo, GraphQL 강의 듣기 : 1/1~1/3 (3일)
      • NestJS 풀스택 강의 듣기 : 1/6~1/31 (4주)
      • 올라올라 : [1/6~1/31] 강의와 병행 + [2/3~4/30] only 프로젝트 (총 4달)

📌 New 지식

  1. SSR과 CSR의 작동 방식(+SSR이 SEO에 좋은 이유)
  1. apollo client vs apollo server
  1. 컴파일 vs 빌드
      • 빌드 안에 컴파일이 속해있다.
      • 컴파일은 코드를 바이너리로 변환하는 것
      • 빌드는 완전한 결과물을 만들어 내는 것
      • fyi :
        컴파일러 언어와 스크립트 언어
  1. NextJS
      • 라이브러리 vs 프레임워크
      • 14 버전에서 바뀐 점들
      • 프로젝트 세팅
      • Routing, hydration
      • Layouts
      • Metadata
      • Dynamic Routes

📌 문제 및 해결 사항

-

📌 모호하게 알고 넘어가는 것이 없나요? (Y/N)

y

📌 오늘 결정한 것들에 대해, 근거가 확실한가요? (Y/N)

y
 

📝 내일 희망 TODO

노마드코더 nextJS 완강