📌한 달 회고
2022년 11월 30일. 개발 직군으로 첫 회사에서 입사 한 달째이다. 앞으로 더 큰 커리어 성장을 위해 한 달차 회고를 해본다. 회사는 바닐라 자바스트립트를 사용하기 때문에 처음 2주는 힘들었다. 리액트를 공부한 나에게 바닐라 자바스크립트는 생소했다. 코드가 눈에 보이지도 않았다. this 수 만개가 있었고 처음 실무를 해서 그런지 파일의 양이 압도적으로 많다고 느꼈다. 리액트 컴포넌트별로 쪼개는 것에 익숙했었는데 UI를 그려주는 파일과 기능을 그려주는 파일으로 나눠진 파일들이었고 몇 백장의 기획서에 깨알같이 적힌 글씨와 여러 사람이 작업했기 때문에 다 다른 변수명과 함수명을 이해하는데도 시간이 오래걸렸다. 하지만 당연히 쉬울리 없었고 오히려 더 많이 배울 수 있어 좋다.
입사 첫 주에는 협업 툴 가입하고 업무 파일 공유 받고, SourceTree에서 회사 프로젝트 클론을 받았다. 기획팀과 디자인 팀에서 만든 Zeplin, Figma, PDF 기획서를 살펴보고 같이 입사한 동기들이랑 자바스크립트 스터디를 진행했다. 첫 주와 둘 째주에는 7일에 걸쳐 입사 교육을 받았다. 회사 서비스가 금융 관련 상품이라서 금융 관련 지식, 회사 서비스 소개, 사업 방향성, 시스템 구조에 대해 교육을 받았다. 둘 째주에는 기획서를 파악하는 시간과 동기들과 스터디를 병행했다. 금요일에 회의가 있었는데 다음주 부터 수행할 미션이 주어졌다. 금요일과 다음주 월요일까지 기획서와 실제 웹 사이트 기능들을 비교해가며 에러를 찾는 작업을 했다. 셋 째주 화요일부터는 정리한 에러를 해결하는 실무를 시작했다.
어디서 부터 시작해야 될지 모르겠던 상황에서 회사 차장님과 대리님이 경로를 찾아주셨고 가이드라인을 제공해 주셨다. 덕분에 처음인데도 나름? 수월하게 일을 처리했다. 도움이 많이 됐던 부분은 가르쳐주실 때 내 공책에 들으면서 필기했던 내용이다. 내 기억에 의존할 수가 없다. 파일명도 생소하고 어디 함수에서 어떻게 해야 될지 감도 안 왔었는데 중요하다고 생각했던 부분을 빠르게 키워드만 적어놓으니 아까 말했던 부분이 뭐였는지 찾을 수 있었다. 차장님이 중요한 코멘트를 주셨는데, “빨리하는 것보다 효율적인 코드를 작성하는게 중요해요.”라고 자리로 돌아가셨다. 앞으로 개발 커리어에 많은 도움이 될 중요한 말씀 같다.
📌그 동안 도움이 많이 된 부분
✅ 모르거나 작동 안되면 무조건 console.log 해서 어떤 데이터가 들어오는지 확인
- 이렇게 해서 정말 많은 정보를 찾았다
✅ console.log(”symbolCode”, this.symbolCode)
- 콘솔에 여러번 찍을 때, 이 방법을 사용하면 어떤 데이터가 뭔지 구분하기 쉽다
✅ console.log(this) 또는 console.log(this.parent) 하기
- 내가 현재 있는 파일이 내가 만든 파일이 아니라면 이 함수, object가 무엇을 의미하고 어디 있는 것인지 파악이 어렵다. this나 this.parent로 콘솔을 찍으면 바로 상위 객체가 무엇인지 확인할 수 있어 구조 파악에 도움이 된다
✅ 수정해야 될 함수를 포함한 관련 파일도 함께 검토하기
- 예를들어, 내가 수정해야되는 함수가 _EmptyPageLogo 라고 했을 때 그 함수가 쓰이는 내부 다른 곳이나 다른 파일을 꼭 함께 살펴보면 내가 고쳐야 할 파일이 어떤건지 빠르게 파악할 수 있다
✅ 혼자 이것저것 시도 먼저 해보고 안 되면 빠르게 질문
- 시간을 정해놓고 집중해서 다양한 방법으로 시도해보고 안 되면 사수에게 빠르게 질문하자
- 가끔 “잘못된/다른” 파일에서 시간 낭비하고 있을 확률도 있다
✅ 기존에 있는 코드를 개선할 수 있다면 개선하기
- 기존에 있는 코드는 다른 사람이 적어놓은 것이기 때문에 지우면 안된다는 생각을 가지고 있었다. 회사별로 다르겠지만 있는 그대로 사용하지 말고 능력껏 바꿀 수 있다면 바꾸자
✅ 고친 코드 UI 확인하기
- 힘들게 고쳐도 브라우저상에, 모바일에, 태블릿에 어떻게 표기 되는지 디자인을 기획서랑 반드시 비교한다음 제출하자
- 결국에는 유저에게 어떻게 보여지는지와 기획, 디자인팀에서 만든 “기획서”와 맞는지를 확인해야 한다
- 코드만 맞는게 중요한게 아니라 디자인적으로 어떻게 그려지는지가 프론트엔드 개발에서는 중요하다는 사실도 잊지 말자. 내 눈에 이상하면 시니어 눈에는 더 이상하게 보인다
✅ 고치려고 하는 비슷한 UI 항목 찾아서 관련 파일 찾아보기
- UI적 에러라면 그와 비슷한 기능을 하는 UI 항목을 브라우저에서 찾아보고 해당 관련 파일과 함수 코드를 읽어본다. 그리고 그것을 참고 문서처럼 여겨 비슷하게 코드를 작성해보면 된다
- 폴더에서 위 경로와 비슷하게(목적은 public에서 images 경로를 찾아가는 것) 따라가다 보면 도형이나 로고를 찾을 수 있다.
- 파일 이름을 그대로 VS Code 검색창에 찾으면 관련 파일을 쉽게 찾을 수 있다. 만약 나는 웹을 develop하고 있는데 회사에 mobile과 PC 파일이 함께 있다면 제외할 파일에 적어서 상세 검색하는 것도 실수를 줄일 수 있는 방법이다.
📌마치며
앞으로 갈 길이 멀다. 23년 목표는 일상에 개발을 자연스럽게 스며들게 하는 것이다. 일과 personal life를 구분하지 않는 것이다. 그 경계를 느리지만 자연스럽게 붕괘하는 것. 주말에 쉬면서 자연스럽게 개발 관련 서적을 읽고 개발 관련 사람들과 대화하고 출퇴근 길에도 개발 트렌드를 자연스럽게 흡수하면서도 그 모든 행동이 좋았으면 한다.
