IT 엘도라도 (블로그)
2024.09 (1人 개인 프로젝트)
Notion API/DB와 연동하여 개발한 개인 블로그
- 티스토리 플랫폼에서의 불편함을 해소하고자 직접 개발
- 별도의 데이터베이스 서버 없이 Notion API/DB와 연동하여 개발
- 검색 엔진 최적화(SEO) 고도화 및 검색 엔진 마이그레이션
- 무한 스크롤, 방문/조회 수 추적, 댓글/좋아요 등의 커뮤니티 기능 개발
TypeScript, Next.js, Zustand, React-Query, Tailwind CSS, Notion, Vercel
타임박스 플래너
2024.02 (1人 개인 프로젝트)
타임박스 플래너를 앱으로 활용하기 위한 PWA 기반의 웹사이트
- 한 지인의 요청으로 시중의 앱들보다 최소한의 기능만으로 간결하게 개발
- Supabase Auth와 Vercel PostgreSQL 기반의 Raw SQL로 개발/호스팅 비용 절약
- Zustand를 사용하여 전역 상태 관리를 위한 코드 간소화 및 패키지 용량 절감
Next.js, Zustand, Sass, Supabase, PostgreSQL, Vercel
FOSSLight Hub Lite
2023.09 - 2023.12 (2人 팀 프로젝트)
LG 전자의 FOSSLight Hub 웹사이트를 사용자 기능 중심으로 리모델링한 웹사이트
- LG 전자에서 관리자가 아닌 사용자를 위한 간소화 버전의 웹사이트 개발을 요청
- 기존 FOSSLight Hub 프로젝트의 환경에 통합시켜 기존 사용자들의 접근성 확보
- URL 쿼리 파라미터에 연동되는 정렬/필터 기능 및 모달 열기/닫기 기능 구현
- 전반적인 UI/UX를 새롭게 설계하여 종합적인 사용성 개선
TypeScript, Next.js, Recoil, React-Query, React-Hook-Form, Tailwind CSS
메이플 경매장 알리미
2023.08 - 2023.09 (2人 팀 프로젝트)
메이플스토리의 아이템이 원하는 조건으로 경매장에 올라왔을 때 알림을 받아보기 위한 웹사이트
- 메이플스토리를 좋아하는 한 친구의 아이디어에 착안하여 개발
- 최신 기술인 React 18 기반의 Next.js 13 학습 및 적용
- React-Query, React-Hook-Form을 활용하여 API 요청 및 입력 폼 처리
- Next.js 서버를 리버스 프록시로 활용하여 IP 노출 및 CORS 문제 해결
TypeScript, Next.js, Recoil, React-Query, React-Hook-Form, Sass, Tailwind CSS, Vercel
무슨 노래 부르지?
2022.10 (1人 개인 프로젝트)
노래방을 즐기는 사람이 자주 부르는 노래를 간편하게 관리하는 웹사이트
- 노래방을 갈 때마다 무슨 노래를 부를지 고민하지 않기 위해 개발
- OAuth 2.0 기반의 Firebase Auth를 활용하여 소셜 로그인 구현
- NoSQL 기반의 Firebase Realtime Database를 활용하여 쿼리 작성
- Tailwind CSS를 활용하여 별도의 CSS 파일 없이 스타일링
TypeScript, Next.js, Recoil, Sass, Tailwind CSS, Firebase, Vercel
똑똑하게 N빵하기 (React-Native)
2022.02 (1人 개인 프로젝트)
복잡한 N빵 상황에 누가 누구에게 얼마를 보내야 하는지 계산해주는 모바일 앱
- Android Native를 React-Native로 마이그레이션하여 개선 후 출시
- Recoil을 활용하여 React와 유사한 방식으로 전역 상태 관리
TypeScript, React-Native, Recoil
친구가 보는 나의 성격은?
2021.05 - 2021.06 (2人 팀 프로젝트)
내가 생각하는 나의 성격과 친구가 생각하는 나의 성격을 비교할 수 있는 웹사이트
- 지인과 서로 MBTI 검사를 해주면서 얻은 아이디어를 바탕으로 개발
- 처음으로 역할을 명확히 구분하여 백 엔드 개발자와의 협업 경험
- requestAnimationFrame, canvas API를 활용하여 배경 애니메이션 및 오각형 그래프 구현
- Next.js의 CSR, SSR, SSG에 대한 이해를 바탕으로 사용성을 고려한 페이지 구성
TypeScript, Next.js, Sass, Vercel
Onepick 홈페이지
2021.03 (1人 개인 프로젝트)
Onepick PT 센터의 홈페이지
- 친형이 근무하는 PT 센터에 도움을 주고 싶어 개발
- 센터 홍보 목적의 검색 엔진 최적화 및 UI/UX 설계
- RSS를 활용하여 센터 블로그의 최신 포스팅 노출
TypeScript, Next.js, Sass, Vercel
포트폴리오 웹사이트 (Next.js)
2021.01 (1人 개인 프로젝트)
포트폴리오 웹사이트
- React를 Next.js로 마이그레이션하여 서버 사이드 렌더링을 통해 검색 엔진 최적화
- History API를 활용하여 모달의 뒤로가기 구현
TypeScript, Next.js, Sass, Vercel
포트폴리오 웹사이트 (React)
2021.01 (1人 개인 프로젝트)
포트폴리오 웹사이트
- 나만의 포트폴리오를 위한 웹사이트 개발
- 라이브러리 없이 Vanilla JS로 무한 캐러셀 구현
TypeScript, React, Sass, Netlify
햇봉 위키 (React, Django)
2020.08 - 2020.11 (1人 개인 프로젝트)
서울대학교 중앙 동아리 햇빛봉사단에 관한 유익한 정보들을 문서화하여 제공해주는 웹사이트
- Django 풀 스택을 React와 Django의 조합으로 마이그레이션
- Redux, Redux-Thunk, Redux-Saga를 활용한 전역 상태 관리 및 API 요청 처리
- 프론트 엔드와 백 엔드가 분리된 AWS 배포 환경 수동 구축
TypeScript, React, Redux, Redux-Thunk, Redux-Saga, Sass, Django, PostgreSQL, AWS(EC2, RDS)
햇봉 위키 (Django 풀 스택)
2020.05 - 2020.06 (1人 개인 프로젝트)
서울대학교 중앙 동아리 햇빛봉사단에 관한 유익한 정보들을 문서화하여 제공해주는 웹사이트
- 동아리의 역사와 규모에 비해 제대로 된 아카이킹 웹사이트가 없었기 때문에 직접 개발
- 회사에서 사용하는 기술과 환경에 대한 심도 있는 이해
- 오늘날 많이 사용하는 Docker의 필요성을 느낀 계기
Django, Vanilla JS, jQuery, PostgreSQL, AWS(Elastic Beanstalk)
SNU Moyeo
2019.03 - 2019.06 (4人 팀 프로젝트)
서울대학교 학생들이 쉽게 임시적/장기적 모임을 구성하고 이에 참여할 수 있도록 돕는 웹 서비스
- 교내에서 어떠한 목적을 함께 할 사람을 간편하게 찾도록 돕기 위해 개발
- 최초 웹 개발 경험 (HTML, CSS, JS, React, Django)
- 최초 협업 경험 (Git)
- 웹 개발의 길을 걷게 만든 결정적인 계기
React, Redux, Redux-Saga, Django REST Framework, SQLite3, AWS(EC2)