Rewrites request Path를 다른 destination path로 매핑시켜주는 것 클라이언트사이드에서 프록시요청이 필요할 때 react-proxy 이런거 대신 사용하기 위한 옵션 Case 1. Request URL에 숨기고 싶은 정보가 있을 때, 블로그에 가장 많이 소개되는 예제인데 API Key를 request url param으로 같이 던지는 경우가 있는데 이를 브라우저단에서 표시하지 않게하기 위해 사용한다. Case 2. COR proxy 도메인이 다른 서버로부터 Set 쿠키도 되는지는 확인이 안되는데, 예제가 있는 것으로 보아 ,, 백엔드에서 응답하는 응답 헤더의 Set-Cookie 은 domain 이라는 속성을 갖는데, 여기에 기술된 도메인의 요청에만 쿠키를 set할 수 있다. 명시..

TypeScript-component, hook npm에 배포하기 최근 반응형 pagination component와 hook을 작성했다. 이 둘을 npm에 배포해놓고 싶었다.(최근 package관련해서 경각심을 느끼게된 계기도 있고해서,, 겸사겸사) npm에 배포하기 전 해야할 것 먼저 npm계정이 있어야한다. npm login으로 로그인해야한다. package.json 에 배포관련 스크립트, 정보를 추가해야한다. tsconfig.json 에 빌드관련 정보를 추가해야한다. package.json { "name":"배포할 패키지 명을 작성한다.", "main":"dist/index.js", "types":"dist/index.d.ts", "version":"0.0.1" //시맨틱버저닝을 따른다, "des..

문제 Jest 테스트시 cypress의 test scripts를 실행 Jest 테스트파일에서 import한 파일들이 절대경로로 import하는 또 다른 파일들을 읽을 수 없어 cannot find module 이슈가 발생 //jest.test.ts import { add } from "../utils/func"; // accept //utils/func.ts import { type } from "components/Navbar"; //cannot find module 원인 jest.config.js 설정에 cypress를 제외하는 설정이 없음 절대경로 설정이 없었음 해결 //jest.config.js { //...other options testPathIgnorePatterns: [ "/node_mod..

fs error in storybook 발생 npm run storybook 실행 시 Module not found: Error: Can't resolve 'components/SomeComponent' in '/Users/css/Desktop/Project/styles' 등 module 에러 발생 ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '/Users/css/Desktop/Project/node_modules/next-i18next/dist/esm/config' - fs module 참조에[러 runtime에 fileSystem 모듈을 찾을 수 없다. ..

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..

Angular를 가볍게 쓰고 싶어 만든 Front-end Framework Angular의 데이터 바인딩 특성 + React의 가상DOM기반 렌더링 특징을 갖음 특징 Angular와 Vue는 데이터가 양방향 바인딩되어있어 컴포넌트끼리 데이터를 공유할 수 있음 Vue는 컴포넌트 간 단방향 데이터 흐름을 따른다. MVVM패턴을 따르는 UI 라이브러리 Model - View - View Model - Model로 구조화하여 개발하는 방식 화면 요소들을 제어하는 코드와 데이터 제어 로직을 분리해 직관적, 유지보수가 편하게 할 수 있음 1. 데이터 바인딩 ? 데이터 바인딩은 화면에 보이는 데이터와 브라우저 메모리(js파일 내의 객체같은 값)을 일치시키는 것을 말한다. 1.1. 양방향 데이터 바인딩 화면에서 데이터..