본문 바로가기
Nextjs

Express에서 Nextjs로 갈아타기 : 글을 쓰는 동기

by fecu 2024. 12. 1.
728x90

1. 글을 쓰는 동기

 

먼저 나에 대해서 소개하자면, 나는 소프트웨어 비전공자이고 지구과학 교사이다. 

 

처음 시작한 파이썬에서 자바스크립트, 그리고 nextjs을 배우기까지 3년 정도 걸린 듯 하다.

 

그 중에서도 웹개발을 본격적으로 공부하기 시작한건 이제 겨우 5개월.

 

지난 다섯달 동안 나의 프론트앤드 공부 흐름은 이랬다.

 

  • 기본적인 html, css javascript에 대해 배운 뒤 티스토리 스킨을 제작해 보았다. 생각보다 javascript는 어렵지 않았다. 프론트 앤드는 코딩 실력 만큼 디자인 감각이 중요한 분야라는 것을 깨닫게 되었다.
  • 티스토리 스킨 제작 이후 내 소유의 홈페이지를 만들어보고 싶었다. express와 sockectIO를 이용해 무작정 zoom을 따라 만들어보았다. 그리고 그 다음으로 블로그 프로젝트를 클론코딩 해보았다.
  • 블로그 프로젝트를 기반으로 socketIO를 이용한 게임, 로그인 시스템, session과 cookie를 이용한 라우팅 제한, 기본적인 보안 사항, Sql, 프록시 서버 설정 등을 진행해 보았다.
  • SPA에 대해 알게 되면서 Vue를 2주 동안 학습해 보았다. 그리고 간단한 구성과 동작을 배워보았다. 이때부터 AI가 디버깅을 잘 하지 못하고, 검색이 잘 되지 않으면서 난관에 봉착했다.
  • 데이터가 적은 이유를 찾다 보니 취업 시장에서는 React가 대세였다. 그래서 React를 2주간 다시 학습했다. 의외로 Vue와 React는 닮은 점이 많아서 새롭게 배우는게 그리 힘들지는 않았다.
  • React로 간단한 페이지를 만들었는데 Pagespeed insight에서 성능이 좋지 않았다. 오히려 express와 handlebars로 만든 사이트가 더 좋게 나온 듯 했다.
  • 그 이유를 찾아보니 SPA는 초기 랜더링에 시간이 오래 걸리기 때문에 검색엔진에서 좋은 점수를 받지 못한다는 사실을 아게 되었다.
  • 프론트 앤드는 vite, 백앤드는 express를 이용하고 있었다. 크로스 오리진 문제로 프록시를 이용하고 있었는데 백앤드와 프론트앤드를 번갈아가며 코딩하는게 꽤나 귀찮았다. 이번에는 nextjs를 이용하면 백앤드와 프론트앤드를 통합운영 할수 있다는 글을 보았다. 결국 nextjs까지 오게 되었다.

 

express로 웹사이트를 만드는건 정말 뚝딱이었다.

 

helmet으로 보안 좀 하고, session으로 식별하고, 위함헌 입력은 escape하는 등 적절히만 하면 작은 웹사이트를 운영하기에는 어려움이 없어 보였다.

 

그런데 Nextjs로 넘어오면서 제일 큰 문제점은 누군가의 도움으로 내가 스스로 웹사이트를 만들수 없다는 것이었다.

 

상대적으로 Nextjs의 러닝커브가 엄청나다는 생각이 들었다.

 

 

2. 무엇이 문제인가?

 

한 동안은 그저 내 배움이 부족했기 때문이라고 생각해서 책도 읽어보고 여러 문서들을 찾아보았다.

 

블로그 하나를 따라 만들었음에도 무언가를 구현하기에는 부족함이 많았다.

 

결국 나는 원점으로 돌아와서 무엇이 문제인가를 다시 고민해보았다.

 

결론은 내가 Nextjs가 어떤 방식으로 구동되는지 깊게 이해하지 못한다는 것이었다.

 

예를들면 Nextjs에서 middleware의 역할과 한계를 모른다.

 

때로는 auth.config.ts, auth.ts등을 작성하는데, 그런 것들이 필요한지, 어떤 과정으로 라우팅을 제한하는지 쉽게 알기 어려웠다.

 

그래서 Express를 복습하는 겸, Express와 Nextjs에서 라우팅을 처리하는 법, 쿠키를 이용하는 법 등을 정리하며 공부해 보려고 한다.

 

 

3. 무엇을 쓸 것인가?

 

기존에 Express에서 만들었던 기능들을 Nextjs로 구현해보며 글로 남기려고 한다.

 

라우팅, 라우팅 제한, Session, https 구성 등을 쓰고 싶다.

 

4. 어떻게 쓸 것인가?

 

지난 34일 동안 코딩 스터디를 하면서 매일 코드를 들여다보는 연습을 했다.

 

이제 남은 숙제는 앞으로의 습관을 어떻게 들이냐는 것.

 

매일 하나씩의 기능을 차근차근 익혀고 매일 글로 남겨보려고 한다.

 

 

5. Step by step, goes a long away

 

그 동안은 너무 조바심이 났단 것 같다.

 

매일 AI들이 치고 들어오고, 아기는 자라서 뛰어다니고, 나는 계속 나이들어가서 남은 배움의 시간이 이제 얼마 안지 않았다고 생각했다.

 

코딩 스터디를 하는 34일 동안 세상은 크게 변하지 않았다.

 

그리고 나도 변하지 않았고, 알고리즘을 몇개 배우는 것 이외에 아무것도 하지 않았지만 크게 달라진건 없었다.

 

스터디라는 하나에 집중하면서 잠깐동안 조바심이 사라졌고, 조바심이 사라지자 내가 해야할 것들이 명확하게 보였다.

 

무언가 빠르게 배워야 한다는 나의 조바심이 내 배움을 가로막고 있었다.

 

내가 만들고 싶은건 그리 거창한게 아니다.

 

그리고 그걸 만든다고 해도 내 삶이 크게 변하진 않는다.

 

그러니 한 걸음씩.

 

천천히 나아가 볼 예정이다.

728x90