React 관련16 React 렌더링 사이클과 useEffect, 그리고 useRef ref와 useEffectuseEffect는 굉장히 섬세하다. 웬만해서는 사용해서는 안된다. 그런데, 이전에 구글 맵을 렌더링할 때, useEffect와 ref를 같이 사용함으로써, 예기치 못한 부작용들이 발생할 수 있었다. 이를 위해서 react의 trigger phase, render phase와 commit phase를 파고들어 보자.TLDR리액트 공식문서에서는 렌더링 과정을 다음과 같이 얘기한다.렌더링 트리거 (손님의 주문을 주방으로 전달)컴포넌트 렌더링 (주방에서 주문 준비하기)DOM에 커밋 (테이블에 주문한 요리 내놓기)렌더링 트리거렌더링 트리거란, 단순히 렌더링을 트리거하는 것이다. 렌더링 트리거가 왜 일어나는지에는 다음의 두 가지 이유가 있다.Initial render어떠한 동작(페이지 방.. 2024. 4. 25. React의 Typescript와 함께 data fetching(axios로 API 호출) Typescripttypescript를 사용함에 따라 기존의 코드에서 사용하던 axios가 어려워져버렸다... 기존의 자바스크립트를 이용한 axios는 간단하고 데이터를 쉽게 받아올 수 있었으나, Dynamically Typed Language라는 말에 걸맞게, 불러오는 데이터의 형식을 전혀 알 수 없었다. 다음과 같은 js 코드를 보자, 내 취향껏 짠 코드이다. 엄청 간단하고 명확하지만, 어떤 데이터를 주고 받는지 알 수 없다.import axios from 'axios';export async function getItems() { return new Promise((resolve, reject) => { (async () => { try { const res = awai.. 2024. 4. 21. msw 오류 Cannot read properties of undefined (reading 'url') 응답을 mocking 하기 위해 msw를 사용하였지만, url을 읽을 수 없는 오류가 발생하였다.그러나 막상 오류를 무시해도 잘 작동이 되어서 무엇이 원인인지 궁금해졌다. 크롬의 개발자 도구를 켜서 오류를 확인해보니, createResponseListener.ts에서 문제가 발생하였다. 이 코드는 내가 짠 것이 아니라, msw에서 발생한 오류이다. 주석처리 되어 있는 링크를 들어가보니까, 내 문제가 아니라 msw의 문제였다. 내 문제가 아니라 어떻게 해야할지 모르겠는데, 하다가 안되면 버전 다운그레이드나 제거를 해야겠다... 궁금하면 가서 읽어보는 것을 추천합니다. https://github.com/mswjs/msw/issues/2030https://github.com/mswjs/msw/i.. 2024. 4. 16. React로 간단히 만들어보는 구글맵(with Typescript) 구글 맵을 프로젝트에 이용하려고 했는데, 진짜 진짜 정보가 적어서 어떻게든 완성하였다.나는 @googlemaps/react-wrapper를 이용하였고, 기본적인 세팅은 다른 글에서 보았다. https://leirbag.tistory.com/158 React에서 Google Maps API를 자유롭게 사용하는 방법 (@googlemaps/react-wrapper)React에서 Google Maps API를 사용하기 위해 사용하는 @react-google-maps/api나 react-google-maps 같은 라이브러리들을 사용하는 방법이 있을 것입니다. 이 라이브러리들을 사용하면 Google Maps API에 있는 주요 기leirbag.tistory.com 많은 사람들이 docume.. 2024. 4. 5. 이전 1 2 3 다음
