[React 프로젝트] React 포트폴리오 템플릿

프로젝트 개요 

• React 
• 2020.10.20-2020.12.30
• 프론트엔드
• UI/UX 디자인 및 구현

순수 React 컴포넌트로 구성된 포트폴리오 프론트엔드 템플릿입니다. 

---

React 포트폴리오 템플릿

 

프론트엔드 인턴을 하면서 팀 포트폴리오 사이트를 React로 구현하는 과제를 받아 처음 React를 접해보았습니다. 레고를 조립하듯이 컴포넌트를 만들어서 필요한 곳에 배치하고, state로 컴포넌트에 동적인 데이터를 효율적으로 사용하고 props를 이용해서 컴포넌트간 데이터를 공유하고 공유한 데이터를 한번에 변경시킬 수 있다는 점이 아주 매력적이라고 생각했습니다. React와 조금 더 놀아보고 싶다는 생각으로 이 재사용 가능한 포트폴리오 템플릿을 React로 구현해보았습니다. 시각적으로 즐거운 사이트를 구현하기 위해 스타일, 애니메이션을 위한 라이브러리를 다양하게 사용하려고 노력했습니다. 처음해 본 React 프로젝트라 부족한 점이 많지만 React의 매력을 느끼는 좋은 기회였습니다 :)

GitHub - Seungyoonkim66/portfolio_template: Portfolio template using REACT

---

사용한 기술

• JSX 기반 React 프레임워크
• CSS 스타일을 위해 사용한 라이브러리 : styled-component, Material-UI
• 애니메이션을 위해 사용한 라이브러리 : framer-motion, react-useanimations

사이트맵

**…으로 표시한 부분은 커스터마이징으로 더 추가할 수 있는 부분들을 의미합니다.

 

---

템플릿 사용법

$ git clone https://github.com/Seungyoonkim66/react_portfolio_template.git

$ cd react_portfolio_template

$ npm install --legacy-peer-deps

$ npm start

// localhost:3000 접속

 

자세한 사용법은 다음 링크를 참고해주세요!

 

 

---

프로젝트 리뷰

• 배운점

프론트엔더로 인턴을 하면서 팀 프로젝트 포트폴리오 사이트 프론트엔드를 구현하는 과제를 받아 처음으로 React 공부를 시작했고, 이를 병행하며 프로젝트를 진행했습니다. 사이트 맵과 각 페이지별 와이어프레임을 그리며 레이아웃을 구상했고, 이를 기반으로 React로 구현했습니다. React 프레임워크의 편리함과 높은 재사용성으로 직접 컴포넌트를 만드는 과정이 즐거웠고, 보람있었습니다. 생각한 대로 화면에 결과물이 나타나는 점이 아주 매력적이었습니다. 프로젝트와 공부를 진행할수록 생각한 디자인을 자유자재로 구현하고 싶다는 욕구가 강해져 더 강한 의지를 가지고 React를 공부할 수 있었습니다. 이 프로젝트를 계기로 React 프레임워크에 익숙해질 수 있었던 것 같습니다. ㅎㅎ

• 보완할 점

웹 프론트엔드 자체를 React로 시작하다 보니 순수 javascript가 부족하다고 느꼈습니다. 그래서 javascript를 공부하기 시작했고, 웹 전반을 다루고 싶다는 생각이 들어 백엔드 서버와 DB 관련 공부하고 있습니다.