분류 전체보기 검색 결과

해당 글 251건

Next.js로 블로그 만들기 - 4

정적 생성에 따른 동적 라우트 /posts에 들어가있는 md파일로 /posts/의 경로를 가지는 페이지를 동적으로 생성하려고 한다 이 프로젝트의 경우에는 /posts에 ssg-ssr.md 와 pre-rendering.md를 가지고 있으니 각각 /posts/ssg-ssr 과 /posts/pre-rendering 의 경로를 갖게된다 동적 url를 위한 getStaticPaths 구현 먼저 동적 url를 가질 페이지를 만들어야한다 pages/posts에 [id].js라는 파일을 만들자 []로 만들어진 페이지들은 동적으로 생성될 페이지를 의미한다 다음은 lib/posts.js에 다음과 같은 함수를 추가해주자 export function getAllPostIds() { const fileNames = fs.rea..
Next.js 2021. 3. 30. 17:04

Next.js로 블로그 만들기 - 3

pre-rendering (사전 렌더링) 넥스트는 모든 페이지를 사전 렌더링한다 모든 자바스크립트를 하나의 html에 모두 불러오는 것이 아니라 각 페이지에 맞게 최소한의 js가 담겨있는 html을 미리 생성해둔다 이러한 사전 렌더링은 더 나은 성능과 SEO를 얻을 수 있다 사전 렌더링 종류 넥스트의 사전 렌더링은 두 가지 종류를 가지고 있다 Static-Generation (정적 생성) : 넥스트의 빌드시에 모든 html을 생성해놓고 요청이 들어오면 만들어둔 html을 재사용한다 Server-Side-Rendering (서버 사이드 렌더링) : 사용자의 요청이 들어올 때마다 새로운 html을 생성한다 하이브리드 넥스트는 이러한 두 가지 렌더링 방법을 선택적으로 사용할 수 있게 만들었다 필요한 페이지 마..
Next.js 2021. 3. 28. 22:53

Next.js로 블로그 만들기 - 2

정보 제공 넥스트는 public과 같은 최상위 디렉토리에 정적 파일을 제공할 수 있다 메타데이터 넥스트는 html 없이 jsx만으로도 페이지를 만들어 준다 각 페이지에 html태그, title정보나 다른 메타데이터 정보를 수정하고 싶다면 어떻게 해야할까? 넥스트의 Head 컴포넌트를 사용하면 된다 이 컴포넌트는 해당 페이지의 First Post back to home ) } 넣고 싶은 메타데이터가 있다면 Head 컴포넌트 내부에 넣으면 된다 스타일링 넥스트는 sass와 CSS를 기본적으로 지원한다 모듈CSS 우선 최상위 디렉토리에 components 폴더를 만들고 그 아래에 Layout.js를 만들고 css모듈도 작성해주자 pages 하위의 폴더만 라우트 대상이다 여기에 만들어진 js들은 그냥 컴포넌트로..
Next.js 2021. 3. 27. 14:43

Next.js로 블로그 만들기 - 1

next.js의 공식 홈페이지의 튜토리얼을 따라가보며 공부한 내용들입니다 Next의 라우팅 넥스트는 pages 디렉토리 아래에 모든 폴더와 파일을 라우트한다 예를들어 pages/index.js 는 url '/' 페이지 연결되고 pages/post/post1.js 는 url /post/post1 페이지로 연결된다 딱히 어떠한 처리를 해주지 않아도 pages안에 컴포넌트들을 작성하면 넥스트가 알아서 라우팅해주는 것 페이지 만들기 pages 폴더 밑에 posts/frist-post.js 를 만들어 보자 export default function FirstPost(){ return First Post } 여기저기 찾아본 결과 pages아래에 만드는 컴포넌트의 파일이름은 소문자로 하되 컴포넌트의 이..
Next.js 2021. 3. 25. 14:01

next.js 란?

리액트를 사용해서 SPA를 구현할 때 도움을 주는 프레임 워크 어째서 사용하는가 리액트로 SPA을 구현할 때 불편한 점들이 있다 SEO(검색 엔진)문제 => helmet을 이용해서 메타 정보를 바꿀 순 있지만 각 사이트의 검색엔진마다 helmet으로 바꾼 정보를 가져오지 못하는 엔진도 존재한다 그리고 크롤러에게 읽히려면 snap같은 라이브러리를 사용해야하는데 규모가 커진다면 디렉토리가 너무 복잡해 지게된다 위의 문제를 해결하기위해 CSR보다는 SSR로 SPA를 구현하는데 React로 SSR을 구현하는데에는 코드 스플리팅, 라우팅을 구현하는데 생산성이 상당히 떨어진다 그런 문제를 모두 해결하고 높은 생산성을 낼 수 있게 도와주는 것이 바로 next.js다
Next.js 2021. 3. 21. 14:30

주요 플러그인

BannerPlugin 이전에 플러그인을 이해하기 위해서 직접 만들어본 MyWebpackPlugin은 웹팩에서 기본으로 제공하는 BannerPlugin으로 존재한다 번들링한 결과물에 정보를 추가해주는 일을 한다 const path = require('path'); const webpack = require('webpack'); const childProcess = require('child_process'); module.exports = { ... plugins: [ new webpack.BannerPlugin({ banner: ` Build Date : ${new Date().toLocaleDateString()} Author : ${childProcess.execSync('git config use..
Frontend 2021. 3. 18. 17:18

주요 로더와 순서

이전 포스팅에서 로더가 어떻게 작동하는지 어떻게 설정하는지만 살짝 알아봤으니 이번엔 어떤 로더를 사용하는지 어떻게 활용하는지에 대해서 알아보자 css-loader 웹팩이 css를 번들링할 때 도움을 주는 로더다 css-loader를 설치하고 다음과 같이 설정해주면된다 ... module: { rules: [ { test: /\.css$/, use: [ 'css-loader' ] } ] } ... 당연히 css를 대상으로 하는 로더니까 .css로 끝나는 파일을 찾아서 css-loader를 돌려주게끔 설정 하지만 css-loader만 사용해서 번들링을 하면 css가 제대로 적용되지 않는다 위의 로더만 사용할 경우 css의 내용이 자바스크립트 파일에 문자열로만 들어가고 적용시키는 역할은 하지 않기 때문에 st..
Frontend 2021. 3. 16. 01:27

프론트엔드 개발환경의 이해 : Webpack (2)

지난 포스팅에서 모든 브라우저에서 모듈을 지원하는게 아니라고 했고 그렇기 때문에 웹팩이 필요하다고 했다 그렇다면 웹팩이 하는 일은 무엇일까? 웹팩 출처 : https://webpack.js.org/ 웹팩이란? 모듈로 개발을 하게되면 app.js가 math.js를 불러와서 사용하듯 하나의 자바스크립트가 다른 모듈을 임포트해서 사용한다 이런 관계를 의존 관계에 있다고 얘기를 하는데 웹팩은 이런 모듈로 연결되어 의존 관계에 있는 파일들을 하나로 합쳐준다 이때 하나로 합친 파일을 번들이라고 하고 하나로 합쳐주는 작업을 하는 웹팩을 번들러라고 한다 웹팩 설정 웹팩을 실행할 때에는 알아야할 주요 옵션이 4가지, 필수 옵션 1가지가 존재한다 mode entry output loader plugin mode mode는..
Frontend 2021. 3. 14. 16:24

Generics

제네릭은 자바나 C에서 재사용이 가능한 함수에 다양한 타입의 파라미터를 받을 수 있게끔 하는 특징이다 제네릭 함수 제네릭 함수의 Hello World라는 identity함수를 만들어보자 function identity (arg: number) :number{ return arg; } identity 함수는 받은 파라미터를 그대로 반환하는 아주 간단한 함수이다 하지만 타입스크립트 처럼 들어오는 파라미터의 타입과 반환 타입이 미리 명시되어있다면 어떻게 해야 유동적으로 타입을 받을 수 있을까? function identity (arg: any) : any{ return arg; } any를 사용하면 간단할 것 같다 어떤 타입이 들어오든 들어온 타입으로 반환할 수 있다 하지만 문제가 있는데 제네릭을 사용하는 i..
JavaScript/TypeScript 2021. 3. 12. 12:08

Function

자바스크립트와 같이 기명 함수와 익명 함수 그대로 사용할 수 있다 함수 타입 함수에 타입 붙이기 // 기명 함수 function add(x: number, y: number): number { return x + y; } // 익명 함수 let myAdd = function(x: number, y: number): number { return x + y }; 파라미터의 타입을 보고 리턴값의 타입을 파악할 수 있으므로 생략이 가능 함수 타입 작성하기 위는 그저 함수에 타입을 붙인 것이고 함수 전체의 타입을 설정하는 법도 존재한다 let myAdd: (value: number, increase: number) => number /* 여기까지 함수 타입 */ = function(x: number, y: num..
JavaScript/TypeScript 2021. 3. 11. 17:42