- 예제 테스트(GitHub Page): https://uzoolove.github.io/febc11-react/workspace-ins
- TodoList - vanilla JS
- Counter 프로그램 - 라이브러리 개발
- TodoList - 라이브러리 이용
- Counter, TodoList - React
- 리액트 란? 리액트 개발환경 설정, create-react-app, Vite
- JSX, 가상 DOM, 리액트 렌더링
- 리액트의 핵심 Props, State
- 리액트 개발에 자주 사용하는 자바스크립트 문법
- 리액트 컴포넌트(함수형 컴포넌트, 클래스 컴포넌트)와 라이프 사이클
- 리액트 훅, useState, useEffect
- 리액트 훅, useRef, useReducer
- 리액트 훅, useMemo, useCallback
- 사용자 정의 훅 만들기
- 리액트 Router
- Context API
- 전역 상태 관리, Recoil, Zustand
- HTTP 통신(Fetch API, Axios, React Query)
- 백엔드 개발과 API 서버
- 스타일 적용, CSS Module, Styled components, Tailwind CSS
- 배포
- Next.js
- 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 클라이언트 설치
- 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 이상)으로 업데이트
- Add Pattern >
- 리액트 컴포넌트 트리를 확인하고 컴포넌트 내부 데이터를 한눈에 볼 수 있어서 디버깅에 도움
- Chrome: 크롬 웹스토어에서 React developer tools로 검색 후 설치
- 설치하면 크롬 개발자 도구에 Components 탭이 추가됨
- 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 - sample/01/workspace 폴더를 복사해서 프로젝트 루트에 붙여넣기
- 완성된 강사의 코드는 workspace-ins 폴더에서 확인
- Live Server 설치
- VS Code Extention에서 live server 검색 후 설치
- workspace/index.html 파일을 열고 Live Server 실행
- VS Code 우측 하단의 Go Live 클릭
- 각 예제 클릭해서 테스트
- DOM, Ajax 관련 실습은 새로운 화면으로 이동 후 테스트
- Javascript 문법 관련 실습은 브라우저 개발자 도구 > 콘솔 탭에서 결과 확인
- React 실습은 안내 화면을 참고해서 Node.js 환경에서 테스트
- VSCode에서 소스코드 비교
- 비교할 두개의 파일을 오픈
- View > Command Palette > File: Compare Active File With... 선택
- 비교할 대상 파일 선택
- CodePen: https://codepen.io
- Codesandbox: https://codesandbox.io
- Stackblitz: https://stackblitz.com