분류 전체보기 (76) 썸네일형 리스트형 [TIL] Next.JS에서 제공하는 4가지 렌더링 기법 웹 렌더링(Web Rendering)이란 웹 페이지를 사용자에게 보여주는 과정을 의미한다. 이 렌더링 방식에 따라서 로딩 속도, 검색 엔진 최적화(SEO), 사용자 경험 등이 달라진다. Client - Side - Rendering (CSR) 브라우저에서 JavaScript를 사용해서 웹페이지를 렌더링 하는 방식이다. 사용자의 브라우저가 서버로부터 데이터를 받아와서 웹 페이지를 직접 생성한다. 렌더링의 주체는 클라이언트이다. build 할 때만 fetch 되기에 한번에 모두 다운로드해서 서버부하가 적고 상호작용이 높다. 하지만 TTV(Time To View)가 길어서 검색 엔진 최적화(SEO)에 좋지 않다. 좋은 비유를 봤기에 참고해서 가져와보자면 CSR은 Server로부터 빈 그릇(빈 HTML)과 요리.. [TIL] Next.js에서 Routing 설치하기 npx create-next-app@latest 터미널에 이렇게 입력하고 이렇게 다 Yes로 하면 다음과 같은 파일 구조가 보인다. 여기서 layout, page 이 두 컴포넌트를 굉장히 많이 다룬다! 1. layout.tsx 2. page.tsx 3. package.json scripts 부분에는 dev / build / start가 있다. 우리가 개발하는 중 사용하게 될 코드 npm run dev production 레벨로 배포하기 전 필요한 빌드 작업 과정을 실행! build하지 않고 start를 하는 경우 실행될 수 없다. npm run build 만들어진 build 파일을 이용하여 실행시키는 방법 npm run start dynamic routing const Router = () =>.. [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 타입을 지정해놓고 문자열.. [TIL] generic(제네릭) generic 이란 ? 데이터의 타입(data type)을 일반화한다(= 변수화한다)는 것을 의미한다. //우리가 넣은 타입이 안으로 그대로 들어간다. type Generic = { someValue: T; }; type Test = Generic; 이렇게 타입을 생성할 때 원하는 인자()를 받아서 넣어준다. 제네릭은 함수에서도 사용할 수 있는데 // 함수에 넣어주면 함수의 인자에 넣어줄때도 그대로 들어간다. function someFunc(value: T) {} someFunc(); 이렇게하면 여기의 T에 그대로 string이 들어가게 되는 것이다. function someFunc(value: string) 여기서 꼭 T로만 쓰지 않아도 되고, 아무 글자나 상관없다. 리액트 + 타입스크립트 템플릿으로 .. [ TIL] 함수에서 타입스크립트 사용하기 타입스크립트에서는 파라미터 넘기는 인자부분, 리턴부에서 타입을 지정하는 부분이라고 한다. 사용하려는 인자 옆에 원하는 타입을 콜론으로 작성해주는 방법이 있다. function sum(a: number, b: number): number { return a + b; } type을 object로 넘길 때 , object안에 있는 type들을 왼쪽 a, b에서 사용할 수 있게 된다. 그리고 return 부분도 string이 됐으니까 return 할 때 `${ } ` 이렇게 string으로 리턴할 수 있게 해준다. function objSum({a, b}: { a: number; b: number }): string{ return `${a + b}`; } 그럼 비동기 함수에서는 어떻게 사용할 수 있을까? jso.. [TIL] TypeScript 설치 TypeScript로 인해 달라진 점 - code를 입력하는 순간 에러 메시지를 발생시킨다 - 컴파일 시간에 오류 캐치 : 정의되지 않은 프로퍼티를 연산하여 NaN이 되는 현상을 미연에 방지할 수 있다. https://github.com/coreybutler/nvm-windows/releases 페이지로 접속하면 nvm-windows 인스톨러 다운로드 페이지로 이동된다. 여기서 스크롤을 조금만 내리시면 Assets라는 섹션을 본다. 이 섹션에서 nvm-setup.exe 파일을 다운로드 받아서 실행시킨다. 설치가 완료되었다면 nvm이라는 커맨드를 PowerShell에서 실행해서 실행되는지 본다. PowerShell에서 nvm install [설치할 노드 버전]명령을 실행하여 Node.js를 설치한다. //.. [TIL] Mutation Mutation 어떤 데이터를 변경하는 것 (= 변화) 어떤 데이터라 함은 추가, 수정, 삭제를 의미한다. CRUD 중, CUD에 해당한다. axios의 경우 post, put, patch, delete 요청과 비슷하다. axios.post('http://localhost:3000/todos', newTodo); axios.patch(`http://localhost:3000/todos/${id}`, {isDone: true}); axios로 데이터 추가하기 const addTodo = async (newTodo) => { await axios.post(`${process.env.REACT_APP_SERVER_URL}/todos`, newTodo); } 이제 값을 넣었을 때 변형할 수 있는 리액트쿼리 방법.. [TIL] React Query 리액트 쿼리의 장점으로는 너무 쉽다고한다. 이번 팀프로젝트를 시작하기 전에 쿼리를 써보기로 했다. Query 어떤 데이터에 대한 요청을 의미한다. axios의 경우 get 요청과 비슷하다. DB를 요청하는 ! 뭔가를 알려주는 GET 요청과 비슷하다. const response = await axios.get('http://localhost:3000/todos') Query Invalidation ( = 무효화 시킨다) 기존에 가져온 Query는 서버 데이터이기 때문에, 언제든지 변경이 있을 수 있어요. 그렇기 때문에 최신 상태가 아닐 수 있다. 그런 경우 기존의 쿼리를 무효화 시킨 후 최신화 시켜야하는데 이런 과정을 쿼리는 자동으로 해준다. 리액트 쿼리 설치하기 yarn add react-query im.. 이전 1 2 3 4 5 ··· 8 다음
