[유데미x스나이퍼팩토리] 프로젝트 캠프 Next.js 1기 - 13일차

 

13일 차인 오늘은 Next.js의 캐싱 메커니즘에 대한 이해를 바탕으로 Server Action 학습해 보는 실습시간이 있었고, MongoDB 사용한 데이터베이스 연결하는 방법을 학습했다. MongoDB를 세팅하는 방법이 꽤 어려웠다. 처음으로 강의를 놓쳤다. 한번 놓치니 따라갈 수가 없었다. 흐름이라도 파악하기 위해 듣기 했지만... 😭 어려웠다. 

 📚 학습한 내용
- Caching
- Server Action
- ⭐️ MongoDB & mongooes

 

 

✍🏻 학습한 내용 정리

 

공식문서에서 말하는 Server Action은 서버 측에서 실행되는 비동기 함수이다. Server Action으로 생성된 함수는 데이터 변경과 Form 태그를 통해 사용자의 입력을 받아 서버에서 데이터를 처리하고 결과를 클라이언트에 전달하는 역할을 수행한다. Server Action을 사용하기 위해서는 'use server'를  함수 내부 또는 파일의 최상단에 선언해주어야 한다. 이론만 들었을 때는 이해가 되질 않았다. Server Action 사용해 보기 위해  express를 사용해서 간단한 API 만들었고 유저의 이름과 이메일을 입력하고 저장하면 fetch API 사용해 서버로부터 응답받은 유저의 정보를 리스트 형식으로 출력하고 유저의 정보를 삭제하는 버튼까지 구현해 보는 실습이었다.

 

실습 결과물

 

실습에서는  기존의 React의 useState, useEffect 사용한 방식과 Next.js의 Server Action을 사용하는 방식으로 2가지 방법으로 구현을 해보았다. 두 방식의 차이는 흥미로웠다. 기존의 React 방식은 상태 관리하기 위해 여러 hook과 라이브러리를 사용해야 했는데, Next.js에서는 상태를 가지고 기능을 구현하는 과정이 축소된다. 그러나 Data Cache로 인해 업데이트된 데이터를 화면의 업데이트하기 위해선 캐시를 무력화(초기화)시키는 작업이 필요했다. 별도의 상태관리 라이브러리를 설치하지 않아도 되고, 상태를 관리하지 않아서 코드의 양도 줄고 코드의 가독성까지 좋았다. 캐싱의 메커니즘만 잘 이해하고 있으면 정말 사용하기 편하겠다고 생각되었다. 

 

 

👩🏻‍💻 학습을 통해 느낀 점 

 

mongoDB와 moogooes를 설정하는 방법을 찾아보다가 어려워 보여 우선 포기하고, 개념을 정리하는 대신 Server Action에 익숙해지기 위해 TodoList를 Next.js로 다시 만들어보았다. 정말 사용법은 간편해서 기능을 구현해 보는 과정은 어렵지는 않았다. 별도의 파일로 분리하여 action 함수들의 정의해 두고 클라이언트에서 발생되는 이벤트 처리 함수들에 적용하는 방식으로 기능들을 구현해 보았다. Form의 action 부분에 함수만 적용하면 form의 입력값들은 쉽게 제어할 수 있었다. 강의에서는 Form의 action을 사용하기 위해

<input type='hidden'>으로 사용했는데 사용자가 입력해야 하는 input 요소가 없다면  button 태그의 type을 버튼으로 지정하고 onClick 사용해 이벤트를 적용하는 방식으로도 구현해 보았다. 약간 의문스러운 건 기능이 없는 단순 보여주는 UI(예를 들어, 토글버튼)를 구현하기 위해선 useState를 사용하게 되는데, 이런 방식으로 UI를 업데이트하는 게 맞는지 건지 궁금해졌다. 이 부분은 더 찾아봐야겠다고 생각된다. 

 

 

---

 

본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 과정(B-log) 리뷰로 작성되었습니다.

 

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프

#Next.js #프론트엔드개발자양성과정 #개발자교육과정