React 총 정리

소비자우롱차·2024년 10월 28일

산대특 개념별 정리

목록 보기
7/11
  1. React 사용 이유 : 웹페이지는 이동시에 특유의 깜빡거림이 있지만, 모바일 앱은 이동시에 부드럽고 빠르다.
  2. React는 모바일 앱 같은 웹을 만들 수 있다.
  • 고품질의 웹사이트 제작 가능.
  • 많이 복잡한 UI를 가진 앱도 깔끔하게 제작 가능.
  • 모바일 앱도 제작 가능
  • 기업 입장에서는 비용절감효과 면에서 좋다.

1강 REACT, React 환경 세팅, 새 태그 만들기

2강 REACT, 변수 활용 방식

3강 REACT, className 활용 방식

4강 REACT, useState 개념 및 활용

5강, REACT, jQuery, PHP

6강 REACT, 숫자 기록, 전개구문, map, 배열

7강 REACT, 리스트를 출력하는 다른 방식, ul, li

8강 REACT, filter 활용 배열 요소 삭제, 불변성 유지

9강 REACT, 아이템 삭제(filter)

10강 REACT, 함수의 매개변수 유무에 따른 바인딩 방법차이

11강 REACT, 컴포넌트 분리 - 9강이랑 같이 볼 것

12강 REACT, 함수 분리와 매개변수

13강 REACT, NumberRecordListItem 컴포넌트 분리

14강 REACT, ArticleDetail 일반모드 수정모드 변경

15강 REACT, NumberRecorderListItem 수정모드 UI

16강 REACT, NumberRecorderListItem 수정모드 input 태그 값 변경을 허용

17강 REACT, NumberRecorderListItem 수정모드 input 태그 값 변경을 허용 후 수정

18강 REACT, tailwind, daisyUI

19강 REACT, 5초마다 할 일 추가

20강 REACT, Todo 추가 폼

21강 REACT, Todo 추가 폼을 별도의 컴포넌트로 분리

22강 REACT, TodoList를 ul, li로 표현

23강 REACT, TodoList를 별도의 컴포넌트로 분리

24강 REACT, 아이템 삭제, 함수와 데이터는 최대한 하류에서 생성, 필요 시 상류에서 생성

25강 REACT, newTodoTitle, setNewTodoTitle을 TodoWriteForm에서 생성, 최적화, 리랜더링 감소

26강 REACT, Rename문법, TodoWriteForm에서 addTodo 함수를 만들 수 있도록

27강 REACT, removeTodo를 상류에서(App)생성, 하류로 전달(하류에서 setTodos의 접근을 막기위해)

28강 REACT, setState 2가지 방식 차이점

29강 REACT, 수정 UI, 입력창

30강 REACT, 수정 취소, 취소 후 value 값 되돌리기

31강 REACT, 수정 기능 구현, input과 배열 요소의 차이가 생기는 문제가 발생

32강 REACT, 재시작, 할일 추가, 리스팅, 2차원 데이터

33강 REACT, addTodo 매개변수 변경 - 32강이랑 비교해서 볼 것(App 부분)

34강 REACT, ist 관련 컴포넌트 추가, 리스팅 UI 변경, 아이템 삭제

35강 REACT, 수정 UI

36강 REACT, 수정기능 구현

37강 REACT, 관련 state를 하나로 묶기, 리액트 커스텀 훅

38강 REACT, immer 사용법

39강 REACT, immer 적용

40강 REACT, useRef 활용해서 dom 조작하기

41강 REACT, useState와 useRef의 차이

42강 REACT, useEffect를 활용해 함수의 특정부분 재실행 방지

43강 REACT, useEffect, 의존성 배열

검색 키워드 : react hook

44강 REACT, useEffect, useState, useRef 의 조합

45강 REACT, 자식이 리랜더링 되는건 부모 영향 없음, 부모가 리랜더링 되면 자식도 같이 된다.

46강 REACT, useEffect의 의존성 배열을 활용해서 실행 민감도를 조절

47강 REACT, 행이 완료 되는데 까지 오래 걸리는 함수(소수)

48강 REACT, 1부터 입력값까지의 소수의 갯수를 알려주는 로직에 state 적용

49강 REACT, 1부터 입력값까지의 소수의 갯수를 알려주는 로직에 useEffect적용

50강 REACT, 1부터 입력값까지의 소수의 갯수를 알려주는 로직에 useMemo적용

51강 REACT, 체크박스(checkBox), 라디오 버튼(radio button), 셀렉트 박스(select box)

52강 REACT, 체크박스 다루기

53강 REACT, 라디오 버튼 다루기

54강 REACT, 라디오 버튼 다루기, map

55강 REACT, 셀렉트 버튼 다루기, map

56강 REACT, vs code 설치 및 세팅

57강 REACT, node 개념과 nvm 설치, csr, ssr

58강 REACT, nvm으로 node.js LTS 버전 설치 및 적용

59강 REACT, nextjs 개요, nextjs 프로젝트 생성

next.js(풀스택(프론트, 백) 프레임워크) : 앱 둘다 개발 가능

60강 REACT, 작업 1, nextJs 프로젝트, git 연동

61강 REACT, 작업 2, nextJs 프로젝트, git 연동

62강 REACT, 작업 3, 자동 정렬 플러그인 prettier 설정 및 관련 패키지 추가

1. 탐색기에서 prettier 파일이 없을 때

  1. cmd에다가 npm add --dev --exact prettier 입력
  2. 1번이 적용된 후에 cmd에다가 echo {}> .prettierrc.json 입력
  3. 2번이 적용된 후에 탐색기에 생긴 prettier 파일(.prettier.json)에다가 아래코드 입력
{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "all",
  "jsxBracketSameLine": true
}

2. div 태그 사용 가능

  • vscode 열고 f1 -> json 검색 Open User Settings(JSON) 선택, 아래와 같이 입력 (주의 : ,(쉼표) 있어서 중간에 넣어줘야한다.)
    • div 태그 사용 가능해짐
"emmet.includeLanguages": { "javascript": "javascriptreact" },
  "emmet.syntaxProfiles": {
    "javascript": "jsx"
  },

63강 REACT, 작업 4, button에 tailwind, mui 적용

64강 REACT, 작업 5, tailwind와 mui 충돌 피하는 법

1. tailwind.config.js에 아래 코드 추가

module.exports = {
  /*
  tailwind와 mui의 충돌을 막기 위해 추가
  대신 이러면 tailwind 문법 쓸 때 앞에 tw-를 붙여야한다.
  */
  corePlugins: {
    preflight: false,
  },
  important: true,
  prefix: 't w-',
  /* 여기까지 */

65강 REACT, 작업 6, MUI 테마 커스터마이징, React Icons

66강 REACT, 작업 7, MUI App Bar 컴포넌트

67강 REACT, 작업 8, Mui Snackbar, Alert

68강 REACT, 작업 9, Mui backdrop

70강 REACT, 작업 11, Mui Tab, Tabs

71강 REACT, 작업 12, TodoList 적용

72강 REACT, 작업 13, Todo 추가 폼 꾸미기, TextField, Button

73강 REACT, 작업 14, Todo 리스팅

74강 REACT, 작업 15, dateToStr 모듈화, theme을 App에서 분리

75강 REACT, 작업 16, Chip 적용

76강 REACT, 작업 17, Strict Mode 해제, content 디자인 변경, 테스트데이터 3개

77강 REACT, 작업 18, 멀티라인 텍스트, Box

78강, REACT, 작업 19, 리스트 역순 출력

79강, REACT, CSS 변수

80강, REACT, JS에서 정리한 색상을 CSS에서 활용

81강, REACT, tailwind 활용한 CSSS 변수 접근

82강, REACT, tailwind를 활용한 반응형 디자인, 조건적 디자인

83강, REACT, 작업 20, mui theme color 변수화, content 3등분

84강, REACT, 작업 21, classnames, content 디자인 수정

85강, REACT, 작업 22, 스크롤바

poster

86강, REACT, 작업 23, 각각의 컴포넌트로 분리, newTodoForm, TodoList, TodoListItem 활성화

87강, REACT, 작업 24, 우측 더보기 버튼 누르면 해당 option Drawer가 나오도록

88강, REACT, 작업 25, Drawer 관련 가독성 개선

89강, REACT, 작업 26, option drawer 커스텀 훅

90강, REACT, 작업 27, TodoOptionDrawer 컴포넌트 생성

91강, REACT, 작업 28, SwipeableDrawer, List, ListItem, Divider 도입

92강, REACT, 작업 29, 삭제, 수정에 아이콘 추가

93강, REACT, 작업 30, 수정 버튼 클릭시 모달창 나오도록

94강, REACT, 작업 31, todo edit Modal 커스텀 훅 도입

95강, REACT, 작업 32, todo 수정 폼 구현 및 처리

96강, REACT, 작업 33, todo 삭제 구현

97강, REACT, 작업 34, Snackbar 추가, 관련 컴포넌트 생성, 커스텀훅 생성, todo의 생성, 수정, 삭제시 Snackbar 알림 뜨도록

98강, REACT, 리코일(Recoil)이 필요한 상황

  1. REACT
  • 장점 : 편하다
  • 단점 : 공유데이터는 상위 컴포넌트에서 정의되어야 한다. ➡ 유지되어야 하는 데이터를 만들기가 까다롭다. ➡ 상태관리를 위해 툴이 필요하다. ➡ 리코일(Recoil)

  1. Recoil : REACT 상태관리 라이브러리 중 하나

99강, REACT, 리코일(recoil) 적용

100강, REACT, 복수의 atom, recoil을 활용해 데이터 보존 및 전달

101강, REACT, atomFamily

102강, REACT, 작업 35, 리코일 적용 전 state를 status로 변경

103강, REACT, 작업 36, Recoil import, todosAtom 적용

104강, REACT, 작업 37, lastTodoIdAtom 적용

105강, REACT, 작업 38, newTodoForm, TodoList, OptionDrawer, EditModal 에서 직접 todosStatus를 주입받도록

  1. 최초의 구조

  2. NewTodoForm, TodoList로 나뉨

  3. TodoList에서 TodoListItem 분리

  4. OptionDrawer와 EditTodoModal 추가

  5. NoticeSnackbar 추가

  6. 상태관리 툴 x, 직접 자식 엘리먼트에 전달

  7. 상태관리 툴 o, 필요한 엘리먼트에서 상태를 직접 주입받는다

106강, REACT, 안드로이드 스튜디오 설치. 캐퍼시터 추가, 안드로이드 프로젝트 생성

  1. cmd에서 아래 코드 순차적으로 적용
npm install @capacitor/core @capacitor/cli @capacitor/android
npx cap init
  1. 1.을 한 후 CapacitorConfig.ts 클래스에 아래 코드 적용
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'todoapp',
  webDir: 'out',
  server: {
    androidScheme: 'https',
  }
};

export default config;
  1. 마지막으로 아래코드 적용
npx cap add android
  1. 안드로이드 스튜디오를 실행해서 File -> Open 클릭 후 해당 android 폴더 열어주면 된다.

107강, REACT, 안드로이드 가상머신에서 리액트 앱 실행

profile
소비자우롱차
우당탕탕....
이전 포스트

토스페이먼츠 총 정리

다음 포스트

Spring Batch 총 정리

0개의 댓글