코딩을 잘하고 싶은 코린이 동토니

React-Query와 Next.js를 연결해보자 최근 회사에서 Next의 SSR을 극대화 시키는 방법으로 React-query의 initial data기능을 사용하기 시작했다. 우선 react-query의 initial data에 대해 먼저 알아보면 특정 쿼리가 client에서 데이터를 요청하기 전에 처음부터 가지고 있을 데이터를 미리 설정해두고 뿌려주는 기능이다 먼저 React-query의 공식문서 예시를 한번 살펴보자 function Todos() { const result = useQuery(['todos'], () => fetch('/todos'), { initialData: initialTodos, }) } 생김새는 기존의 useQuery와 똑같고 단지 마지막에 initialData라는 옵션에..

회사에 들어온 후 React-Query에 대한 도입을 회사 내부에서 고민을 하고있을때 신규 프로젝트 백오피스를 제작하며 React-Query를 가장 먼저 도입해서 사용을 해보았다. 해당 백오피스를 처음 제작할때 사용했던건 Next.js, 전역상태관리를 위한 recoil, emotion styled-component 정도만 정해두고 사용하고 있었다. 하지만 데이터 패치 관련하여 recoil에서 커버가 불가능한 부분이 점점 생겨나기 시작했고, 이에대한 해결방안을 모색하던중 많은 기업에서 react-query를 도입하고 있고 왜 react-query를 도입했는지 이유 또한 충분히 납득이 갔기에 나도 한번 채택하여 사용해보기로 하였다. 우선 react-query를 사용하기전 기존의 방식은 아래와 같은 순서로 점..

식별자 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름이다. 따라서 변수이름은 식별자라고도 불리며 식별자는 값이 아닌 메모리 주소를 기억하고 있다. 즉 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근하게 된다. 식별자란 용어는 변수 이름에만 국한되는것이 아닌 변수,함수,클래스 등의 이ㅡㄻ은 모두 식별자이다. 변수 선언 변수 선언은 변수를 사용하기위한 선언으로 JS에서는 var, let ,const 를 사용한다. ES6에서 let과 const가 도입된 이후 var은 잘 사용하지 않는다 let은 값이 변경 가능한 변수 const는 값이 변경 불가능한 상수이며 두가지 모두 블록 레벨 스코프를 지원한다. 변수의 실행시점과 호이스팅 console.log(score); *// u..

학교 생활을 하면서 난생처음으로 프로젝트 다운 프로젝트를 진행했었던 캡스톤디자인 과목 약 3시간전 드디어 최종보고서와 여러 제출해야되는 파일들을 전부 제출하고 드디어 이 과목으로 부터 해방이 되었다. 3개월간의 노력의 결실은 "소프트콘 개발부문 장려상 수상", "linc 사업단 캡스톤디자인 대회 본선 진출" 프로젝트가 진행되면 진행될수록 결과가 어떻든 그냥 끝나기만을 기다리면서 하루하루 지냈었는데 막상 끝나고 나름의 결실을 맺고나니까 후련하기도 하고 후회도되는 그런 프로젝트였다. 이번 프로젝트를 진행하면서 가장 큰 고난이 있었다면 역시 팀원의 역할 분배가 가장 문제였다. 원래는 나도 백엔드에 숨어들어서 백엔드를 좀 다뤄보고 어찌어찌해보고 싶었지만 이번학기는 유독 프론트엔드를 다루는 학생들이 적어서 막상 ..

hooks는 기존 함수형 컴포넌트에서 할수 없었던 다양한 작업을 할 수 있게 도와준다. 1.useState = 상태 관리에 사용 *import* React, { useState } *from* "react"; const Counter = () => { const [number, setNumber] = useState(0); *return* ( 현재 카운터 값은 {number}입니다.{" "} setNumber(number + 1)}>+1 setNumber(number - 1)}>-1 ); }; *export* *default* Counter; useState 파라미터에는 상태의 기본값을 정해준다 위의 경우 0 이 함수가 호출 되면 배열을 반환을 해주고 배열의 첫번째 원소는 상태 값 두번째 원소는 상태를 ..