머리가 나뻐서 삽질 SAP(Study And Programming)

simplebar-react - npm (npmjs.com)에서 제공하는 라이브러리를 사용할 때, 스크롤을 세로 가운데 정렬 구현. dom에 대한 참조는 크게 2가지 방법이 있다. 1. scrollableNodeProps를 useRef로 사용하여 참조하는 방법scrollableNodePropsYou can pass props to the underlying scrollable div element. This is useful for example to get a ref of it, if you want to access the scroll event or apply imperative directive (like scrolling SimpleBar to the bottom, etc.).const scro..

목차1. CORS 에러2. Proxy서버로 우회하는 방법3. express 로 프록시 서버 만들기4. React에 적용해보기5. package.json 을 사용한 프록시 설정6. CRA의 setupProxy.js 를 사용하기1. CORS 에러많은분들이 익히 알고있겠지만 빠르게 그 원인에 대해서만 정리하면 다음과 같다 웹 어플리케이션에서 다른 도메인 또는 포트로 부터 리소스를 요청할 때 발생하는 보안 메커니즘인데, 웹 어플리케이션은보안 상의 이유로 스크립트에서 동일 출처 정책(Same Origin Policy)을 따르게 되어있다.동일 출처 정책은 웹 페이지가 다른 도메인, 포트, 프로토콜로 부터 리소스를 요청할 때 제한을 두는 보안 메커니즘이다. CORS는 클라이언트에서 발생한다. 따라서 웹 브라우저는 보..

yarn berry의 PnP기능을 사용하기 위한 Create React App 설치와 Typescript 설정내용 작성은 2022.11.11 을 기준으로 합니다. (node 16.15.0)연속해서 설치와 구성이 실패하는 경우 검색을 통해 가장 최근의 설치 튜토리얼을 참조해 주세요.목차yarn 설치프로젝트 생성node_module과 package.lock.json 제거yarn berry 버전 적용vscoe를 사용하는 경우 typescript 설정을 위한 editor SDK 설치와 ZipFS 확장팩 설치plugin-typescript 설치.gitignore 설정react 실행Property 'toBeInTheDocument' does not exist on type 'JestMatchers'Failed to..

vite 번들러를 사용한 proxy 설정 1. vite 로 preact-ts 설치 $ yarn create vite https://vitejs.dev/guide/#trying-vite-online Vite Next Generation Frontend Tooling vitejs.dev 이후 설치 질문이 나오는데 설치하고자 하는 앱을 선택한다 ex) preact-ts 2. 설치된 vite에서 vite.config.ts 파일의 proxy 설정 vite가 설치되면 root의 vite.config.ts 파일 설정을 통해서 proxy 를 적용할 수 있다. API를 적용하기 위해서 jsonplaceholder 의 https://jsonplaceholder.typicode.com/todos/1 를 예로 들겠다. 주의!..

VSCode 마켓플레이스에서 ESLint와 Prettier 를 설치하고, npm에서 ESLint 설치한다. .prettierrc와 .jsconfig.json 작성(import할때 경로를 자동으로 추천해준다 ) 하고 ESLint-plugin-react-hook (hooks사용시 ESLint로 규칙을 도와줌) 을 설치할 것이다 마지막으로 .eslintrc.json 에서 Prettier 설정과, hook 설정을 적용할 것이다 # VSCode 마켓플레이스에서 Prettier - Code formatter ( 제작자 Esben Petersen ) 설치 수동사용법 : F1 > format 입력 엔터 자동사용법 : 파일 > 기본 설정 > 설정 > format on save 검색 >파일 저장할때마다 코드 자동 저장됨 ..

이전에도 좋은 내용을 많이 올리고 있었지만, Kent C. Dodds가 전업 교육자 선언을 한 이후 더 좋은 리액트 기본에 대한 글이 많이 올라오고 있다. 특히 Hook에 관해서. 이번에 When to useMemo and useCallback이라는 글을 올려 주었는데, 나도 실무에서 Hook을 점진적으로 적용하면서 두 훅을 쓸 때 공식 문서를 좀 보고 가볍게 원리를 파악해놓고 쭉 쓰고 있었다. 그래서 심층적인 이해를 한 상태로 ‘어느 타이밍에 사용하는 것이 옳은가?’ 라는 생각을 깊게 해 보지 않았다. 따라서 글을 읽고 요약을 하면서 어느 타이밍에 useMemo, useCallback 을 사용하고, 궁극적으로 이 글이 짚고자 하는 핵심에 대해 복습하고자 한다. 그냥 번역문이 아니라 본문을 읽으면서 요약..

Create react app 에서 빌드할때 빌드된 결과물이 참조할 경로를 homepage 속성으로 설정할 수 있다. 공식홈에서 지원하는 속성이며 자세한 내용은 다음의 링크를 참조 https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/deployment.md#building-for-relative-paths 더보기 상대 경로 구축 기본적으로 React 앱 생성은 앱이 서버 루트에서 호스팅되는 것으로 가정하여 빌드를 생성합니다. 이를 무시하려면를 지정 homepage하여에 package.json, 예를 들면 : "homepage" : "http://mywebsite.com/relativepath" , 이렇게하면 Create Rea..

React Hook useReducer

Reack Hook useState 함수 컴포넌트가 렌더링 될 때 const 가 재할당되는것 처럼 보이지만 실제로는 useState 함수에서 초기 여부를 검사하여 전역적으로 setter에 값을 유지한다 아주 간단한 예제인 카운터를 들어보면 import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(prevNumber => prevNumber + 1); } const onDecrease = () => { setNumber(prevNumber => prevNumber - 1); } return ( {number} +1 ..

React 시작하기 CDN 으로 연결하여 처음 사용해보기 https://github.com/HeoJeongJin/react-scoreboard-cdn/tree/master react tutorialreact scoreboard by CDN리액트는 UI 라이브러리로 Angular와 같이 프로젝트 전체를 모듈 방식으로 개발할수도 있지만 특정 페이지 내에 리액트를 끼워넣어서도 개발 가능합니다. 예를 들어, 기존에 asp, jsp, php 를 기반으로 개발하였다면 대부분 jquery와 같이 사용하였을텐데, jquery 대신 리액트를 사용할 수도 있고 jquery 같이 리액트를 사용할수도 있습니다. 이 튜토리얼은 기존 페이지 방식으로 Scoreboard라는 앱을 만들면서 react의 React Element, J..