미리보기

• 이커머스 사이트 최적화 및 유지보수

  • 불필요한 코드는 지우고 코드 재사용성을 높여 웹사이트를 최적화하고 유지보수하여 사용자 경험과 사이트 성능을 개선

• 내부 시스템 개발

  • 공통 컴포넌트 제작

  • 전반적인 디자인과 Chart.js를 사용하여 데이터 시각화

  • 상세페이지에 등록할 HTML 코드가 필요한 경우 해당 이미지 등록 시 각 사이트 규격에 맞는 HTML 코드 추출

• 디자인 시스템 구축

  • 브랜드 고유한 요구에 맞춘 새로운 컴포넌트 디자인 시스템 구축

• Technology used: HTML/CSS, JavaScript, TypeScript, ReactJS, NextJS, Github, NodeJS, Shopify

• 웹사이트 디자인 및 개발

  • 디자인부터 전반에 걸쳐 참여하며 다양한 반응형 및 적응형 웹사이트를 개발

• 고객 서비스 이메일 연동

  • PHP를 사용해 고객이 서비스 팀과 직접 연결할 수 있는 이메일 서비스를 구현

• Technology used: HTML/CSS, JavaScript, jQuery, PHP, Adobe Photoshop, Adobe XD, Figma

• 웹사이트 디자인 및 제작

  • Cafe24 플랫폼을 활용해 다양한 온라인 스토어를 구축하고, 요구에 맞게 기능을 확장 및 커스터마이징

• 브랜딩 전략 협업

  • 마케팅 및 디자인 팀과의 브레인스토밍에 적극적으로 참여하여 효과적인 브랜딩 전략을 수립

• Technology used: HTML/CSS, JavaScript, jQuery, Cafe24, Adobe Photoshop

• 다양한 산업의 웹사이트 디자인

  • 소매, 농업, 의료, 교육 등 다양한 산업의 클라이언트를 위해 웹사이트를 디자인

• 클라이언트 협업

  • 직접 소통하여 비즈니스 요구 사항을 명확히 하고, 맞춤형 디자인 솔루션을 제공

• Technology used: HTML/CSS Adobe Photoshop

PEasyFit, 체대 입시생을 위한 스마트한 기록 관리

#v1 일지 - PEasyFit released (MVP)

• 기록한 데이터를 최근 5개의 기록으로 테이블 형식과 그래프 형식으로 비교 가능

• NextAuth 인증 API를 활용하여 간편한 구글 로그인 (OAuth) 및 세션 관리

• Firebase에서 제공하는 함수들을 이용하여 Firestore 데이터 관리

• SWR을 사용하여 data fetching 및 자동 캐싱 및 갱신, 에러 및 로딩 핸들링

• Technology used: TypeScript, ReactJS, NextJS, Next-Auth, SWR, ChartJS, TailwindCSS, vercel, Firebase, vercel, Github, HTML/CSS

체대 입시생들을 위한 것으로 헬스장에서 기록하며 운동하는 사람들에게 모티브를 얻어 만들게 되었습니다. 제시된 종목 안에서 본인의 리스트를 최대 4개까지 만들 수 있고 정수부분 3자리 소수점 2자리까지 입력 가능하게 구현했습니다. 내 기록을 최근 5개의 기록 표로 볼수있고 chartjs를 사용하여 비교하기 쉽도록 차트형태 로도 볼 수 있도록 하였고, useMemo를 통해 cache를 통해 같은 값에 대해서는 재렌더링을 하지않고 캐싱된 데이터를 사용하며 성능적으로도 생각하며 구현하였습니다.

토론토에서 진행한 그룹프로젝트 일환으로 Edamam API를 활용해 레시피를 제공하고, 사용자들이 자신의 이야기를 공유할 수 있는 푸드 커뮤니티

• 웹사이트 전체적인 디자인 및 로그인된 사용자만 접근할 수 있도록 설계, 로그인하지 않은 사용자가 메뉴를 클릭할 경우 자동으로 로그인 페이지로 리다이렉션 되도록 경로 설정

• Firebase 인증과 Firestore를 활용하여 사용자가 처음 로그인 시 사용자 정보를 Firestore의 Users 컬렉션에 저장, 이 후 로그인을 관리하는 기능 구현

• OpenAI 사용하여 재료 키워드로 레시피 생성 가능, 해당기능 이용 시에는 step1만 입력 가능하도록 설정

• 마이페이지 안에서 사용자가 로그아웃할 수 있는 기능과 함께, 세 개의 탭을 통해 사용자 이름 편집, 작성한 레시피 및 게시물 조회, 북마크 항목 조회가 가능하도록 구성

• Technology used: TypeScript, ReactJS, TailwindCSS, vite, Github, openAI, Firebase, HTML/CSS

해외에서 다른 나라 멤버들과 하는 첫 프로젝트, 4명이서 시작한 프로젝트는 기획단계부터 시행착오도 있었고 중간에 몇몇 멤버들이 빠지는 이슈로 최종적으로 2명이서 일주일 안에 발표준비까지 해야만 했습니다. MVP를 설정하여 각자 맡은 부분을 최대한 작업하였고, PM으로 매니징 해주신 인스트럭터가 openAI key를 공유해주며 한 번 써보면 좋겠다고 추천해주셔서 간단한 작업이지만 사이트내에 적용해보기도 하였습니다. 다른 멤버가 헤맬 때 같이 공부하며 해결할 수 있었고, 공통 컴포넌트를 활용하여 최대한 재사용을 할 수 있게 작업하였고, 하루에 한 번씩 피드백을 통하여 사이트의 성능을 높이고자 하였습니다.