Dev/react, vue

ref 사용법

https://bobbyhadz.com/blog/react-set-ref-style

CRA Typescript strict of eslint

d타입스크립트가 적용된 CRA 프로젝트에서 Eslint를 수정해보려합니다. 아래 명령어로 CRA Typescript 버전을 생성 npx create-react-app my-app --template=typescript 근데 저 빨강색 밑줄이 거슬린다. jsx에서는 잘만 썼는데..후.. 저거는 tsconfig.json 에서 strict: true 로 설정되어있어서 그렇다. 저거 끄면 기존 처럼 쓸 수 있다. 모든 eslint가 꺼지는 것은 아니다. 몇가지만 disabled 되는데 아래에 strict가 어떤것들을 설정하는지 자세히 알수 있다. https://kovalevski.net/how-to-configure-tsconfigjson-typescript-strict-options/ How To Config..

craco 사용하기

cra 로 react app 을 작성하게 되면, 경로가 마음에 드는대로 안된다. | 자세히는 1. 상대경로 됨 2. src/dfdf/dfdf/dfdf src 부터 타고 내려와야해 이런 귀찮음을 줄이기 위해서는 crago 를 사용하면 된다. const CracoAlias = require("craco-alias"); module.exports = { plugins: [ { plugin: CracoAlias, options: { source: "tsconfig", baseUrl: "./src", tsConfigPath: "./tsconfig.extend.json", }, }, ], }; craco.config.js 내가 했던 컨피그 파일 ------- { "compilerOptions": { "baseUrl..

useLayoutEffect 사용

kentcdodds.com/blog/useeffect-vs-uselayouteffect useEffect vs useLayoutEffect The simple rules for when to use each. kentcdodds.com 스크롤 문제때문에 useLayoutEffect를 사용함 근데 useLayoutEffect(() => { window.scrollTo(0, 0); }, []); 이게 만약 checkbox 클릭할때마다 또 렌더되니깐 계속 실행된다. 그래서 빈 리스트를 넣어줘야 초기 한번만 실행된다.

axios 사용해보기

yarn add axios import axios from "axios"; async function send() { const response = await axios.post("http://localhost:8000/survay", { context: JSON.stringify(result), }); }

[react] 이미지 흐릿하게 나오는 경우

흐릿 제가 업로드한 로고는 뭔가 흐릿합니다. 사이즈도 큼지막한데 사이즈를 줄이면 흐릿해지네요 원인은 백터파일이 아니여서 저렇게 나오는 것이였습니다. 알고는 있었지만 저화질을 늘렸을때만 흐릿해 지는 줄 알고있었습니다. png는 고화질을 css로 사이즈 줄여사용할때도 흐릿해 집니다. 결론은 svg 파일을 사용하면 제대로 나옵니다.

[react] 이미지 태그

잘못된 방식 function App() { return (

[react] 라우터 설치 및 적용

설치 yarn add react-router-dom 적용 src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; // 여기추가 import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( // 여기추가 , document.getElementById('root') ); reportWebVitals(); BrowserRouter라는 컴포넌트를 사용하여 감싸면 됩니다. 이 컴포넌트는 웹 애플리케이션에 HTM..