전체 글 (76) 썸네일형 리스트형 [TIL] Next.js 란? Next.js는 리액트 프레임워크이다. Next.js는 React 기반의 SSR(서버 사이드 렌더링)을 지원하는 프레임워크이자 CSR(클라이언트 사이드 렌더링)만 지원하는 React와는 다른점이 있다. 일반적으로 Next.js를 채택할 때 주요한 의사결정은 1) App router를 쓸 것인가 ? 2) Pages router를 쓸 것인가? 와 연관되어 있다. 왜 router를 기반으로 속성을 분류할까? - 웹사이트를 기획/설계할 때, 어떤 페이지가 존재하게 할지, 라우팅은 어떻게 하게 할지를 항상 먼저 고려한다. - React 기반의 SSR(서버 사이드 렌더링) 을 지원하는 프레임워크 & CSR(클라이언트 사이드 렌더링) 만 지원하는 React와는 차이가 있다. Next.js 사용 시 가장 중요한 핵심 .. [TIL] query, mutation Query React Query는 API에서 데이터를 가져와서 사용자에게 표시하는데 사용되는 주로 GET 요청과 같은 읽기 전용 작업에 적합하고, 자동으로 서버 데이터를 캐시하고, 데이터를 재요청하며, 브라우저 창을 다시 포커스를 맞추었을 때 , stale 데이터를 refresh하는 등의 작업을 수행한다. React Query의 사용 목적은 UI 등의 어플리케이션에서만 필요한 데이터를 Client State로 규정짓고, 서버에서 받아오는 데이터를 Server State로 규정지어 클라이언트 / 서버 상태를 나누어서 생각할 수 있게 도와주기 때문에 사용한다. Mutation Mutation은 '변형'이라는 뜻을 말하고, 서버의 상태를 "변경"하는데 사용된다. 즉, POST(생성) / PUT(수정) / DE.. [TIL] useState에서 typeScript import { useState } from "react"; function App() { const [counter, setCounter] = useState(); return {counter}; } export default App; useState 훅은 제네릭을 사용해서 상태의 타입을 지정할 수 있다. 이 코드에서는 counter라는 상태와 그 상태를 업데이트하는 setCounter 함수를 정의하고 있다. import { useState } from "react"; function App() { const [counter, setCounter] = useState("hello"); return {counter}; } export default App; 이렇게하면 number 타입을 지정해놓고 문자열.. 이전 1 2 3 4 5 6 7 8 ··· 26 다음