신승준 | Notion

발표하는 모습.jpeg

Contact

이메일. ****[email protected]

Channel

Github. ****https://github.com/metacode22/

함께 배우는 것을 선호합니다. 1년간 3개의 개발 교육 프로그램에 참여하여 스터디와 즉각적인 질의응답을 통해 동기들과 함께 성장했습니다. 말로 설명하며 무엇이 부족한지 깨닫고, 피드백을 통해 서로의 지식을 보완해 나가고 있습니다.
회고를 통해 성장합니다. 매번 프로젝트를 끝내고 블로그에 회고를 기록합니다. 이를 통해 문제 재발을 방지하고 개선점을 찾아 나가고 있습니다.
같이 일하기 편한 개발자가 되는 것이 동료로서의 목표입니다. 소소한 질문과 미소를 섞어 먼저 다가가는 것을 좋아합니다. 팀원의 일을 마치 저의 일인 것처럼 같이 고민하고 해결 방안을 모색합니다.

2023.03 ~ 진행 중

(FE 3명 + BE 4명)

끼니, 맛집 랜덤 추천 및 밥모임 모집 서비스

소개: 무엇을, 누구와 먹을지 고민하는 현상을 해결하기 위해 제작한 서비스입니다.

기술: NextJS, React, TypeScript, React Query, Recoil, Chakra UI, Emotion

컨벤션 자동화를 통해 개발 생산성 향상
- ESLint, Prettier, StyleLint, CommitLint, Husky, Lint-Staged를 이용해 코딩 컨벤션 일치화
- Github Template을 이용해 Github Issues/Pull Request 글 형식 일치화
Kakao Maps API를 이용해 카카오맵 렌더링
- kakao map 객체를 Recoil의 atom으로 저장하는 과정에서 생긴 에러 해결
- 줌 인/아웃, 현재 위치로 이동하는 버튼 구현
Geolocation API를 이용해 현재 위치에 기반한 랜덤 음식점 뽑기 기능 개발
- 더 많은 데이터에서 랜덤 로직을 수행시키기 위해 Promise 활용
사용자간 원활한 소통과 친밀감 형성을 돕기 위해 채팅 구현
- 색상 대비를 늘리기 위해 노란색, 검정색 계열을 사용해 채팅 메시지 표현
- 메세지 전송시간, 날짜 별 구분선을 표시할 수 있도록 구현
밥모임 리스트 페이지, 밥모임 상세 페이지 개발
UI 일관성과 이탈 방지, 사용자 경험을 개선하고자 Skeleton UI로 로딩 화면 구현
설문조사를 통해 피드백 수집 후 리팩터링 및 개선 진행 중
- 모바일 환경에서 주소창으로 인해 높이가 증가하는 현상 해결
- Suspense와 Error Boundary를 통한 선언형 UI 코드로 리팩터링 중

2023.02 ~ 진행 중

(개인)

개인 블로그 개발

소개: 학습한 지식과 프로젝트 회고 기록을 위해 블로그를 개발하여 꾸준히 기록 중입니다.

기술: GatsbyJS, React, TypeScript, Emotion

성능 최적화
- png를 webp로 변환 후 이미지를 Lazy Loading해 네트워크 요청 부하 감소
  - LCP 컨텐츠에는 Eager Loading 되도록 적용
- gif를 video로 변환함으로써 25MB에서 13MB로 네트워크 요청 부하 감소
스크린 리더 테스트, role과 aria-* 속성 부여, 색상 대비 향상, 시멘틱 태그로 웹 접근성 개선
- Lighthouse Accessibility 80점대에서 100점으로 개선
canonical link 설정, robots.txt 작성, sitemap.xml과 robots.txt을 생성해 검색 엔진 최적화
Static Site Generation 방식으로 마크다운 파일들을 빌드 후 렌더링하여 응답 속도 개선

2023.01 ~ 2023.01

(1개월, FE 5명)

빅토리아, 나만의 일대기 만들기

소개: 사진과 함께 개인 일대기를 기록할 수 있는 서비스입니다.

기술: React, TypeScript, Context API, Material UI, Emotion

다크 모드 구현
- Prop Drilling을 방지하고 코드 간결성을 위해 현재 모드를 Context로 저장
- 운영체제 설정과 별개로 모드 선택이 가능하도록 구현
- 재방문 시 이전 모드가 자동으로 적용되도록 localStorage 이용
웹 페이지 초기 로딩 시간 단축
- Intersection Observer API를 통해 이미지 Lazy Loading 구현
Axios의 인스턴스를 활용하여 네트워크 요청 모듈화

2022.11 ~ 2022.11

(2주, 개인)

Vanilla JavaScript만으로 SPA 형태의 노션 구현하기

소개: JavaScript만을 이용하여 SPA 형태의 작은 노션을 구현했습니다.

기술: JavaScript, AWS S3, AWS CloudFront, Github Actions, Webpack