들어가기에 앞서 check 해보기
- Section3의 모든 학습 내용 중 특히 아래 개념을 잘 기억하고 이해해야 한다.
☑️ UI / UX - Figma
☑️ Custom Component - Styled Components, Storybook
☑️ 웹 표준 & 접근성 - Semantic HTML
과제 - 나만의 애플리케이션 만들기
-
기획하기: Figma를 사용해 To-Do 앱의 프로토타입을 만들어본다.
o
-
React 클라이언트 만들기 : Create-React-App을 활용하여 애플리케이션을 작성할 환경을 구축한다.
x
-
컴포넌트 만들기: Styled Components를 사용해 애플리케이션에 사용할 컴포넌트 일부를 직접 만들어본다.
x
-
Stroybook 배포하기 : 문서화한 Storybook을 배포해 본다.
x
1. To-Do 앱 기획하기
-
Figma를 사용해 To-Do 애플리케이션의 프로토타입을 만들어 본다.
-
To-Do 앱에 맞는 CRUD 기능을 기획한다.
- 만약 간단한 메모장을 만든다면, 꼭 필요한
CRUD 기능은 다음과 같다.- Create : 메모 작성하기
- Read : 메모 불러오기
- Update : 메모 수정하기
- Delete : 메모 삭제하기
- 만약 간단한 메모장을 만든다면, 꼭 필요한
-
추가적인 기능을 기획해보고 싶다면, 두 세트의 CRUD 기능까지만 기획한다.
이 이상 기획할 경우 프로젝트를 완성하기 버거울 수 있다. -
와이어프레임을 그리며 화면을 디자인해 본다.
-
와이어프레임을 프로토타입으로 고도화시켜서 Figma를 완성해 본다.
2. React 클라이언트 만들기
-
Create-React-App을 활용해서 To-Do 앱을 작성할 프론트엔드 개발 환경을 구축한다.
-
Section2의 Create React App 콘텐츠를 참고하여
React 프로젝트를 만든다. 👉 TIL 27일차 -
React-Router-Dom, Styled-Components, Redux 1, Redux 2 등
React 애플리케이션 개발에 필요한 라이브러리들을 설치한다.
-
3. 컴포넌트 만들기
-
React 개발 환경을 구축했다면, 애플리케이션에서 사용될 컴포넌트를 직접 구현해 본다.
-
Component Driven Development를 직접 체험해보기 위해서
컴포넌트부터 구현해 본다. -
가능하다면 Section3에서 학습한 Styled-Components를
적극적으로 활용한다.
-
Advanced Challenge
소감
🔡➡️💻➡️🤓👍
오늘의 과제는 나만의 To do 애플리케이션을 만들어 보는 거였다.
최근에 엘리멘탈을 재밌게 봐서 엘리멘탈 캐릭터로 구현하면 재밌을 거 같았다.
시간이 부족하여 피그마로 기획만 하고, 코드로 구현해보지는 못했다.
최대한 피그마로 CRUD를 반영하려고 했다.
소그룹 회고에서 다른 동기분들은 달력도 구현하고,
localStorage로 브라우저 내에 내용이 남도록 하고,
CRUD에 맞게 구현한 것을 보고 짧은 시간에 최대한 구현한 것 같아서 대단하다고 생각했다.
동기분께서 내 거 보고 광고 같다고 하셨다.
아무래도 픽사 특유의 색감이 화려하기도 하고,
header와 footer에 캐릭터와 영화 제목을 넣어서 더 그런 것 같다.
나도 사이드 프로젝트로 틈틈이 완성해야겠다.
