이번 글에서는 이펙티브 타입스크립트를 공부하며 알게 된 unknown 타입에 대해 더 자세히 알아보려고 합니다 :) ✔️ 함수의 반환값과 관련된 unknown 함수를 하나 작성해 봅시다. function parseYAML(yaml: string): any { // ... } 함수의 반환 타입으로 any를 사용하는 것은 좋지 않은 설계이므로, 대신 호출한 곳에서 반환값을 원하는 타입으로 할당하는 것이 이상적입니다. interface Book { name: string; author: string; } const book: Book = parseYAML(` name: Wuthering Heights author: Emily Brote `) 위와 같이 Book이라고 타입을 선언해주지 않고 생략을 하게 되면, ..
Next.js가 제공하는 여러 기능들 1. page-based routing system(with dynamic routes) pages 하위에 있는 파일들을 가지고 Routing을 구현했었습니다. 그리고 Slug를 통해 Dynamic한 routes도 제공하고 있었습니다. 2. Pre-rendering SSG / SSR Next.js에서 Data Fetching 하는 방식을 말하면서 pre-rendering에 대해서도 이야기 했었고, 그 중에서도 SSG와 SSR이 있었죠? SSG는 Static Side Generation이고, SSR은 Server Side Render였죠. 그래서 빌드하는 타이밍에 먼저 렌더해 놓을 것인가 아니면 요청이 올 때마다 새로 렌더해서 줄 것인가의 차이였습니다. 그렇지만 둘 다..
API란? Application Programming Interface의 약자로, 응용 프로그래밍 인터페이스라고 해석할 수 있습니다. 쉽게 말해, 컴퓨터나 컴퓨터 프로그램 사이의 연결을 의미합니다. 즉, 연결을 어떻게 할 것인가에 대한 정의라고 보면 되겠습니다. Frontend Service - Backend Service 간의 연결 Frontend가 만드는 영역을 Frontend Service, Backend가 만드는 영역을 Backend Service라고 하겠습니다. 이 두 가지가 서로 연결될 때 API가 활용됩니다. Frontend Service는 고객과 닿아있고, Backend Service는 DB에 닿아있습니다. 고객이 DB에 접근하기 위해 FE와 BE가 연결되어야 하고, 이때 API를 활용합니..
Dynamic Routes 저번 글에서 다양한 페이지들을 만들었지만 slug를 활용하면 slug에 어떤 값이 들어오든 동적으로 화면을 다룰 수 있었습니다. 그런데 slug 값으로 주었지만 실질적으로 그 slug에 따라 다르게 보여야만 우리가 의도한 바를 보일 수 있을 것입니다. [slug] 값은 어떻게 활용할 것인가? Next.js에서 제공하고 있는 ('next/router') useRouter라는 함수가 있는데요. 이 훅을 이용하여 router를 꺼내고 거기에서 slug를 꺼내볼 수 있습니다. 1 2 3 import { useRouter } from 'next/router' const router = useRouter() const { slug } = router.query cs 📜 src/pages/..
Router Routing은 흔히 네트워크 용어로 많이 사용되며, 특정 주소가 있고 그 주소에 접근하면 그 주소와 매칭되어 있는 데이터들을 받아서 사용하는 일련의 과정을 Routing이라고 합니다. 그 일을 도와주는 도구를 Router라고 합니다. React에서는 별도의 Router를 제공하지 않기 때문에 react-router라는 라이브러리릍 통해 구현합니다. Next.js의 Router는 file-system 기반입니다. 즉, file을 만들면 그것이 즉각적으로 router로 인지되어 주소와 매핑됩니다. pages/ 혹은 src/pages/ 에서 Router 기능을 사용할 수 있습니다. ❓pages/index.js 와 src/pages/index.js 둘 다 있다면? 뭐가 우선순위를 가질까? 직접 해..
Pages Next.js 프로젝트 구조 안에서 pages 안에 있는 폴더가 url과 1:1 혹은 1:N 매칭이 됩니다. Pre-rendeers와 SEO Next.js는 모든 페이지를 기본적으로 pre-render 합니다. pre-render는 말 그대로 미리 그려놓는다는 의미인데요. pre-rendering은 처음 클라이언트 쪽에서 html을 로드할 때 이미 많은 부분이 그려진 상태에서 로드를 하는 것이고, 이후에 JS 번들이 load가 되면 그제서야 Hydration이라는 과정을 거쳐 사용자와 app이 인터랙션을 할 수 있게 됩니다. html만을 가지고는 인터랙션을 할 수 없습니다(JS 코드들이 있어야 하죠?). JS 코드를 적용하는 것을 Hydration이라고 합니다. pre-render가 없는 경우..
- Total
- Today
- Yesterday
- 데이터분석
- 디프만
- 프론트엔드 공부
- frontend
- 딥러닝
- 리액트 훅
- jest
- react
- 스타일 컴포넌트 styled-components
- 프로젝트 회고
- 자바
- CSS
- HTML
- 인프런
- 리액트
- 자바스크립트
- testing
- Python
- react-query
- styled-components
- 머신러닝
- 프론트엔드 기초
- TypeScript
- 파이썬
- rtl
- 프론트엔드
- 타입스크립트
- next.js
- 자바스크립트 기초
- JSP
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |