PROJECTS
무슨 노래 부르지?
2022.10 (1人 개인 프로젝트)
노래방을 즐기는 사람의 입장에서 자주 부르는 노래를 간편하게 관리할 수 있도록 도와주는 웹사이트입니다. 제 취미가 아이디어의 원천이었고, 저와 취미가 같은 사람들에게 도움이 되었으면 하는 마음으로 개발했습니다.Firebase 서비스를 처음 사용해봤다는 것만으로도 의미가 있었지만, 그 과정에서 OAuth 2.0의 개념을 한 번 더 깊게 다지고 NoSQL을 실제로 사용해볼 수 있었다는 점에서 더욱 의미가 있었습니다.최근에 인기가 많은 Tailwind CSS를 처음으로 사용해보며 이것의 차별적인 유용성을 느낄 수 있었고, 동시에 PostCSS가 무엇인지 배우는 계기도 되었습니다.이론으로만 알고 있던 PWA를 실제로 구현해봄으로써 앞으로 웹 생태계가 뻗어나갈 무한한 가능성과 확장성을 몸소 체감할 수 있었습니다.
자세히 보기 ▶ README
주요 기능
자주 부르는 노래의 가수명 및 제목 기록하기, 간편한 분류를 위해 각 노래에 태깅하기, 노래의 가수명 및 제목으로 검색해 보기, 가수 또는 태그에 따라 분류해 보기
GitHub
github.com/hjcdg1/what_to_sing
URL
what-to-sing.ga
Frontend
Next.js, Recoil, TypeScript, Sass, PostCSS, Tailwind CSS
Backend
Firebase Authentication
Database
Firebase Realtime Database
Deployment
Vercel, Firebase (Authentication, Realtime Database)
똑똑하게 N빵하기
2022.02 (1人 개인 프로젝트)
복잡한 상황에서의 N빵 계산을 도와 누가 누구에게 얼마를 보내야 하는지 계산해 주는 모바일 앱입니다. 동아리 활동을 하던 당시 여러 모임에서 N빵 계산 시 어려움을 겪은 몇몇 상황에서 아이디어를 얻어 개발하였습니다.이미 Android Native로 개발을 완료한 프로젝트였지만, React Native의 학습을 위해 이를 다시 React Native로 개발하였습니다. 이전 프로젝트와 달리 이번에는 전반적인 로직과 UI & UX를 개선하고 실제로 스토어에 출시까지 했다는 점에서 의미가 있습니다. 이제는 마음만 먹으면 모바일 앱도 개발하고 출시할 수 있다는 자신감을 준 프로젝트입니다.
자세히 보기 ▶ README
주요 기능
참석자의 이름∙부담 금액∙비중 입력, 최소한으로 이체하는 방법 계산
GitHub
github.com/hjcdg1/dutch_pay_calculator_rn
URL
play.google.com/store/apps/details?id=com.dutch_pay_calculator_rn
Mobile App
React Native, Recoil, TypeScript
Deployment
Google Play Store
친구가 보는 나의 성격은?
2021.05 - 2021.06 (2人 팀 프로젝트)
내가 생각하는 나의 성격과 친구가 생각하는 나의 성격을 비교함으로써 겉으로 보이는 나의 모습이 어떠한지 파악해볼 수 있는 웹사이트입니다. 실제로 지인과 성격 검사를 서로 해주면서 얻은 아이디어를 바탕으로 직접 개발하였습니다.백 엔드 개발자와 협업하는 과정에 관해 많이 배울 수 있었습니다. 필요한 명세를 문서로 작성하여 소통하였고, 필요한 지식도 함께 공유하며 학습할 수 있었습니다.UI & UX를 깊게 고민하며 스스로 디자인하였고, 그 과정에서 canvas API 등을 활용하여 복잡한 애니메이션들을 구현했습니다.복수 페이지의 Next.js 웹사이트를 만들면서 라우팅, CSR, SSR, SSG에 대한 개념을 더욱 확실하게 숙지할 수 있었습니다.GA를 설치하여 트래픽을 파악하고 사용자의 행동을 이벤트 단위로 분석하는 방법을 알게 되었습니다.
자세히 보기 ▶ README
주요 기능
내가 생각하는 나의 성격 검사하기, 친구에게 나의 성격 평가 부탁하기, 나의 성격에 대한 나와 친구의 검사 결과 비교하기
GitHub
github.com/hjcdg1/personality_test_by_friends
URL
personality-test-by-friends.com
Frontend
Next.js, TypeScript, Sass
Backend
Django REST Framework
Database
PostgreSQL
Deployment
Vercel, AWS (EC2, RDS, Route 53)
Onepick 웹사이트
2021.03 (1人 개인 프로젝트)
친형이 근무하는 PT 센터의 홈페이지로 사용하는 웹사이트입니다. Onepick은 해당 센터의 이름입니다. 제 분야로 가족에게 도움이 되고 싶은 마음에 진행한 프로젝트입니다.Next.js에 조금 더 익숙해진 계기가 되었을 뿐 아니라, 고객의 확보가 중요한 웹사이트인 만큼 사용자의 유입과 경험을 위해 검색엔진최적화(SEO)와 UI & UX 구상에 많은 공을 들인 프로젝트입니다.
자세히 보기 ▶ README
주요 기능
PT 가격, 문의 방법, 오시는 길(Kakao Map), 트레이너, 내부 시설, 블로그
GitHub
github.com/hjcdg1/onepick
URL
onepick-pt.com
Frontend
Next.js, TypeScript, Sass
Deployment
Vercel
포트폴리오 웹사이트
2021.01 (1人 개인 프로젝트)
포트폴리오 용도로 제작한 웹사이트입니다. 지금 보고 있는 바로 이 웹사이트에 해당합니다.이미 순수 React로 개발을 완료한 프로젝트였지만, Next.js의 학습을 위해 이를 Next.js로 다시 개발하였습니다. 그 과정에서 서버 사이드 렌더링을 함께 지원하는 Next.js의 위대함을 느낄 수 있었습니다. 또한, Vercel을 이용하여 정적 웹사이트의 Lean한 배포도 경험해볼 수 있었습니다.
자세히 보기 ▶ README
주요 기능
간단한 자기소개, 인적 사항, 기술 스택, GitHub 및 티스토리 링크, 프로젝트 경험, 업무 경력
GitHub
github.com/hjcdg1/portfolio_nextjs
URL
cdg-portfolio.com
Frontend
Next.js, TypeScript, Sass
Deployment
Vercel
햇봉 위키 (React, Django)
2020.08 - 2020.11 (1人 개인 프로젝트)
서울대학교 중앙 동아리 햇빛봉사단에 관한 유익한 정보들을 문서화하여 제공해주는 웹 서비스입니다. 해당 동아리 활동을 하던 당시 동아리의 규모에 비해 제대로 된 대표 웹사이트가 없었다는 점이 아쉬워 구상했었던 아이디어를 바탕으로 개발하였습니다.이미 Django 풀 스택으로 개발을 완료한 프로젝트였지만, React의 학습을 위해 이를 React와 Django를 이용하여 다시 개발하였습니다. 그 과정에서 Django REST Framework도 학습하여 백 엔드 지식을 더욱 탄탄히 하였고, AWS의 리소스들을 직접 할당, 연결, 설정하면서 배포 경험도 쌓을 수 있었습니다.
자세히 보기 ▶ README
주요 기능
"햇봉 위키 (Django 풀 스택)"과 동일
GitHub
github.com/hjcdg1/hatbbong_wiki_react
Frontend
React, Redux, Redux-Thunk, Redux-Saga, TypeScript, Sass, Bootstrap
Backend
Django REST Framework
Database
PostgreSQL
Deployment
AWS (EC2, RDS)
햇봉 위키 (Django 풀 스택)
2020.05 - 2020.06 (1人 개인 프로젝트)
서울대학교 중앙 동아리 햇빛봉사단에 관한 유익한 정보들을 문서화하여 제공해주는 웹 서비스입니다. 해당 동아리 활동을 하던 당시 동아리의 규모에 비해 제대로 된 대표 웹사이트가 없었다는 점이 아쉬워 구상했었던 아이디어를 바탕으로 개발하였습니다.프론트 엔드와 백 엔드를 모두 Django로 구현한 원시적인 형태의 웹 어플리케이션입니다. 현재 회사에서 채택하고 있는 환경 및 기술에 대한 완전한 이해를 목적으로 진행한 프로젝트입니다.
자세히 보기 ▶ README
주요 기능
학교 메일 인증, 문서 조회, 문서 추가/편집 요청 및 토론, 문서 변경 내역 조회 (Git과 유사한 UI), 커뮤니티 (공지 게시판, 자유 게시판), 신고 및 경고 제도
GitHub
github.com/hjcdg1/hatbbong_wiki
Frontend
Django Template Engine, Vanilla JS, jQuery, Bootstrap
Backend
Django
Database
PostgreSQL
Deployment
AWS (Elastic Beanstalk), Circle CI
SNU Moyeo (혼자 하면 힘든, 함께 하면 쉬운)
2019.03 - 2019.06 (학부 3학년 수업 4人 팀 프로젝트)
서울대학교 학생들이 쉽게 임시적/장기적 모임을 구성하고 이에 참여할 수 있도록 돕는 웹 서비스입니다. 학교 내에서 임시로 혹은 장기적으로 어떠한 목적을 함께 할 누군가를 간편하게 찾을 수 있도록 돕는 것을 목적으로 합니다.처음으로 Git을 이용하여 다른 사람들과 협업을 해보고, HTML, CSS, JavaScript와 함께 React, Django를 배우면서 웹 개발의 기본 지식을 쌓을 수 있었던 프로젝트입니다. 또한 저에게 처음으로 웹 개발이라는 매력적인 분야를 알려준 계기이기도 합니다.
자세히 보기 ▶ README
주요 기능
학교 메일 인증, 모임 생성/참가/탈퇴/모집/마감, 신고 및 벌점 제도
GitHub
github.com/hjcdg1/swpp_cjlk
Frontend
(Atomic) React, Redux, Redux-Saga
Backend
Django REST Framework
Database
SQLite3
Deployment
AWS (EC2)
CAREER
(주) 오픈갤러리
2019.08 - 현재
그림을 렌탈하려는 고객들과 그림을 그리는 작가들을 중개하는 그림 렌탈 서비스 플랫폼입니다.
기본적으로는 Django 기반의 풀 스택 웹 개발을 총괄 담당하고 있으며, 신규 기술 스택(Next.js 등)과 관련한 개발 및 교육까지 전담하고 있습니다. 또한, 주로 복잡하고 어려운 작업에 관한 기술 검토를 통해 기획을 보조하며, 동료 개발자의 작업에 대한 코드 리뷰나 신입 개발자의 사수 역할과 같은 기타 업무까지 함께 담당하고 있습니다.
- 고객 유입 흐름 파악을 위한 업무 프로세스 관련 데이터 대규모 연동 (Funnel)
- 그림 픽업/설치/철수/반납 일정의 관리를 위한 캘린더 페이지 기획 및 개발
- 알림톡 및 문자메시지 발송 API 업체 이관 및 관련 개발
- 아트테크 기능을 위한 모델링 및 관련 기능 개발
- Iamport 모듈을 이용한 결제 기능 리팩토링
- 이미지 AWS S3 업로드 방식의 통일 및 최적화
- 자주 쓰이는 코드의 리팩토링 (EX. 페이지네이션)
- 발생주의 기반의 매출 분석 페이지 기획 및 개발
- 고객의 유입률 등을 보여주는 통계 페이지 개발
- 작가 송금 관리 기능 개발
- Python, Django 버전 업그레이드
- 개발자 채용 담당 (서류 평가 및 면접 평가 진행)
- 신입 개발자 사수 담당 (업무 교육/할당)
- 동료 개발자 코드 리뷰 (피드백/교육)
- 개발 관련 유용한 지식 발표 및 공유
- IT팀 업무 관련 문서 총정리
- 개발자 인수인계 및 온보딩 문서 작성
- 대규모 서버 정리 작업 총괄 및 코드 리뷰
- 데이터베이스 마이그레이션 파일 정리
- 알림톡 및 네이버웍스 알림 관련 기능 정리 및 개선
- 로그인 및 회원가입 등의 인증 시스템 정리 및 개선
- 관리자 권한 관련 기능 정리 및 개선
- 불필요한 파일/코드 정리 및 코드 작성 방식 통일성 확보
- 기존 배포 라인 : AWS Elastic Beanstalk
- 신규 배포 라인 : AWS ECS (Docker 기반)
- OS 독립적인 간편한 개발 환경 구축이 가능해짐
- 특정 기술의 독립적인 버전 업그레이드가 용이해짐
- Next.js의 점진적 도입을 위한 기반 마련
- Django 기반의 웹사이트를 Next.js 기반으로 재개발
- React 기반의 Next.js 개발 환경 최초 구축
- Next.js, Recoil, Sass, DRF 등 활용
- 신규 기술 스택 및 개발 환경 관련 내부 교육 진행