FrontEnd/React 2

[FrontEnd/React] craco 라이브러리 설치: CRA 환경에서 Webpack 환경 설정 방법(브라우저에서 Node.js 모듈 폴리필하기)

더보기✅ 문제 상황 및 해결 아이디어 확인하기문제상황: React 애플리케이션에서 웹팩(Webpack) 빌드 에러 발생CRA로 생성한 리액트 앱에서 자연어 처리를 위해 natural 라이브러리를 사용하려고 하니, url 모듈이나 util 모듈 등을 찾을 수 없다는 에러가 발생했습니다. 즉, node.js의 핵심 모듈에 대한 폴리필(polyfill)이 없어서 발생된 문제입니다.*polyfill: 구형 브라우저 미지원 문법 등을 대응하기 위한 코드 문제상황 재연: natural 라이브러리 설치 → 소스 코드에 라이브러리 importnpm install natural위 명령어로 라이브러리를 설치한 뒤에, 소스 코드 내에 require('natural') 또는 import natural from 'natural..

FrontEnd/React 2024.07.12

[FrontEnd/React] 리액트에서 개발 로그 만들기

들어가기 앞서.. 로그 레벨을 분리해서 관리하는 게 익숙하지 않아, 생각없이 로그를 지워가면서 개발을 진행하고 있었습니다. 문득, 나중에 다시 코드에 로그를 추가해 가면서 추적할 생각을 하니 암담하더군요. 개발 로그가 왜 필요한지 몸으로 깨우쳤습니다. 이번 포스팅은 리액트에서 어떻게 개발 로그를 만드는지를 다루면서 개발 로그에 대한 중요성을 잊지 않고자 작성한 내용입니다. 제가 이해한 대로 정리한 거라 틀린 게 있다면 댓글로 피드백 부탁드립니다. :)목차1. 개발 로그의 필요성1.1. 로그의 필요성로그는 어디에서 어떤 이유로 문제가 발생하여 프로그램에 장애/이슈 등이 발생했는지 파악하기 위해 꼭 필요합니다. 로그가 없다면 모든 소스 코드를 전부 읽어야 되기 때문입니다. 잘 만들어진 로그는 문제를 빠르고 ..

FrontEnd/React 2024.05.13