프론트엔드 개발

남윤하

더 나은 웹페이지를 만들기 위해서 고민하고 공부하는 것을 즐깁니다. 코드를 알아 보기 쉽고 간결하게 짜려고 노력합니다. 
무엇보다 프로그래밍 공부 하기를 즐겨하며 계속해서 더 나아가려고 합니다.

Dallaem공용 repository

포트폴리오

Github

Velog

유저가 바쁜 일상 속 휴식을 위한 다양한 모임을 탐색하고 참여하며, 직접 모임을 개설하고 리뷰를 생성할 수 있는 서비스<ol><li>사용 기술 스택: <ul><li>programming language: JavaScript, TypeScript</li><li>framework: React, Next.js</li><li>state Management: React Query, Zustand</li><li>library: React Hook Form</li><li>test library: Jest, React Testing Library </li><li>CSS library: Framer motion, Tailwind CSS</li></ul></li><li>구현기능: 리뷰 목록, 모임 만들기<ol><li>SSR과 CSR을 이용한 리뷰 목록 만들기</li><li>Loading Skeleton을 이용한 UX 상향</li><li>React Hook Form의Controller 컴포넌트를 이용한 데이터 처리</li></ol></li><li>공용컴포넌트: Button, calendar, Tab, Lazy-Loading Component</li><li>추가되어야 할 것: throttle나 debounce를 통한 연속된 이벤트 처리</li></ol>URL: <a target="_blank" rel="noopener noreferrer nofollow" href="https://dalleam-black.vercel.app/">https://dalleam-black.vercel.app/</a>

Dallaem

가고자 하는 카페를 찾고 싶을 때 사용할 플랫폼입니다.<ol><li>사용 기술 스택: <ul><li>programming language: JavaScript, Typescript</li><li> framework: React, Next.js</li><li> state Management: React Query, Zustand, </li><li> CSS library: Tailwind CSS, React Hook Form</li></ul></li><li>구현 기능: 회원가입, 로그인/로그아웃, 리뷰작성, 유저정보 수정, 삭제<ol><li>react-hook-form을 사용한 구현</li><li>이미지 미리보기 구현</li><li>debounce를 이용한 로그인 회원가입 검색 기능 구현</li></ol></li><li>추가 되어야 하는 것: API연결 (중간에 백엔드 개발자의 이탈로 API연결 X)</li></ol>URL: <a target="_blank" rel="noopener noreferrer nofollow" href="https://masil.vercel.app/">https://masil.vercel.app/</a>

Masil

<h2>대시 보드 페이지 구현</h2><ul><li>gnb 및 ue 지도 구현 (gnb의 위치를 이미지 상에 나타냄, 해당 gnb에 대한 정보를 모달로 표시)</li><li>이벤트로그 리스트 작업 (무한 스크롤 적용)</li></ul><h2>다국어 번역 기능 구현</h2><ul><li>i18next를 이용해서 프로젝트 언어 전환 작업 (영어, 한국어)</li></ul><h2>가입자페이지 고도화 작업</h2><ul><li>가입자 crud 작업</li></ul><ul><li>기존에 처리되지 않았던 작업들 수정</li></ul><h2>프로필 페이지 작업</h2><ul><li>프로필 crud 작업</li></ul>