포트폴리오 기술스택 - poteupollio gisulseutaeg

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 등)과 관련한 개발 및 교육까지 전담하고 있습니다. 또한, 주로 복잡하고 어려운 작업에 관한 기술 검토를 통해 기획을 보조하며, 동료 개발자의 작업에 대한 코드 리뷰나 신입 개발자의 사수 역할과 같은 기타 업무까지 함께 담당하고 있습니다.