비전공자 개발자의 프론트엔드 개발직 근무 6일 후기를 남기고자 한다.
우선 나는 용인에서 출퇴근을 하고 있고 회사는 강동구에 있다….
직행 버스는 없고 지하철을 정확히 두 번 갈아타야 하며 집과 회사 모두 지하철역에서 10~15분 정도 걸어야 하는 거리이다. 그러다 보니 출퇴근 시간만 총 3시간이 걸리는데, 이에 따른 나의 파격적인? 출퇴근 시간을 공개한다. 이러다 카타르 중동 살이 시절보다 더 독해지는건 아닌지 ㅋㅋㅋ
아침 5시 반에 일어나기 시작했다.
자율 출근제지만 8시에 출근해서 2시간을 운전해서 10시에 도착한 월요일을 제외하고(도착하자 마자 믹스커피 마셔버림ㅋㅋㅋ당 딸림…), 화요일 6시반 운전, 그리고 수, 목, 금 모두 5시반에 지하철을 탔다. 그렇게 하면 대략 붐비지 않게 여유 있게 타고 갈 수 있다. 그렇다고 앉아서 가는건 또 아님 ㅠㅠ 물론 차를 끌 수 있겠으나, 그러면 용인 – 분당 – 성남 – 하남 – 강동 루트로 진입하고 일찍 출발해도 간간히 막힌다. 또 운전을 하면 책을 읽을 수 없고 방송만 들어야 해서 시간 효율이 낮다고 판단 되었다. 그래서 지하철을 타기 시작했고, 가면서 영어 방송, 밀리의 서재 자기 경영 독서를 읽고 있는 중이다.
회사 근처 헬스장에서 운동을 하고 씻고 회사 출근을 한다.
늦은 저녁에 씻고 머리 붕떠서 가느냐, 아침에 바빠 죽겠는데 씻고 화장하고 가느냐를 고민하다가 강동역 2번 출구쪽에 새로 열린 헬스장이 생각났다. 음악소리가 빵빵 들려서 생각이 났음.!그래서 전화해서 상담 예약 받고 바로 3개월 결제함! 6개월, 12개월도 있었는데 회사 상황이 어케 될지 몰라서 일단 상황 보고 늘리겠다고 함 ㅋㅋ
그래서 오랜만에 카타르에서 부터 가지고 있던 운동용 장갑을 꺼내 들었다. 화요일 다리, 수요일 팔, 이런 식으로 하체 상체를 번갈아가며 대략 1시간 정도 무게를 치고 있고, 그리고 씻고 회사 도착하면 8:30 정도가 된다. 물론 도착하면 피곤한데, 이미 지하철 한 시간 반 정도 타고 오면 피곤한 상태라서 이거나 저거나 똑같다.
그래도 하루를 회사가 아닌 나의 건강을 챙기는? 하루로 시작한 다는 것이 기분이 좋다. 그리고 의외로 아침부터 운동하고 출근하는 직장인 몇 있음. 리스펙!
하루에 커피 평균 3잔을 마시기 시작했다
디카페인 커피도 갔다 놓았는데, 진짜 카페인 없으면 안 될판.
나는 교육 없이 바로 프로젝트에 투입 된 상태이다.
백엔드는 5명 그리고 프론트엔드는 나 포함해서 나랑 프론트엔드 리드로 2명이니.. 진짜 리액트로 할게 많다..
프론트엔드 리드인 미얀마 언니 리스펙…
유지 보수 작업이 아니고 새로운 대시보드를 만드는 작업에 투입이 되었고 내가 맡은 페이지는 총 3개 페이지이다.
대시보드, 경고 페이지, 센서 페이지. 첫 날 부터 프론트엔드 리드한테 It might helpful 이라는 메일과 함께 라이브러리 7개와 기존 3년 동안 차곡 차곡 쌓인 프로젝트 클론을 받았다.ㅋㅋ
6일간 내가 한 것들 기억해보기
첫 날 환경 설정, Bitbucket, 회사 계정 설정을 마치자 마자 React 파일 구조를 만들고 첫 번째 커밋을 했다. 기존 3년 동안 모인 리액트 프로젝트를 클론 받았고, 라이브러리 7개를 선물 받았다. 또한 나는 OS가 맥북인데 빠르게 윈도우에 적응을 해야 했고(선택 사항이 없었.. 근데 쓰다보니 윈도우 편하다….!?) terminal 이 아닌 powershell을 찾아서 여는 것도 넘나 헷갈렸다. 무튼 어찌 저찌 해내고 첫 커밋을 함!
둘째 날, 상사가 준 종이에 그린 그림을 바탕으로 그리고 기존에 있는 대시 보드 사이트를 바탕으로 제대로 된 Figma 없이(있다면 다른 프로젝트에 쓰였던 흡사한 디자인…) 상상력과 감각과 센스를 동원하여 반응형 모바일 사이즈를 포함한 구조를 마련했다. 헤더 메뉴바 바디 영역 완료, 반응형 으로 폭 넓게 줄이기 완료. 여기 입사하기 전에 UI, UX의 대가에게 들어놓은 강의가 너무 유용했다…! root에 자주 쓰는 색상 등록과 반응형 만드는 부분 특히..! 또 position 사용할 일이 꽤 많았다. position absolute나 relative 이런 식으로 이미지 위에 텍스트나 무언가를 얹혀야 하는 작업이 많았다. 참고로 이 때 미얀마 언니의 추천으로 react-icon 활용함! 여기는 모든 아이콘 라이브러리가 다 모여있는 곳인데 괜춚!
그리고 기억 나지 않는 셋째 날 부터 지금 6일차까지 한 것은 다음과 같다.
- 헤더, 메뉴바, 바디에 각 navigate, route 함수를 사용하여 hover시 스타일 적용을 포함하여 반응형 웹페이지 UI완료(필요한 색상까지 다 var로 변수 등록함) – 코딩애플 자료 참고함
- leaflet과 react leaflet을 이용하여 지도 api 불러옴
- 더미데이터를 만들어서 내가 만든 툴팁과 마커로 지도에 핀을 뿌림
- 툴팁과 마커 만드는데 react leaflet 문서 다 읽어야 했음. 클론 뜬 코드 리뷰 훑어야 했음. 또 은근히 라이브러리 활용하려면 거기서 쓰는 코드 약어 같은거 잘 활용해야함..
- 스스로 중복 되는 부분은 없는지 코드 리뷰해서 parameter로 전달하거나 공통적인 부분 없애서 함수화 작업하는 리펙터링 작업을 진행했고 꾸미는 것들은 asset에 공용으로 사용되는 것은 component에 나머지는 page에 분할해서 파일을 넣어 놓았다.
- 오늘은 지도 확대 축소 기능을 구현했는데, 버튼을 클릭하면 지도를 확대했던게 기존 내가 정해놓은 위도와 경도의 제자리로 돌아오게 하는 것을 했다. 이것도 react leaflet 문서 뒤지고 챗지피티한테 답 내놓으라고 털어서 찾아낸 것임 ㅋㅋㅋ
먼저 상사에게 이런 디자인으로 이걸 참고해서 하면 되는지 물어보고 작업을 진행하고 완료되면 보여주고 확인을 받고 지적 받은 사항을 메모해서 업데이트 해서 또 점검을 받는다. 그리고 하루에 질문은 2 – 맥시멈 3번으로 몰아서 물어보고 있다. 상사가 화장실 갔다 올 때 아니면 검사 요청할 때ㅋㅋㅋ 그리고 코드 리뷰는 월요일에 할 예정. 프론트엔드 리드랑 나만 있어서 워낙 바빠기도 하고 나도 프론트엔드 팀의 일원으로서 뭔가 도움이 되고 싶고 잘하고 싶다.
이렇게 6일을 하다보니 자신감이 생겼다.
그리고 모르는 것에 대한 부담감도 줄었고 처음으로 지도 api 사용하는 건데 나도 할 수 있다는 확신이 생겼다.
이렇게 매일 매일 쌓아가면서 성취감을 느끼다보면 훌륭한 개발자가 되어 있지 않을까 의심치 않음ㅋㅋㅋ
이제 다음 글에서는 그래서 개발이 혹은 개발 문화가 나의 적성에 맞는지를 얘기해 보겠다.