cloneElement() React.cloneElement( element, [config], [...children] ) 새로운 element를 복사하여 반환하는 func config는 key, ref를 포함한 모든 props를 담음 결과 element는 원본 element의 prop과 새로 추가된 props을 합친 요소다 새로운 children역시 기존 children을 대체하는 새로운 요소가 된다 원본의 key, ref는 config에 새로운 prop이 없다면 유지된다. import React from "react"; import "./styles.css"; const Parent = ({ children, anotherProps }) => { const parentsVar = "Tired"; r..

i18n setting with Next 다국어 설정을 위한 Setting 설치 npm i next-i18next 필요한 설정파일 next.config.js const { i18n } = require("./next-i18next.config"); module.exports = { i18n, }; next-i18next.config.js const path = require("path"); module.exports = { i18n: { locales: ["en", "ko"], defaultLocale: "ko", }, }; public/locales en/[file].json ko/[file].json Wrap app component import { appWithTranslation } from "n..

UseEffect, useLayoutEffect useEffect layout, paint를 완료한 뒤 호출된다. 함수컴포넌트 호출 -> render문 반환 -> 배치 -> 그림 -> useEffect 호출 dep arr를 줬을 때 의존 상태의 변화가 있을 때마다 호출되므로 비동기요청에 대한 결과를 보여줄 때 깜빡 거림 3번째 항목인 깜빡거림을 경험하지 않도록 useLayoutEffect hook이 추가됨 이런거.. useLayoutEffect 그리기 이전에 func를 호출 함수컴포넌트 호출 -> render문 반환 -> 배치 -> useLayoutEffect 호출 -> 그림 effect와 문법도 같은데 생명주기에서 호출되는 시점에서 그리기 전(화면에 보이는 것)이냐, 보이고 나서 호출되냐의 차이점 필요..

settings about styled-component - styled-components storybook 사용은 npx로 설치하고 npm run 으로 돌리면 바로 수행되지만 styled-component의 props을 사용하려고 할 때 에러 발생 -> ThemeProvider를 감싸주는 데코레이터가 없기 때문 또한 엄청난 에러라인이 발생하는데 절대경로 설정해주지 않아서 나는거 임 "거의" 절대경로 //main.js const path = require("path"); module.exports = { stories: [ //.stories를 읽을 경로도 잘 지정해주어야 한다. default에 있는 폴더 외에 스토리를 작성할 때 변경 "../components/**/*.stories.mdx", "....

mirage js fake server 라이브러리 install npm i mirage example code for app 베이스서버 세팅 /// server.js import { createServer, Model } from "miragejs"; export function makeServer({ environment = "test" } = {}) { let server = createServer({ environment, models: { movie: Model, }, seeds(server) { server.create("movie", { name: "Inception", year: 2010 }); server.create("movie", { name: "Interstellar", year: 2..

Next.js는 React Framework 💪 SEO를 위한, SSR을 해주는 프레임워크라고만 알고있었다. 서버에서 미리 렌더링하는 것, 클라이언트에서 렌더링하는 것의 속도차이를 먼저 영상으로 확인해보고 글을 진행합니다. pre-render 유무의 따른 속도차이비교 클라이언트 렌더링 서버 pre-rendering 깜빡거리는건 새로고침입니다. 👏 Next.js가 해주는 것들 React에서 고려했어야할 것들을 해준다. 웹팩과 같은 번들러로 코드를 번들 바벨과 같은 컴파일러를 사용해 변환(브라우저에 적용되지 않을 수 있는 코드를 문법에 맞도록 트랜스파일링) 코드스플리팅으로 production 최적화 성능 또는 SEO를 위한 Pre render (SSR, CSR을 사용) 추가로, Next.js는 다음과 같은 ..

Redux 직접 작성한 예제를 기반으로 작성 코드와 같이 보시면 더욱 도움될 것 같습니다 0. flow 이전 글 에서 크게 달라지는 것이 없다. Action, Reducer은 완전하게 동일하다. 달라지는 점은, Context API에선 전역 데이터에 접근하기 위해 Provider에 등록했고 Reducer를 호출하기 위한 Context도 생성해주었다면 Redux에선 useDispatch 를 통해 reducer에 action을 전달해줄 수 있다. 또한 useSelector 를 사용해 useContext 를 사용하지 않고 바로 전역 데이터를 가져올 수 있다. Flow는 다음과 같다. Store(전역 데이터 저장공간)생성 하위 컴포넌트에서 접근할 수 있도록 Provider로 전역 데이터 내려주기 하위데이터에서 ..

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. - 공식문서 위의 말처럼 기계적인 props전달 코드를 없앨 수 있는 방법 중 하나다. 전역데이터를 공유하는 방법이며 로그인 유저, 테마 등의 데이터를 관리한다. Context API란 전역상태관리의 방법 중 하나이며 redux, react-router, styled-components이 이를 기반으로 구현되어있다. React패키지에서 제공하는 기능이다. (써드파티 라이브러리 X) Context API 시작 전, 알아야할 것 1. Context 객체의 형태로 전역 데이터를 담는 store라고 생각할 수 있다. const MyContext = React.createContext(defa..

redux의 배경이되는 Flux패턴과 이를 기반으로한 redux를 이해하기 위해 작성 Facebook에서는 알림기능에서 에러가 반복되어 양방향 데이터흐름의 MVC패턴에서 예측되지 않는 문제점을 해결하기 위해 Flux패턴을 도입했다고 한다. What is Flux ? 시작하기전 읽어보면 좋은 글 - flux패턴 시작하기전 보면 좋은 만화 - flux 패턴 MVC Facebook에서 사용했던 해당 패턴은 새로운 기능이 추가될 때 복잡도를 증가시키고 예측하지 못할 버그가 존재했다. 구체적으로는 알림기능이었는데, 양방향 데이터흐름이 만들어내는 예측하지못할 버그가 계속 발생하여 이를 해결하기 위해 flux패턴을 도입했다고 한다. Flux flux는 클라이언트 Web App을 만드는데 사용하는 아키텍쳐다. MVC와..

Drag Event HTML Tag에 draggable 속성을 주면 해당 요소를 드래깅할 수 있다. 농담곰 웹 API에서 지원되는 Events는 다음과 같다. Drag Event 이벤트 설명 onDrag Item을 잡았을 때 발생 onDragEnter 잡은 Item이 다른 Item이랑 겹쳤을 때 발생 onDragLeave 잡은 Item이 다른 Item을 떠났을 때 발생 onDragOver 잡은 Item이 다른 Item과 겹쳐졌을 때 milli sec마다 발생함 onDragStart Item을 잡기 시작했을 때 발생 onDrop 잡은 Item을 적절한 곳에 놓았을 때 발생 onDragEnd 잡은 Item을 놓았을 때 발생 이 중에서 내가 DnD를 구현하기 위해 사용했던 이벤트는 다음과 같다. onDragS..