개발새발 로그

개인 프로젝트를 진행하면서 배포 후 테스트를 점검하기 위해 Vercel에 배포를 해야했다.진행하면서 생긴 문제를 해결하는 과정을 정리해보려고 한다.  😯공공 데이터에서 http만 지원한다고?이 부분을 전혀 생각하지 않고 배포를 했는데 아래와 같이 오류가 발생했다.Mixed Content: The page at ' [배포 주소] ' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '[요청 주소'. This request has been blocked; the content must be served over HTTPS검색해보니 아래와 같은 오류를 뜻한다이는 웹 페이지가 HTTPS로 로드되었지만, 페이지 내에서 HTTP로 리..

NextJS app router를 살펴보면서 궁금한 점 몇가지 정리해보았다. 1. Route Handler는 무엇일까?공식문서에서는 "라우트 핸들러를 사용하면 웹 요청 및 응답 API를 사용하여 지정된 경로에 대한 사용자 지정 요청 핸들러를 만들 수 있습니다."  라고 표현하고 있다. 사용법을 보면 아래와 같다.// 경로 : api/post/route.tsexport async function GET() { const res = await fetch('https://data.mongodb-api.com/...', { headers: { 'Content-Type': 'application/json', 'API-Key': process.env.DATA_API_KE..

리액트에서는 이벤트 객체가 아닌 합성 이벤트라는 객체를 사용한다고 한다.리액트에서 이벤트를 처리할 때 이벤트 위임으로 처리한다고 한다. 이렇게 리액트에서는 이벤트를 기존과 다른 방식으로 처리하는 것 같다.이를 공부하면서 학습한 내용을 정리해보려고 한다.  📖합성이벤트🤔Event에 offsetX가 없다고..? 예전에 프로젝트를 진행하면서 Event객체를 사용할 때 문제가 하나 있었다.받아온 Event 객체에 내가 원하는 속성이 없다고 뜨는 문제였는데 그때는 그냥 "아~ 그렇구나" 하고 넘기고 해결했었다. 오늘은 그 문제를 한번 다시 갖고 와서 깊게 파고들려고 한다. 리액트에서 아래와 같이 작성하면 타입스크립트 오류가 뜬다. function handleClick(e: MouseEvent) { co..

리액트 상태 관리 라이브러리가 내부에서 어떤식으로 구현이되는지 공부하면서구현 방식을 처음 봤을 때 이해하기가 어려웠다. 그래서 직접 코드를 작성해보고, 그림으로 표현하면서 더 쉽게 정리해보았다. 먼저 웹 애플리케이션에서 상태로 분류될 수 있는 것들은 대표적으로 아래와 같다.1. UI : 상호작용이 가능한 모든 요소의 현재 값(다크/라이트 모드,라디오를 비롯한 각종 input, 알림창의 노출 여부)2. URL : 브라우저에서 관리되고 있는 상태 값3. 폼(form): 폼이 로딩 중인지, 현재 제출했는지, 접근이 불가능한지, 값이 유효한지 등4. 서버에서 가져온 값: 클라이언트에서 서버로 요청을 통해 가져온 값도 상태로 볼 수 있다. 🤔왜 상태관리 라이브러리가 필요할까?웹 서비스에서 점차 다양한 기능이 제..

우리가 프로젝트를 빌드하기 위해서 많은 빌드 툴을 사용하고 있다. 그 중 대표적인 빌드 툴은 Babel과 Terser일 것이다.(Webpack도 빌드 툴이다.) 프로젝트의 규모가 커질 수록 전체 코드들이 Babel과 Terser과 같은 빌드 툴을 거쳐서 실제 프로덕션 코드로 변환되는 시간이 코드양에 비례해 늘어나게 된다. 빌드 시간이 오래 걸린다면 빌드를 할 때마다 그 시간을 기다려야 한다. 어떻게 빌드를 빠르게 할 수 있을까? NextJS에서 Next 12버전 부터 정식으로 도입된 SWC라는 툴이 있다. Next는 SWC로 구축된 새로운 컴파일러로 빌드하면 기존과 비교했을 때 빌드 타입이 5배까지 빨라진다고 소개했다. 이번 포스팅에서는 Babel과 Terser, SWC에 대해 알아보고, SWC가 왜 빠..

ref를 사용하고, 학습하면서 생각하게된 궁금점이 많았다.궁금점에 대한 해답을 찾으면서 학습한 내용을 정리해봤다. 🤔왜 ref를 props로 전달하면 안될까?useRef를 사용해서 자식 컴포넌트에 ref를 전달할 때 이렇게 코드를 작성할 수 있다.export default function MainPage() { const ref = useRef(null) return ( )}const ChildComponent = ({ ref }) => { useEffect(() => { console.log(ref) }, [ref]) return 하이}그러면 아래와 같이 경고문을 띄우게 된다.또한 undefined를 반환한..

React에서 제공되는 hook들이 있는데 이를 최대한 활용하는 것이 좋다고 개인적으로 생각한다. 특히 생소한 훅들이 몇몇 있는데 그 중에서 3가지를 가져와봤다. React 18에 도입된 새로운 기능인 useId와 useTransition,useDeferredValue 에 대해서 알아보자 📖useId https://react.dev/reference/react/useId useId – React The library for web and native user interfaces react.dev useId는 아래와 같이 사용한다고 한다. const id = useId() useId는 어떤 아이디를 생성하는 것으로 보인다. 그럼 useId를 실제로 console.log에 찍으면 어떻게 나올까? const ..

리액트의 특징 중 가장 많이 언급되는 것이 가상 DOM이라는 것이다. 하지만 이 가상 DOM에 대해서 자세히 모르는 경우가 많다. 이번 포스팅에서는 가상 DOM에 대해서 자세히 알아보려고 한다. 가상 DOM 생긴 이유? 가상 DOM은 왜 생겼을까? 가상 DOM 이전에 DOM을 먼저 알아보자 DOM이란 웹페이지에 대한 인터페이스로 브라우저가 웹페이지의 콘텐츠와 구조를 어떻게 보여줄지에 대한 정보를 담고 있다. 그럼 브라우저가 웹 사이트에 접근요청을 받고 화면을 그리는 과정을 살펴보자 CRP(Critical Rendering Path) 브라우저는 위 과정을 거쳐서 웹페이지를 렌더링 한다. 그렇다면 사용자의 인터렉션으로 업데이트가 된다면 어떻게 될까? 위처럼 자바스크립트가 DOM을 수정해서 업데이트가 발생한다..