리액트를 다루는 기술 개정판 [일정 관리 웹 앱 만들기]

10. 일정 관리 웹 애플리케이션 만들기

  . react-icons library: 다양하고 예쁜 아이콘을 사용할 수 있는 라이브러리 https://react-icons.netlify.com/ 

  . SVG 형태의 아이콘을 컴포넌트처럼 쉽게 사용할 수 있으며, 아이콘의 크기/색상은 props, CSS 스타일로 변경할 수 있음 

React Icons

 

  1. 프로젝트 준비 

    1.0. 프로젝트 생성 및 필요 라이브러리 설치 

    1.1. Prettier 설정: 코드 스타일 깔끔하게 정리

    1.2. index.css / App Component 초기화 

 

  2. UI 구성하기

    2.1. Component 1: TodoTemplate (화면 정렬, 앱 타이틀을 보여줌 > children으로 내부 JSX를 props로 받아와 렌더링)

    2.2. Component 2: TodoInsert (새로운 항목을 입력/추가 > state를 통해 인풋의 상태를 관리)

    2.3. Component 3: TodoListItem (각 할 일에 대한 정보 보여줌 > todo 객체를 props로 받아와 상태에 따른 스타일의 UI 제공)

    2.4. Component 4: TodoList: todos 배열을 props로 받아 온 후, 배열 내장 함수 map을 사용해 여러 ListItem 컴포넌트로 변환

    . src/components 디렉터리 내부에 파일 생성 

    . Flex 학습: http://flexboxfroggy.com/#ko 

Flexbox Froggy

  3. 기능 구현하기  

    3.1. App에서 todos 상태 사용하기: App.js 내 state 정의 후 TodoList에 props로 전달 

    3.2. 리액트 개발자 도구: 리액트 컴포넌트 심층 분석을 위한 툴 (chrome extension)

    3.3. 렌더링되지 않는 변수는 useRef를 사용한다 (예: 내부에서 사용하는 id 값)

    3.4. props로 전달해야 할 함수를 만들 때는 useCallback을 사용하여 함수를 감싸는 것을 습관화

    3.5. onSubmit vs onClick: onSubmit은 Enter를 눌렀을 때도 발생한다.

    3.6. 배열의 불변성을 지키면서 배열 원소를 제거해야 할 경우, 배열 내장 함수 filter를 사용한다.

 

11. 컴포넌트 성능 최적화 

12. immer를 사용하여 더 쉽게 불변성 유지하기 

13. 리액트 라우터로 SPA 개발하기 

14. 외부 API를 연동하여 뉴스 뷰어 만들기 

15. Context API

16. 리덕스 라이브러리 이해하기 

17. 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 

18. 리덕스 미들웨어를 통한 비동기 작업 관리 

19. 코드 스플리팅 

20. 서버 사이드 렌더링 

21. 백엔드 프로그래밍: Node.js의 Koa 프레임워크

22. mongoose를 이용한 MondoDB 연동 실습 

23. JWT를 통한 회원 인증 시스템 구현하기 

24. 프런트엔드 프로젝트: 시작 및 회원 인증 구현 

25. 프런트엔드 프로젝트: 글쓰기 기능 구현하기 

26. 프런트엔드 프로젝트: 포스트 조회 기능 구현하기 

27. 프런트엔드 프로젝트: 수정/삭제 기능 구현 및 마무리 

28. 그 다음은?