[ je개발 회고 ] Cherryblossom (2) - 배운 것들

1. 새로운 라이브러리들

  이번 사이드 프로젝트에서는 회사에서는 단 한 번도 쓰지 않는 라이브러리들, 한 마디로 내가 개발을 공부 시작한 이래 단 한 번도 건드린 적 없는 라이브러리들을 사용해서 적응하는데 시간이 좀 걸린 것 같다. 굵직하게 사용한 도구들은 다음과 같다

 

프론트엔드
- Next.js
- Tailwind Css
- Tanstack Query (구 React Query)

백엔드
- Nest.js
- TypeORM

  

  (...근데 지금 와서 생각해보니 굳이 우리 어플리케이션에서 저렇게 두 개로 나눠서 개발할 필요가 있었나 싶긴 하다. 그냥 Next.js 하나로 모두 깔끔하게 끝낼 수 있었을 거 같은데)

 

(1-1) 프론트엔드 기술

  이번 사이드 프로젝트 덕분에 내가 선택할 수 있는 라이브러리의 폭이 많이 넓어진 것 같다. 사실 부트캠프 이후에 React 를 사용해 프로젝트를 만들어본 적이 없어서 당시 상황에서는 자신 있게 React 를 내가 사용할 수 있는 도구라 말하기가 어려웠다. 하지만, 이번의 엄청난 고통(?) 을 겪으면서 덕분에 React 를 이전보다 더 성숙하게 사용할 수 있게 된 것 같다.  

 

  그리고 Next.js 를 사용한 만큼 SSR 에 대한 공부를 많이 하게 된 것 같다. 회사에서는 Nuxt 가 아닌 순수 CSR 개발의 Vue3 만을 사용하고 있기 때문에 SSR 에 대한 인식은 그저 "검색 엔진 최적화", "서버에서 한 번에 다 말아서 보내주는 것" 이라는 정도의 면접 대비용 지식만 갖고 있었다. 하지만, 이번에 Next.js 를 활용하면서 어떻게 빌드가 되는지, 어떤 점에서 CSR 보다 더 좋은 것인지, 어떤  점에서는 CSR 방식을 선택해야하는 지 등을 알게 되었다.

 

  예를 들어 우리 프로젝트에서 랜딩 페이지는 데이터를 받아와서 빠르게 벚꽃을 보여주는 것이 주 목적이다. 서버에서 받아오는 데이터도 그렇게 많지 않고, 사용자가 선택해야 하는 버튼들은 대부분 다른 곳으로 라우팅해주는 버튼이다. 그렇기 때문에 이 랜딩페이지에서는(정석적이게도) 서버에서 말아서 보내주는 것이 더 좋은 페이지다. 내가 만들고 있는 페이지는 문제 풀이 페이지인데, 여기에서는 사용자로부터 버튼을 클릭 받아서 데이터를 저장하고 API 호출해야 하기 때문에 CSR 이 더 적합한 형태였다. Next.js 가 정말 좋다고 생각한 부분 중의 하나는 바로 이렇게 SSR, CSR 하나로만 치중해서 개발하는 것이 아니라 자연스럽게 선택할 수 있도록 해줘서 굉장히 좋은 프레임워크라고 생각한다(SSG 까지)

 

  Tailwind Css 는 이번에 처음 사용해봤지만, 뭔가 className 을 만들어야 하는 고통에서 벗어날 수 있어서 좋았던 것 같다. 그리고 config 를 활용해서 디자이너가 준 디자인 가이드를 반영하고, 설정한 키로만 스타일을 주면 되니 클래스명을 길게 나열해서 써야하는 것보다 훨씬 사용이 간편하고 디자인 가이드를 준수하기 편했던 것 같다. Tailwind Css 는 내가 깊이 있게 파보지는 못하고 그냥 어떻게 사용해야 하는 것인지를 파악할 정도로만 알아놔서 나중에 다른 CSS 도구들과 비교하면서 공부를 좀더 해야할 것 같다.

 

  Tanstack Query 는 확실히 사용하기 좋았다. 특히 우리 웹 어플리케이션의 특성상 서버에서 받는 데이터를 상태로 관리해주는 것이 메인이고, 사용자로부터 입력 받은 정보는 따로 전역 상태 관리할 필요 없이 그냥 useState 로 담아두기만 하면 됐기 때문에 우리 앱 성격상 딱 맞았다고 생각한다. Tanstack Query 에 대한 공부는 프론트엔드 개발자들 다같이 Youtube 채널 "우아한 테크" 에서 배민근 님이 강의하신 영상을 보고 내용을 정리하며 공유하는 것 등으로 같이 공부했다. 

 

https://www.youtube.com/watch?v=MArE6Hy371c&t=5469s 

 

 

(1-2) 백엔드 기술

  백엔드를 Node.js 로 만드는 것은 익숙하지만 Nest.js 라는 프레임워크를 사용해서 개발하는 것은 꽤나 어려운 일이었다. 그래도 다행히 회사에서 Spring 으로 개발한 경험이 있었는데 Nest 가 이 Spring 과 유사한 형태로 개발 환경을 만들어줘서 그나마 빠르게 배우고 적응할 수 있었던 것 같다. 공부는 Nest.js 를 회사에서 사용하고 있는 팀원이 공유해준 Youtube "John Ahn" 채널의 영상을 보면서 했다.

 

https://www.youtube.com/watch?v=3JminDpCJNE&feature=youtu.be 

 

  Type ORM 은 생각보다 터득하기 쉬웠다. 옛날 부트캠프 프로젝트를 할 때, Sequelize 를 사용할 때는 공부하기 엄청 힘들었는데 이번에는 좀 빠르게 적응했다. 그 이유는 두 가지가 있다. 하나는 SQL 언어 사용을 회사에서 많이 해봤다는 것이다. 우리 회사에서는 MyBatis 를 사용해 DB 에 접근해 개발하는데, 내가 잠깐 API 개발을 했을 때 SQL 에 엄청 허덕이면서 물어보고, 최적화해보고, 개발해본 경험이 있었다. 그래서 DB 구조를 보고 어떻게 데이터를 가져오지? 빠르게 생각하고 SQL 문으로 먼저 코드를 작성할 수 있어서 DB 에서 어떤 구조로 데이터를 가져오지에 대한 고민은 별로 들지 않았다. 그리고 Type ORM 이 SQL 만 알고 있으면 코드를 직관적으로 작성할 수 있어서 금방 코드를 작성할 수 있었던 것 같다.

 

  빠르게 적응할 수 있었던 두 번째 이유는 ChatGPT 다. 먼저 SQL 문으로 작성한 다음 Type ORM 으로 바꾸어 개발했을 때 원하는 결과가 나오지 않은 경우 GPT 에 물어보면서 수정했다. 좀 기가막히게 내가 작성한 코드의 문제점을 알려줘서 좋았다. 물론, 그렇게 문제를 알려주는 것 만큼 이상한 답을 줘서 오히려 문제를 불러 일으키기도 했지만...

 

 

2. 다른 회사 코드 스타일

  정말 많이 배운 것중에 하나가 다른 회사에서는 어떻게 폴더를 구분 짓고, 어떤 컨벤션을 갖고 개발하는지를 알게 된 것이다. 첫 회사가 지금 다니는 회사고 지금 시점으로 이 회사에만 1년 9개월 정도가 됐다 보니, 코드를 작성하는 시야가 그리 넓지는 못하다는 생각이 든다. 심지어 프로젝트에 들어가면 프론트 엔드 개발자는 나 포함 두 명이고, 내 사수는 사수 없이 3~4년을 이 회사에만 다니셨다 보니 모든 것이 우리 회사에 딱 박힌 느낌, 혹은 그냥 일단 구글링에서 돌아다니는 것을 도입하는 느낌이었다(이 점에 대해서는 차후 이번 회사 프로젝트 회고에서 더 자세히) 물론 강의를 보면서 그 강사 분들의 코드 스타일을 배우기도 하지만, 실제 다른 회사들에서 회사의 컨벤션으로 지키는 규칙이나 아키텍쳐가 늘 궁금했다(지금도 궁금하다). 

 

  그런 점에서 이번에 각자 회사에서 어떻게 코드를 작성하는지, 폴더 구조는 어떻게 나누는지, 스타일링은 어떻게 하고, git 브랜치 전략은 어떻게 되는지 등을 배울 수 있어 좋았다. API 서버 호출을 위한 코드를 class 로 묶는 방법이나, State 관리 방법, 사소하게는 항상 폴더마다 index 파일이 있고 해당 폴더 내 모든 파일은 index 로 묶어서 export 한다는 점(이 당시만 하더라도 우리 회사에서는 그냥 각 파일을 import 해왔다) 등등 보면서 오, 저렇게 하는 구나 깨우친 적이 몇 번 있었다.

 

---

  조금 더 일찍 블로깅을 할 걸 생각하게 된다. 당시에는 굉장히 배운 것들이 많았는데 이렇게 작성하려고 보니 무엇을 깨달았는지 기억이 잘 나지 않는다. 그래도 지금 내가 코드를 작성하는데 있어 일정 부분 여기에서 배운 것들을 적용하고 있을텐데, 그게 뭐였는지 기억이 잘 나지 않는다.. 앞으로는 작은 것 하나라도 일단 노션에 적고 나중에라도 Tistory 에 올려야 겠다

 

  그래도 지금 기억나는 것들, 내가 오랫동안 고민하면서 코드에 도입해봤던 것들은 적어 놓은 게 있어서 이런 것들은 다음 글에서 한 번 적어보고자 한다.