본문 바로가기

전체 글160

Nest.js(2) 컨트롤러(Controller) Nest의 컨트롤러는 MVC패턴에서 말하는 그 컨트롤러를 말합니다. 컨트롤러는 들어오는 요청(request)를 받고 처리된 결과를 응답(response)으로 돌려주는 인터페이스 역할을 합니다. 컨트롤러는 서버로 들어오는 요청을 처리하고 응답을 가공합니다. 서버에서 제공하는 기능을 어떻게 클라이언트와 주고 받을 지에 대한 인터페이스를 정의하고 데이터의 구조를 기술합니다. 컨트롤러는 엔드포인트 라우팅(routing) 메커니즘을 통해 각 컨트롤러가 받을 수 있는 요청을 분류합니다. 컨트롤러를 사용 목적에 따라 구분하면 구조적이고 모듈화된 소프트웨어를 작성할 수 있습니다. 다른 Nest 구성요소에 대한 약어는 nest -h 명령어로 확인할 수 있습니다. $ nest g resour.. 2022. 6. 23.
Recoil Atom 공식문서에서의 atom에 대한 설명은 다음과 같습니다. atom 은 기존의 redux에서 쓰이는 store 와 유사한 개념으로, 상태의 단위입니다. atom이 업데이트 되면, 해당 atom을 구독하고 있던 모든 컴포넌트들의 state가 새로운 값으로 리렌더 됩니다. unique 한 id인 key로 구분되는 각 atom은, 여러 컴포넌트에서 atom을 구독하고 있다면 그 컴포넌트들도 똑같은 상태를 공유합니다(상태가 바뀌면 바뀐 값으로 해당 컴포넌트들이 re-render 됩니다) state.js export const cookieState = atom({ key: 'cookieState', default: [] }); atom은 다음과 같이 작성해볼 수 있습니다. 정말 간단하죠? 설명과 같이 key.. 2022. 6. 23.
react-query (2) react-query option 라이브러리 및 공식 문서 뜯어 버리기 Queries ( 쿼리 ) Mutations ( 변이 ) function App() { const mutation = useMutation(newTodo => axios.post('/todos', newTodo)) return ( {mutation.isLoading ? ( 'Adding todo...' ) : ( {mutation.isError ? ( An error occurred: {mutation.error.message} ) : null} {mutation.isSuccess ? Todo added! : null} { mutation.mutate({ id: new Date(), title: 'Do Laundry' }) }} > .. 2022. 6. 22.
즉시 실행 함수 useQuery 뒤지다가 나온 코드인데 어려워서 찾아본다. function myFun(a,b){ console.log(a,b) return a + b } const bb = (0,myFun)(1,2) console.log(bb) 제일 왼쪽 함수를 바로 실해하기 위함이다. 참고 https://stackoverflow.com/questions/40967162/what-is-the-meaning-of-this-code-0-function-in-javascript https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator https://stackoverflow.com/questions/6577812/calli.. 2022. 6. 21.
react-query (1) react-query 란? React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze. 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주며 클라이언트 상태와 서버 상태를 명확히 구분하기 위해서 만들어진 라이브러리이다. react-query 에서 기존 상태 관리 라이브러리(redux, mobX)는 클라이언트 상태 작업에 적합하지만 비동기 또는 서버 상태 작업.. 2022. 6. 21.
Apollo GraphQL이 적용된 프로젝트를 쉽게 만들 수 있게 해주는 Node.js 패키지 ApolloServer : GraphQL이 적용된 서버를 쉽게 만들어줌 ApolloClient : GraphQL을 통해, 클라이언트상의 LocalState를 이용할 수 있게 만들어줌 1) Apollo 소개 Apollo란 GraphQL의 클라이언트 라이브러리 중 하나로 GraphQL을 사용한다면 거의 필수적으로 사용하는 상태 관리 플랫폼입니다. 다른 선택지로 GraphQL을 개발한 Facebook에서 직접 만든 Relay가 있지만, 학습 비용이 높고 React 계열만 지원한다는 단점이 있으며, 그에 반해 Apollo는 유연하고 러닝 커브가 높지 않을뿐더러 Front-End 프레임워크 삼대장?인 React, Agular, Vu.. 2022. 6. 15.