Taeh

---

💡 기업 제출용 ‘김태현’의 포트폴리오

파일 구조 📝

---

📂 Taeh

- node_modules
    - react-router-dom
    - framer-motion
    - react-responsive
    - react-icons
    - react-snowfall
    - styled-components
    - react-scroll
    - react-slick
    - slick-carousel
- src
- Pages
	- Contact.jsx
	- Develop.jsx
	- Home.jsx
- assets
	- profile.jpg
- components
	- Header.jsx
	- Loading.jsx
	- OnTop.jsx
	- PageTransition.jsx
	- ProjectSlider.jsx
	- ToggleMode.jsx
- App.jsx
- index.js
- Router.jsx
- stack.js
- GlobalTheme.js
- Project.js
- .gitignore
- package-lock.json
- package.json
- README.md

사용한 도구 ⛏

---

• React - SPA가 가능한 JavaScript Framework
• Styled-components - 컴포넌트 안에서 스타일링을 하게 해주는 라이브러리
• React-responsive - OS 설정에 따라 테마 전환
• React-snowfall - 파티클 설정 라이브러리
• React-slick - 슬라이더 라이브러리
• React-icons - svg icon을 import를 통해서 불러오게 해주는 라이브러리
• React-scroll - Link 클릭 시 스크롤 이동
• Framer-motion - 애니메이션 라이브러리
• vercel - 나의 프로젝트를 무료로 배포할 수 있는 웹 페이지
• git - 버전 관리
• vscode - 소스 코드 편집기

CRA을 사용하여 제작한 프로젝트.

$ npx create-react-app .

프로젝트 실행

$ npm install
$ npm start

or

vercel 페이지로 이동하기

배운 점 🤠

---

1. React-slice은 position 잡기가 너무 힘들다.
2. styled-components 같은 경우 ThemeProvider를 설정해주면 Redux같이 어느 곳에서든지

Props를 통해서 불러올 수 있다.

1. 레이아웃을 강제로 고정시킬 경우 페이지를 resize 할 때에 변경점이 적용되지 않는다.