이전 포스팅에서 SWR을 사용할 때 revalidate를 사용하여 지속적으로 서버로 요청을 다시 보내서 데이터를 가져온다고 하였다. 이러한 revalidate는, 가만히 있어도 계속 보내고 있기 때문에, 그렇게 하고 싶지 않을 경우가 있을 것이다. 이럴 때 mutate를 대신해서 사용한다. axios.post의 then에서 revalidate() 대신에 mutate(response.data, false)를 넣어주면 된다. mutate의 인자 중 첫 번째는 mutate할 대상, 두 번째 인자는 shouldRevalidate 속성에 대한 값을 설정하는 것이다. 공란이라면 기본적으로 true 설정이 되어있으므로 정말 업데이트를 하지 않으려면 false로 해줘야 한다. const onSubmit = useCal..

1. withCredentials: true? 나의 경우는, 3090이 프론트였고 3095가 백엔드 서버이다. 이전 글에서 포스팅했듯이, 다른 URL로 데이터를 보내는 것에 대한 CORS 문제는 서버 단에서 cors의 origin과 credentials: true 설정을 해줌으로써 해결할 수 있었다. 그렇지만 프론트엔드와 백엔드 서버의 URL이 다를 경우, 백엔드 파트에서 프론트엔드 파트로 쿠키를 생성해줄 수도, 프론트엔드 파트에서 백엔드 파트로 쿠키를 보내줄 수도 없다. 왜냐하면, 쿠키는 기본적으로 같은 origin 에서 HTTP 통신을 하는 경우에 자동으로 들어가는 형태를 띠기 때문이다. 따라서, 요청에 쿠키를 포함하고 싶을 경우 프론트 단에서 axios로 데이터 요청을 보낼 때와 서버에서 CORS ..

이 글은 Slack 클론 코딩[실시간 채팅 with React] 강의의 내용을 담은 글입니다. TypeScript에 대한 이론을 어느 정도 익히고서, 이제 TypeScript를 사용한 React 프로젝트를 진행하는 강의를 수강 중에 있다. 여기서, 내가 궁금했던 axios의 활용법을 어느정도 익히게 된 것 같아서 그 내용을 포스팅 하고자 한다. 1. axios를 활용하여 서버로 데이터 보내기(+CORS, proxy) 우선 백엔드 서버로 데이터 보내기(http://localhost:3095/api/user에 axios 활용)는, 해당하는 서버가 켜져 있어야 한다. 즉, 데이터의 흐름은 localhost:3090(리액트 서버) -> localhost:3095/api/user (백엔드 서버)로 이뤄지게 되는데..

이 글은 인프런의 실전 프로젝트로 배우는 TypeScript 강의를 듣고 정리한 글입니다. function $(selector) { return document.querySelector(selector); } function getUnixTimestamp(date) { return new Date(date).getTime(); } 이 두 자바스크립트 함수를 보자. 기능 자체는 생각하지 말고 코드만 보면, 첫번째 함수의 selector의 타입은 어떻게 될까? 아마 높은 확률로 string일 것이다. 왜냐하면, querySelector 뒤에는 클래스면 ".클래스이름", id면 "#id이름" 이 들어오게 되는데, 어쨌든 간에 id나 클래스의 이름은 문자열로 되어있기 때문이다. 두 번째로 getUnixTimes..

이 글은 인프런의 실전 프로젝트로 배우는 TypeScript 강의를 듣고 정리한 글입니다. 1. 자바스크립트 코드에 타입스크립트를 적용할 때 주의해야 될 점 기능적인 변경 하지 않기 테스트 커버리지가 낮을 때는 함부로 타입스크립트 적용하지 않기 처음부터 타입을 엄격하게 적용하지 않기. (점진적으로 strict 하게) 2. 자바스크립트 프로젝트에 타입스크립트를 적용하는 절차 2(1) 타입스크립트 프로젝트 환경 구성 프로젝트 생성 후 npm init -y (npm 초기화 명령어)로 package.json 파일 생성하기 프로젝트 폴더에서 npm i typescript -D 로 타입스크립트 라이브러리 설치하기 타입스크립트 설정 파일 tsconfig.json 을 생성하고 기본값 추가하기 { "compilerOpt..

이 글은 인프런의 실전 프로젝트로 배우는 TypeScript 강의를 듣고 정리한 글입니다. 맵드 타입은, 쉽게 말하면 자바스크립트의 map함수를 타입에 적용한 것이라고 보면 된다. 즉 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법이다. 맵드 타입을 알아보기 전에 자바스크립트의 map 함수가 무엇인지부터 살펴보자. JavaScript - map() API let arr = [{ id: 1, title: '함수' }, { id: 2, title: '변수' }, { id: 3, title: '인자'}]; let result = arr.map(function(item) { return item.title; }); console.log(result); // ['함수', '변수', '인자']; re..

이 글은 인프런의 실전 프로젝트로 배우는 TypeScript 강의를 듣고 정리한 글입니다. 유틸리티 타입은, 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법이다. 유틸리티 타입을 꼭 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입을 변환할 수 있지만 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있다. 1. Partial 파셜 타입은 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다. interface Address { email: string; address: string; } type MayHaveEmail = Partial; const me: MayHaveEmail = {}; // 가능 const you: MayHaveEmail = { ..

이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. 타입스크립트의 모듈 시스템에 대해 알아보자, 우선 모듈회란.. export / import 형태로 다른 파일에 있는 타입스크립트 파일을 특정 파일에서 사용할 수 있게 하는 것을 의미한다. 기본 틀 // types.ts export interface Todo { title: string; checked: boolean; } // app.ts import { Todo } from './types'; let item: Todo = { title: '할 일 1', checked: false, }; types.ts에서 인터페이스를 정의한 뒤 이를 export하여 app.ts에서 import해 오면, 타입 지정을 impo..

이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. 타입 단언(Type Assertion) let z; z = 20; z = 'z'; let b = z; // b: any let b = z as string; // b: string 세번째 줄 까지만 봤을 때, 결국 z는 마지막에 문자열 타입으로 인식이 되었을 것이라고 추론할 수 있지만, 실제로 프리뷰를 보면 any 타입으로 되어있다. 그래서 b도 any타입을 반환한다. 이렇게, 명확한 typing이 되지 않는 문제를 해결하기 위해서 맨 마지막 줄의 let b = z as string 으로 z를 string type으로 단언해준 뒤 그것을 b에 부여하였다. 이 결과 b는 문자열 타입을 갖게 된다. 예시를 보자. ..

이 글은 인프런의 TypeScript 입문 - 기초부터 실전까지 강의를 듣고 정리한 글입니다. let x = 3; 이 코드를 보면, x에 대한 타입을 따로 지정하지 않더라도 x는 number type으로 간주가 된다(숫자 형태를 띠고있으니까). 이러한 과정을 타입 추론이라고 한다. 타입 추론은 다음과 같은 상황에서 발생한다: 변수를 선언하거나 초기화할 때 변수, 속성, 인자의 기본 값, 함수의 반환 값 등을 설정할 때 첫 번째 예시 function getB(b = 10) { let c = 'hi'; return b + c; } 첫 번째 줄을 보자. b 자리에 typing 대신에 10이라는 값이 들어가 있다. 이는, b라는 값을 넘기지 않으면 기본적으로 10을 가진다는 뜻이다. 그러니까 default 값이..