프론트엔드 포트폴리오 - 박상은

썸네일

<About Me />

이름박상은
생년월일1998.11.06
주소지경상남도 진주시 이현동
연락처010-2103-8259
이메일1-blue98@naver.com
학력경남과학기술대학교 - 컴퓨터공학과
깃허브https://github.com/1-blue
블로그https://1-blue.github.io

<Skills />

react 아이콘

nextdotjs 아이콘

tailwindcss 아이콘

styledcomponents 아이콘

redux 아이콘

reactquery 아이콘

storybook 아이콘

express 아이콘

prisma 아이콘

amazons3 아이콘

<Projects />

blegg
( Riot API를 이용한 전적 및 정보 검색 프로젝트 )
1 / 17
- 📅 Period2023.06.19 ~ 2023.08.01
- 🤝 Role개인 프로젝트
- 📤 FrontTypeScript, React.js, TailwindCss, ReactQuery, Storybook
- 📥 BackNest.js, Prisma, AWS-S3, AWS-EC2
- ⛓️ Link
  Deploy GitHub API 문서 Storybook
👇 상세 설명 👇
✅무료로 사용할 수 있는 라이엇 API를 활용해서 제작한 리그오브레전드 관련 정보 웹사이트입니다.
✅게임 플레이와 시청을 좋아해서 초기에는 LCK 순위와 투표 같은 웹사이트를 만들려고 했으나 API를 찾지 못해서 관련 사이트로 변경했습니다.
✅TypeScript를 적극 활용해서 Riot API를 통해 제공받는 데이터의 타입을 커스타마이징했고 필요한 데이터 타입을 직접 만들어서 요청과 응답에 사용했습니다.
✅ReactQuery를 이용해서 CRUD에 대한 훅을 만들어서 서버 측 데이터를 캐싱해서 사용했고 Storybook을 이용해 상향식으로 컴포넌트 주도 개발에 대해 실습해 보았습니다.
✅Nest.js의 학습 목적으로 사용해서 프레임워크 사용의 장점, 여러 패턴과 개념에 대해 학습할 수 있었고 Local, KaKao, Google, Naver 인증 로직을 구현해 보면서 OAuth의 흐름에 대한 이해와 개념을 학습할 수 있었습니다.
✅Gabia에서 도메인을 구매하고, AWS-EC2에서 Nginx와 Certbot을 이용해서 SSL 인증서를 얻어서 배포하였습니다.
blegram
( 학습 목적으로 인스타그램 클론 프로젝트 )
1 / 8
- 📅 Period2023.03.24 ~ 2023.06.05
- 🤝 Role개인 프로젝트
- 📤 FrontTypeScript, React.js, Styled-Components, Recoil, ReactQuery
- 📥 BackJWT, Prisma, AWS-S3, AWS-RDS
- ⛓️ Link
  Deploy GitHub API 문서
👇 상세 설명 👇
✅인스타그램의 기능들을 따라 만들면서 학습한 프로젝트입니다.
✅유저/게시글/댓글 CRUD, 좋아요/북마크/팔로우, 해시태그, 검색 기능들을 구현했습니다.
✅JWT를 이용해 직접 access/refresh token을 만들어 관리하는 로직을 구현해봄으로서 JWT와 쿠키를 이용한 인증 방식에 대한 전반적인 이해를 했습니다.
✅Recoil을 이용해서 클라이언트 데이터 / ReactQuery를 이용해서 서버 데이터를 관리하는 방법에 대해 학습했고 AWS-S3의 presignedURL이라는 기능을 통해서 브라우저에서 안전하게 이미지를 업로드하는 방법을 알게 되었습니다.
✅styled-components의 사용법, 전역 세팅 방법, TypeScript 적용 방법을 이해하고 코드에 적용했습니다.
✅배포는 Vercel을 이용하였고 데이터베이스는 AWS-RDS를 사용하고 있습니다.
creator connect
( 초보 유튜버들이 소통하기 위한 커뮤니티 프로젝트 )
1 / 5
- 📅 Period2023.04.28 ~ 2023.05.30
- 🤝 Role팀 프로젝트 FE 팀원 역할 ( FE 3, BE 4 )
- 📤 FrontTypeScript, Next.js, TailwindCss, Zustand, ReactQuery
- 📥 BackSpring Boot, Spring Security, Gradle, Redis, JWT, thymeleaf, JPA
- ⛓️ Link
  Deploy GitHub API 문서
👇 상세 설명 👇
✅초보 유튜버들이 여러 정보를 공유할 수 있는 커뮤니티입니다.
✅FE 팀원으로 각 게시글들 CRUD, 팔로잉/팔로워, 북마크/좋아요, 검색, 프로필 로직을 구현했습니다.
✅API/인증 등에 대해 백엔드 개발자들과 협업하는 과정을 통해 많은 얘기를 나누고 각자의 입장을 이해하는데 도움이 되었습니다.
✅피그마를 이용한 화면 정의서 구현 / 프로젝트 폴더 구조 및 초기 코드 세팅 / 피드백을 받고 코드를 수정하는 과정을 겪으면서 FE끼리 혹은 FE와 BE간의 대한 협업에 대한 전반적인 과정에 대해 경험할 수 있었습니다.
blequotes
( 영화/드라마/도서를 검색하고 명대사를 등록할 수 있는 프로젝트 )
1 / 6
- 📅 Period2022.11.24 ~ 2023.02.18
- 🤝 Role개인 프로젝트
- 📤 FrontTypeScript, React.js, TailwindCss, Redux-Toolkit
- 📥 BackExpress.js, Prisma, AWS-EC2, AWS-S3
- ⛓️ Link
  Deploy GitHub API 문서
👇 상세 설명 👇
✅MovieDB, Kakao API를 이용해서 얻은 영화/드라마/도서에 대한 정보를 기반으로 만든 웹사이트입니다.
✅TypeScript / Redux-Toolkit / TailwindCss를 공부하고 적용하는 목적으로 시작했습니다.
✅TypeScript로 다른 API를 통해 얻는 데이터의 타입을 직접 만들고 커스터마이징하면서 TypeScript과 친해졌고
✅TailwindCss를 사용하면서 편리함에 대해 느끼게 되었고 많이 사용하게 되는 계기가 되었습니다.
✅ 또한 Redux를 공부하고 사용해본 이후에 Redux-Toolkit을 사용하면서 편의성과 TypeScript와의 호환성 제공해주는 것에 대해 알게 되었습니다.

<Study />

러닝 타입스크립트
( 러닝 타입스크립트 교재로 매주 두 장씩 돌아가면서 정리 및 발표 )
- 📅 Period2023.05.08 ~ 2023.06.19
- 🤝 Role4인 스터디 ( 4/14 )
- ⛓️ Link
  GitHub Blog
👇 상세 설명 👇
✅Type과 Interface 특징과 차이점, 속성과 메서드 방식, 오버로드 등의 여러 개념들에 대해 인지하고 생각해보는 경험을 했습니다.
✅여러 유틸리티 타입들을 직접 만들어보면서 동작 원리를 이해하는데 도움이 되었습니다.
✅기본기부터 응용까지 훝어보면서 전반적인 개념을 정리하는데 도움이 되었습니다.
자바스크립트 완벽 가이드
( 자바스크립트 완벽 가이드 교재로 매주 한 장씩 돌아가면서 정리 및 발표 )
- 📅 Period2022.12.27 ~ 2023.03.14
- 🤝 Role6인 스터디 ( 3/12 )
- ⛓️ Link
  GitHub Blog
👇 상세 설명 👇
✅호이스팅, 스코프, 프로토타입, 클로저, 제너레이터, 클래스, 이터레이터 등 많은 개념과 동작 원리에 대해 얘기를 나누고 이해하기 위해 노력했습니다.
✅npm, npx, babel, eslint, prettier 처럼 생각없이 사용했던 것들에 대해서도 공부하고 이해하고 생각해보는 시간을 가졌습니다.
✅깊이있게 많은 부분을 다루는 교재라서 몰랐던 부분도 인지하게 되었고 알았던 부분도 다시 생각해보는 시간을 갖게 되었습니다.
이펙티브 타입스크립트
( 이펙티브 타입스크립트 교재로 매일 아이템 3개 정리 )
- 📅 Period2023.01.06 ~ 2023.02.24
- 🤝 Role개인 스터디
- ⛓️ Link
  Blog
👇 상세 설명 👇
✅타입 스크립트가 특정 상황에 특정 방식으로 동작하는 이유 그리고 그것을 활용하는 방법에 대한 내용이 많은 교재였습니다.
✅덕 타이핑과 구조적 타이핑, 인덱스 시그니처, 타입 가드, any, unknown 등 생소하거나 몰랐던 개념들을 알게 되었습니다.
✅머리로 이해보다는 몸으로 경험해서 알고 있었던 것들을 머리로 이해하는데 많은 도움이 되었습니다.