febc11-react

멋쟁이 사자처럼 Front-End BootCamp 11기: React 프로그래밍

예제 테스트(GitHub Page): https://uzoolove.github.io/febc11-react/workspace-ins

수업 목차

수업 스케쥴(일정은 변동 가능)

1주차 (2024.11.06 ~ 2024.11.08, 3일)

TodoList - vanilla JS
Counter 프로그램 - 라이브러리 개발
TodoList - 라이브러리 이용

2주차 (2024.11.11 ~ 2024.11.14, 4일)

Counter, TodoList - React
리액트 란? 리액트 개발환경 설정, create-react-app, Vite
JSX, 가상 DOM, 리액트 렌더링
리액트의 핵심 Props, State
리액트 개발에 자주 사용하는 자바스크립트 문법

3주차 (2024.11.18 ~ 2024.11.22, 5일)

리액트 컴포넌트(함수형 컴포넌트, 클래스 컴포넌트)와 라이프 사이클
리액트 훅, useState, useEffect
리액트 훅, useRef, useReducer
리액트 훅, useMemo, useCallback
사용자 정의 훅 만들기

4주차 (2024.11.25 ~ 2024.11.28, 4일)

리액트 Router
Context API
전역 상태 관리, Recoil, Zustand

5주차 (2024.12.02 ~ 2024.12.06, 5일)

HTTP 통신(Fetch API, Axios, React Query)
백엔드 개발과 API 서버
스타일 적용, CSS Module, Styled components, Tailwind CSS
배포
Next.js

6주차 (2024.12.09 ~ 2024.12.16, 5일)

Next.js
프로젝트 실습 - 로그인, JWT 토큰 인증
프로젝트 실습 - 게시물 관리

사전 질문

자바스크립트를 잘한다는 것은 어떤건가요?
- 기본 문법
- 중요 개념
  - class, prototype, hoisting, closure, this, scope
- 비동기 프로그램
  - callback, Promise, async/await
- 이벤트 처리, DOM 조작
- 디버깅
  - 개발자 도구 활용
- 라이브러리/프레임워크 사용
  - axios, Angular, Vue.js, React…
리액트를 잘한다는 것은 어떤건가요?
- JS + 리액트의 구조와 원리를 이해하고 규칙을 이해
리팩토링을 잘한다는 것은 어떤건가요?
- 기능은 유지하면서 더 깔끔하게 코드를 수정하거나 새로운 언어, 라이브러리, 프레임워크를 사용해서 코드 수정
- 리팩토링의 목적을 정확히 인지
- 모듈화, 함수 통합 등의 작업 개선
- TDD 기반 개발
- 성능 최적화
리액트나 자바스크립트로 학습기간동안 해볼만한 미니 프로젝트 추천해주세요.
- 수업시간에 TodoList 개발
- 바닐라 프로젝트
- 게시판 개발
- JS 수업때 만들었던 채팅(디스코드)
리액트라는 프레임워크를 처음 접하다보니깐, 어떤 방식으로 학습해야 할 지에 대한 막연한 두려움이 있습니다. 혹시 효과적인 학습 방법이 있는지 또는 간단한 가이드라인을 제시해주실 수 있으신지 궁금합니다.
- 수업 잘들으세요.
- 질문 많이하세요.
  - 내가 모르면 다른 사람도 모름.
  - 자바스크립트도 질문.
  - 많은 사람 앞에서 질문하기가 꺼려지면 자율학습 시간에 개인적으로 질문
- 그날 배운 내용은 반드시 그날 소화하세요.
  - 예습 보다는 복습
리액트를 조금이라도 더 수월하게 받아들이기 위해 잘 알고 있어야 하는 개발 지식(자바스크립트나 html, css 등)들이 있을까요?
- 이번주에 진행

개발 환경 구축

프로그램 설치

본인의 OS에 맞는 버전 다운로드 후 설치
- Nodejs 설치 https://nodejs.org/en/download/
- Visual Studio Code 설치 https://code.visualstudio.com/download
- Git 설치 https://git-scm.com/downloads
- API 클라이언트 설치
  - Postman https://www.postman.com/downloads
  - Bruno https://www.usebruno.com/downloads

Visual Studio Code 설정

VSCode 실행
- 이미 실행중이면 File > New Window 메뉴로 새로운 VS Code 실행
File > Preferences > Settings
- “Files: Auto Save”: onFocusChange
- “Editor: Font Size”: 각자 맞춰서 조절
- “Editor: Tab Size”: 2
- “Editor: Detect Indentation”: 체크 해제
- Workspace 탭 > “Files: Readonly Include”
  - Add Pattern > workspace-ins/** 입력한 후 OK 선택
  - Add Pattern > sample/** 입력한 후 OK 선택
  - Readonly Include가 보이지 않을 경우 VSCode를 최신 버전(1.79 이상)으로 업데이트

React 개발용 웹브라우저 플러그인

React Developer Tools

리액트 컴포넌트 트리를 확인하고 컴포넌트 내부 데이터를 한눈에 볼 수 있어서 디버깅에 도움
Chrome: 크롬 웹스토어에서 React developer tools로 검색 후 설치
- https://chromewebstore.google.com/search/react%20developer%20tools
설치하면 크롬 개발자 도구에 Components 탭이 추가됨

실습 준비

Github 저장소 복사

Github 저장소 fork
- https://github.com/uzoolove/febc11-react 접속 > Fork > Create fork
fork한 저장소를 로컬에 clone
- 프로젝트를 저장할 폴더 생성 후 생성한 폴더로 이동(febc11)
- 터미널에서 실행
```
git clone https://github.com/[계정]/febc11-react.git
```
원본(업스트림) 저장소 추가
- 포크한 저장소에 upstream 이라는 이름으로 원본 저장소를 추가
```
cd febc11-react
git remote add upstream https://github.com/uzoolove/febc11-react.git
```
원본 저장소의 변경사항 동기화
- 원본 저장소의 최신 변경사항을 가져와서 병합(upstream의 main 브랜치)
```
git pull upstream main
```
- 충돌 발생시 임시로 필요한 코드만 복사
```
cd febc11-react/sample
npx degit https://github.com/uzoolove/febc11-react/sample/01 01 
```