웹팩 개발 서버 ESLint 에러 띄우기 리액트 환경에서 수동으로 웹팩과 타입스크립트까지 적용했고 이후 Prettier & ESLint 설정도 했고 .eslintrc 파일에 원하는 규칙도 작성해놨는데 문제가 발생했다. IDE에서는 린트에 맞지 않는 코드는 빨간 줄로 잘 표시가 되지만 웹팩 개발 서버에서는 잘 돌아가고 빌드 또한 잘 된다. 내가 원하는 건 개발 서버나 빌드 시 린트에 맞지 않는 코드는 에러를 띄우고 싶었다. CRA(Create-React-App) 명령어로 ESLint 설정을 하면 자동으로 개발 서버에서 에러 창이 떴는데, 수동으로 셋팅했을 때만 안 되는 경우였다. 그래서 웹팩과 관련한 플러그인을 찾아봤는데.. 역시나 관련된 플러그인이 있었다. 나중에 CRA 프로젝트를 eject을 해서 파악..
2022.07.26
BrowerRouter 새로고침 시 빈화면 리액트18 버전으로 React-router-dom v6 버전을 사용하고 있고, 타입스크립트를 적용해서 수동으로 웹팩 설정까지 해놓은 상태에서 발생된 에러입니다. 버전 문제는 아니지만, 새로고침 할 때 빈 화면이 보이는 현상이 나타나더라구요. 콘솔 창에서 네트워크 탭에 가서 확인해보니 /about/app.js 경로로 JS 파일을 호출하고 있었습니다. 정상적이라면 루트경로에 /app.js를 호출해야합니다. 콘솔 에러 메세지 http://localhost:3000/about/app.js net::ERR_ABORTED 404 (Not Found) BrowserRouter에서 HashRouter로 변경하면 정상작동 했지만.. 알아보니 웹팩 설정 문제였습니다. // web..
2022.07.17
최근 프론트엔드와 관련 한 카카오톡 오픈 채팅방을 통해 스터디를 시작했고 관련해서 공부했던 내용을 토대로 포스팅을 진행해봤습니다. SWR이란? 클라이언트는 서버에서 데이터를 받는 순간 이 데이터가 최신 데이터인지 알 수 없다. 그렇다고 무작정 서버에서 데이터를 요청하면 아래처럼 무한의 굴레에 빠져버려 본인 서버에 디도스 공격을 하는 꼴이 돼버린다. 그래서 효율적으로 최신 데이터를 유지하기 위해 여러 HTTP 캐싱 전략이라는게 존재하는데, 그중 하나가 SWR(Stale-While-Revalidate)이라는 방식이다. 이 외에 Cache-First, Network-First, Network-Only, Cache-Only 등 있다. SWR훅은 Next.js로 유명한 vercel에서 만들었으며, Stale-Wh..
2022.07.16
요즘 리액트18 버전으로 타입스크립트 셋팅을 하고 있던 와중 기본 리액트에서 잘 됐던 웹팩 설정이 안 먹혀 해결방법을 알아보았습니다. webpack.config.js ... plugins: [ new Webpack.ProvidePlugin({ React: "react", }), ], ... 이전 자바스크립트에서 사용했을 때 처럼 아래와 같이 웹팩에서 ProvidePlugin()으로 리액트를 설정해주면 jsx 파일에서 'import React form 'react' 선언을 안해줘도 됐었습니다. 그런데 타입스크립트에서 설정을 했을 때는 아래와 같은 오류가 발생하더군요. Error Message 'React' refers to a UMD global, but the current file is a module..
2022.07.13
안녕하세요. 꾸생입니다 :) 오늘은 리액트에서 효율적으로 Document Title을 설정하는 방법에 대해 기록해봅니다. Document Title이란 무엇인지 부터 알아보며 시작하도록 하겠습니다. Document Title이란? 브라우저를 통해 웹사이트에 접속하면 대표적으로 상단 탭에 페이지 제목이 위치하게 되는데요. 이 페이지 제목이 Document Title입니다. 가장 대표적인 웹사이트의 타이틀로, 고정적인 경우도 있으나 해당하는 페이지마다 달라지는 경우가 대부분입니다. 검색엔진 뿐만 아니라 사용자한테도 중요하게 보이는 요소라 생각합니다. Document Title은 HTML 문서에서 아래와 같이 작성됩니다. ... 타이틀의 변경이 필요하다면 index.html 파일의 태그 내용을 수정해주면 되지..
2022.06.25
이번 포스팅에서는 리액트 18 버전을 기준으로 웹팩 설정을 수동으로 진행해 보겠습니다. 리액트가 18 버전으로 나온지 조금 지났는데, 저는 회사에서 Vue를 계속 쓰다 보니 리액트를 공부할 시간이 없었습니다. 먼저 간략하게 CRA(create-react-app) 폴더 구조와 비슷하게 구성해보고 수동으로 웹팩설정과 가장 유용한 기능 중 하나인 HMR(Hot Module Replacement)도 설정해보겠습니다. 마지막으로 이미지 파일을 Webp 확장자로 변환해주는 웹팩 플러그인이 있더라구요. 이 것도 적용하려고 했으나.. 다음 포스팅으로 양보하겠습니다 :) 1. 폴더 구조 //React18 ├─ dist ├─ package-lock.json ├─ package.json ├─ public │ └─ index..
2022.06.08
Context API Context API는 리액트 프로젝트 내 전역 상태 관리에 사용되는 리액트 훅입니다. 전역 상태 관리를 위해 Redux, MobX, Recoil 등의 라이브러리가 있지만, 리액트 자체에서 지원하는 Context API를 사용하면 러닝 커브도 줄이면서 쉽게 전역 관리를 할 수 있는 장점이 있습니다. 전역 상태를 관리하지 않으면 컴포넌트마다 State를 하위로 분배해야 하는 프롭스 드릴링(Props Drilling)이 필수라, 프로젝트 관리에 어려움이 생깁니다. Context 생성 // ./src/Context/StoreContext.js import { createContext } from "react" export const store = createContext(null); sr..
2022.03.13
기존 React-Router-Dom v5 버전에서 v6 버전으로 업데이트가 되었습니다. Next.js를 많이 사용하다보니 업데이트된지도 몰랐네요. 우선 리액트 라우터를 설치하기 전 v6 버전의 경우 리액트 16.8 이상 버전에서 사용해야 한다는 점 말씀드립니다. 1. Install > npm i react-router-dom 2. BrowserRouter // src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { BrowserRouter } from 'react-router-dom' ReactDOM.render( , document.getElementById('roo..
2022.03.11 2
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev