HTML5
CSS3
JavaScript
TypeScript
React
Next.js
TailwindCSS
Bootstrap
React-Query
Recoil
React-Hook-Form
AWS
nginx
▲Vercel
Firebase
Figma
slack
Notion
Python
colab
Mountaineer
DangGeuneDaong
TWT-TravelWithoutTrouble
DevBlock
Market
등산을 사랑하는 이들이 모여 산악지식과 산행 경험을 공유하고, 함께 성장하고 소통하는 등산 커뮤니티 플랫폼입니다. 또한 다양한 산악회나 등산 그룹에 참여하여 멤버들과 함께 산행 일정을 계획하고 소통할 수도 있습니다.
저의 첫 개인 프로젝트로 기존 순수 Javascript로 제작한 것과는 다르게 React와 Typescript를 사용하여 체계적으로 Component 및 State를 관리하고, 수정할 수 있도록 하였습니다. 컴포넌트 기반 아키텍처 사용 방법에 대해 배우며 컴포넌트를 잘 구조화하는 것에 대한 중요성을 깨달았고 추가로 useEffect와 같은 훅을 활용하여 컴포넌트의 라이프 사이클을 다룰 줄 알게 되었습니다.
Firebase(Authentication, Realtime Database) 서비스를 처음 사용해보며 NoSQL을 실제로 경험해볼 수 있었고, 최근 인기가 많은 TailwindCSS를 통해 유용성을 느낄 수 있었습니다. 해당 프로젝트를 통해 향후 발전시켜 나갈 부분을 이해하고 다른 프레임워크나 라이브러리에 대한 이해를 확장하는 데 도움이 되었습니다.
반려동물 시장의 확대와 무분별한 구매 및 낭비 사이에서 발생하는 문제를 해결하기 위해 반려동물 중고 물품 거래 및 나눔 플랫폼을 고안하게 되었습니다.
본 프로젝트에서 로그인 및 회원가입, 마이페이지 등과 같이 유저 관련 페이지를 담당하였습니다. JWT 토큰과 관련하여 세션과 로컬 그리고 쿠키 개념에 대해 보다 자세하게 알게 되었으며 무엇보다 보안과 사용자의 편의성 모두 고안하며 액세스 토큰과 리프레시 토큰 관리의 중요성을 깨달았습니다.
추가로 본 프로젝트는 위치 기반으로 한 동네 중고거래 사이트이기 때문에 소셜 로그인 시, 따로 유저의 주소와 같은 추가정보를 얻도록 Redirect 페이지를 구현함에 있어 어려움이 있었으나 백엔드 개발자와 필요한 지식이나 의견을 공유하면서 협업에서의 의사소통이 중요하다는 것을 경험하게 되었습니다.
해당 팀프로젝트를 진행하면서 공통적인 스타일 속성을 관리하는 데 styled-components의 유용성을 느꼈고 특히나 기능 구현에 있어서 form형태가 많았었는데 React-hook-form을 통해 수월하게 유효성검사를 할 수 있었고 상태관리가 단순해지면서 복잡한 코드를 효율적으로 관리하며 간결한 코드 작성을 할 수 있었습니다.
여행을 즐기고 싶지만 계획하는 것이 힘든 여러분에게 명소나 다른 사람들의 여행 일정을 추천해주는 여행 플래너 플랫폼입니다.
이전 프로젝트들에 비해 전반적인 로직을 개선하려고 노력하였으며 사용자 경험을 고려한 UI/UX 구상에 많은 고민을 하였습니다. tailwindCSS를 활용한 스타일링과 웹팩과 바벨을 이용한 초기 개발환경을 직접 설정해주므로써 웹팩개념과 번들 기능 등 웹 개발의 기초를 다지는 데 큰 역할을 했습니다.
카카오 지도 API를 이용한 지도 커스터마이징은 흥미로운 경험이었고 이를 통해 외부 api의 기능을 효과적으로 구현하는 방법에 대해 이해하였고 react-query를 통한 데이터 요청 및 변경에 대한 코드 단순화에 노력하였습니다.
프론트엔드를 혼자 맡은 프로젝트이다 보니 전반적인 기획부터 배포까지 처리해보면서 전체적인 개발 프로세스 정리를 할 수 있는 경험이었습니다. 특히, 일정 추가 기능에 있어서 어려움이 있었으나 기존일정에 추가할 지, 새로운 일정으로 추가할 지 유저가 선택하는 방향으로 세웠으며 이 부분에서 기존 여행 관련 웹사이트들이 먼저 여행 기간을 등록하려는 지 이해되었던 부분이었습니다.
포트폴리오 용도로 제작한 웹사이트로 해당 웹사이트입니다. 프로필 및 개발 경험들을 나타내는 공간으로 저의 개발 경험 및 능력을 쌓아나간다는 의미로 블럭 컨셉으로 제작하였습니다.
순수 JavaScript와 CSS를 사용하여 제작하였고, Github page로 배포를 진행하였습니다. 각 페이지들을 제작하면서 사용자들이 재미있게 느낄 수 있도록 고안하였고 아이디어 부분에서 가장 설계가 오래걸렸습니다.
아무래도 입체적인 블록을 구현하느라 개인적으로 개념이 부족하다 느꼈던 CSS를 다시금 공부해볼 수 있었습니다. 특히나 animation 효과들이나 추가적인 기능을 이해하고 응용해볼 수 있었습니다.
Next.js를 새롭게 공부하고자 시작한 풀스택 당근 클론 마켓 프로젝트입니다.
Back-end는 Node.js의 Express를 호스팅 서버는 Vercel을 사용하여 배포하였습니다. 간단한 프로젝트를 기획부터 배포까지 처리해보면서, 다시 한번 전반적인 개발 프로세스를 정리 할 수 있는 경험이 되었습니다.
Next.js를 활용하여 빠른 리액트 애플리케이션을 만들어 볼 수 있었고 렌더링과 로딩 타임을 최적화하였습니다. Severless 함수와 DB를 활용하여 빌드
Cloudflare를 활용하여 어느 기기에서든 접속 가능한 RealTime Streaming 기능을 구현하였습니다. 이를 통해 라이브 커머스 기능도 빌드할 수 있었습니다.
010-6311-1040
jinlijinyoung@gmail.com
