천지인 이력서

안녕하세요,
프론트엔드 개발자 천지인입니다.

자바 기반의 풀스택 과정 중, 프론트엔드에 빠져 JavaScript, React, Next.js를 이용한 프로젝트들을 진행했습니다. 최근에는 빠르게 제품을 만들고 시장에서 테스트하는 MVP 개발과 적은 리소스로 높은 생산성을 가질 수 있는 크로스 플랫폼인 React-Native에 관심이 많습니다.

다른 직군과의 협업을 중시하며, 소통을 위해 개발뿐만 아니라 기획과 디자인에 대해서도 학습하고 있습니다. 협업을 통해 개인이라는 한계를 넘어 시너지를 만들 수 있다고 믿습니다.

프로젝트

Tell Me

2023.07 ~ 2023.08

[라이브러리를 활용하여 토큰의 안정성 확보]

프로젝트에서 소셜 로그인 기능을 구현하던 중, 토큰 저장을 위해 로컬 스토리지를 활용하려 했습니다. 그러나, 브라우저의 시크릿 모드 사용 시 로컬 스토리지 접근 제약으로 오류가 발생하는 문제에 직면했습니다.

이 문제를 해결하기 위해 두 가지 방법을 고려해보았습니다. 첫번째는, 직접 예외 처리를 통해 문제를 해결하는 방식이고, 두번째는, @toss/slash 라이브러리의 웹 스토리지 기능을 활용하는 방법입니다. 각 방법의 장단점을 비교 분석한 결과, 프로젝트의 기간이 한 주로 짧았기 있기 때문에, 라이브러리를 사용하는 것이 더 적절하다 판단하게 되었습니다.

하지만 라이브러리의 공식 문서에 내부 동작 방식에 대한 명확한 설명이 부족하여, 라이브러리의 내부 코드를 분석하고 동작 방식을 이해하기 위한 작업을 진행했습니다.분석 결과, @toss/slash 라이브러리는 로컬 스토리지 접근이 제한된 환경에서도 데이터를 안정적으로 관리하기 위해 Map 객체를 활용해 데이터를 메모리 에 저장하는 메커니즘을 가지고 있음을 확인했습니다.

결과적으로 브라우저의 시크릿 모드나 테스트 환경과 같이 Web Storage를 쓸 수 없는 환경에서도 에러 없이 기능이 작동하도록 구현함으로써, 서비스의 안정성을 증가시킬 수 있었습니다.

Window 98 Todo Web

2023.03 ~

[FireStore를 이용해 서버리스 아키텍쳐를 적용해 풀스택으로 구현]

프로젝트를 리팩토링하며 Todo List를 개별 사용자별로 영구적으로 저장하기 위해 작업할 때의 일이었습니다.

기존 시스템에서는 Todo를 상태로만 관리했습니다. 그래서 웹 세션을 종료할 때마다 사용자의 Todo 데이터가 초기화되는 문제가 발생했고 프로젝트를 일주일 내에 제출해야 하는 상황이었습니다.

문제 해결을 위해 웹 스토리지와 백엔드 서버 구축을 고려했으나, 웹 스토리지는 사용자의 디바이스가 바뀌면 데이터가 초기화된다는 문제가 있었고, 백엔드 서버를 구축하는 것은 구현 기간을 맞추지 못할 가능성이 컸습니다. 이 때문에, 낮은 비용과 러닝 커브로 사용할 수 있는 다른 방법을 찾던 중, 서버리스 아키텍처인 Firebase에 대해 알게 되었습니다.

특히 BAAS (Backend as a Service) 형태로 제공되는 Firebase는 초기 세팅과 배포가 간단하고 빠르다는 것, 서버 구축 및 유지 보수에 대한 걱정이 없다는 점, 인증과 같은 다양한 기능을 제공함으로써 확장성이 좋다는 점, 그리고 실시간 데이터 동기화가 가능하다는 장점이 있었습니다. Todo 기능의 특성상 고도의 커스터마이징이나 복잡한 쿼리가 필요하지 않았으며, 초기 사용자의 규모가 작았기 때문에 사용량에 대한 비용도 문제가 되지 않았습니다.

결과적으로 Firebase의 BAAS(Backend as a Service)를 도입하여 DB와 프로젝트를 연동함으로써, 서버 구축 없이도 Firebase의 FireStore(DB)와 기존 프로젝트를 효율적으로 연결할 수 있었음은 물론, 서버를 구축하는 시간 자체를 줄여 하루 만에 구현을 완료했고, 목표로 했던 각각의 사용자마다 다른 Todo List를 저장하고, 웹 세션 종류 후에도 사용자의 데이터를 안전하게 보관하는 기능을 구현할 수 있었습니다.

쓰레기 재활용 커뮤니티 프로젝트

2023.05 ~ 2023.05

[토큰 유효성 검사를 위한 Interceptor 기능을 활용해 코드 중복 제거]

쓰레기 재활용 커뮤니티의 프론트엔드 개발 중, API 요청에 앞서 인증 토큰과 리프레시 토큰의 유효성 검증을 위한 별도의 API를 호출 해달라는 요청이 백엔드 팀으로부터 있었습니다.

만약 기존 모든 API에 유효성을 검증하는 API를 호출하는 코드를 추가할 경우, 코드의 중복성이 크게 증가하며, 확장성에도 문제가 생길 것으로 판단되었습니다. 이 문제를 해결하기 위해 사용하고 있던 HTTP 라이브러리인 Axios의 문서를 조사했고, Axios의 Interceptor라는 기능을 발견할 수 있었습니다.

API 요청 전후로 특정 로직을 삽입할 수 있는 Interceptor에는 두 가지 적용 방식이 있었습니다. 첫 번째 방식은 특정 Axios 인스턴스에만 적용되는 방식으로, 유연성을 제공하며 다른 인스턴스에는 영향을 미치지 않았습니다. 반면, 두 번째 방식인 axios config에 interceptor를 추가하는 방식은 모든 API 호출에 동일한 로직을 적용할 수 있지만, 특정 요청에 대한 로직을 변경하려면 매번 추가적인 코드 수정이 필요했습니다.

프로젝트의 확장성과 유연성을 고려하여, 최종적으로 특정 Axios 인스턴스에만 Interceptor를 적용하는 방식을 선택해서 구현했습니다.

결과적으로, Axios의 Interceptor를 통해 인증 토큰과 리프레시 토큰의 유효성을 체크하는 로직을 구현하면서, 코드의 중복을 크게 줄이고 백엔드 팀의 요청도 성공적으로 구현할 수 있었습니다.

자기소개서

실행력

저는 빠른 실행력으로 소비자가 원하는 것을 만드는 개발자가 되기 위해 노력하고 있습니다. 시장에 맞춰 빠르게 필요한 기술을 배워 기능을 만들어내는 것이 중요하다고 생각합니다. 이를 위해 새로운 도구나 방법을 학습하는 것을 꺼리지 않으며, 그것이 더 나은 결과를 가져올 수 있다면 적극적으로 받아들입니다.

현재는 시장 가설을 빠르게 검증할 수 있는 효율적인 도구인 크로스 플랫폼, React Native에 대해 학습하고 있습니다. 이를 통해 개발 리소스를 줄이고 효율성을 높여, 사용자의 요구를 더 빠르고 정확하게 반영할 수 있게 될 것을 기대하고 있습니다.

회사와 함께 성장

저는 '왜'라는 질문을 통해 기술의 깊이 있는 이해를 추구하는 개발자가 되기 위해 노력하고 있습니다. '왜 이 기술을 선택해야 하는지', '왜 이렇게 동작하는지'와 같은 질문을 통해 기술적으로 깊이있게 고민하고 더 나은 방법을 고민합니다.

이를 위해, 기술적인 깊이를 더하는 것을 중요하게 생각하며, 실제로 스터디를 통해 자바스크립트에 정말로 딥 다이브 해보는 경험을 하고 있습니다. 저의 목표는 지속적인 학습을 통해 배운 것을 서비스에 적용하고, 빠르게 변하는 기술 트렌드에 맞춰 회사와 함께 나아가는 것, 이를 통해 회사와 함께 성장하는 개발자가 되는 것입니다.

학력 및 교육

프론트엔드 과정코드 스테이츠

2022.12 ~ 2023.06

자바 풀스택 과정KH 정보교육원

2022.06 ~ 2022.11

한국외국어대학교 글로벌캠퍼스Global Business & Technology 전공

2015.03 ~ 2021.08