이전에 간단하게 Context를 사용한 예시에 대해서 글을 적었는데, 또 많은 부분을 공부하게 되어서 추가적으로 적어보는 시간을 가지려고 합니다.❓ Context란?컨텍스트 개념을 리액트에선 이렇게 설명합니다.보통의 경우 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 정보를 전달합니다. 그러나 중간에 많은 컴포넌트를 거쳐야 하거나, 애플리케이션의 많은 컴포넌트에서 동일한 정보가 필요한 경우에는 props를 전달하는 것이 번거롭고 불편할 수 있습니다. Context를 사용하면 명시적으로 props를 전달해주지 않아도 부모 컴포넌트가 트리에 있는 어떤 자식 컴포넌트에서나 (얼마나 깊게 있든지 간에) 정보를 사용할 수 있습니다.즉 drilling의 문제를 해결하기 위한 개념이라고 생각됩니다.❗️ 사용법C..
❤️🔥MSW 소개 MSW(mocking service worker)는 API를 mocking할 수 있는 라이브러리 입니다. mocking의 장점 테스트 코드의 의존성을 덜어내 독립적인 테스트 코드를 작성할 수 있습니다. 실제 응답을 기다리지 않기 때문에, 속도 측면에서 비용절감이 될 수 있습니다. ❗️MSW를 React에서 사용해보자. 우선 msw를 설치해줍니다. npm install msw@latest --save-dev 그 다음 msw를 실행해줍시다. npx msw init public/ --save "msw": { "workerDirectory": [ "public" ] } 이 결과로 package.json에 다음과 같은 스크립트가 추가됩니다. 세팅이 완료되었습니다. 이제 mocking 모듈을 만..
우아한 테크코스 Level1을 하면서, 바닐라 JS에 대한 이해도가 조금 생긴 것 같다. 이 과정에서 웹을 구성하는 핵심이 무엇일까?, 바닐라JS로 웹을 구현하는데 핵심이 무엇일까? 생각해 보았을때, 나는 ‘비동기로 실행되는 이벤트’라고 생각했다. 즉, 상태가 계속해서 변할 때 이벤트를 어떻게 효율적으로 실행하는가? 이다. 리액트에서는 useEffect 와 useState 와 더불어, Redux React Query등을 사용하며, ‘상태를 감지하는 시스템’을 통해 간편하게 관리를 하지만, 바닐라에서는 어떻게 구현하면 좋을까? 생각을 많이 했다. 그 중에서 눈에 띄었던 기능은 ‘웹 컴포넌트’에서의 observedAttributes 메서드, 그리고 Mutation Observer를 통해서 DOM에 있는 요소..
❗matches 함수의 기본적인 사용방법 matches 함수는 Element의 내장 메서드입니다. CSS 선택 문자열로 요소의 일치 여부를 판단할 수 있습니다. const element = document.getElementById('myElement'); if (element.matches('.myClass')) { console.log('The element matches the selector'); } else { console.log('The element does not match the selector'); } ❗matches를 이용한 버튼 이벤트 추가 다음과 같이 버튼이 있다고 했을 때, 이벤트를 어떻게 부여할 수 있을까요? btn1 btn2 btn3 기본적으로 순회를 통해서 addEvent..
❗문제발생! export default class AppError extends Error { static PREFIX = "[ERROR]"; constructor(message) { super(`\\n${AppError.PREFIX} ${message}\\n`); this.name = this.constructor.name; } } Error를 커스텀하여 사용하기 위해, 다음과 같은 코드를 사용하였습니다. 저는 여기서 static 키워드를 사용 것에 대한 의문을 가졌습니다. 하지만 static을 뺀 아래 코드는 에러가 발생하였습니다. export default class AppError extends Error { PREFIX = "[ERROR]"; constructor(message) { super(..
카카오 로그인을 구현하기 위해서 코드를 작성하고 있는데, 예상치 못한 부분에서 오류가 났습니다. 카카오톡 로그인은 위와 같은 과정으로 구현할 수 있습니다. 카카오 로그인에 대한 자세한 내용은 아래 공식문서를 참조하세요! Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 오류가 왜 났는지 결론부터 말씀드리자면, 인가코드로 토큰을 요청하는데 Strict-Mode 때문에, fetch 요청이 두 번 이루어 지게 되면서 오류가 난 것이었습니다. const Auth = () => { const params = useSearchParams(); const co..