림찌의 개발일기 💻

리액트 작업 도중 props를 넘겨주었는데, 넘겨준 prop에 빨간 줄이 떠서 마우스를 갖다 대니 이러한 문구가 떴다. 그런데 웹이 작동이 안되는 것은 아니다. 정상적으로 props를 받아오고, 실행도 되는데... 뭐지? esLint 에 걸리는 거 같은디~~! --- 우선 해결 방법부터 말하자면 props type 을 검사해주어야 빨간 줄이 사라진다. props type 검사 방법은 아래와 같은 명령어로 props-types를 설치를 해주고 yarn add prop-types import React from 'react'; import PropTypes from 'prop-types'; const ComponentName = ({children}) => { return(저는 예시 컴포넌트에요 👏 {chi..

react 에서 next.js 를 사용해서 포트폴리오를 제작중인데....로컬 이미지를 가져오는데서 막혔다. next.js 에서 로컬 이미지를 어떻게 가져오는지를 알아보자... --- 우선 next.config.js 파일을 추가한다. const withImages = require('next-images'); module.exports = withImages(); next.config.js 파일을 가장 최상위 루트에 생성하여 다음과 같은 코드를 추가한다. next-images를 install 해주지 않았다면, 우선 설치하자~ 이걸 추가하면 이제 로컬에서 이미지 파일을 import로 불러올 수도 있고, require 로 불러올 수도 있다. - import 로 불러오기 import ExImage from '...

제로초님의 React 기본강좌 webgame 만들기 강의를 들으면서 웹팩 설치 관련 내용을 정리한 글입니다. 문제가 생길시 글 내리겠습니다 :) 웹팩이란? 🤔 최신 프론트엔드 프레임워크에서 가장많이 사용되는 모듈 번들러이다. 모듈 번들러란 웹 애플리케이션을 구성하는 요소를 모두 각각의 모듈로 보고 이를 조합하여 병합된 하나의 결과물을 만드는 도구를 말한다. 웹팩에서 모듈은 HTML, CSS, Javascript, Images, Font 등등 을 모두 포함한다. 이 요소 하나하나가 모듈인셈이다. 웹을 만들다보면 이러한 모듈들이 수십개에서 큰 프로젝트라면 수백개가 생성될수 있는데 이 수많은 요소들을 하나의 파일로 합쳐주고 압축시켜주는 역할을 한다. 이렇게 압축 시켜주는걸 `모듈 번들러` 라고 한다. Webp..