2년 경력 주니어 프론트엔드 개발자의 회고록

벌써 2년 경력 개발자가 되다니..!

---

2년 경력 프론트엔드 개발자가 된 기념(?) 으로

나의 소감과 이전 회고록 이후에 어떤 업무를 했는지에 대해서 정리해 보려고 한다

 

 

< 목차 >

- 나의 소감

- 진행한 업무

 

나의 소감

21년 12월 개발자로의 직무 전환을 결심한 후부터, 현재 24년 11월까지 약 3년.

취업과 이직을 거쳐 실무 경험을 쌓은지 2년이 되었다!

 

개발자로서 일하는 것이 즐겁고 적성에 맞다고 느낀다.

물론 이 생각은 중간 중간 바뀌기도 한다ㅎ (몰려온 업무, 결함, 부족한 지식 등으로 인해..)

 

올해 여름이 과도기였다.

현재 회사에서 어느정도 적응이 끝나고 나니, 내가 과연 하루 하루 성장하고 있는 걸까 하는 의문이 들었다.

주니어 개발자로서 성장하기 위해 열정적으로 매일 매일을 노력해야 하는데

퇴근하고 운동하는 날이 아니면 바로 침대에 누워 기절하듯 잠을 자고, 다시 출근하는 나의 패턴에 문제가 있다고 느껴졌다.

그래서 기존에 마무리하지 못했던 프로젝트를 다시 잡고 진행하기 시작했고

그동안 공부했던 개념들을 다시 복습하거나 새로 배우면서 퇴근 후의 시간을 채워 나갔다.

이러한 기간이 2-3개월 쯤 됐을까? 조금씩 지치기 시작했고 갑자기 정말 아무것도 하기 싫다는 생각이 들었다.

쉼이 필요한 것 같아서 2개월 정도를 평일, 주말 포함 정말 최대한으로 쉬기 시작했다. (쉬는 중간에도 죄책감이 드는 것은 나의 천성인 것 같다🫠)

 

이런 생활이 반복되던 중 당근마켓 컨퍼런스에 운좋게 당첨이 되었다🥕 (정말 이런 데에 운이 하나도 없는데,,)

세션이 나누어져 있어, 현직 프론트엔드 개발자들의 이야기를 들을 수 있는 좋은 기회였다.

강연을 들으며 개발자의 의견에 힘을 실어주고 지원을 아끼지 않는 환경에서 일하는 분들이 부럽고 대단하다고 생각했다.

또한, 프론트엔드 개발자로서 고민하는 부분, 업무 프로세스나 강연 자료 등을 아낌없이 공유해주어서 좋았다.

이 경험이 나태 지옥에 빠진 나에게 긍정적인 자극이 되었다.

컨퍼런스에서 열정 넘치는 프론트엔드 개발자들의 기를 받아, 다시 열정을 가지고 개발에 임하기로 결심했다.

 

최근에는 앱 개발도 할 수 있는 개발자가 되고 싶어서 React Native 강의를 듣기 시작했다.

앱 관련 네이티브 언어를 배우기에는 러닝 커브가 너무 클 것 같아서

계속 써오고 있고 익숙한 React 문법을 활용할 수 있는 React Native 를 배워보면 좋을 것 같았다.

아직 클론 코딩 초기 단계이지만 앱은 웹과는 또 다르다는 점이 신기했고 흥미롭다.

웹/앱 둘 다 개발할 수 있는 것이 목표이다.

 

느리더라도 조금씩은 성장하는 개발자가 되고 싶다.

멈춰있는 개발자가 되지 않도록! 화이팅!

 

 

진행한 업무

업무를 정리하려고 그동안의 커밋 내역들을 살펴보니 참 다양하게도 많은 일을 했다,,

페이지 개발, 신제품 출시를 위한 QA, 공통 유틸 제작 등등,,

그 중 대표적으로 정리해볼 만한 3가지 업무를 기록해 보려고 한다.

 

1. IndexedDB 공통 유틸
2. 권한 적용 (커스텀 훅)
3. 사용자 설정 정보 전역으로 세팅 (로컬스토리지)

 

🏝️  IndexedDB 공통 유틸

IndexedDB 공통 유틸 구현과 사용법에 대해서는 게시글을 따로 작성해 두었다.

공통 유틸을 개발하게 된 계기는 추후에 사용자가 개인화된 서비스를 이용하기 위해서 필요한 정보들을 저장할 곳이 필요했기 때문이다.

대용량의 데이터의 경우 로컬스토리지 만으로는 부족하기 때문에 IndexedDB 를 이용하도록 세팅해 놓기로 했다.

 

자주 사용했던 로컬스토리지에 비해 낯선 개념과 복잡한 사용법 때문에 작업하는데 어려움이 있었다.

 

[ 공통 유틸에 들어간 내용 ]

• 데이터베이스 열기
• transaction 공통 함수
• 데이터 쓰기
• 특정/전체 데이터 조회
• 데이터 수정
• 특정/전체 데이터 삭제
• 데이터베이스 삭제
• Object Store 추가

스프린트 완료 리뷰에서 해당 내용에 대해서 발표하게 되었다.

공통 유틸을 제작하게 된 이유, 어떻게 사용해야 하는지 테스트 페이지를 제작해 시연했다.

추가로 사용 가이드 md 파일을 만들어 공유했다.

 

 

🏝️  권한 적용 (커스텀 훅)

관리자가 사용자에게 권한을 할당하여 일부 서비스만 이용할 수 있도록 제한할 수 있다.

예를 들어, 사용자에게 A 메뉴 조회 기능만 할당한다. 그러면 해당 사용자는 A 메뉴 조회를 조회할 수 있지만 수정/삭제는 못하고 B 메뉴를 볼 수도 없다.

 

권한에는 2가지 처리가 필요했다.

- 메뉴에 대한 조회 권한 처리

- 아이템에 대한 CRUD 권한 처리

 

모든 페이지에서 권한 처리가 필요하기 때문에 커스텀 훅을 제작해서 사용할 수 있도록 작업했다.

전체 서비스에 세팅하려면 각각 페이지마다 다른 코드를 분석해야 됐기 때문에 오래 걸리기도 했고, 어려움이 있었다.

그렇게 1차로 세팅이 다 끝났다. 이후에 내부에서 회의한 후 적용 방식 변경이 필요해서 2차로 또 전체 서비스를 수정해야 했었다.

여기서 또 고비를 맛 봤지만 권한에 대한 지식과 경험을 쌓을 수 있었던 뿌듯한 업무였다.

 

 

🏝️  사용자 설정 정보 전역으로 세팅 (로컬스토리지)

가장 최근, 현재까지 작업하고 있는 업무이다.

로그인 시 사용자가 설정한 정보를 로컬스토리지에 저장하고, 저장된 정보를 페이지에서 가져다 쓰는 식으로 변경해야 했다.

(기존에는 개인화를 생각하지 않고, 페이지에서 하드코딩으로 정보들을 세팅해 놓았었다.)

 

작업 순서는 이렇게 됐다.

1. 사용자가 직접 설정할 수 있는 페이지 개발
2. (안정적인 동작 확인 후) 로그인 시 설정 정보를 로컬스토리지에 저장하도록 세팅
3. 해당 정보를 가져다 쓰는 페이지에 로컬스토리지에서 가져다 쓰는 로직 적용
4. 방식 변경에 대한 공지

이렇게 보면 매우 매끄럽게 업무가 진행이 된 것 같아 보이지만 개인적으로 실수를 해서 반성하는 마음으로 적어본다,,

로컬스토리지에 데이터가 없을 경우에 대한 처리를 안해놨던 것이다..😩

이로 인해 패치된 후에 개발 서버에 배포된 화면이 흰 화면(..ㅎ)으로 나와서 어떤 서비스도 이용하지 못하게 되었다,,

일단 임시로 로컬스토리지에 해당 key 값과 빈 정보를 넣도록 공지를 올렸고, 그동안 재빠르게 수정했다,,

 

사실 로그인 시점에 로컬스토리지에 데이터를 저장하는 로직에는 이 처리를 해놨다.

그러나 로컬스토리지에 저장된 값을 사용하는 페이지에서 null 처리를 안해놓은 것이다.

애초에 로그인 시점에 로컬스토리지에 데이터를 세팅하지 않았으면 로그인이 되지 않도록 처리를 해놨기 때문에,

저장된 값을 사용하는 페이지에 도달하지 못하니까 null 처리가 필요 없다고 생각했었다.

 

하지만 현재 프로젝트가 모노레포를 기반으로 한 MFA 환경을 갖추고 있어서

shared 폴더에 넣은 파일들은 모든 서비스들이 사용하기 때문에 처음 페이지를 렌더링 할 때 해당 폴더도 읽는 것이다.

따라서 shared 내부 파일에서는 null 처리가 필요했던 것이다.

(물론 shared 폴더가 아니더라도 사용하는 모든 곳에서 null 처리가 필요하다)

 

예외 처리에 대한 실수를 했기 때문에 머리에 새기고,, 앞으로 코드를 작성할 때 이런 부분에 대해서 꼭 인지해야겠다고 다짐했다,,!

 

이후에 로컬스토리지에서 값을 바로 꺼내 쓰는 방식에서 recoil 을 사용해 관리하는 방식으로 변경했다.

로컬스토리지의 경우 사용자가 데이터를 수정하면 페이지에 바로 반영되지 않고 새로고침해야 반영되는 문제가 있기 때문에

recoil 을 통해 해당 값을 관리해서 변경된 것을 바로 감지해서 보여주는 식으로 변경했다.

 

현재 진행하고 있는 프로젝트에 대한 이해가 부족하고, 예외 처리에 대한 중요함을 간과했던 나의 잘못임을 다시 한 번 반성한다,,💧