프론트엔드 (99) 썸네일형 리스트형 NextJS Next JS란? React의 SSR(server side rendering)을 쉽게 구현할 수 있게 도와주는 간단한 프레임워크입니다. react로 개발할 때 SPA을 이용하며 CSR(Client Side Rendering)을 하기때문에 좋은 점도 있지만 단점도 있는데 그 부분이 바로 검색엔진 최적화(SEO)부분입니다. CSR을 하면 첫 페이지에서 빈 html을 가져와서 JS파일을 해석하여 화면을 구성하기 때문에 포털 검색에 거의 노출될 일이 없습니다. 하지만 Next.js에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링 하여 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링된 페이지를 전달할 수 있게 됩니다. react에서도 SSR을 지원하기에 굉장히 복잡하기때문.. Mobx Mobx란? react에서 redux이후로 많이 사용되는 상태 관리 라이브러리입니다. 간단하고 확장 가능한 상태 관리, 쉽고 확장성 있게 만들어 주는 검증된 라이브러리입니다. mobx 공식문서: https://ko.mobx.js.org/README.html 원래는 @데코레이터를 사용했지만 mobx 6부터는 데코레이터 사용을 지양하는 중입니다. MobX 작동원리 MobX 예제를 통해 작동원리 이해하기 redux toolkit - API들 redux toolkit redux toolkit은 redux 로직을 작성하기 위한 공식 권장 접근 방식입니다. redux 코어를 둘러 싸고 있으며 redux앱을 빌드하는 데 필수적이라고 생각하는 패키지와 기능이 포함되어 있습니다. redux toolkit은 제안된 모범 사례를 기반으로 하여 대부분의 redux 작업을 단순화하고 일반적인 실수를 방지하고 redux app을 더 쉽게 작성할 수 있도록 합니다. redux toolkit 공식문서: https://redux-toolkit.js.org/tutorials/quick-start redux toolkit과 기존 redux 비교 기존 redux toolkit store생성 createStore configureStore action생성 상수와 생성자 함.. Redux 리덕스(Redux)란? Redux는 JS app을 위한 관리 라이브러리입니다. props vs state vs redux props state properties의 줄임말. 구성 요소가 서로 통신하는 방법임. 컴포넌트 안에서 데이터를 전달할 때 state사용 props는 상위 구성 요소에서 아래쪽으로 흐름 mutable 자식 컴포넌트의 props를 변경하려면 부모 컴포넌트의 state를 변경해야 함 state가 변하면 re-render 됨 redux는 state를 관리하는 것입니다. redux 데이터 Flow(strick unidirectional data flow) ACTION은 간단한 JS 객체입니다. 여기에는 우리가 수행하는 작업의 유형을 지정하는 type속성이 있으며 선택적으로 redux 저장소에.. Context React Context란? React에서 한 컴포넌트 안에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 방법은 여러 가지가 있습니다. react에서 데이터 흐름 컨트롤 하는 법(state관리하는 법) state와 props를 사용해서 컴포넌트 간에 전달 react context 사용 mobx 사용 redux를 사용 react context는 component 트리의 깊이에 관계없이 props를 전달하지 않고도 component에 데이터를 제공합니다. context는 전역 데이터를 관리하는 데 사용됩니다. ex) 전역 상태, 테마, 서비스, 사용자 설정 등... context는 모든 수준에서 수동으로 props를 전달하지 않고도 구성 요소 트리를 통해 데이터를 전달할 수.. useRef 타입스크립트 ① 매개 변수의 타입과 제네릭의 타입이 T로 일치 (current 프로퍼티 직접 변경 가능) function useRef(initialValue: T): MutableRefObject; ==> interface MutableRefObject { current: T; } 위의 경우, useRef의 타입과 initialValue(변수)의 타입이 일치합니다. 이런 경우 current property를 변경 가능합니다. const numberRef = useRef(3) 위 코드를 보겠습니다. 매개 변수가 3이며 useRef의 타입도 number로 지정했습니다. 둘이 일치해서 numberRef의 타입이 MutableRefObject로 반환합니다. ② 매개 변수의 타입이 null을 허용하는 경우 RefObject .. Styled Component Styled Component란? Styled Component란 Css-in-JS라고 하는 JS파일 안에서 CSS를 처리할 수 있게 해주는 대표적인 라이브러리입니다. Styled Component 문서 설치방법 npm install styled-components 위 코드를 통해 설치합니다. package.json파일에 위와 같이 추가합니다. Firebase Firebase Firebase는 모바일 및 웹 애플리케이션을 만들기 위해 Google에서 개발한 플랫폼입니다. 대부분의 앱을 만들 때 필요한 부분들을 자동으로 만들어 줍니다. 기본적으로 벡앤드를 firebase로 간단한 기능을 실현할 수 있습니다. Firebase와 app 연결하기 1. firebase사이트로 이동 => https://firebase.google.com/ 2. 회원 가입 & 로그인 => go to console → create project → web선택 → register app → 순서대로 작업 3. 프로젝트 생성 프로젝트 루트 경로에 firebase.js 파일 만들고 방금 SDKs를 복붙한 후, export default app를 추가하면 됩니다. Auth 활성화 1. 해당 프로젝.. React Portal로 모달 생성하기 Portal은 부모 컴포넌트의 DOM계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. ReactDOM.createPortal(child, container) 첫 번째 인자(child)는 엘리먼트, 문자열, 혹은 fragment와 같은 어떤 종류이든 렌더링할 수 있는 React자식입니다. 두 번째 인자(container)는 DOM엘리먼트입니다. 1. Container 생성 위 코드처럼, 기본 root밖에 portal을 생성하고 위에 createPortal의 두번째 인자로 사용할 예정입니다. 2. createPortal 이용하기 import ReactDOM from 'react-dom' const Modal =({ open, children, onClise }) => { if.. useRef useRef를 이용해 변수를 관리할 수 있습니다. useRef란? 변수 관리 특정 DOM을 선택할때 사용하는 React Hooks입니다. const ref = useRef(value) {current: value} ref.current === value useRef vs useState vs let state를 사용하면 state가 변경되면 컴포넌트가 다시 렌더링 되지만 ref는 렌더링되지 않습니다. 변수는 컴포넌트가 렌더링되면 다시 초기화됩니다. ref는 생명주기 동안 값은 유지됩니다. Forward Ref 부모 컴포넌트의 ref를 자녀 컴포넌트에 넘겨주고 싶을 때는 그냥 ref를 사용하면 error납니다. 해결법: 전달할 때 꼭 ref란 이름으로 전달하고 싶으면, 자식 컴포넌트에 export defa.. 이전 1 2 3 4 ··· 10 다음
