프론트엔드 개발자 (신입)

문소희

'함께'라는 단어의 가치를 높게 생각합니다. 
새로운 지식을 스스로 탐구하는 데 그치지 않고 모두와 공유하는 데서 즐거움을 느낍니다. 
다른 직군의 업무에도 흥미가 많고, 업무 효율성을 높이기 위해 질문하고 소통하는 것을 서슴지 않습니다.
변화에 유연하게 적응하고 새로운 도전을 즐기지만, 새로운 기술을 받아들이기 전 늘 신중하게 생각하는 자세를 가지고 있습니다.

협업 지향

유연함

학습 지향

커뮤니케이션

자기 주도적

<p>참여하고, 즐기고, 함께 만들어 나가고, 다양한 직군들과 협업하며 즐겁게 몰입하는 것을 지향하는 IT 사이드 프로젝트 동아리입니다.  <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/JECT-Study">스터디 깃허브 →</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://slashpage.com/ject">스터디 사이트 → </a></p><p>2023년 12월에 프론트엔드 1기로 들어와 현재까지 프로젝트 2개, 미니 스터디 1개, 네트워킹 발표 2번, 네트워킹 모임에 2번 참여하며 다양한 직군들과 계속해서 교류하고 성장 중입니다. </p>

JECT

포트폴리오

<h3>Description.</h3><p>디자이너와 개발자들을 위한 컴포넌트 가이드 위키 페이지입니다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/JECT-Study/Componote-FE">Github →</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.componote.shop/">배포 링크 →</a></p><p>v1. 2024.12.17 ~ 2025.02.15</p><p>v1. Frontend 2명, Backend 2명, Designer 1명</p><p></p><h3><strong>Experience.</strong></h3><p><strong>Front-end 팀원</strong></p><p>styled-components를&nbsp;사용해 24개의 컴포넌트 중&nbsp;18개의 컴포넌트 구현</p><p>Storybook을 사용해 구현된 컴포넌트 디자인 및 사용 방법 문서화</p><p>6개의 페이지 중 5개 페이지 UI 구현</p><p>v1. 기능 명세서에 완료된 기능 13개 중 11개 구현</p><p></p><p><strong>글로벌 내비게이션 바(GNB) 검색 기능 구현</strong></p><ul><li><p>useInfiniteQuery를 사용해 컴포넌트/디자인 시스템 검색 구현</p></li><li><p>잦은 상태 업데이트를 방지하기 위해 useDebounce 커스텀 훅 구현</p></li><li><p>router.push를 사용해 검색된 컴포넌트 클릭 시 상세 페이지로 라우팅</p></li><li><p>router.push를 사용해 검색된 디자인 시스템 클릭 시 외부 디자인 시스템 페이지로 라우팅</p></li></ul><p></p><p><strong>컴포넌트 목록 페이지 구현</strong></p><ul><li><p>IntersectionObserver와 useInfiniteQuery를 사용해 무한 스크롤 구현</p></li><li><p>zustand를 사용해 컴포넌트 필터 칩 선택/정렬 조건 선택 상태 관리</p></li><li><p>router.push를 사용해 카드 클릭 시 컴포넌트 상세 페이지 라우팅 구현</p></li></ul><p></p><p><strong>컴포넌트 상세 페이지 구현</strong></p><ul><li><p>useQuery를 사용해 컴포넌트 상세 페이지 API 연동</p></li><li><p>useRef와 IntersectionObserver를 사용해 목차 바로 가기 구현</p></li></ul><p></p><p><strong>디자인 시스템 목록 페이지 구현</strong></p><ul><li><p>zustand를 사용해 디자인 시스템 정렬 조건(이름순/조회순) 선택 상태 관리</p></li><li><p>router.push를 사용해 카드 내 외부 레퍼런스 버튼 클릭 시 해당하는 외부 디자인 시스템 페이지로&nbsp;라우팅</p></li></ul><p></p><h3>Project Skill.</h3><p>Next.js, TypeScript, Tanstack Query(React-Query), Zustand, Axios, styled-components, Storybook, Vercel</p>

컴포노트

<h3>Description.</h3><p>하루 회고를 돕는 일기 웹 서비스입니다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/JECT-Study/Grass-Diary-Client">Github →</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://grassdiary.site/">배포 링크 →</a></p><p>v1. 2024. 02 ~ 2024.04.05 / v2. 2024. 07 ~ 2024.09.29</p><p>v1. Frontend 3명, Backend 3명 / v2. Frontend 3명, Backend 2명, DevOps 1명, Designer 2명, PM 1명</p><p></p><h3><strong>Experience.</strong></h3><p><strong>PL (Project Leader)</strong></p><p>8개의 페이지 중 4개 페이지 구현</p><p>v1. 기능 명세서에 완료된 기능 19개 중 9개 구현</p><p>v2. 기능 명세서에 완료된 기능 24개 중 10개 구현</p><p>media query를 적용해 온보딩 페이지/마이 페이지/설정 페이지/회원 탈퇴 페이지 반응형 웹 페이지 제작</p><p></p><h4>회원 기능 구현</h4><h5>로그인 페이지</h5><ul><li><p>Axios interceptor로 인증 토큰 자동 추가 및 401 에러 처리 <a target="_blank" rel="noopener noreferrer nofollow" href="https://velog.io/@cconac/%EB%82%B4%EA%B3%B5-100-%EA%B0%84%ED%8E%B8-%EB%A1%9C%EA%B7%B8%EC%9D%B8%EC%9D%B4-%EA%B0%84%ED%8E%B8%ED%95%98%EC%A7%80-%EC%95%8A%EC%95%84%EC%9A%94">학습 블로그 →</a></p></li><li><p>Zustand를 이용해 인증 상태 및 로딩 상태 관리</p></li><li><p>ProtectedRoute hook을 구현해 인가되지 않은 사용자의 페이지 접근 제한</p></li></ul><p></p><h5><strong>로그아웃 (헤더 프로필 드롭다운)</strong></h5><ul><li><p>Axios interceptor로 액세스 토큰 만료(401) 시 자동 로그아웃 처리</p></li><li><p>로그아웃 버튼 클릭 시 사용자 액세스 토큰 삭제 후 온보딩 페이지로 redirect</p></li></ul><p></p><h5>회원 탈퇴 페이지</h5><ul><li><p>tanstack query를 이용해 회원 탈퇴 API 연동</p></li></ul><p></p><h4>온보딩 페이지</h4><h5><strong>반응형 디자인을 위한 커스텀 훅 제작</strong></h5><ul><li><p>break point에 따라 디바이스 너비 판단</p></li><li><p>윈도우 resize 이벤트를 활용하여 실시간으로 모바일 상태 업데이트</p><p></p><p></p></li></ul><h4>마이 페이지</h4><h5><strong>사용자 정보 표시</strong></h5><ul><li><p>tanstack query를 이용해 사용자 프로필, 일기 검색, 일기 목록(페이지네이션) API 연동</p><p></p><p></p></li></ul><h5><strong>연간 잔디</strong></h5><ul><li><p>사용자가 연간 일기를 작성한 수를 시각적으로 보여 주기 위해 잔디 형태의 컴포넌트 구현</p></li><li><p>윤년여부를 판단해, 연도의 일수를 배열로 하여 컴포넌트를 구현</p></li><li><p>배열 내 날짜를 파라미터로 전달하는 일기 조회 API 연동</p></li></ul><p></p><h5><strong>해시태그 필터링 및 최신순/오래된 순 정렬</strong></h5><ul><li><p>tanstack query와 쿼리 스트링을 사용해 해시태그 필터링 및 시간순 정렬 구현</p><p></p><p></p></li></ul><h4><strong>설정 페이지 (닉네임/소개글 수정)</strong></h4><ul><li><p>tanstack query를 이용해 프로필 수정 API 연동</p></li><li><p>zustand를 사용해 프로필 정보 상태 관리</p></li></ul><p></p><h3>Project Skill.</h3><p>React, TypeScript, Tanstack Query(React-Query), Zustand, axios, styled-components, AWS S3/CloudFront/Route53</p>

잔디 일기

<h3>Description.</h3><p>포텐데이 X 클로바 스튜디오 해커톤을 진행하며 구현한 서비스입니다.</p><p>사용자의 메시지를 상황에 맞게 클로바 스튜디오 AI를 사용해 부드럽게 변환해 줍니다. <a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/Cushion-Dev/Cushion-FE">Github →</a> <a target="_blank" rel="noopener noreferrer nofollow" href="https://www.coocian.com/">배포 링크 →</a></p><p>v1. 2024.07.19 ~ 2024.07.28 / v2. 2024.07.29 ~ 2024.08.08</p><p>Frontend 2명, Backend 2명, Designer 1명, PM 1명</p><p></p><h3><strong>Experience.</strong></h3><p><strong>PL (Project Leader)</strong></p><p>styled-components를&nbsp;사용해 13개의 컴포넌트 중&nbsp;9개의 컴포넌트 구현</p><p>5개의 페이지 중 2개 페이지 UI 구현</p><p>기능 명세서에 완료된 기능 13개 중 6개 구현</p><h4></h4><h5>로딩 애니메이션 구현</h5><p>styled-components에서 keyframes 이벤트를 사용해 로딩 애니메이션 구현<br>사용자의 지루함을 덜기 위해 React Hook과 setInterval을 사용해 이미지와 메시지가 주기적(800ms)으로 변경되도록 구현</p><p></p><p><strong>채팅 목록 페이지 구현</strong></p><p>tanstack query를 사용해 검색, 채팅방 삭제, 채팅방 목록, 로그아웃/회원 탈퇴 API 연동</p><p></p><p><strong>서비스 배포</strong></p><p>Naver Cloud Platform과 pm2를 사용해 front-end 서버 배포 <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://cconac.tistory.com/2">학습 블로그 →</a></p><p>Nginx를 사용해 포트포워딩 및 SSL 인증서 발급/설정 <a target="_blank" rel="noopener noreferrer" class="notion-link-token notion-focusable-token notion-enable-hover" href="https://cconac.tistory.com/4">학습 블로그 →</a></p><p></p><h3>Project Skill.</h3><p>React, TypeScript, Tanstack Query(React-Query), Zustand, Axios, styled-components, Naver Cloud Platform</p>