개발기록창고

로컬 환경에서 favicon이 제대로 적응되는 것을 보고 배포했으나 실제 배포된 서비스에서는 favicon이 보이지 않는 현상이 발생했다. 문제를 찾기 위해서는 우선 네트워크 상에서 제대로 favicon 아이콘을 불러왔는지 확인을 해야한다. favicon 아이콘을 응답으로 받아야하는데 기본적인 index.html이 응답이 된 것을 볼 수 있다. 현 프로젝트에서 public안에 favicon이 있고 index.html은 최상단에 위치해있다. 하지만 실제 배포됐을 때 favicon 경로 처리가 제대로 되지 않아서 찾을 수 없기에 기본 index.html을 응답값으로 내놓는 것이다. 따로 세세하게(?) 경로 지정을 해 줄 필요 없이 Vite라는 번들러가 알아서 /favicon으로 경로 설정하면 public 안..

import { ReactComponent as Google } from "../../../assets/icons/google.svg"; 위와 같이 svg 컴포넌트화를 해서 사용하려고 했다. 그러나 오류가 계속 발생해서 해결하려고 삽질을 2시간이나 했으나... 해결하지 못해서 다른 방법으로 svg 적용했다... 내가 시도한 svg 컴포넌트화 npm install vite-plugin-svgr ts.config.ts "include": ["src", "client.d.ts"] client.d.ts declare module '*.svg' { import React = require('react'); export const ReactComponent: React.FC; const src: string; ex..

잘 작동하나 styled-components에서 경고를 주고 있다. 왜 발생하는 것일까? 원인 발생하는 곳은 이 부분으로 StyledButton은 버튼으로 만들어져 있는데, 해당 HTML 태그에 정의되지 않은 colorType을 props로 주고 있어서 생긴 경고이다. styled-components 사용시에 정의되지 않은 props가 DOM에 전달될 때 이러한 오류가 발생한다. 해결 트랜스파일된 프롭스를 생성하여 속성을 필터링하여 DOM에 전송되지 않도록 한다. styled-components의 내장 기능 중 하나로 $로 시작하는 속성은 자동 필터링된다.

Prettier와 ESLint를 프로젝트에 동시에 적용해서 생기는 오류 ESLint에서 발생하는 오류이며 실행하는데에 지장은 없지만 다 빨간색으로 밑줄이 그어져서 굉장히 거슬린다. ESLine에서 수정하면 해결할 수 있다. 해당 파일을 열어주고 rules에 endOfLine: 'auto'를 추가해주면 끝! 문제 해결! 참고 : https://noogoonaa.tistory.com/62

자바스크립트 코드 작성 후에 Run Code(Ctrl+Alt+N)을 하면 정상적으로 출력이 되지 않고 글자가 깨지고 있다 톱니바퀴 선택 - 확장 설정 클릭 후 Code-runner : Executor Map 클릭해서 settings.json파일을 확인해보면 언어별로 path가 지정되어 있는데 그 중 자바스크립트는 node로 되어있다. CMD창에 node -v 를 입력해보니 node가 설치되어 있지 않다 해결 방법은 Node.js를 설치하는 것이다. (Node.js 한글 사이트->https://nodejs.org/ko/) 안정적인 LTS버전을 다운받도록 한다. cmd창에 node -v 명령으로 설치가 되었는지 확인하고 다시 VS Code에서 Code Runner를 실행해본다 잘 표기되는 것을 확인할 수 있..