Dev/JS Family, HTML, CSS

Nextjs 공식문서로 공부하기 - 동적 라우팅

Dynamic Routes Next.js는 외부 데이터에 따라 동적으로 라우팅 주소를 사용할 수 있는 '동적 라우팅(Dynamic Routing)'을 지원한다. 가장 흔한 예로는 블로그 포스트의 번호에 따라 /post/1, /post/2 이런식으로 나누는 것이다. 구현 방법은 간단하게 [과 ]로 파일명을 감싸면 된다. ./posts/[id].js 이런 식이다. 컴포넌트 이름은 그대로 사용하면 된다. 다음과 같은 형태로 사용할 수 있다. import Layout from '../../components/layout'; export default function Post() { return ...; } export async function getStaticPaths() { //..

Next.js 공식문서로 공부하기 - SSG와 SSR

SSG SSG(Static Site Generation)과 SSR(Server Side Rendering)은 Next.js의 상징이라고도 할 수 있다. 'Next.js를 써본 것 = SSR을 해본 것'이라고 생각한다는 분이 계신다는 얘기도 들었다(!). 하지만 Next.js에서 기본으로 제공하는 것은 SSG이다. SSG란? SSG는 간단하게 이야기하면 build 타임 때 미리 React 컴포넌트를 HTML 파일로 렌더링 해놓는 것이다. 이렇게만 들으면 그게 HTML 파일을 만들어 놓는 것과 크게 다른건지 의문이 생길 수 있다. Next.js의 강력한 기능은 바로 정적 페이지 생성 시 외부 데이터 fetching이 가능하다는 점이다! 이는 `getStaticProps`라는 간단한 함수를 이용하여 구현할 수..

NextJS 공식문서로 공부하기 - 블로그 만들기

Next.js는 프레임워크이다. 프레임워크란 일반적으로 '특정 응용프로그램을 만들기위한 클래스와 라이브러리로 이루어진 뼈대'라고 설명된다. 그냥 도구만 주어지는 라이브러리와는 조금 다르게, 프레임워크의 뼈대(요구사항)에 맞춰 코드를 구성하면 프레임워크가 직접 코드를 호출하여 애플리케이션을 구동하는 것이라고 나는 이해했다. 어쨌든 이러한 프레임워크를 잘 사용하기 위해서는 이 '뼈대'를 잘 이해하는 것이 중요하다. 그리고 이 뼈대를 가장 잘 설명해주는 것은 당연히 공식문서일 것이다. 저번에 Next.js의 원리와 목적을 아주 간단하게 훑어봤으니 이번에는 공식문서의 튜토리얼을 따라 블로그 프로젝트를 진행해보려고 한다. Next.js 시작하기 리액트에 CRA나 Vite가 있는 것처럼 Next.js도 초기 구성 ..

NextJS 공식문서로 공부하기 - Next.js 동작 원리

나의 NEXT.JS 입문기 사실 NextJS는 예전에 수강한 리액트 강의에서 블로그 만들기 수준으로 대강 다뤄본 경험은 있었지만 아직 제대로 공부해본 적은 없었다. 마침 진행하던 프로젝트도 끝난 상황이라 잘됐다 생각하여 시작해보기로 마음 먹었다. 따로 강의를 사서 볼까도 했지만, 워낙 NextJS팀의 공식문서가 잘 되어있다는 말을 많이 들었다. 이미 직접 프로젝트로 만들어보며 '우와!' 하는 것은 많이 해봤기 때문에 이번엔 동작 원리부터 제대로 공부해보려고 한다. 최근에 버전 13으로 올라가며 변한 부분도 많다고 들었는데 반영이 안 된 강의가 대부분인 것 같기도 했다. 아마 나만 볼 기록이 될 가능성이 크지만... 누군가 보신다면 부족한 공식문서 번역 + 제가 다시 이해하여 부족한 번역에 첨언한 내용이라..

JSDoc 페이지를 GitHub Page로 배포하기

JSDoc JSDoc's purpose is to document the API of your JavaScript application or library. - Use JSDoc JSDoc은 Javascript의 API Document를 간단하게 만들어주는 라이브러리이다. JSDoc 설치 및 사용 방법 JSDoc은 전역으로(globally) 설치해야한다. (경우에 따라서는 sudo가 필요할 수도 있다) npm i -g jsdoc 사용방법은 간단하다. 적용하기 원하는 변수나 함수 등 위에 /** */스타일의 주석을 작성하면 된다. /** This is a description of the foo function. */ function foo() { } 공식 문서에 자세한 사용법이 작성되어 있다. https..

[TypeScript] 타입스크립트 입문(6) - JSDoc, 유틸리티 타입, 모듈, 타입선언, 네임스페이스

타입스크립트 심화 JSDoc https://jsdoc.app 타입스크립트를 쓰지 않고도 타입을 선언할 수 있다! 타입스크립트에 없는 기능들도 구현 가능 문서화 및 배포도 가능! 유틸리티 타입 전역적으로 사용이 가능한 타입 변환 도구 이해하고 사용한다면 생산성을 증가시킬 수 있다 직접 만들고 직접 사용하면 이해도를 높일 수 있다! 모듈 타입스크립트도 자바스크립트 ES2015+처럼 모듈을 선언하여 사용이 가능하다.(ex. import & export) 모듈 선언이 없는 경우 전역 범위에서 사용 가능하도록 처리됨 3.8 버전부터는 타입 전용 선언 가능(import type & export type) 설정 혹은 CLI 지원 -> tsconfig / module -> tsc -module commonjs Some..

[TypeScript] 타입스크립트 입문(5) - 타입 시스템

타입 시스템 동적 타입과 정적 타입 타입 체커가 컴파일 타임에 수행되는지, 런타임에 수행되는지에 따라 동적 타입과 정적 타입으로 나뉜다. 정적 타입 - 컴파일 타임에 수행 개발자가 타입을 명시적으로 타이핑해야하는 언어 -> Java, C#, C++ 등 타입 체커와 타입 추론을 통해 일부 타이핑을 생략할 수 있는 언어 -> TypeScript, Scala, Haskell 등 컴파일 타임에 타입 검사를 수행하기 때문에 보다 빠르게 오류를 잡아낼 수 있다 -> 런타임 에러 방지 가능! !!자동 완성!!을 통해 데이터 타입 혹은 속성에 대한 확신을 가질 수 있다!!! 동적 타입 - 런타임에 수행 동적 타입 시스템은 런타임 상황에도 타입이 동등한지 확인한다. -> JavaScript, Python, Ruby, P..

[React] 리액트 심화 - SPA, React Router, 비동기 프로그래밍

SPA와 React-Router SPA란? 전통적인 웹 어플리케이션의 경우 각 페이지마다 고유한 HTML 페이지를 만들어 페이지를 이동할 때마다 HTML을 로드해야 했다. 때문에 페이지를 이동할 때마다 깜빡임(새로고침)이 발생했고 이는 사용자 경험을 헤친다고 판단되었다. SPA는 Single-page application의 약자로 하나의 HTML 페이지에 앱 실행에 필요한 자바스크립트와 CSS 같은 모든 자산을 로드하는 애플리케이션이다. App에서 페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않기 때문에, 페이지를 이동하더라도 새로고침이 되지 않는다! -> Client Side Rendering Routing URL에 따라 알맞은 콘텐츠(UI)를 전달해주는 기능. JavaSc..