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