포트폴리오 토이 프로젝트

바로가기

⏱ Installation

• SCSS
• React (yarn)
  • react-router-dom
  • node-sass
  • class-names
  • react-transition-group
  • react-typing-effect
  • unified, remark-rehype, remark-parse
  • gh-pages

📂 File Structure

components

• 컴포넌트 모음
  • Header
  • PageList
  • 📂 Memo, Todo
• reset용 css 파일
  • Eric Meyer’s “Reset CSS” 2.0 인용, 커스텀
  • @font-face로 "네오둥근모 import

components/Memo

• Memo 페이지 관련 컴포넌트 모음

components/Todo

• Todo 페이지 관련 컴포넌트 모음

src/containers

• PageList 안에 들어가는 레이아웃 컴포넌트들 (...-wraper) 모음

🌵 Branchs

• ✔ main : 개발 및 빌드한 기본 브랜치
• ✔ gh-pages : gh-pages 라이브러리에 따라 관리되는 배포용 브랜치

💻 Coding Convention

• Naming Rules
  • Components, SCSS Files : 파스칼표기법
  • Variable, Methods : 카멜표기법
  • Class : 띄어쓰기 '-'로 사용 <div class='logo-item'></div>
• Prettier, ESLint
  • 기본 설정 사용

📚 Packages

• react-router-dom
  • Header를 통해 페이지를 이동할 수 있도록 하기 위해 이용
• node-sass
  • SCSS로 작성한 스타일을 적용시키기 위해 이용
• class-names
  • 조건부 스타일 적용을 위해 TodoListItem에서 이용
• react-transition-group
  • 페이지를 이동할 때 화면 전환 애니메이션을 적용시키기 위해 이용
  • 이 게시글을 참고
• react-typing-effect
  • About 페이지에서 한 마디를 강조하고 디자인 컨셉에 맞추기 위하여 이용
  • npmjs.com을 참고하여 이용 (패키지 도구를 yarn으로 사용했기 때문에 명령어는 다르게 사용)
• unified, remark-rehype, remark-parse, react-virtualized
  • Memo 페이지에서 마크다운 언어로 작성한 메모를 HTML로 변환하기 위해 이용
  • 이 게시글을 참고
• gh-pages
  • white-jang.github.io로 배포하기 위해 이용