4월 막 주에 입사 예정이었으나 코로나 이슈로 5월에 입사했다. 입사하면서 임상에 대한 지식이 없는 상태라 걱정이 되기도 했고 다른 신입분들과 입사 시기가 맞지 않아 신입 온보딩 프로젝트에 참여하지 못해서 매우 아쉬웠던 기억이 있다. 입사 이후 11월 1일 인턴 생활을 마치고 거의 한 달이 지난 지금까지 인턴 생활(+α)을 하면서 참여했던 프로젝트들을 정리해 적어보려고 한다.
프로젝트
OpenEDC 커스텀 프로젝트
기존 OpenEDC의 커스텀 스타일을 만드는 작업과 한국어 번역을 추가하는 작업을 했다. 대학 3학년 이후로 바닐라 JS로 작업하는 게 처음이라 당황하긴 했었는데 커스텀 스타일을 추가 같은 경우 테마 별 CSS 작업을 하고 인덱스 HTML 파일에서 link 태그의 아이디 값을 받아 href 속성을 바꿔주는 식으로 작업했고, 한국어 번역은 옆자리 소연님의 많은 도움을 받아 번역 폴더에 kr.json 파일을 추가하고 한국어를 선택할 수 있는 기능을 더해 공식 OpenEDC 레포의 컨트리뷰터로 이름을 박을 수 있었다.
🐱👤 관련 :
Chatbot 프로젝트
질의응답 기능과 평가 기능이 있는 챗봇의 UI를 구현하는 역할을 맡았다. 포스트맨을 처음 사용해볼 수 있게 해 준 프로젝트이고 인공지능 담당 하은님, 백엔드 담당 원철님과 함께 협업할 수 있었다. 입사 이전에 공부한 Next, TypeScript로 개발했고 스타일 라이브러리로 Styled-Components를 사용했다. 백엔드 API를 받기 전에 네이버 검색 오픈 API를 사용해 사용자가 보낸 메세지를 네이버에 검색했을 때 결과를 답변해주는 챗봇을 미리 구현해보고 채널톡과 같은 챗봇 서비스들을 참고하며 사용자 친화적인 UI를 개발하려 노력했다. 챗봇의 답변에 대한 평가 같은 경우 챗봇 메세지 옆에 좋아요, 싫어요 버튼을 두어 클릭만으로 간단한 평가가 가능하게 했다. 이렇게 개발을 완료한 줄 알았으나… 챗봇을 아임트라이얼에 적용하려 NPM 패키지를 생성하고 배포한 후 적용하는 과정에서 문제가 생겼다. 결국 심포지엄 전까지 이 부분이 해결이 안돼 아임트라이얼 웹을 챗봇 프로젝트의 배경으로 임베드(ㅋㅋ)하는 방법으로 마무리했다. 2023년 목표.. NPM 패키지 만들고 패키지 다운로드하여 웹사이트에 적용하는 것으로 결정.
🐱👤 관련 :
MDR 프로젝트
신입 개발자들끼리 낑낑거리면서 머리 맞대고 회의만 하다가 철회된 프로젝트ㅎ 단순 개발이 아니라 기획부터 시작해 디자인까지 해야 했던 프로젝트라 시작하기 전에 임상 지식을 갖추기 위한 시간도 길었고 요구사항을 정립하는 시간은 더 길었다. 임상 지식 습득을 위해 재훈님께 교육을 받으면서 신입들끼리 CDISC 스터디도 진행했다.(📝 깃북) 개발은 환경 세팅만 하고 끝났고 피그마로 화면 구성한 시간이 제일 길었다. 원래 3개월로 계획된 프로젝트였는데 회의를 할수록 어 근데 이런 기능도 필요한데..? 어 저 기능도? 하면서 요구사항이 기존 76개에서 300개로 늘어버렸다. ㅎ 도저히 3개월 안에 할 수 없다고 판단해 9개월의 기간을 달라는 요구를 위해 PPT도 만들었다. 3개월에서 9개월이라니 지금 다시 생각해보면 어이없긴 하지만 산정 근거를 보면 납득이 가긴 한다.
아무튼 운영 방식이 바뀌면서 imtrial 프로젝트에 투입되며 개발을 시작해보지도 못한 채 마무리됐다. 계획은 NextJS, TypeScript에 상태 관리는 Zustand로 하려 했었다.(📁 레포) 열심히 세팅하고 공부했는데 개발은 해보지도 못해서 아쉽긴 했지만 스터디 내용이 imtrial 프로젝트를 하면서 많은 도움이 됐다. 대신 피그마에 시간을 너무 많이 투자한 게 많이 아쉽다. 그 시간에 개발 공부했으면 더 좋았을 텐데..
🐱👤 관련 :
imtrial 프로젝트
실무 투입 전에 도형님께 전반적인 코드 설명을 듣고 숙제(숙제 2, 숙제 3)를 하는 기간이 있었다. 이 기간이 일주일 이상이었는데 교육을 들으면서 신입끼리 MDR 프로젝트했으면 큰일 날 뻔했다는 생각을 하면서 정말 많은 것을 배웠다. 기본적인 메뉴 만드는 법이나 그리드를 제어하고 백엔드와 통신하는 법 등을 배우면서 사용하기 편리하게 만들어진 AUIGrid 컴포넌트나 TextInput, TextArea, SelectBox 등 공통 컴포넌트, commonFunction 파일을 보고 감탄했다. 소연님, 성연님이 DDF 프로젝트에 참여하면서 도형님께 1대 1로 교육을 받아 그런지 꼼꼼히 배울 수 있었고 덕분에 프로젝트에 적응을 빠르게 할 수 있었다. 9월 29일 첫 일감을 시작으로 어제 11월 23일까지 약 8주간 총 27개의 일감을 해결했다. imtrial 프로젝트는 기본적으로 React, JavaScript 기반으로 많은 라이브러리를 사용하고 있다. 대표적으로 비동기 통신의 경우 Axios 라이브러리를 사용하고 페이지 이동은 react-router-dom(react-router와의 차이) 라이브러리를 사용한다.
좋았던 점
공통 컴포넌트 제어하기, 다르게 말하면 공식 문서+남의 코드 이해하고 응용하는 법 익히기. 원래 공식 문서를 많이 안 보는 사람인데 이젠 주소창에 a만 쳐도 AUIGrid 문서 url이 찍힌다. 기존 AUIGrid 공통 컴포넌트에서 사용하고 있지 않는 속성, 이벤트, 메서드를 추가하는 재미가 있었다.
자신이 확실히 할 수 있는 일을 구분하고 나머지는 쳐내는 법 배우기. 이 부분은 아직 혼자 할 수 있을지 모르겠다. 같이 일한 지수님이 이 역할을 잘해주셔서 기간 내에 개발을 완료할 수 있었다. 이런 데에 있어 욕심이 커서 기간을 생각 안 하고 할 만하다란 생각이 들면 덥썩덥썩 오케이 해버리는 나로선 정말 감사해야 할 일이다. 시간만 있으면 충분히 할 수 있는 작업인데 못한다고 말하기가 자존심 상하나 보다. 나의 야근과 팀의 일정 관리를 위해서라도 무조건 고쳐야 하는 나쁜 습관이다.(실력이 늘면 그 시간 안에 할 수 있는 일들이 많아질 테니 실력을 높이는 것도 좋은 방법ㅎㅎ)
세션 스토리지를 더 유용하게 사용하는 법 배우기. 세션 스토리지의 경우 키 값과 밸류 값을 문자열 형식으로만 저장할 수 있다. 하지만 사용하고 싶은 데이터의 형식은 거의 항상 오브젝트 형식이다. 그래서 imtrial 프로젝트는 세션 스토리지에서 값을 받아올 땐 문자열을 객체 형태로 바꿔주는 JSON.parse() 메서드를 사용하고 세션 스토리지에 저장할 땐 객체 형태를 문자열로 변환해주는 JSON.stringfy() 메서드를 사용하고 있었다. 코드를 보면 주석에 세션에 저장할 땐 정보를 암호화 처리하고 받아올 땐 복호화 처리가 구현되어 있긴 한데 주석 처리되어 있다. 개발할 때 세션 스토리지 확인을 쉽게 할 수 있도록 주석 처리해두신 것 같다. 이런 세션 스토리지 사용으로 리스트 화면에서 2페이지를 보고 있는 중에 리스트 아이템 상세 화면으로 전환했다 다시 리스트 화면으로 돌아왔을 때에 2 페이지로 유지할 수 있으며 검색어나 검색 필터도 같은 흐름으로 유지된다. 잘 배워서 사이드 프로젝트에서 야무지게 사용하고 있다.
한 컴포넌트에서 여러 컴포넌트(ex. 모달)를 보여주고 싶을 때 컴포넌트마다 열림/닫힘 상태를 useState로 정의하는 게 아니라 코드 상태를 담고 있는 변수를 useState로 정의하기. 글로 쓰려니 어려워지는데 쉽게 말하면 내가 작업한 요구사항 중 한 화면에서 띄워야 하는 모달의 종류가 4가지였던 적이 있었다. 모달마다 [isConfirmModal, setConfirmModal], [isDeleteModal, setDeleteModal],... 이런 식으로 정의하니 불필요한 변수를 많이 만든 느낌이 들었고 더 좋은 방법이 있을 것 같다는 생각이 들었다. 그래서 경력분들께서 작성하신 코드를 탐색하던 중에 POPUP_CODE 객체에 필요한 모달들의 코드를 저장해 두고 [popupCode, setPopupCode]만 정의해 그때그때 띄우고 싶은 모달의 코드로 setPopupCode(POPUP_CODE.CONFIRM) 세팅해주는 방식을 보았다. 생각해보면 어려운 게 아닌데 모달은 이렇게 열어야 해라는 고정관념이 있어서인지 생각이 여기까지 닿지 못했던 것 같다.
아쉬웠던 점
내 생각엔 꼼꼼히 테스트한 것 같아서 배포했는데 내가 주의를 기울이지 못한 곳에서 버그가 발생한 일이 많았다. 긴급 건이 아닌 이상 개발을 끝내고 하루 정도는 틈틈이 보면서 계속 테스트해봐야겠다는 다짐을 하게 됐다. 그리고 귀찮아도 주석을 열심히 달고 개발 메모를 꼼꼼히 하자. 기억보단 기록을! 개발할 당시에 코드를 보면 너무나 당연하지만 나중에 돌아보면 왜 이렇게 했지 이게 뭔 코드지 하는 경우가 많다. 일감마다 개발 과정을 전부 기록하면 좋긴 하지만.. 솔직히 그렇게 할 수 없는 걸 알기에 주석이라도 열심히 작성하는 습관을 기르자.
푸시 전 테스트
1. 요구사항 보면서 기능 테스트하기
2. 코드 정렬하기(웹스톰 기준 ctrl+alt+L)
3. 변경사항 있는 파일마다 Problems 탭 확인하기
4. 콘솔 로그 남아있는지 확인하기
5. Terminal 탭 확인하기
코드 리뷰 하고 싶다. 코드 리뷰 탭이 있는데 한 번도 사용을 못해봤다. 코드 가지고 토론하면서 퀄리티를 높이는 경험을 해보고 싶다. 일정 텀을 둬서라도 리뷰 시간을 주셨으면 좋겠다. 일감들이 휘몰아친 뒤에 내 코드를 리뷰하는 중에 소장님께서 지금 개발자들이 가지고 있는 일감 없다고 일감 분배 언제 할 예정이냐고 물어보셨을 때 많이 당황했다. 개발자들이 각자든 서로든 코드 리뷰를 할 시간을 주셨으면 좋겠다. 물론 말씀드리면 해결될 문제라고 생각한다.
커밋의 단위를 잘게 쪼개고 싶다. 지금까지 해왔던 프로젝트에선 거의 혼자 프론트엔드 개발을 진행하기도 했고 브랜치에 대한 개념이 잡혀있지 않아 무작정 dev 브랜치에 개발한 기능마다 커밋을 했었다.(어디서 본 건 있어서 개발이 완료되지 않은 것도 기능 문구 뒤에 WIP를 붙여 커밋했다ㅎㅎ 변명을 해보자면 데스크탑, 노트북을 모두 사용해서 한쪽에서 커밋이 되어야 다른 쪽에서 풀 받아 작업할 수 있다고 생각했다. 다른 방법이 있나? 스태시는 로컬에서만 작동하는 것 같다.) 그런데 imtrial 프로젝트는 규칙으로 정해져 있진 않았지만 요구사항의 제목으로 요구사항에 대한 개발을 커밋 하나로 끝내는 방식으로 돌아가고 있었다. 이 경우 요구사항이 하나의 기능만 작업하는 거면 문제가 없는데 내가 작업한 일감 중 한 화면에 많은 기능을 요구하는 일감이 있었다.(오른쪽 이미지 참고) 한 번만 커밋하라는 말은 없으셔서 세 번에 나눠하긴 했는데 아무래도 히스토리에 같은 제목을 한 커밋들이 남다 보니 눈치가 보이긴 했다. 이 경우 문제가 5개의 기능을 구현해야 한다고 쳤을 때 3개까지 구현 완료하고 4번 기능을 구현하다가 어.. 뭔가 지금까지 4번 기능 개발한 걸 다시 처음으로 돌려서 하고 싶다 할 때 기능마다 커밋했으면 버전 관리가 돼서 이전 버전으로 돌아갈 수 있는데 이게 안됐다. 버전 관리 툴을 사용하는데 버전 관리가 안됐다는 게 말이 안 되는 것 같다. 관련해서 스태시 사용법을 배웠는데 임시저장 용도로는 좋은 것 같지만 내가 원하는 버전 관리로써의 기능은 어려운 것 같다는 생각이 들었다. 그래서 다음 프로젝트부턴 React 팀에서 사용하는 방법인 Squash and Merge 방식을 사용해보고 싶다. 내가 이해한 Squash and Merge 방식은 feature 브랜치에 기능 별로 커밋을 하고 develop 브랜치에 머지할 때 feature 브랜치에서 작업한 내용들을 하나의 커밋으로 합쳐 병합해 개발하는 동안은 기능 별로 버전 관리를 할 수 있고 병합 후 develop 브랜치에선 요구사항 별로 커밋 로그를 볼 수 있는 장점이 있다.
🐱👤 관련 :
마지막으로 아직 NetworkLayout 컴포넌트의 코드를 완벽히 이해하지 못했다. 특히 비동기 통신 처리 부분인 response 속성이 사용되는 부분에서 useReducer과 dispatch를 활용해 백엔드에서 받아오는 데이터를 처리하는데 다음 프로젝트 투입 전에 공부해두도록 하자.
마무리
길었던 인턴 생활을 마무리하고 다음 주엔 개발 회고에도 참여한다. 할 건 아직 산더미처럼 쌓여 있는데 시간이 너무 빨리 지나간 것 같다. 인턴 초기에 CSS/번역 작업이나 MDR 프로젝트 초기 기획/설계를 하면서 프론트엔드 개발을 하러 들어왔는데 개발을 너무 안 시켜주는 거 아닌가라는 생각으로 사이드 프로젝트를 열심히 한 기간(회사 일보다 열심히 했을 수도)과 imtrial 프로젝트에 투입되어 개발하고, 배우고, 협업한 기간을 통해 인턴 생활 전보다 확실히 개발 능력이 향상되고 남과 소통하고 협업하는 능력도 많이 늘었다고 느낀다. 아직 배울 게 너무 많다. 앞으로도 화이팅!
