react10 728x90 Next.js #Image src - External CDN image is not visible Next.js src 에 외부 CDN(External) 정보를 넣으니 이미지 출력이 안되었다. 출력 방법은 간단하다. Image loader 를 사용하면 된다. import Image from 'next/image' const myLoader = ({ src, width, quality }) => { return `https://example.com/${src}?w=${width}&q=${quality || 75}` } const MyImage = (props) => { return ( ) } https://nextjs.org/docs/api-reference/next/image#loader next/image | Next.js Enable Image Optimization with the built-i.. 2022. 10. 6. React #Redux What Is Cross-Component / App-Wide State? Local State State that belongs to a single component E.g. listening to user input in a input field; toggling a "show more" details field Should be managed component-internal with useState() / useReduce() Cross-Component State State that affects multiple components E.g. open/ closed state of a modal overlay Requires "props chains" / "prop drilling" App-Wi.. 2022. 9. 24. React #Building Custom Hooks What are "Custom Hooks"? Outsource stateful logic into re-usable functions Unlike "regular functions", custom hooks can use other React hooks and React state The name must start with 'use' Sample Code src/hooks/use-http.js import { useState, useCallback } from 'react'; const useHttp = () => { const [isLoading, setIsLoading] useState(false); const [error, setError] useState(null); const sendReque.. 2022. 9. 24. React #Rules of Hooks React Rules of Hooks Only call React Hooks in React Functions React Component Functions Custom Hooks Only call React Hoos at the Top Level Don't call them in nested functions Don't call them in any block statements + extra, unoffical Rule for useEffect(): ALWAYS add everything you refer to inside of useEffect() as a dependency useEffect(() => { setFormIsValid(email && password) }, [email]); // (.. 2022. 9. 24. React #Understanding useReducer() useReducer() const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn); state: The state snapshot used in the component re-render/ re-evaluation cycle dispatchFn: A function that can be used to dispatch a new action (i.e. trigger an update of the state) reducerFn: (prevState, action) => new State / A function that is triggered automatically once an action is dispatched (via dispatc.. 2022. 9. 24. React #mongoose #페이지네이션 구현 React와 mongoose로 페이지네이션 구현 mongoose란? mongoose란, mongoDB라는 NoSQL 데이터베이스를 지원하는 노드의 확장모듈이다. mongoose는 mongoDB의 ODM(Object Document Mapping)이다. 문서를 DB에서 조회할 때 자바스크립트 객체로 바꿔주는 역할을 한다. 페이지네이션이란? 화면에 출력할 데이터 양이 많은 경우 한 화면에 전부 보여줄 수 없어 끊어 보여주는 것을 말한다. 페이지네이션 함수 find() : 조회 sort() : 순서대로 조회 limit() : 조회 개수 skip() : 넘길 개수 lean() : plain JSON 객체를 받아온다. 직접 쿼리를 작성해서 페이지 기능 구현 Post 목록을 조회하는 listAPI이다. Post.f.. 2021. 3. 17. React #ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. 에러문구 리엑트를 다루는 기술 9장 컴포넌트 스타일링 진행 중 sass 경로 간소화 설정 에러가 발생하였습니다. Failed to compile ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'includePaths'. These properties are valid: object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? } 에러 발생 원인 - CRA 버전.. 2020. 10. 12. React.js #JSX 인라인 스타일링 리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 적용할 수 없습니다. 그 대신 css 스타일을 자바스크립트 객체 형식으로 만들어 적용해야 하는데요. key는 카멜표기법(camelCase)으로 작성합니다. App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 //(1) import React //리액트는 하나의 태그 안에 감싼 형태여야 합니다. //다중행의 태그로 선언하려할 땐 Fragment로 감쌀 수 있습니다. import React, { Component, Fragment } from 'react'; //(2) import css //style은 render(){}안에 .. 2019. 9. 3. React.js #리액트 시작 ※ 『리액트를 다루는 기술』을 읽고 공부한 과정을 기록합니다. 1장 리액트 시작 React.js 리액트는 자바스크립트 라이브러리로 유저 인터페이스를 만드는 데 사용합니다. 오직 V(View)만 신경 쓰는 라이브러리이며 리액트의 주요 특징 중 하나는 Virtual DOM을 사용하는 것에 있습니다. 리액트 매뉴얼에는 다음 문장이 있습니다. 지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기 리액트는 뷰만 신경 쓰는 라이브러리이므로 기타 기능은 직접 구현하여 사용해야 합니다. 책에서는 코드 에디터 설치 후 git bash를 설치하지만 버전확인 순서를 위하여 git bash를 먼저 다운로드한 후 진행하였습니다. 실습환경 : Windows 10 Home / Node.js v8.11.1 / yarn 1.17... 2019. 9. 3. React.js #JSX란? JSX JSX는 리액트용이기 때문에 공식 자바스크립트 문법은 아니다. 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성된 코드는 나중에 코드가 번들링 되면서 babel-loader를 사용하여 자바스크립트로 변환한다. JSX 장점은 보기 쉽고 익숙하다는 것에 있다. JSX var hello = ( Hello world! ) JSX 바벨 변환 후 자바스크립트 형식 var hello = React.createElement( "div", null, React.createElement( "h1", null, "Hello world", React.createElement( "b" null, "!" ) ) ); 2019. 9. 1. 이전 1 다음
