generator함수의 실행을 중간에 멈췄다가 재개할 수 있다next()다음 yield문을 만날 때까지 코드를 실행value와 done 속성을 가진 객체를 반환value: yield 오른쪽에 있는 값done: 함수 실행이 다 끝났는지 여부 (true/false)retu

\[참고]Navigator는 브라우저에 대한 정보를 가지고 있는 객체이다. Navigator.connection → NetWorkInformation 객체: 장치의 네트워크 연결 정보Navigator.cookieEnabled → boolean: 쿠키 설정이 가능하면 t

react에서 axios로 file을 formData에 넣어서 보냈는데 400 에러가 났다.header 설정을 넣어줌근데 이렇게 했는데도 안됬다. 알고보니 서버쪽 코드에 문제가 있었다.FileInterceptor 의 key 이름 체크서버 쪽 컨트롤러 코드에서 @UseI

메소드upload() ↓리턴값 예시putObject() ↓리턴값 예시파일 여러개 업로드사실 백엔드 서버쪽에서 파일을 다운로드 받을 일은 잘 없다. 보통은 프론트 쪽에서 unresigned url을 이용해서 s3에 바로 접근한다. 그래도 일단 정리해봤다.메소드

https://docs.nestjs.com/techniques/file-uploadNestJS는 파일 업로드를 위해 Express의 Multer 를 내장 모듈로써 제공한다.MulterMulter는 Express 패키지로, HTTP POST 요청으로 들어온 mu

FormDataXMLHttpRequest 전송을 위하여 설계된 특수한 객체 형태문자열화 하려면 특정한 조작이 필요key, value 형식으로 되어 있음header의 content-type을 multipart/form-data 로 반드시 설정해주어야 함file inpu

프로젝트에 일관되게 적용시켜줄 색상, 투명도, 그림자 상태 등을 theme로 정의Mui는 light theme type이 기본 값.theme 생성createTheme() - >theme 객체 반환theme 속성palette: 색상 정보PrimarySecondaryErr

https://styled-components.com/Javascript 파일에서 CSS를 처리할 수 있게 해주는 라이브러리설치사용법HTML 엘리먼트 스타일링styled.(HTML 태그)(적용할 css)React 컴포넌트 스타일링props 넘겨받을 수 있음st

Thunk 와의 차이Redux Thunk함수를 dispatch 할 수 있게 해주는 미들웨어Redux Saga액션을 모니터링 하고 있다가 특정 액션이 발생했을 때, 미리 정해둔 로직에 따라 특정 작업이 이루어지는 방식Thunk의 단점redux-thunk는 복잡한 비동기

공식 Redux 는 Redux Tookit 사용을 권장하고 있다 > 기존 Redux와 비교한 장점 복잡한 store 설정 ⇒ 초기 설정이 간편해짐 불변성 유지와 기타 미들웨어 사용 등을 위해 추가적으로 설치되어야 하는 패키지들 immers redux d

Redux상태관리 라이브러리예측 가능한 상태 컨테이너 제공store에 상태를 넣어두고 필요한 컴포넌트에서 가져다 사용설치사용이유store에서 모든 state를 관리하고 있고, action을 dispatch해야 reducer가 state를 업데이트\-> 그 후 해당 st

props drilling중첩된 여러 계층의 컴포넌트에게 props를 전달해 주는 것어떤 컴포넌트가 상위 컴포넌트의 state를 활용하려면 중간에 있는 컴포넌트도 (해당 props를 사용하지 않더라도) props를 전달받아야 한다컴포넌트가 한 두개가 아니라 수십개가 넘

react hook함수형 컴포넌트에서도 react state와 생명주기 기능을 활용할 수 있도록 한 것함수형 컴포넌트도 클래스형 컴포넌트처럼 사용할 수 있게 하기 위함(함수형 컴포넌트는 클래스와 다르게 모듈로 활용하기 쉬움)조건문, 반복문 등을 사용하고 싶다면 반드시

HTML5의 History API에 기반하는 라우팅 라이브러리컴포넌트 기반 동적 라우팅React는 SPA이기 때문에 index.html 이라는 하나의 템플릿에서 컴포넌트를 기반으로 라우팅 및 렌더링설치BrowserRouterindex.js에서 루트 컴포넌트를 Brows

페이지를 새로고침하면 이전에 있던 데이터들이 날라가게 된다.이를 방지하기 위해 localStorage를 활용할 수 있다localStroage브라우저 내에 키-값 쌍의 형태로 저장되는 객체오리진(domain/port/protocol)이 같은 경우 데이터는 모든 탭과 창에

React에서 하나의 컴포넌트에서 여러 개의 요소를 반환하기 위해서 하나의 태그로 무조건 감싸야함사용이유별도의 노드를 추가하지 않고 여러 자식을 그룹화하기 위해 사용사용 예import 없이 쓰고 싶다면 <>(빈 태그) 도 사용 가능

form element<input> , <textarea>, <select> → 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트React에서 변경할 수 있는 state는 일반적으로 컴포넌트의 state 속성에 관리되고 setState()에

리스트 element를 만들려면 key를 포함해야 한다Key가 있어야 React가 어떤 항목을 변경,추가 또는 삭제할 지 식별할 수 있음 (고유성 부여)대부분의 경우 데이터의 id를 key로 사용정 안되면 index를 key로 사용하지만 state와 관련한 문제가 생길

React의 이벤트명은 보통 camelCase 사용기본 동작을 방지하기 위해선 preventDefault 호출ex) 폼 제출시 새로고침 방지 등등클래스 컴포넌트일 경우 바인딩 유의또는 public class fields로 지정또는 콜백에 화살표 함수 사용그러나 이는 컴

element는 React앱의 가장 작은 단위 (Component에 포함)브라우저 DOM element와 달리 React element는 일반 (불변) 객체React DOM은 React element와 일치하도록 DOM을 업데이트React 앱은 하나의 root DOM