ReactJS
-
ReactJS - Redux-SagaReactJS 2022. 7. 15. 10:28
- 비동기적인 것들은 어떻게 해결할 것인가? → Middleware Middleware 1. Redux-thunk ㆍ추적이 힘들고, 테스트가 어렵다 ㆍ패턴을 직접 만들어야하고 , 직접 지켜야한다 ㆍAction creator의 반환이 Action object가 아니다. 2. Redux-saga ㆍ관리하기 쉽고, 테스트가 쉽다 ㆍ적당한 패턴으로 서비스로직을 쉽게 만들 수 있다 ㆍAction creator의 반환은 Action object Redux-saga Concept 1. side effect ( 부수 효과 ) - 비동기 요청, 브라우저 캐시, 로컬 스토리지 - (자바스크립트) 코드가 외부 세계에 영향을 주거나 받는 것 2. Generator - Runner는 generator를 받을 수도 있고, gen..
-
react ( Udemy강의 ) - 13. TypeScriptReactJS 2022. 5. 20. 17:04
TypeScript - 타입스크립트는 자바스크립트의 superset 언어이다. - 자바스크립트 문법에 타입 표기 구문이 추가 - 타입스크립트 코드가 브라우저에서 실행되지 않기 때문에 JS형태로 컴파일 -> 타입표기 모두 삭제 Primitives : number, string, boolean // 1. Primitives let age: number = 12; let userName: string = 'max'; let isInstructor: boolean = true; More complex types : arrays, objects // 2. More complex types let hobbies: string[]; hobbies = ['Sports', 'Cooking']; let person1: a..
-
react ( Udemy강의 ) - 12. Testing React AppsReactJS 2022. 5. 20. 14:39
testing - Manual Testing : 수동적인 앱 테스팅, 브라우저 테스트 - Automated Testing : 자동화된 테스팅, 추가적인 코드를 작성해 메인코드테스팅 Different Kinds Of Automated Test - Unit Tests ( 단위 테스트 ) : 애플리케이션의 가장 작은 단위에 대한 테스트 작성, 개별 함수들을 테스팅 리엑트의 경우 일부 컴포넌트 테스팅 애플리케이션의 모든 단위, 모든 함수 및 컴포넌트 테스트 - Integration Tests ( 통합테스트 ) : 여러개의 구성 요소의 조합을 테스트 - End-to-End (e2e) Tests ( 전 구간 테스트 ) : 애플리케이션의 전체 워크플로우를 테스트, 전체 시나리오 수동테스트를 자동화 What To Te..
-
react ( Udemy강의 ) - 11. NextJSReactJS 2022. 5. 18. 14:37
NextJS - React를 기반으로 하는 풀스택 프레임 워크 - 대규모의 양산형 React 앱을 더 편리하게 구축 주요기능 1. 서버 사이드 렌더링( : 페이지 콘텐츠를 클라이언트가 아니라 전적으로 서버에서 준비 )을 내장 ex) 만약 클라이언트 사이트 렌더링의 경우 : 서버에서 데이터를 받아와서 처음에는 로딩상태이다. - 서버에서 해당 페이지를 사전 렌더링한 상태에서 서버에 요청이 들어 왔을 때 해당 데이터를 서버에서 가져오면 완성된페이지가 사용자와 검색 엔진 크롤러에 제공 -> React 컴포넌트를 사전 렌더링 가능 - 자동으로 페이지를 사전 렌더링 - 클라이언트와 서버 사이드 코드를 혼합 2. 파일 기반 라우팅 - 라우팅 : 사용자에게 여러 페이지가 있는 것처럼 착각하게 하는 것 - 파일과 폴더를..
-
react ( Udemy강의 ) - 10. AuthenticationReactJS 2022. 5. 18. 09:26
웹사이트에 인증이 필요한 이유 - 보호해야 할 정보가 있기 때문 Two-step Process : 1 . Get access / permission 2. Send request to protected resource How Does Authentication Work? - We can't just save and use the 'yes' > We could send a fake 'yes' to the server to request protected data 1. Server-sid Sessions - 사용자의 접근을 허가한 서버가 허가를 받은 클라이언트의 고유 ID를 생성 저장 - 이 ID는 서버에 후속 요청을 보낼 때 함께 첨부 - 단점 : 백엔드와 프론트엔드의 분리 상태는 사용하기 어렵다. 2. A..
-
react ( Udemy강의 ) - 9. DeploymentReactJS 2022. 5. 17. 18:31
Deployment Steps 1. Test Code 2. Optimize Code - 레이지로딩 : 코드를 실제로 어디론가 보내기 전에 해야할 최적화 3. Build App for Production 4. Upload Production Code to Server 5. Configure Server Optimize Code Lazy Loading : 해당 코드가 필요할 때만 특정 코드를 로딩하는 것 코드를 여러 번들로 나누고 각각 필요할 떄만 다운로드하는 것 const NewQuote = React.lazy(() => import('./pages/NewQuote)); NewQuote가 필요할 때 React에 의해 실행, 하지만 다운로드가 몇초 걸릴 수도 있기에 리액트는 다운로드동안 중단 그러기에 Rea..
-
react ( Udemy강의 ) - 8. RoutingReactJS 2022. 5. 16. 13:42
Routing - URL을 통해 JS를 사용하여 도메인 뒤의 URL과 해당 경로를 조작 가능 - 또한 URL을 제어하고 해당 URL이 변경되거나 새 HTML파일을 가져오지 않고 링크를 클릭 시 일부 React코드 작성 그래서 도메인 뒤의 해당 경로와 작동하는 URL과 작동하는 일부 코드 필요 react-router npm install react-router-dom 1. 사용 방법 ( 버전 5 ) BrowserRouter : 라우터 활성화, 라우터 컴포넌트를 래핑 2. 페이지 이동 - 대신 사용 import { Link } from "react-router-dom"; Welcome import { NavLink } from "react-router-dom"; Welcome - 특정 링크에 스타일을 넣어줄..
-
react ( Udemy강의 ) - 7-2. ReduxReactJS 2022. 5. 14. 15:03
리덕스 + 비동기 - 리듀서 함수는 반드시 순수함수여야 하며, 부수 효과가 없고 동기식이어야 한다. - 절대 리듀서 내부에서 부수 효과( 동기 비동기 )를 수행하지마시오. Fat Reducers VS Fat Components VS Fat Actions Synchronous, side-effect free code (data transformation) : Prefer Reducers Avoid Action Creators or Components Async code or code with side-effects : Prefer Action Creators or Components Never use Reducers side-effects and async task를 어디서 처리해야하는가? 1. Insid..