우선 SWR을 알아보기 앞서 캐시에 대해서 알아보겠습니다. ❓캐시란 무엇인가 캐시는 데이터를 일시적으로 저장하는 메모리를 가리키는 용어입니다. 한 번의 요청에 비용이 큰 경우, 여러 번 요청을 하는 것 보다, 한 번의 요청 이후 캐시에 저장하여 재사용 하기 위한 전략입니다. ❓SWR이 무엇인가 SWR은 Stale-While-Revalidate의 약자로 HTTP 캐시 무효 전략을 뜻합니다. SWR은 우선적으로 캐시로 부터 데이터를 반환한 후, fetch 요청(Revalidate)이 필요한지 확인하고 요청을 합니다. 즉 캐시에 있는 데이터로 처리할 수 있다면, 굳이 요청을 하지 않는 것이죠. 그리고 반대로 사용자가 원하는 순간에 요청을 보내 새로 데이터를 받을 수 있습니다. 이를 통해 컴포넌트는 지속적으로 ..
useState를 잘못 사용하여 재 렌더링이 되지 않는 상황을 마주쳤습니다. 기본적인 부분이라고 생각하지만, 저와 같은 실수를 하시는 분이 있으실 수 있어 블로그 포스팅을 해봅니다! ❓React 요소가 재 렌더링 되는 시점? 기본적으로 React의 요소가 재 렌더링 되는 경우는 다음과 같습니다. State가 변경되었을 때 Props가 변경 되었을 때 부모 컴포넌트가 재 렌더링 될 때 컨텍스트(useContext 훅을 사용하여)에 의존하고 있는 경우 컨텍스트 값이 변경될 때 네 가지 상황에서 재 렌더링이 실행됩니다. 그런데 제가 마주친 상황은 State가 변경되었음에도, 재 렌더링이 되지 않는 상황이었습니다. //... const [files, setFiles] = useState([]); const in..
Clerk | Authentication and User Management The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”. clerk.com ✨Clerk.js ? clerk.js 라이브러리는 로그인 구현을 도와주는 무료 JS라이브러리입니다. clerk.com 홈페이지의 메인 화면에는 인증 뿐만 아니라, 유저 매니징까지 할 수 있는 라이브러리라고 소개하는데요, React, Next.js 뿐만 아니라 다양한 프레임워크, 바닐라 JS에서도 사용할 수 있는 도구라고 합니다! clerk.js는 정말 간단하게 ..
벌써 우테코의 프리코스 4주차가 시작되었습니다. 저는 이전 미션에서 Objcet.freeze()에 대한 개념을 알게 되었는데요, 간단하게 Object.freeze()에 대해서 짚고 넘어가보겠습니다. ❓Object.freeze() 메서드의 기능 단어에서 알 수 있듯이, feeze 즉 객체를 동결하는 기능을 가졌습니다. 예시를 먼저 들어볼게요. const obj = { name: "lurgi", age: 20, } obj.name = "jeong" //변경 가능 console.log(obj.name) //jeong 객체는 const 로 선언한다 하더라도, 키 값을 알면 수정이 가능한데요, 이 기능을 방지해주는 역할을 합니다 const obj = { name: "lurgi", age: 20, } Object...
우테코 프리코스의 3주 차가 벌써 막바지에 다다랐습니다. 저는 현재 3주 차 미션의 리팩토링을 진행하고 있는데요, 저번 2주 차 피드백에서 “if문 대신 switch문을 쓰는 게 더 깔끔하게 보일 수 도 있다” 라는 피드백을 받았습니다. 이 피드백을 계기로 switch 구문과 If 구문의 차이점을 정확하게 알고 적시에 사용할 수 있는 역량을 길러보려고 합니다! 일단 저는 지금까지 개발 공부를 하며 switch 구문을 단 한 번도 사용해 본 적이 없습니다. 그리고 굳이 switch 구문을 사용해야 될 필요성도 못 느꼈죠. 그래서 if문의 설명은 생략하고, switch 구문의 특성부터 알아보도록 하겠습니다. ❓Switch 구문의 특성 1️⃣ 값에 따른 Case 분기 switch 구문에서의 case는 특정 변..
벌써 우테코 프리코스 3주 차가 시작되었습니다! 이번 새로운 과제에서의 테스트 코드가 조금 바뀌었는데요, 단순히 jest로 실행하던 테스트 CLI가 다음과 같이 변경되었습니다. "scripts": { "test": "jest --detectOpenHandles --watch" } watch라는 명령어가 추가되었는데요, 그렇다면 이게 무엇을 하는 것일까요? ❓Watch 모드는 어떤걸 하는 걸까? Watch 모드는 실패한 테스트, 정규 표현식을 사용하여 테스트 하고 싶은 파일만 실행시켜주는 기능입니다. 원하는 테스트를 골라서 실행할 수 있게 되는 것이죠! jest --watch 를 실행하게 되면 다음과 같은 화면이 나옵니다. Watch를 실행하게 되면 다양한 옵션을 선택할 수 있습니다. a 를 입력해 모든 ..