치악산 복숭아

쓸 때마다 잊어버려서 기억하려고 메모하는 포스팅... currentTarget : 이벤트를 등록한 요소 target : 이벤트가 발생한 요소 HTML 삽입 미리보기할 수 없는 소스 콘솔에 target을 찍어보면 클릭이 일어난 요소가 출력되지만 // 클릭한 각각의 요소가 // 출력되는 모습 Good evening ! currentTarget은 이벤트가 등록된 최상단 요소 button이 출력된다 Good evening !

나는 보통 svg 파일을 쓸때 한꺼번에 import하는 방식으로 svg 파일을 가져왔다( ↓ 이런 방식) import LogoImage from 'logo.svg' 그러다보니 svg의 스타일을 동적으로 설정할 수 없어서 각각의 이미지 파일을 생성해서 쓰는 등 매우 비효율적인 방식으로 asset을 관리하고 있었다🤔 svg의 장점을 못살려서 고민이 많았는데 svg를 리액트 컴포넌트처럼 사용하는 방법을 알게됐다 이 방법을 사용하면 svg의 자식 태그들에 각각 스타일을 줄 수 있어서 효율적으로 관리할 수 있음!! (next에서는 이 방법은 안되고 따로 라이브러리를 설치해야 한다고 함) import { ReactComponent as LogoImage } from 'logo.svg' 이제 svg에 직접 스타일을 ..

1. 개발이 진행될 폴더를 만들어준다 cd 폴더를 만드려는 경로 mkdir 폴더 이름 2. npm init으로 package.json을 생성해서 초기화 해준다 (y 옵션을 붙여주면 별다른 질문(version, description ...) 없이 생성된다 npm init [-y] 3. 리액트를 설치한다 npm i react react-dom 4. 프로젝트의 시작점이 될 파일 위치를 잡는다 나의 경우는 프로젝트 루트 경로에 index.html을 생성한 뒤, src 폴더를 만들어서 그 안에 App.tsx와 index.tsx 파일을 생성했다 // src/App.tsx function App() { const test = (str: string) => { return str; }; return {test("he..

tsconfig 설정이 제대로 되지 않아서 발생한 문제였다! tsconfig.json 파일의 compiledOptions에 "jsx": "react" 추가해서 해결 완료! 경우에 따라서 vscode를 재실행하는 과정이 필요할 수 있다 https://stackoverflow.com/questions/50432556/cannot-use-jsx-unless-the-jsx-flag-is-provided?rq=1 Cannot use JSX unless the '--jsx' flag is provided I have looked around a bit for a solution to this problem. All of them suggest adding "jsx": "react" to your tsconfig.j..