본문 바로가기

js,ts/react and g-library

(8)
usememo, usecallback https://leehwarang.github.io/2020/05/02/useMemo&useCallback.html
린팅, 포맷팅 셋팅 https://velog.io/@kmlee95/React-Typescript-eslint-prettier%EC%84%A4%EC%A0%95
[nextjs]nextjs를 왜쓰냐면! nextjs는 CRA(create-react-app)과 같은 리액트 프레임워크이다. 라이브러리와 프레임워크의 차이를 니꼬쌤은 내 코드가 만들어져 있는 외부의 도구를 갔다쓰면 라이브러리, 프레임워크가 정해놓은 장소에 내 코드를 갔다놓으면 프레임워크라고 한다 (괜찮은 분류인듯?) 구조를 짜보며 느낀 프레임워크 nextjs의 초반감회를 얘기해보자면 0. 구조를 대략적으로 짜준다 요기에 내가 이용할 방식으로 가미하기시작함 0-1. 페이지구성을 자동으로! /pages 하위에 1) 파일이름을, 혹은 2) 폴더아래 index.tsx를 지점(중첩된 파일들에 대해서도 지원)으로 자동으로 라우팅처리를 해준다 3) 동적라우터 구성도 가능! ex) pages/blog/[slug].js -> /blog/:slug (동적인 세그..
프레임워크 정하기 1. React 16.8 버전 이상 2. FrameWork - 넥스트, remix, gatsby 3. Style FrameWork - chakra, tailwind, ..... bootstrap 4. 키클록 연동 - video-out -> 리액트 키클록 연동
[npm]code ERESOLVE https://velog.io/@dev_cecy/npm-install-%EC%98%A4%EB%A5%98-code-ERESOLVE npm install 오류 (code ERESOLVE) 예전에 작성했던 코드를 로컬로 다시 클론받아 코드를 수정하려고했다. 화면을 보기위해npm start를 해주었더니, script 오류가 났고🤦🏻‍♀️ 당황하지 않고 npm install을 해주었다. 그랬더니 이 velog.io npm install --save --legacy-peer-deps 이후 npm i
[react]input losing focus when rerendering https://stackoverflow.com/questions/22573494/react-js-input-losing-focus-when-rerendering React.js - input losing focus when rerendering I am just writing to text input and in onChange event I call setState, so React re-renders my UI. The problem is that the text input always loses focus, so I need to focus it again for each letter ... stackoverflow.com 결론: 키의 문제다
[react-error]react Uncaught ReferenceError: process is not defined https://stackoverflow.com/questions/70368760/react-uncaught-referenceerror-process-is-not-defined React Uncaught ReferenceError: process is not defined I am getting issue with iframe. Till today everything was working as expected. Today I added very simple Modal component and somehow iframe started appearing. It appears when I am editing file and ... stackoverflow.com package.json에 resolutions: ..
[rtk]redux-toolkit 사용기 axios 로 받아온 정보가 있다고 하자. 처리해야하는 곳은 많은데 어디에서 숨기고, 어디에서 분기해줘야하는지 기준이 필요하다 그리고 ts인 만큼 어떻게 interface를 정의해서 데이터를 다루는게 효율적일지.. 등등 굴러가게 하는것은 뭐 어떻게든 되긴하는데, 좋은 코드의 기준이 필요하다 *** 여기서 방식을 참고하도록 하자 https://kyounghwan01.github.io/blog/React/redux/redux-toolkit/#%E1%84%8C%E1%85%A9%E1%86%BC%E1%84%92%E1%85%A1%E1%86%B8-%E1%84%8B%E1%85%A8%E1%84%8C%E1%85%A6 Redux Toolkit을 사용하여 간단하게 상태 관리하기,reselect, redux, react, im..