[번역] 당신의 Jest 테스트는 잘못되어 있을 수도 있습니다
원문: https://jamiemagee.co.uk/blog/your-jest-tests-might-be-wrong/
medium.com
할일!!
리액트 Learn 공식 문서 읽어보기
Quick Start
1. Quick Start - React
- Tutorial: Tic Tac To
- Thinking in React
2. Installation
- Start a New React Project
- Add React to an Existing Project
- Editor Setup
- React Developer Tools
Learn React
1. Describing the UI
- Your First Component
- Importing and Exporting Components
- Writing Markup with JSX
- JavaScript in JSX with Curly Braces
- Passing Props to a Component
- Conditional Rendering
- Rendering Lists
- Keeping Components Pure
2. Adding Interactivity
- Responding to Events
- State: a Component's Memory
- Render and Commit
- State as a Snapshot
- Queueing a Series of State Updates
- Updating Objects in State
- Updating Arays in State
3. Managing State
- Reacting to Input with State
- Choosing the State Structure
- Sharing State Between Components
- Preserving and Resetting State
- Extracting State Logic into a Reducer
- Passing Data Deeply with Context
- Scaling Up with Reducer and Context
4. Escape Hatches
- Referencing Values with Refs
- Manipulating the DOM with Refs
- Synchronizing with Effects
- You Might Not Need an Effect
- Lifecycle of Reactive Effects
- Separating Events from Effects
- Removing Effect Dependencies
- Reusing Logic with Custom Hooks
Quick Start – React
The library for web and native user interfaces
react.dev
리액트 훅스 공식 문서 읽어보기
1. Built-in React Hooks - https://react.dev/reference/react
- useCallback
- useContext
- useDebugValue
- useDefferedValue
- useEffect
- useId
- useImperativeHandle
- useInsertionEffect
- useLayoutEffect
- useMemo
- useReducer
- useRef
- useState
- useSyncExternalStore
- useTransition
2. Components
- <Fragment>
- <Profiler>
- <StrictMode>
- <Suspense>
3. APIs
- createContext
- forwardRef
- lazy
- memo
- startTransition
Built-in React Hooks – React
The library for web and native user interfaces
react.dev
react-dom@18.2.0
1. Components
- Common(e.g. <div>)
- <input>
- <option>
- <progress>
- <select>
- <textarea>
2. APIs
- createPortal
- flushSync
- findDOMNode
- hydrate
- render
- unmountComponentAtNode
3. Client APIs
- createRoot
- hydrateRoot
4. Server APIs
- renderToNodeStream
- renderToPipeableStream
- renderToReadableStream
- renderTStaticMarkup
- renderToStaticNodeStream
- renderToString
https://react.dev/reference/react-dom/components
React DOM Components – React
The library for web and native user interfaces
react.dev
- 메인 화면 설계
- useState
- 타입스크립트
- 인터페이스(interface)와 타입(type)
- useEffect
- AuthRoute로 로그인 처리
- axios 로그인 요청 보내기
- axios에 데이터 추가 - https://spongebob88.tistory.com/78
- axios에 기본(default) 헤더 추가하기 - https://stackoverflow.com/questions/43051291/attach-authorization-header-for-all-axios-requests
- Cross Origin 여러개 허용
- add multiple cross origin urls in spring boot
- [ERROR] The 'Access-Control-Allow-Origin' header contains multiple values
- CORS는 왜 이렇게 우리를 힘들게 하는걸까? - https://evan-moon.github.io/2020/05/21/about-cors/
- https://stackoverflow.com/questions/49602601/handling-error-invalidrequestexception-missing-grant-type
- 리액트 훅스 일반 함수에서 호출하면 안된다
- https://velog.io/@adguy/react-hook-%EC%9D%98-setState%EC%97%90%EC%84%9C-callback-function-%EC%82%AC%EC%9A%A9
- MUI(Material UI)
리액트를 다루는 기술
#1 리액트 시작
#2 JSX
#3 컴포넌트
#4 이벤트 핸들링
#5 ref: DOM에 이름 달기
#6 컴포넌트 반복
#7 컴포넌트의 라이프사이클 메서드
#8 Hooks
#9 컴포넌트 스타일링
#10 일정 관리 웹 애플리케이션 만들기
#11 컴포넌트 성능 최적화
#12 immer를 사용하여 더 쉽게 불변성 유지하기
#13 리액트 라우터로 SPA 개발하기
#14 외부 API를 연동하여 뉴스 뷰어 만들기
#15 Context API
#16 리덕스 라이브러리 이해하기
#17 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기
#18 리덕스 미들웨어를 통한 비동기 작업 관리
#19 코드 스플리팅
#20 서버 사이드 렌더링
#21 백엔드 프로그래밍: Nod.js의 Koa 프레임워크
#22 mongoose를 이용한 MongoDB 연동 실습
#23 JWT를 통한 회원 인증 시스템 구현하기
#24 프런트엔드 프로젝트: 시작 및 회원 인증 구현
#25 프런트엔드 프로젝트: 글쓰기 기능 구현하기
#26 프런트엔드 프로젝트: 포스트 조회 기능 구현하기
#27 프런트엔드 프로젝트: 수정/삭제 기능 구현 및 마무리
#28 그다음은?
실전형 리액트 Hooks 10개
#1 USESTATE
#1.0 Introduction to useState
#1.1 useInput
#1.2 useInput part Two
#1.3 useTabs
#2 USEEFFECT
#2.0 Introduction to useEffect
#2.1 useTitle
#2.2 useClick
#2.3 useConfirm & usePreventLeave
#2.4 useBeforeLeave
#2.5 useFadeIn & useNetwork
#2.6 useScroll & useFullscreen
#2.7 useNotification
#2.8 useAxios
#2.9 Conclusions
#2.10 Publishing to NPM
#2.11 What to learn next
초보자를 위한 리덕스 101
#1 PURE REDUX: COUNTER
#1.0 Vanilla Counter
#1.1 Store and Reducer
#1.2 Actions
#1.3 Subscriptions
#1.4 Recap Refactor
#2 PURE REDUX: TO DO LIST
#2.0 Vanilla ToDo
#2.1 State Mutation
#2.2 Delete To Do
#2.3 Delete To Do part Two
#2.4 Conclusions
#3 REACT REDUX
#3.0 Setup
#3.1 Connecting the Store
#3.2 mapStateToProps
#3.3 mapDispatchToProps
#3.4 Deleting To Do
#3.5 Detail Screen
#3.6 Conclusions
#4 REDUX TOOLKIT (BONUS)
#4.0 Redux Toolkit
#4.1 createAction
#4.2 createReducer
#4.3 configureStore
#4.4 createSlice
#4.5 Conclusions
ReactJS로 영화 웹 서비스 만들기
#1 SETUP
#1.0 Creating your first React App
#1.1 Creating a Github Repository
#1.2 How does React work?
#2 JSX & PROPS
#2.0 Creating your first React Component
#2.1 Reusable Components with JSX + Props
#2.2 Dynamic Component Generation
#2.3 map Recap
#2.4 Protection with PropTypes
#3 STATE
#3.0 Class Components and State
#3.1 All you need to know about State
#3.2 Component Life Cycle
#3.3 Planning the Movie Component
#4 MAKING THE MOVIE APP
#4.0 Fetching Movies from API
#4.1 Rendering the Movies
#4.2 Styling the Movies
#4.3 Adding Genres
#4.4 Styles Timelapse
#4.5 Cutting the summary
#5 CONCLUSIONS
#5.0 Deploying to Github Pages
#5.1 Are we done?
#6 ROUTING BONUS
#6.0 Getting Ready for the Router
#6.1 Building the Router
#6.2 Building the Navigation
#6.3 Sharing Props Between Routes
#6.4 Redirecting
트위터 클론코딩
#0 INTRODUCTION
#0.0 Welcome!
#0.1 Requirements
#0.2 What is Firebase
#0.3 When To Use Firebase
#0.4 Pricing in Firebase
#1 SETUP
#1.0 React + Firebase Setup
#1.1 Securing the Keys
#1.2 Router Setup
#2 AUTHENTICATION
#2.0 Using Firebase Auth
#2.1 Login Form part One
#2.2 Recap
#2.3 Creating Account
#2.4 Log In
#2.5 Social Login
#2.6 Log Out
#3 NWEETING
#3.0 Form and Database Setup
#3.1 Nweeting!
#3.2 Getting the Nweets
#3.3 Realtime Nweets
#3.4 Delete and Update part One
#3.5 Delete and Update part Two
#3.6 Recap
#4 FILE UPLOAD
#4.0 Preview Images part One
#4.1 Preview Images part Two
#4.2 Uploading
#4.3 File URL and Nweet
#4.4 Deleting Files
#5 EDIT PROFILE
#5.0 Get My Own Nweets
#5.1 Update Profile
#5.2 Update Profile Bugfix
#6 FINISHING UP
#6.0 Cleaning JS
#6.1 Styles
#6.2 Deploying
#6.3 Security on Firebase
#6.4 API Key Security
#6.5 Conclusions