치악산 복숭아

나는 보통 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..

문제 발생 상황 팀프로젝트 배포를 마무리하면서 리액트에서 특정 페이지 접속시 405 에러가 발생했다🥲 프론트엔드, 백엔드 모두 aws에서 배포 진행중이었고 각자 배포하는 방식이었음! 구글링 결과 문제의 원인 1. 프론트엔드와 백엔드의 api 메서드 방식이 서로 달라서 발생한다고 한다 2. 정적페이지로 POST 요청을 했기 때문에 (