분류 전체보기

파일은 이미 흔히 Multipart/form-data로 주고 받고 있다. 관건은 JSON 데이터를 Multipart/form-data로 보내는 것이다. 파일 같은 경우, formData를 생성해 바로 append 해주면 되지만, JSON 데이터 같은 경우는 JSON.stringify를 사용해 string 형식으로 보내줘야 한다. FormData.append()의 파라미터 타입을 보면, value에는 string과 Blob(binary large object) 타입만 전달할 수 있다. 따라서 아래에서 uploader 객체를 append 할 때 바로 넣지 않고 JSON.stringify()로 문자열로 변환하여 전달했다. 아래처럼 파일을 업로드하여 요청을 보내면 서버에서 JSON 데이터를 함께 전달받을 수 있..

useQuery와 매우 유사하지만 많은 차이가 있다. ✅ useQuery와 useMutation차이 - 일회성이기 때문에 캐시 데이터가 없다. 페칭이나 리페칭 그리고 업데이트할 데이터가 있는 useQuery와 다르다. - 기본적으로 구성할 수는 있지만, 재시도가 없다. useQuery는 기본적으로 세 번 재시도한다. - 관련된 데이터가 없으므로 리페치도 없다. - 캐시 데이터가 없으므로 isLoading은 없고 isFetching만 있다. isLoading은 데이터가 없을 때 이루어지는 페칭이기 때문이다. - useMutation은 반환 객체에서 mutate 함수를 반환한다. 이것이 변이를 실행하는 데 사용된다. - onMutate 콜백도 있다. 이것을 낙관적 쿼리에 사용하는데 변이가 실패할 때 복원할 ..

일정 시간이 지나면 서버는 만료된 데이터를 삭제한다. 리페칭은 페이지를 벗어났다가 다시 돌아왔을 때 볼 수 있는데, 만료된 데이터를 다시 가져오는 것이다. stale 쿼리는 아래 경우에서 자동적으로 리페칭이 일어난다. ✅ 리페칭이 일어나는 경우 - 새로운 쿼리 인스턴스가 많아지는 경우 - 쿼리 키가 처음 호출되는 경우 * 쿼리를 호출하는 반응 컴포넌트를 증가시킨 경우 - 창을 재포커스 하는 경우 - 만료된 데이터의 업데이트 여부를 확인할 수 있는 네트워크가 다시 연결된 경우 또한 리페칭 간격이 지난 경우도 해당되는데 이 경우는 간격에 리페칭을 해서 서버를 풀링하고 사용자 조치가 없더라도 데이터가 업데이트 되는 경우다. 🤔 리페칭을 제한하고 싶으면? 1. stale 시간을 증가시킨다. 창을 재포커스 하거나..

✨ 소감 개발 컨퍼런스를 들으면서 프론트엔드 개발을 하면서 몰랐었던 부분이나 헷갈렸던 부분들을 해결할 수 있었습니다! 어느 방향으로 공부를 해야될지, 성능 향상을 위해서 어떤 부분을 건드려야 할지 감을 잡을 수 있었던 유익한 시간이었습니다. 이 컨퍼런스를 들으면서 CMC에 도전해봐야겠다는 생각이 들었고, 저 또한 추후에 개발 컨퍼런스를 통해 프론트엔드 개발자를 희망하는 사람들에게 도움이 될 수 있는 멋진 사람이 되어야겠다는 다짐을 할 수 있었습니다🔥 개발 컨퍼런스 진행해주신 CMC 선배님들 정말 감사합니다. 아래 내용은 컨퍼런스를 들으며 정리해놓은 것들입니다. 참고하셔도 됩니다! 1. 디바운싱과 쓰로틀링 2. 비동기 suspense 다루기 (feat. react-query + suspense) 3. PW..

Recoil을 사용하다가 전역상태가 새로고침 하면 초기화되는 현상이 발생했다. 구글링을 해보니 나랑 똑같은 문제를 겪는 사람들이 많았고, 생각보다 쉽게 해결방법을 얻을 수 있었다. 바로 Recoil-persist 라이브러리를 사용하면 된다. Recoil-persist를 사용하면 이전처럼 새로고침을 해도 recoil state가 날아가지고 않고 sessionStorage 또는 localStorage에 보관된다. 아무런 설정도 해주지 않으면 key는 "recoil-persist", 저장소는 localStorage에 기본적으로 저장된다. ✅ Recoil-persist 사용방법 설치 npm i recoil-persist 사용법 import { atom } from 'recoil'; import { recoilP..

요청을 많이 한 것 같진 않은데 벌써 1000회를 넘어 아래 오류 코드를 보면 유료 계정으로 전환해야 되는 상황이다. 유료 계정으로 전환하는 건 무리라는 생각이 들어 postman 대신, 다른 가짜 서버 만드는 방식을 찾아봤다. Your team plan allows 1000 mock server calls per month. Contact your team Admin to up your limit. 그 결과, JSON Server라는 것을 알게 됐고, 가짜 서버를 만들어보자! 📌 JSON Server json 파일을 사용해서 가짜 REST API 서버를 생성할 수 있는 도구이다. 이것은 실제 서버가 아닌 개발용 서버로 사용하는 것이 좋으며, 만약 실제 프로젝트를 개발하기 위해서는 실제 백엔드 서버를 구..

socketIO와 WebSocket은 실시간, 양방향, event 기반의 통신을 가능하게 한다. ❓그렇다면 뭐가 다를까 Socket.IO는 클라이언트와 서버 간의 짧은 대기 시간, 양방향 및 이벤트 기반 통신을 가능하게 하는 라이브러리이며 websocket보다 탄력성이 뛰어나다. websocket은 socketIO가 실시간 양방향 event기반 통신을 제공하는 방법 중 하나일 뿐, 만약 브라우저가 websocket을 지원하지 않는다고 해도 socketIO는 계속 작동한다. 결론은 socketIO가 실시간 기능 같은 것들을 더 쉽게 만드는 편리한 코드를 제공한다! 1. 어떤 event든지 전송할 수 있다. 꼭 message evenet가 아니어도 된다. 2. Javascript object를 전송할 수 있..

HTTP와 WebSocket은 둘 다 프로토콜이다. ✅ 우선 HTTP가 무엇인지 살펴보자. 모든 서버들이 작동하는 방식을 http라고 한다. 예를 들어 유저가 request를 보내면 서버가 response로 반응한다. http에서 기억해야 할 중요점은 stateless라는 것인데, 그 말은 즉 백엔드가 유저를 기억하지 못한다는 것이다. 유저와 백엔드 사이에 아무런 연결이 없다. request와 response 과정 뒤에 백엔드는 유저를 잊어버린다. response를 주면 끝나고 그다음 request를 기다리는 것이며 그래야 response를 줄 수 있다. 👇 HTTP에 대해 더 알아보고 싶다면? [네트워크] HTTP에 대해서 기본적으로 네트워크 통신을 할 때 처음 접하는 게 http 통신이다. 그러므로 ..

제네릭은 C#, JAVA 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징이 있다. 특히, 한 가지 타입보다 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데 사용된다. ✅ 제네릭의 한 줄 정의와 예시 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. 위 함수는 text라는 파라미터에 값을 넘겨받아 text를 반환해 준다. hi, 10, true 등 어떤 값이 들어가더라도 그대로 반환한다. function getText(text) { return text; } 이 관점에서 제네릭을 한 번 살펴보자. 아래 함수는 제네릭 기본 문법이 적용된 형태다. 이제 함수를 호출할 때 아래와 같이 함수 안에서 사용할 타입을 넘겨줄 수 있다. function getText(text:..

type과 interface 키워드는 타입을 정의할 때 사용한다. 보통 React app 내에서는 component에 넘겨주는 props의 타입을 정의하기 위해 아래와 같이 사용하곤 한다. type GreetingsProps = { //type 사용해도 정상 작동 name: string; }; interface GreetingsProps { //interface 사용해도 정상 작동 name: string; }; const Greetings = ({ name }: GreetingsProps) => ( Hello, {name} ); 이 두 키워드 둘 다 타입 정의라는 비슷한 역할을 하기 때문에 차이점과 언제, 어느 상황에 어떤 키워드를 사용하는 것이 적절할지 짚고 넘어갈 필요가 있다. ❗ 뭐가 다른 걸까? ..