인턴 6개월 전환후 정직원 6개월 총 1년정도가 지났다.
1년 간 어떤 개발을 해왔는지 정리하고 어떤 점을 배웠는지 생각해본다.
보완하거나 다뤄보고 싶은 주제에 대해서도 정리해본다.
언어 : Javascript
회사 업무
1. 데이터 입수 SDK 고도화 개발 (기능 추가 및 번들러 업그레이드)
- SDK 개발이라는 신기한 첫 경험이었다.
번들러로 parcel를 이용했는데, 번들러 간의 차이도 알아갈 수 있었고, 어떤 상황에 어떤 기술을 도입해야하는가에 대한 고민도 해볼 수 있었다.
parcel v1->v2 업그레이드 하는 과정에서 오류도 많이 났지만, tree shaking과 같은 새로운 개념도 알게되고 번들러가 존재하는 이유에 대해서도 알게 되는 좋은 경험이었다.
2. React,Express 사용한 Admin 플랫폼 개발 및 배포 (Jenkins와 사내 빌드 시스템 이용한 CI/CD 작업)
- 그동안 Frontend 쪽 개발만 진행하다가 처음으로 Frontend+Backend 개발을 동시해 진행해보았다.
확실히 API 서버개발을 해보니까, 어떤 데이터를 받아야 작업하기 편리하고, 서버개발의 전체적인 흐름을 파악하는데 이해도를 높일 수 있는 좋은 기회였다.
다음 프로젝트에서 서버개발자분과 함께 작업한다면, 업무의 진행정도를 가늠해 볼 수 있고 그에 따라 개발속도를 맞춰갈 수 있을 것이라는 좋은 기대감이 생겼다.
3. 레거시 코드 최신화 작업~ing (React v15 -> v18, MySQL v5.6 -> v8.0, Node v8 -> v16)
- 요새 진행하고 있는데, 가장 머리가 아프다. ㅠㅠ
처음 웹개발을 시작했을때 배웠던 React가 16버전이었는데, 이미 class components보다는 function components와 hook이 메인이였고, 이전버전은 굳이? 라는 생각을 항상 하고 개발을 해왔다.
<입사를 하게 된다면 내가 받는 코드들은 예전 코드도 있다는 것을 생각하지 못했다!>
정작 class component와 this가 난무하는 예전코드를 받게 되니, 흐름도 캐치하기 좀 어렵고, 어디부터 손대야할지 막막하다.
근데 공부해보고 뭐 하면 되겠지! (무식해서 용감하기!)
토이프로젝트
Typescript, Next.js,React-Query,O-auth
- 그동안 관심있있었던 기술 스택만 모아서 공부해보는 느낌으로 토이프로젝트 진행했다.
참 별거 없이도 https://github.com/MoonSangJin/todo 그냥 todo-list다.
으휴 뻔해... 근데 또 todo-list 만들어보는 것처럼 간단하면서 기술 습득이 괜찮은 방법을 아직은 잘 모르겠다.
toDoList라도 어떤 기술로 어떻게 구현하는지에 따라 난이도가 달라진다고 생각한다. 암튼 뭐 요것저것 다 써보면서 느꼈던 점 정리해본다. - Typescript : 확실히 타입 안정성이나 다른사람과 협업할 때는 도움이 될 것 같다는 생각이든다. 특히 Vscode랑 연동되서 IDE가 주는 도움을 확실히 받을 수 있다는 점이 매력적이었다. (회사에서는 Webstorm 사용하는데 Webstorm으로 Typescript 잘 사용하는 법을 아직 잘 모르겠다. 뭔가 Vscode가 더 편리한 느낌.. 애초에 TS도 그렇고 Vscode도 그렇고 마소라는 한 회사에서 만들어서 그런가)
- Next.js : 오 이거 참 괜찮은 것 같다. 뭐 SSR이고 SEO 성능 높이고 하는 이론적인 장점도 있지만, 그냥 개발해보니까 나한테는 React+간단한 Node api 서버 합쳐진 느낌이었다.
React+Express 로 할때보다 코드량도 절반으로 줄어버리고, 애초에 라우팅이나 미니 서버(?) 역할 하는 친구가 한 디렉토리 안에 있으니까 생산성도 늘어나는 것 같다.
한마디로 뭐 DB서버 하나만 있으면 굳이 프론트쪽 React 코드 작성하고, api 뚫는 Express 서버 코드 또 작성하느니 그냥 Next.js써서 한 프로젝트 안에서 둘다 진행해버리면 낫지 않을까 하는 생각이 든다. 물론 뭐 더 장점이 많겠지만, 혼자 뚝딱뚝딱해보는 거라 아직은 미숙한 것 같다. - React-Query : 음 사실 뭐 주변에서 많이 쓰길래 한번 공부해봐야지라는 의미가 가장 컸던 것 같다. 직접 짜보기전까지는 뭐가 이점인지도 잘 모르겠고, 걍 항상 쓰던 Redux 쓰던가 (아 코드량 상상하니까 또 아찔하긴한다.), 깔곰한 Reocoil쓰던가 하면 될 것 같은데, 왜 또 뭐가 나왔지..? 라는 생각이 강했다.
근데 상태관리라는게 Frontend 개발할 때 참 중요하다는 것을 많이 느끼는데, 보통은 클라의 상태, 서버의 상태를 동기화 시키고, 각각 관리한다는게 당연하다고 생각했다.
React-Query 써보면서 느꼈던 장점은 클라,서버 각각 상태관리를 하는 것이 아니라, 서버의 상태를 그대로 클라에 반영할 수 있다는 점이 좋았던 것 같다. 코드량도 그럼 줄어들고, 로직 따라가는 것도 훨씬 직관적이 되는 것 같다. 이 기술도 아직 deep하게 써봤다고는 할 수가 없어서 그냥 이런 점이 있었다 정도다. - O-auth : 사실 이거는 뭐 쓰기도 애매한데, 그냥 남들다하는 카카오 로그인, 네이버 로그인 같은거 알긴 아는데, 내가 막상 직접 구현해서 써본적은 없더라.. 그래서 한번 docs 보면서 따라해봤다. 구현해보면서 관리도 편하고, 네카!가 보안도 훨씬 좋을 거니까 인증부분은 맡겨도 되지 않을까라는 안일한 생각과 동시에, 내 정보 불러와지고 테스터로 친구들것도 잘 작동하는 거 보니까 재밌더라 (나도 참 단순한다 ㄹㅇ)
아 Next.js랑 잘 섞어쓰기 좋은 기술이 있었는데 https://next-auth.js.org/ 이거였다. Next.js로 개발진행하는데 SNS로그인을 쓰고 싶다! 하면 분명 도움이 될 것 같다. 어지간한 providers도 다 있구, 사용법도 간단하다.
앞으로 해보고 싶은 것
Nest.js
- Next.js 아니고 Nest.js이다. JS로 서버 만들면 거의 Express인데, 개발하면서 느낀게 정해진 규칙이 없다는게 장점이기도 하지만 단점이 될 수 도 있다는 생각이 들었다.
큰 틀 정도는 훌~~륭한 개발자분들이 정한 룰을 따라가는게 좋지 않을까 하는데, nest가 딱 적합해보인다.
결국에 spring이랑 비슷한 구조를 가져가면서 oop장점을 가져간다는데, 아직 공부안해봐서 뭐라 말을 못하겠다.
그러면 역시 훌륭한 다른분들의 글을 읽어보면 좋지
https://blog.naver.com/PostView.naver?blogId=biud436&logNo=222611201210&parentCategoryNo=&categoryNo=201&viewDate=&isShowPopularPosts=true&from=search
나는 자바를 잘 모른다. 맨날 해야되는데 하면서 안하고 있기는 한데... (객체지향!! C++ 수업 이후에는 안건드려봐서 귀찮은게 제일 큰 것 같다.)
뭔가 자바스크립트로 이것저것 해보는게 재밌어서 계속 하는 것 같다. 그런 점에서 Nest가 힘을 냈으면 좋겠는데, spring이랑 nest 비교한 논문도 있어서 첨부해본다.
https://www.eiric.or.kr/literature/ser_view.php?SnxGubun=INKO&mode=total&searchCate=literature&gu=INME000F9&cmd=qryview&SnxIndxNum=230102&rownum=&totalCnt=28&rownum=28&q1_t=c3ByaW5n&listUrl=L3NlYXJjaC9yZXN1bHQucGhwP1NueEd1YnVuPUlOS08mbW9kZT10b3RhbCZzZWFyY2hDYXRlPWxpdGVyYXR1cmUmcTE9c3ByaW5nJng9MCZ5PTA=&q1=spring&kci=
1년동안 뭐가 달라졌나 봤는데, 그래도 적당히 잘 성장중인 것 같지만, 아직 멀었지 뭐..
더 가보자고~
