- 이민욱 -
프론트엔드 개발자 포트폴리오
프론트엔드 개발자 포트폴리오
안녕하세요.
천천히 꾸준히 공부하고싶은 프론트엔드 개발자 입니다.
꾸준히 공부하기 위해 1일 1커밋 챌린지 중입니다.
더 알아보기 ↓
ABOUT ME
이름
이민욱
생년월일
92.11.01
주소지
경기도 의정부시
연락처
010-4720-5164
이메일
dnr0145@gmail.com
SKILLS
FrontEnd
Deployment
Version Control
Communication
ARCHIVING
PROJECTS
웹사이트 클론 프로젝트
📆 2021.06.04 ~ 2021.07.23 (1人 개인 프로젝트)
웹사이트 클론을 통해서 HTML, CSS, JavaScript 실력을 키우기 위해 진행한 프로젝트입니다.프로젝트를 통해 HTML 태그, CSS 스타일링, JavaScript 개념 등을 배울 수 있었습니다.
URL
코스트코 https://dnr14.github.io/sites/costcoClone홈플러스 https://dnr14.github.io/sites/homeplusClone이케아 https://dnr14.github.io/sites/ikeaClone네이버 https://dnr14.github.io/sites/naverClone넷마블 https://dnr14.github.io/sites/netmarbleClone오버워치 https://dnr14.github.io/sites/overwatchClone스타벅스 https://dnr14.github.io/sites/starbucksClonehttps://dnr14.github.io/sites/unknownSiteClone1https://dnr14.github.io/sites/unknownSiteClone2https://dnr14.github.io/sites/unknownSiteClone3
Frontend
JavaScript, SCSS, CSS, Gatsby.js
Deployment
Github Page
Vanilla JS 프로젝트
📆 2021.05 ~ (1人 개인 프로젝트)
공부를하면서 작년 5월달 부터 바닐라 자바스크립트를 이용하여 개발하였던 프로젝트들입니다. 게임, 달력, 계산기, 그림판을 개발 했습니다.바닐라 자바스크립트 프로젝트를 통해서 자바스크립트에 대해 이해도가 높아지고 문법에 익숙하게 되었습니다.
GitHub
2048게임 https://github.com/dnr14/2048카드뒤집기게임 https://github.com/dnr14/card-game두더지게임 https://github.com/dnr14/mole-game오목 https://github.com/dnr14/omok스네이크 https://github.com/dnr14/snake테트리스 https://github.com/dnr14/tetris계산기 https://github.com/dnr14/calculator그림판 https://github.com/dnr14/paintbrush달력 https://github.com/dnr14/calendar
URL
Frontend
JavaScript, SCSS, CSS, Gatsby.js
Deployment
Github Page
Todo List
📆 2021.07.22 ~ 2021.07.26 (1人 개인 프로젝트)
매일매일 한걸음 씩 성장하기 위해 오늘 무엇을 해야 할지 간단히 적을 수 있는 웹앱입니다.서버를 사용하지 않았고 사용자의 할 일을 저장하기 위해 로컬스토리지를 이용하였습니다. 이미 JavaScript로 만들어진 프로젝트였지만 TypeScript를 공부를 하면서 TypeScript 프로젝트로 마이그레이션을 진행하였습니다.
주요 기능
최대 10개 까지 할일을 작성, 사용자가 지우기 전까지 할일은 유지
Frontend
React, TypeScript
Deployment
Github Page
COVID19 프로젝트
📆 2021.07.24 ~ 2021.08.08 (1人 개인 프로젝트)
공공 API를 활용하여 코로나 진행 상황을 그래프로 볼 수 있으면 사용자에게 의미 있는 사이트를 제공 할 수 있을 거라 생각해서 개발하였습니다.D3를 이용하여 공공 API 데이터를 시각화하여 차트로 보여줍니다. 공공 API의 CORS 이슈를 해결하기위해 Express를 사용하였습니다. 프로젝트를 통해서 CORS에 대한 개념과 해결방안을 배울 수 있었고 D3를 공부하며 간단한 차트를 만들 수 있게 되었습니다. 실제 배포를 통해서 배포 과정을 배울 수 있었습니다.
주요 기능
다양한 코로나 데이터를 차트로 보여주기, 원하는 날짜 데이터 검색
Frontend
React, D3
Backend
Express
Deployment
AWS(EC2), Nginx
메가 커피 클론 프로젝트
📆 2021.10.13 ~ 2021.11.20 (1人 개인 프로젝트)
자주 이용하는 메가 커피에 사이트는 사용자의 의견을 건의받는 게시판이 없습니다. 이용하는 사용자가 무엇을 원하는지 의견을 받을 수가 있는 게시판이 있으면 좋겠다고 생각해서 만들게되었습니다.Express와 MongoDB를 이용하여 API 서버를 구성하였습니다. JWT 방식을 이용하여 사용자의 인증 처리 했습니다.CRA를 이용하지 않고 Webpack, Babel, ESLint, Prettier를 이용하여 처음부터 리액트 개발 환경을 구축하였습니다. Nginx를 이용하여 리버스 프록시 환경을 구성을 하였습니다.프론트, 백엔드를 혼자 개발하면서 웹 서비스에 대한 전체 흐름을 경험하고 배울 수 있었습니다.
주요 기능
사용자(건의게시판), 관리자(메뉴 등록, 사용자 관리)
Frontend
React, Styled-components, Redux/tookit, ESLint, Prettier, Webpack
Backend
Express
Database
MongoDB
Deployment
AWS(EC2, S3), Nginx
벨로그 클론 프로젝트
📆 2021.11.02 ~ 2021.11.09 (2人 팀 프로젝트)
DevFoliOh, Couch Coding 에서 개최하는 리액트 토이 프로젝트입니다. 프로젝트를 위한 Backend는 이미 구축되어있고 제공되는 API를 사용하여 일주일 동안 개발을 하는 프로젝트입니다.CRA를 이용하지 않고 Webpack, Babel, ESLint, Prettier를 이용하여 처음부터 리액트 개발 환경을 구축하였습니다.API 문서를 제공하는 스웨거를 보면서 기능을 구현하였습니다. 팀프로젝트를 진행하면서 Git을 더 잘 사용하게 되었고 Git Flow를 경험하고 배울 수 있었습니다. 다른 개발자와 협업하는 과정에 관해 배울 수 있었습니다.
주요 기능
게시글(CRUD), 게시글 댓글(CRUD), 게시글 검색
Frontend
React, Styled-components, Redux, ESLint, Prettier, Webpack
Deployment
AWS(EC2, S3, CloudFront), Git Action
책을 중심으로 한 중고거래 플랫폼
BookPie 프로젝트
📆 2021.12.13 ~ 2022.02.13 (4人 팀 프로젝트)
당근마켓의 중고거래 기능과 왓챠피디아의 리뷰 기능을 결합한 중고거래 사이트입니다. 안읽는 책은 중고로 팔 수 있도록 사용자 중계를 해주고 궁금한 책은 검색을 통해서 사용자에게 리뷰를 제공합니다.백 엔드 개발자와 협업하는 과정에 관해 많이 배울 수 있었습니다. 필요한 명세를 문서로 작성하여 소통하였고, 필요한 지식도 함께 공유하며 학습할 수 있었습니다.CRA를 이용하지 않고 TypeScript, Webpack, Babel, ESLint, Prettier를 이용하여 처음부터TypeScript 리액트 개발 환경을 구축하였습니다.테스트 환경을 구축을 하여 프론트, 백엔드 협업자와 개발을 공유하며 이중 체크를 통해 실제 배포를 하기전에 버그를 찾으며 개발을 진행하였습니다. Jenkins, Git Action을 사용하여 CI,CD 환경을 구축하고 경험 할 수 있었습니다.
주요 기능
소셜 로그인, 선호 장르 차트, 마이페이지, 타회원 마이페이지
통합검색, 중고장터, 리뷰, 중고상품 추천,포인트 결제
통합검색, 중고장터, 리뷰, 중고상품 추천,포인트 결제
Frontend
TypeScript, React, Styled-components, Redux/tookit, ESLint, Prettier, Webpack
Deployment
AWS(EC2, S3, CloudFront), Nginx, Git Action, Jenkins, Docker
포트폴리오 웹사이트
📆 2022.02.18 ~ 2022.02.21 (1人 개인 프로젝트)
포트폴리오 용도로 제작한 웹사이트입니다. 지금 보고 있는 바로 이 웹사이트에 해당합니다.TypeScript, Gatsby.js를 이용하여 개발하였습니다. Github에서 제공하는 호스팅 서비스 Github Page를 이용하여 배포하였습니다.
주요 기능
간단한 자기소개, 인적 사항, 기술 스택, GitHub링크, 프로젝트 경험,
Frontend
TypeScript, Gatsby.js, Emotion
Deployment
Github Page