프론트: React 백엔드: Node (Express) 클라이언트의 이미지를 서버에 저장하는 것을 구현하였습니다. 파일은 multipart/form-data 형식으로 서버단에 전송되어야 합니다. React // const handleChangeImageFile = async (e: ChangeEvent) => { if (!e.target.files) return; const formData = new FormData(); formData.append('file', e.target.files[0]); const res = await axios.post( 'https://domain.com/api/v1/upload/image', formData, { headers: { 'Content-Type': 'mult..
이벤트 콜백함수에 매개변수를 넣지 않아도 되는 경우에는 콜백함수를 바로 작성해야 컴포넌트가 Unmount 되었을 시에 이벤트를 remove 할 수 있습니다. 함수로 콜백함수를 한 번 감싸주게 되면 React.Strictmode에 의해 useEffect가 2번이 실행이 되는데 addEventListener와 removeEventListener에서 콜백함수를 감싸고 있는 함수의 주소가 다르기 때문에 cleanup이 되지 않아서 이벤트가 2번이 등록되게 됩니다. (removeEventListener에서 이벤트 삭제가 안됨) React.Strictmode가 useEffect를 2번 호출하는 이유는 이런 cleanup같은 예시를 포함하여 컴포넌트가 제대로 작동하는지 확인하기 위함인데 이벤트가 2번씩 등록되는 문제..
오라클 클라우드를 이용하여 서버를 구축하던 중에 Nginx를 이용하여 리버스 프록시 설정을 진행하였습니다. 많은 자료들을 참고하여 클라우드 세팅을 진행했습니다. // etc/nginx/conf.d/[config 이름].conf location /api { proxy_pass http://[공인 IP]:3000; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host [도메인]; proxy_cache_bypass $http_upgrade; proxy_buffer_size 128k; proxy_buffers 4 256k; proxy_busy_..
React Query 사용하기 먼저 react-query 라이브러리를 프로젝트에 설치해야 합니다. npm install react-query yarn add react-query 그 후에, queryClient를 생성합니다. client는 쿼리와 캐시를 관리합니다 QueryClientProvider를 적용합니다. React Query의 캐시와 client 설정을 자식 컴포넌트들이 사용할 수 있도록 합니다. queryClient를 props로 받습니다. useQuery를 실행합니다 useQuery는 서버로부터 데이터를 fetch하는 hook입니다. App.jsx [코드 1-2] React Query 세팅 react-query 라이브러리로 부터 QueryClient와 QueryClientProvider를 i..
React Query (Server State Management for React) state vs props state와 props는 모두 자바스크립트의 순수한 객체입니다. 렌더링에 영향을 미치는 정보를 담고 있기 때문에 React는 state나 props의 값이 변경되면 화면에 렌더링해야 할 데이터가 바뀌었기 때문에 리렌더링을 하게 됩니다. 이들은 중요한 차이점이 있습니다. state는 컴포넌트 내부에서 관리가 됩니다 (함수 내부에서 선언 된 지역변수와 비슷합니다). props는 컴포넌트로 전달됩니다 (함수에 매개변수를 전달하는 것과 비슷합니다). Client State vs Server State Client State 브라우저 세션과 관련된 정보, 즉 클라이언트가 제어하고 소유하는 데이터입니다...
함수 표현식에 타입을 넣을 때 2가지 방식 const printSomething = (thing: string): void ⇒ console.log(thing); const printSomething: (thing:string) ⇒ void = thing ⇒ console.log(thing); Class Class는 es5로 컴파일하면 생성자 함수, 프로토타입 스타일로 바뀐다. class Department { // private id: string; // private name: string; private employees: string[] = []; constructor(private readonly id: string, public name: string) {} describe(this: Depa..
never 타입 // 이 함수는 반환값을 void로 추론하지만 never을 사용할 수 있다. // 에러를 출력하거나 절대 반환값이 없다는 의미 function generateError(message: string, code: number): never{ throw {message, errorCode: code}; } generateError('An error occured', 500); tsc --watch tsc -W 타입스크립트 파일을 지켜보면서(watch) 소스코드에 변화가 생기면 컴파일한다. tsc --init으로 tsconfig.json을 생성후에 tsc, tsc --watch, tsc -W 명령어로 폴더의 모든 타입스크립트 파일을 컴파일한다. tsconfig.json exclude : 컴파일에..
enum 타입 const ADMIN = 0; const READ_ONLY = 1; const AUTHOR = 2; // JavaScript에선 이런식으로 role을 작성한다. // 상수를 따로 관리해줘야 하는 불편함 const person = { name: 'yu', age: 26, hobbies: ['game', 'sports'], role: ADMIN } enum 타입을 이용해서 작성하면 enum Role { ADMIN, READ_ONLY, AUTHOR } // ADMIN = 1, READ_ONLY = 2, AUTHOR = 3 // enum Role { ADMIN = 5, READ_ONLY = 10 } const person = { name: 'yu', age: 26, hobbies: ['game',..
