안녕하신가요
일상의 문제를 소프트웨어적으로 해결하는 것에
흥미를 느끼며 큰 가치를 둡니다.
최근에는 친구와 함께
교내 중앙 동아리 플랫폼을 기획하고 개발하며
또 다른 일상의 문제를 해결해 나가는 중입니다.
협업에서 가장 중요한 것은
주인의식이라고 생각합니다.
주인의식을 가지고 임할 때, 적극적이고 진지하게
서비스의 개선 방향에 대해
고민할 수 있는 것 같습니다.
프로젝트
- 소개
학과 동아리 생활을 편리하게 공유하고 유익한 정보를 제공하는 웹 서비스
- 배경
기존 홈페이지는 2005년에 제작되어 유지보수 문서가 부재해 개선이 불가했으며, 정보를 한눈에 파악하기 어려운 UI/UX의 개선 필요성을 느낌.
- 기본 정보
기간
2023.07~2024.02 (유지보수 중)
인원
FE 2명, BE 1명
내 역할
FE
사용 기술
React / TypeScript / Tailwind CSS / Axios / Tanstack Query / React Hook Form / React Router / Vite
- 아키텍쳐
- 역할
- UI/UX 개선
- • 기획 단계에서 팀원들과 Notion에 분석한 요구사항을 정리하고, 전반적인 UI/UX에 대한 아이디어를 제시하고 공유
- • Tailwind css가 제공하는 반응형 디자인을 활용해 여러 화면 크기에서 일목요연하게 보이게 UI를 구현
- • 홈 화면에 즉석사진 섹션을 두어 동아리원들끼리 찍은 즉석사진을 온라인에 공유할 수 있는 기능을 제공
- • Tanstack Query의 useInfiniteQuery를 사용해 페이징 처리를 무한스크롤로 구현하여 페이지 이동 최소화
- • 컨텐츠 로딩 효과에 스켈레톤 애니메이션을 사용해 요청이 진행 중임을 표시
- • 에러 바운더리를 사용해 여러 에러 상황 대처하여 서비스 안정성 향상
- DX 개선
- • GitHub 커밋 컨벤션을 정의하고, URL과 같은 공통 상수 관리에 대한 체계를 세워 작업 효율 개선
- • React의 props, TypeScript의 optional parameter 활용해 게시물 등록 및 수정 시 공통으로 사용할 수 있는 폼 구현 등 컴포넌트 주도 개발 수행
- 성능 개선
- • IntersectionObserver와 useRef를 활용한 지연로딩 적용으로 메인 페이지 진입 시 API 요청 횟수 개선
- • Tanstack Query 캐싱 기능 관련 옵션 활용해 재방문 시 컨텐츠 로딩 속도 개선
- • 좋아요 기능에 debounce를 적용해 짧은 시간 내 중복 요청을 못하게 하여 서버 비용 최적화
- • 사진 목록 컴포넌트 같이 자주 리렌더링되는 컴포넌트에 React의 memo를 적용해 렌더링 최적화 수행
트러블 슈팅
- 결과물
메인
사진게시판-목록
사진게시판-상세
사진게시판-댓글
사진게시판-등록
회원가입요청
회원정보수정
메인-반응형
기술 스택
언어
기본적인 타입체계를 이해하고 있으며, 유틸리티 타입, 타입 단언, 타입 좁히기를 적절히 사용할 수 있습니다.
기본적인 동작원리와 Promise, Async&Await, 전반적인 배열 메서드를 이해하고 있습니다.
코딩테스트에 주로 나오는 알고리즘 수준까지 구현할 수 있습니다.
프론트엔드
시멘틱 마크업을 사용하는 것을 중요하게 생각합니다. link 요소의 rel 속성 preconnect, preload, prefetch를 활용해 최적화한 경험이 있습니다.
상황에 맞게 Flex, Grid display를 적절히 활용할 수 있습니다.
breakpoints를 기준으로 반응형 디자인을 수월히 할 수 있습니다.
상태관리 훅과 메모이제이션을 위한 훅을 적절히 사용할 수 있습니다.
인터넷 강의 수강을 통해 페이지 라우터와 앱 라우터 간의 차이에 대해 이해했습니다. SSG, SSR, CSR 구현 방식과 캐싱 메커니즘에 대해 파악하고 있습니다.
Axios를 사용해 기본적인 REST API를 구현할 수 있으며, Axios-mock-adapter, Axios-interceptor를 활용할 수 있습니다.
query, mutation 개념을 이해하고 있으며, 무한스크롤, 낙관적 업데이트를 서비스 구현에 활용할 수 있습니다.
폼 상태를 일괄적으로 관리하는 방법을 알고 있으며, zod와 같은 유효성 검증 라이브러리와 함께 사용할 수 있습니다.
백엔드 / 데이터베이스
간단한 웹 애플리케이션 서버를 구축할 수 있습니다.
조인, 서브쿼리 심화 쿼리를 작성할 수 있으며, 테이블 정규화 경험이 있습니다.
기본적인 CRUD를 수행할 수 있으며, 복합 인덱스를 활용해 쿼리 속도를 개선한 경험이 있습니다.
인프라
기본적인 명령어들을 수행할 수 있으며, 파일 시스템, 사용자 관리에 대해 이해하고 있습니다.
전반적인 서비스에 대해 이해하고 있으며, 공식 문서를 통해 여러 실습을 진행하고 프로젝트를 통해 여러 서비스들을 활용해본 경험이 있습니다.
기본적인 Dockerfile 명령어들을 이해하고 있습니다. 3티어 아키텍쳐를 구성할 수 있으며, Docker Compose를 활용해 서버를 구축한 경험이 있습니다.
Service, Controller, Ingress, ConfigMap, Secret yaml 파일을 통해 로컬 환경, AWS에 점진적으로 클러스터를 배포한 경험이 있습니다.
기타
Issue 생성 및 PR을 통한 협업에 대해 이해하고 있으며, 최근 시작한 프로젝트에서 git flow 전략을 도입해 원활한 협업 환경을 조성했습니다.
협업 시 기본적인 문서 정리와 칸반보드와 간트차트를 통한 일정 관리에 주로 활용합니다.
채널과 허들을 활용하여 협업한 적이 있으며, slack api를 활용해 CI 결과 로깅을 구현한 적이 있습니다.
오토 레이아웃과 프레임을 활용해 간단히 디자인할 수 있습니다.
자격증/회화
정보처리기사
SQLD
AWS Certified Solutions Architect - Associate
TOPCIT 수준4 (677점)
OPIc(영어) IH
교육사항
소프트웨어학과
· 학점 3.99 / 4.5 (전공 3.98) · 4학기 연속 이공계 국가우수 전액 장학금 수혜
클라우드 커리어의 시작: AWS 기반 DevOps 엔지니어 교육
· 실습 기반 Linux, Docker, k8s, AWS 교육 진행하며 인프라 전반의 지식 학습 · 4회의 프로젝트로 여러 수강생들과의 협업