미리보기
기본 정보
- 더 나은 선택을 하기 위해 경험을 기록합니다. 피드백을 받을 때마다 즉각적으로 반영하고, 추후 더 나은 결정을 내리기 위해 Notion에 피드백 내용과 함께 새로 얻은 지식 등을 기록하고 있습니다. - 경청과 수용을 기반으로 의사소통합니다. 군에서 장교로 임무를 수행하면서 의견 표현과 상대방의 의견을 수용할 줄 아는 자세를 배웠고, 이를 통해 조직 내에서 원활한 협업과 의사 결정을 끌어낼 수 있는 역량을 발전시켰습니다. - 사용자 가치 실현의 의미를 알고 있습니다. 피그마 플러그인을 개발하고, 피그마에 배포한 경험이 있습니다. 사용자들의 피드백을 꾸준히 수렴하여 지속적인 리팩토링을 통해 사용자 경험을 개선하고, 서비스 사용자들이 더 큰 가치를 느낄 수 있도록 노력하고 있습니다.
교육
충북대학교
대학교(학사) | 컴퓨터공학과
2017.03. ~ 2021.03. | 졸업
바닐라코딩
사설 교육 | 풀스택 과정
2023.09. ~ 2024.02. | 졸업
자격증
정보처리기사
- | 한국산업인력공단
2022.06.
포트폴리오
URL
기술 스택
React, JavaScript, HTML/CSS, Node.js, Express, MongoDB, Mongoose, Redux, zustand, AWS
프로젝트
Figci
기타
2024.01. ~ 2024.02.
Figci는 디자인 협업 도구로, Figma 프로젝트 파일의 형상 관리를 위한 웹 서비스 및 피그마 플러그인 서비스입니다.
사용자가 선택한 버전 간의 디자인 차이점을 분석하여 변경 사항을 시각화하고, 텍스트로 표시하여 사용자에게 제공합니다.
FrontEnd
클라이언트 상태와 서버상태의 분리 (기여도: 80%)
서버 상태를 Zustand로 관리하려다 보니 로직이 점차 비대해지고, 일관성 있는 코드를 작성하기 어려워지는 문제가 발생함에 따라 React Query를 도입하여 상태를 분리함으로써 유지보수성을 향상시켰으며, 캐싱 기능을 활용하여 서버 성능을 최적화.서버로 우회하여 발급받은 AccessToken을 클라이언트에 전달 (기여도: 80%)
피그마 플러그인 환경에서 OAuth 인증을 서버 측에서 처리하는 과정에서, 클라이언트 측에서는 서버의 인증 완료 시점을 알 수 없어서 Polling 방식을 도입.
이를 통해 클라이언트가 서버가 인증이 완료된 시점을 감지하고, 서버로부터 발급받은 Access Token을 수신할 수 있도록 처리PostMessage를 활용하여 Plugin의 Sandbox와 UI를 연결 (기여도: 50%)
피그마 플러그인은 한정적인 API에만 접근할 수 있는 별도의 Sandbox 내에서 실행되고,
UI는 iframe 위에서 실행되어 웹으로 구축된 피그마와는 분리돼서 실행됨에 따라 PostMessage API를 활용하여 상호 통신 구현
BackEnd
정확한 노드 비교를 위한 피그마 데이터 서브 트리 평탄화 (기여도: 40%)
사용자가 비교하고자 하는 두 버전의 피그마 데이터 트리를 동시에 순회하며 노드의 변경 사항을
파악하려 했으나, 새로운 요소가 추가되거나 삭제되면 트리의 레벨이 달라지는 문제가 발생하여 피그마 데이터 서브 트리를 BFS를 활용하여 평탄화함으로써 해결UX를 고려한 네트워크 응답 속도 개선 (기여도: 80%)
사용자의 변경 사항 결과 요청에 대한 응답을 제공할 때 DB를 사용하는 로직과, DB를 사용하지 않는 두가지 로직을 테스트를 통해 비교 후 더 효율적인 방안을 채택함으로써 네트워크 요청 평균 응답 속도 1951ms -> 802ms 로 개선두개의 Figma Data Tree를 Diffing 하여 변경 사항 도출 (기여도: 90%)
Figma API로부터 받은 사용자가 비교하고자 하는 피그마 데이터 트리를 대상으로 DFS를 활용한 피그마 요소의 프로퍼티 값을 비교하는 Data Tree Diffing 로직을 구현하여, 두 버전의 데이터 트리 변경 사항을 도출Figma 플러그인 환경에서 OAuth 인증 구현 (기여도: 80%)
Electron 환경에서 동작하는 피그마 플러그인은 클라이언트에서 OAuth 인증이 불가능했기에
Proxy Server를 중개한 뒤, 인증에 필요한 Callback URL을 클라이언트가 아닌 해당 서버로 설정해줌으로써 서버 측으로 우회하여 OAuth 인증을 구현
MDXpress
기타
2024.03. ~ 2024.03.
MDXpress는 사용자가 MDX 문법을 자유롭게 작성하고 편집할 수 있는 온라인 코드 에디터 서비스입니다.
다양한 써드파티 라이브러리를 지원하며, 사용자가 작성한 코드의 현재 상태를 저장하고 링크를 통해 다른 사람과 손쉽게 공유할 수 있는 기능을 제공합니다.
FrontEnd
써드파티 라이브러리 API 제공
사용자에게 써드파티 라이브러리 API를 제공하기 위해 CDN 방식을 모방하여
사용자가 원하는 라이브러리 코드가 담긴 script 태그를 동적으로 생성한 뒤 전역 변수에 바인딩함으로써 라이브러리를 사용할 수 있도록 구현실시간 하이라이팅 되는 코드에디터 제공
사용자가 코드를 작성하는 컴포넌트와 작성된 코드를 하이라이팅 하여 렌더링하는 컴포넌트를
분리한 뒤, 두 컴포넌트를 동기화하여 사용자가 코드를 작성하는 동안 실시간으로
하이라이팅된 코드를 확인할 수 있도록 구현독립적인 테스팅 환경 조성
Mock Service Worker를 도입하여 로컬 환경에서 테스트 시 클라이언트에서 자체적으로
모의 네트워크 요청을 처리하도록 함으로써 실제 서버와는 독립된 클라이언트 테스트 환경 구현
BackEnd
TTL을 활용한 DB 부하 관리
비 로그인 유저도 코드를 저장할 수 있는 기능을 제공하면서 DB의 부하를 줄이기 위해 TTL 인덱스를 도입하여 일정 시간이 지난 후 저장된 데이터를 자동으로 삭제하도록 구현.
구현 과정에서 TTL로 인해 발생하는 삭제 이벤트는 Mongoose의 pre 미들웨어로 감지되지 않는 문제가 발생함에 따라 MongoDB에서 제공하는 ChangeStream을 도입하여 해결.Webpack을 이용한 라이브러리 코드 번들링
써드파티 라이브러리 API를 제공하기 위해 사용자가 요청한 라이브러리를 설치한 뒤,
해당 라이브러리의 EntryPoint를 찾아 Webpack을 이용하여 의존성을 포함한 번들링 된 코드 도출라이브러리 설치 환경 분리 자세히 보기
사용자가 요청한 라이브러리를 서버에 직접 설치하여 의존성 충돌 문제와 서버 자원의 제한적인 사용으로 인한 문제가 발생함에 따라 Docker를 도입하여 각각의 써드파티 라이브러리를 독립적인 컨테이너 환경에서 설치하고,
이후 해당 컨테이너를 삭제함으로써 서버 자원을 효과적으로 관리하고 의존성 충돌 문제를 해결