판다의 삶

create-react-app처럼 웹팩을 사용하는 경우에 img 태그에 이미지 소스를 넣는 방법은 두가지다. 1. require() 사용하기 2. import해서 사용하기 import imgfile from './imgfile.png'; require()와 import 사용 시 차이점은? import로 모듈을 불러오는 경우 사용하지 않는 코드들은 웹팩의 tree shaking에 의해 빌드 시 제거된다. 결과적으로 코드량이 줄어들고 성능적으로 우수해진다. 반면 require()를 사용하는 경우, 모듈을 동적으로 불러올 수는 있지만 불필요한 코드들까지 불러오게 된다.

react-pdf 패키지를 활용하면 리액트에서 PDF 파일 미리보기 기능을 쉽게 구현할 수 있다. 온라인 데모는 여기에서 확인할 수 있다. 1. 프로젝트에 react-pdf 패키지를 설치한다. npm install react-pdf 2. PDF.js worker를 활성화한다. create-react-app 프로젝트의 경우 아래 코드를 소스 파일에 추가한다. import { pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`; create-react-app 프로젝트가 아닌 경우 npm react-pdf Readme ..

할당 또는 함수 호출이 예상되나 대신 식이 표시되었다는 의미의 오류이다. MDN JavaScript 화살표함수에 따르면 화살표 함수의 몸체에서 괄호로 감싸지지 않았거나 소괄호()로 감싸진 부분은 return문이 없어도 return 값을 반환한다. 반면, 중괄호{}로 감싸진 부분은 return문이 없으면 return 값을 반환하지 않는다. 따라서 다음의 경우 아래와 같이 수정할 수 있다. arr.map((item, index) => {{item}}) 1. 중괄호를 제거한다. (가장 간단함) arr.map((item, index) => {item}) 2. 중괄호 대신 소괄호를 사용한다. arr.map((item, index) => ({item})) 3. return문을 추가한다. arr.map((item, ..

React를 임포트해주면 된다. import React from 'react'; JSX는 자바스크립트 문법의 확장으로 ECMA 표준이 아니다. 따라서 바벨과 같은 툴로 JSX를 자바스크립트로 변환해야 한다. 바벨이 JSX가 사용되었음을 알고 이를 변환하도록 하기 위해서는 React를 임포트해주어야 한다. 참고: [스택오버플로우] 'React' must be in scope when using JSX in routes.js file https://stackoverflow.com/questions/56562685/react-must-be-in-scope-when-using-jsx-error-in-routes-js-file