TypingOk.Blog

프로필 이미지

정 진

Introduction

더 나은 답을 위해 고민 하는 개발자


코드를 작성하고 고민합니다. 지금 작성한 코드가 최선인지 고민 합니다. 이를 통해 같은 로직이어도 더 나은 가독성을 위해 더 나은 효율을 위해 고민하고 개선하기 위해 노력합니다. 이를 위해 팀원들과 함께 코드리뷰도 진행하거나 직접 의견을 물어보기도 합니다.

소통하는 개발자, 협업하는 개발자


팀 프로젝트를 진행하면서 주로 팀장을 맡아서 진행해왔습니다. 팀장을 맡으면서 중요하게 생각한 것은 소통이었습니다. 일정에 맞추기 위해 혹은 문제를 해결하기 위해 그리고 결정을 내리기 위해 최대한 많은 팀원들과 소통을 해왔습니다. 결과적으로 시간 내에 프로젝트를 훌륭하게 수행하여 부트캠프에서 최우수상을 수상하는 등, 소통과 협업으로 작업을 진행하고 우수한 성과를 도출 해왔습니다.

도전하는 개발자


새로운 기술 스택을 시도하는데 거리낌이 없습니다. 항상 새로운 기술 스택을 시도해보기 위해 팀원들과 함께 자료 조사하고 적용해보고 있습니다. 시행착오를 겪어오면서 저는 항상 성장하고 더 많은 것들을 시도하고자 합니다. 앞으로도 더 성장하기 위해 새로운 것들을 시도할 것 입니다.

Tech Stack

기술 스택 옆1 아이콘아이콘은 문서를 보지 않고도 개발할 수 있음을 나타냅니다.
Front-End
1 아이콘HTML1 아이콘CSS1 아이콘JavaScript1 아이콘TypeScriptjQuery
1 아이콘React.js1 아이콘Next.jsVue.jsVuex.jsRedux-Toolkit
ZustandRecoil1 아이콘React-Query1 아이콘Tailwind-CSSStyled-Component
Emotion.jsMUIStoryBookPlayWrightChart.js
Back-End, CI/CD
JavaSpringBoot1 아이콘DockerAWS1 아이콘Git
NginxVercelMySQLPrismaPostgresql

Projects

2024-01 ~ 현재
찰랑
깃허브: 바로가기
- 술을 리뷰하고 어떻게 마시면 좋을지 나누고 조합을 공유하는 커뮤니티
- Turbo Repo를 이용하여 패키지와 서비스용 웹 애플리케이션을 하나의 레포에서 관리하도록 함
- 헤드리스 UI 중 하나인 Mantine.dev을 이용하여 개발
- 디자인 시스템을 만들어 NPM 배포
- NPM 제작을 위해 디자인 시스템은 React, Vite를 이용하여 개발
2023-08 ~ 2023-12
Next.js 블로그 개발
배포 주소: 바로가기 | 깃허브: 바로가기 | 프로젝트 자세히보기(Notion): 바로가기
- 개발하고 공부한 내용을 정리하기 위해 만드는 블로그
- Next.js App router를 사용하였으며, 프론트엔드 개발만으로 백엔드 개발 없이 직접 DB와 연결할 수 있도록 함.
- Vercel에서 지원하는 Postgresql을 사용하여 빠르게 DB를 구축 및 배포하였으며 Prisma를 사용하여 Next.js에서 접근
- Vercel을 이용하여 CI&CD를 구현함
- Next auth를 이용하여 Github 로그인 구현
- Yarn berry를 이용하여 Zero Install 방식으로 모듈 관리
- Lighthouse에서 모바일 기준 성능 98, 접근성 100, 권장사항 100, 검색엔진 최적화 92점을 받음
- Vercel Speed Insights에서 데스크탑 기준 99점, 모바일 기준 100점을 받음
2023-07~2023-08
LMS 클래스룸 수강시스템
배포 주소: 바로가기 | 깃허브: 바로가기 | 프로젝트 자세히보기(Notion): 바로가기
- 5개의 팀이 각자 기능을 만들고 합쳐 하나의 사이트를 완성하는 프로젝트
      - 참여하는 모든 팀의 팀장 전체를 모아 회의를 주도하고 공용 컴포넌트를 설계
      - 참여하는 전체 팀의 총 책임자의 역할을 수행.
      - 메인 브랜치로 합치는 경우 각 팀장들을 리뷰어로 두어 코드 컨벤션 및 진행 상황 트래킹 시도
- Firebase를 사용하여 NoSQL을 Eraser를 통해 모든 팀들이 다 같이 협력하면서 DB구조를 설계
- 강의 수강 페이지를 담당
      - 동영상 강의, Markdown 형식의 문서, 링크 형식의 글을 확인할 수 있도록 함.
      - 댓글, 대댓글, 타임스탬프, 동영상 강의 플레이 시간 기록 기능을 구현함.
2023-03 ~ 2023-05
BananVote
깃허브: 바로가기 | 프로젝트 자세히보기(Notion): 바로가기
- 간편하게 투표하고 의견을 적을 수 있는 사이트. 투표 작성 페이지, 이벤트 페이지, 마이페이지 담당하여 개발.
- Next.js App router를 활용하여 개발.
- React-Query를 사용하여 서버 상태를 관리.
- Tailwind CSS를 사용하였으며 다크모드 설정하였을 때에도 새로고침시 화면 깜빡임이 없도록 함.
- PlayWright를 활용한 E2E 테스트 시도.
- i18n을 활용하여 영어, 한국어, 일본어 지원
2022-12 ~ 2023-01
Drawee
배포 주소: 바로가기 | 깃허브: 바로가기 | 프로젝트 자세히보기(Notion): 바로가기
- WebRTC와 Next.js를 활용한 그림그리기 사이트. 모노레포를 이용하여 게임 핵심 기능을 따로 관리함. 이어달리기 모드, 게임 결과 페이지, Home 페이지 담당하여 개발
- Next.js, i18n을 활용하여 한국어, 영어 지원.
- Framer-motion을 사용하여 다양한 애니메이션 추가
- SEO 최적화
      - 최적화 이후 지속적으로 구글에서 검색량이 많아지고 있음.
2022-10~2022-11
⼤東HIP地圖
깃허브: 바로가기 | 프로젝트 자세히보기(Notion): 바로가기
- 짧은 영상 혹은 사진과 함께 위치를 공유하여 자신만의 Hip한 공간을 공유하는 SNS. 회원관리, 글작성, 쇼츠 영상 보기, 댓글 밑 대댓글 달기 구현.
- Redux-Toolkit, React-Query를 사용한 사용자 상태 관리
- PWA를 사용하여 웹앱으로 제작
- 카카오맵을 사용하여 사용자의 위치를 저장할 수 있도록 함
- Lazy Loading을 적용하여 짧은 영상 혹은 사진이 동시에 여러개가 로드 되지 않도록 함
2022-08~2022-10
RECEHFI
깃허브: 바로가기 | 프로젝트 자세히보기(Notion): 바로가기
- 인공지능을 이용하여 레시피를 읽어주고 음성 명령을 내릴 수 있는 요리 레시피 공유 사이트. 요리 레시피 읽어주기, 음성 명령 기능, 요리 사진 공유 페이지, 댓글, 대댓글, 음성 녹음 기능 구현.
- WebAPIs의 TTS와 STT기능을 사용하여 요리 레시피를 읽어주도록 하고 인공지능을 사용하기 위한 시동어를 감지 하도록 함
- React-Query를 사용하여 서버와의 상태 관리하여 요리 사진을 과도하게 가져오지 않도록 캐싱함
- 직접 제작한 인공지능과 연결하기 위해 Recorder.js를 통해 사용자의 음성을 녹음하고 mp4 형태로 변형하여 백엔드에 전송
- 인공지능 학습을 위한 우분투, 아나콘다, 주피터 노트북 환경을 직접 구축하였으며 원격으로 접속하기 위한 SSH 포트 설정 및 포트포워딩 설정 함
2022-07~2022-08
ATTI
깃허브: 바로가기 | 프로젝트 자세히보기(Notion): 바로가기
- WebRTC를 이용한 비대면 학습 사이트. 관리자 페이지의 시간표 생성, 시간표를 통한 강의장 입실 및 출석체크, 화상 수업, 채팅, 1대1 귓속말 등 화상 강의실 페이지 제작
- WebRTC를 구현한 OpenVidu 오픈소스 라이브러리를 이용하여 사용자들의 영상 및 음성, 채팅을 구현. 1대1 비공개 채팅을 구현 하였으며 질문 채팅을 하면 실제 질문 게시판에 업로드 되도록 연동. 수업하는 사람인 경우 익명모드를 활성화 할 수 있으며 학생은 익명모드를 요청할 수 있도록 구현
- 시간표를 통해 강의실을 입장하도록 하였으며 30분전에 입장하면 정상 출석, 수업 시간 이후에 출석하면 지각처리 하도록 함
- 익명 모드시 채팅은 TTS를 통해 읽을 수 있도록 함
- Redux-Toolkit을 이용하여 사용자의 상태 관리를 하도록 함
- TypeScript를 사용하여 개발
2021-04~2021-07
StartPlayUp
깃허브: 바로가기
- WebRTC, React를 이용한 보드게임 웹사이트. 보드게임 Yhatzee 구현, 로그인 및 회원가입과 같은 회원 관리 기능 담당
- Context api를 사용하여 사용자의 상태를 관리하도록 함

Certificate

2021-06
정보처리기사
발급처: 한국산업인력공단

Education

2023-06~2023-08
10주 완성! 프로젝트 캠프 - React
웅진 씽크빅, Udemy, 청년 일경험 프로젝트로 진행한 React 부트캠프
2022-01~2022-12
삼성청년SW아카데미 7기
삼성전자에서 진행하는 개발자 부트캠트. HTML, CSS, JavaScript, Vue.js, Java, Spring Boot 뿐만 아니라 여러 팀 프로젝트와 알고리즘 문제 풀이 교육
2016-03~2022-02
한신대학교
정보통신학부 전공 졸업

ETC

2023-08
10주 완성! 프로젝트 캠프 팀 프로젝트 최우수상
LMS 클래스룸 수강시스템 프로젝트