grace's dev_note

https://tanstack.com/query/v4/docs/vue/examples/vue/persister Vue Query Persister는 나중에 사용할 수 있도록 쿼리 클라이언트를 저장하는 persister와 상호작용하기 위한 유틸리티 집합입니다. 다양한 persister를 사용하여 클라이언트 및 캐시를 다양한 스토리지에 저장할 수 있습니다. 여기서 우리는 indexedDB에 저장했습니다. indexedDB는 same-origin policy를 따르기 때문에 다른 도메인에서 프로젝트 도메인으로 접근할 수 없습니다. 여기에 HTTP 프로토콜을 적용한 도메인과 로컬호스트에서만 접속이 가능하도록 하여 다른 도메인으로 접속 시 access denied하여 보안을 강화하였습니다. 다음은 persistQ..

백엔드와 프론트엔드 협업 시에 백엔드 API 제작이 완료되면 보통 REST API의 경우 swagger를 통해 API Docs를 작성하게 되는데 이 때에 백엔드에서 작성된 API 타입을 그대로 가져와 프론트 API 통신 코드 작성 시 타입을 지정해 줄 수 있는 도구입니다. https://www.npmjs.com/package/swagger-typescript-api // package.json { ... "scripts": { ... "generate": "npx swagger-typescript-api -p http://petstore.swagger.io/v2/swagger.json -o ./src/common/interfaces -n types.d.ts " }, } 스크립트에 해당 코드를 작성하고 n..

첫 페이지에서 간단하게 mutation을 사용하는 방법에 대해서 설명했었습니다. https://metadataplanning.atlassian.net/wiki/spaces/data/pages/105447542 먼저 첫 페이지에서 설명한 것 처럼 axios apis(axios를 통해 백엔드에 put, post, patch, delete 요청을 보내는 함수)가 작성되었다는 전제로 설명드립니다. 데이터 내보내기 import { useMuataion } from '@tanstack/vue-query' const { mutate } = useMutation(createTodo); 기본적으로 데이터를 내보내기 위해서는 위와 같이 작성합니다. 이후 작성된 값을 통해 Todo를 만들려면 onClickCreate 함수가..

useQuery Docshttps://tanstack.com/query/v4/docs/vue/reference/useQuery 데이터 조회 상태 Promise 기반 메서드와 함께 쿼리를 사용하여 서버에서 데이터를 가져올 수 있습니다. 메서드가 서버의 데이터를 수정하는 경우 mutation을 사용하는 것이 좋습니다. import { useQuery } from '@tanstack/vue-query' // fetchTodoList가 todoList를 조회하는 api 입니다. const { data, isLoading, isError, isSuccess, error } = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList }) 쿼리 함수는 Promise를 반환하..

일반적으로 프로젝트를 진행하면서 관리해야하는 상태(state)는 총 세 가지가 있습니다. Local State: 컴포넌트 안에서만 사용되는 상태 Global State: 전역 스토어에 정의되어 프로젝트 어디에서나 접근할 수 있는 상태 Server State: 서버로부터 받아오는 상태 기존 Vuex에서는 전역 상태와 서버 상태를 전부 포함해서 관리하는 방식으로 프로그래밍을 했습니다. 하지만, 전역 상태 관리 라이브러리에서 비동기 로직을 제거하고 서버 상태 관리 라이브러리에서 이를 관리하여 각각을 분리하면 프로젝트 로직을 이해하기도 좋고 스토어를 간단하게 관리할 수 있습니다. 설치 npm i @tanstack/vue-query 사용 // main.ts import { VueQueryPlugin } from ..

props는 read-only reactive object입니다. 즉, 조회만 가능한 반응형 객체이며, computed 같은 반응성 체크는 가능하지만 props를 직접 수정하는 것은 불가능합니다. v-model을 props로 사용해주기 위해서 vue3는 내부적으로 v-model의 양방향 바인딩을 단방향 바인딩으로 캐스팅해줍니다. 혹은 아래와 같이 computed를 사용해 직접 반응형 객체를 만들어 v-model을 바인딩 할 수도 있습니다. 참고: https://vuejs.org/guide/components/v-model.html

익스프레스의 req, res 객체는 http 모듈의 req, res 객체를 확장한 것입니다. 기존 http 모듈의 메서드를 사용할 수 있고, 익스프레스가 추가한 메서드나 속성을 사용할 수도 있습니다. 예를 들어 res.writeHead, res.write, res.end 메서드를 그대로 사용할 수 있으면서 res.send나 res.sendFile 같은 메서드도 쓸 수 있습니다. 다만, 익스프레스의 메서드가 워낙 편리하므로 기존 http 모듈의 메서드는 잘 쓰이지 않습니다. req req.app: req 객체를 통해 app 객체에 접근할 수 있습니다. req.app.get('port')와 같은 식으로 사용할 수 있습니다. req.body: body-parser 미들웨어가 만드는 요청의 본문을 해석한 객체입..

다른 미들웨어 함수와 동일한 방법으로 오류 처리 미들웨어 함수를 정의할 수 있지만, 오류 처리 함수는 3개가 아닌 4개의 인수 (err, req, res, next)를 갖습니다. app.use((err, req, res, next) => { console.error(err.stack); res.status(500).send('Something broke!'); }); 오류 처리 미들웨어는 다른 app.use() 및 라우트 호출을 정의한 후에 마지막으로 정의해야 합니다. const bodyParser = require('body-parser') const methodOverride = require('method-override') app.use(bodyParser()) app.use(methodOverr..

미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트(res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수에 대한 액세스 권한을 갖는 함수입니다. 그 다음의 미들웨어 함수에 액세스하기 위해서 next()를 사용합니다. 라우터, 컨트롤러, 미들웨어 라우터: 엔드포인트와 해당 엔드포인트에서 실행돼야 할 로직(함수)를 연결해주는 역할 컨트롤러: 미들웨어의 일종이지만 메인 로직을 담당 미들웨어 : 메인 로직(미들웨어)의 컨트롤러 앞 뒤로 추가적인 로직 담당 이런 식으로 역할과 책임을 나누어서 관리해주면 코드 가독성이 쉬워지고 유지보수에 좋습니다. 각 코드 예시는 아래와 같습니다. // 라우터 app.get('/users/:uid/letters/', authentication, autho..

라우트 메소드 라우트 메소드는 HTTP 메소드 중 하나로부터 파생되며, express 클래스의 인스턴스에 연결됩니다. 다음 코드는 앱의 루트에 대한 GET 및 POST 메소드에 대해 정의된 라우트의 예입니다. // GET method route app.get('/', function (req, res) { res.send('GET request to the homepage'); }); // POST method route app.post('/', function (req, res) { res.send('POST request to the homepage'); }); Express는 HTTP 메소드에 해당하는 다음과 같은 라우팅 메소드를 지원합니다. (get, post, put, head, delete, ..