Developer Holywater Jeong

Recent Posts

  • September 24, 2018

    Vue.js를 Django 템플릿에서 사용해보자

    들어가며 블로그를 다시 억지로라도 써야할 것 같아서 포스팅한다. 역시나 사내 기술에 익숙해지느라 사이드 프로젝트를 할 겨를이 없어서 크게 작성할 만한 주제가 나오지 못했다. 그래서 사내에서 실험(?)했던 내용을 기술하고자 한다! 바로 Vue.js를 Django Template과 결합하여 사용하는 것이다. 이 부분에서 조금 벙쪘던 포인트가 있는데 1. 자바스크립트 프레임워크/라이브러리를 Webpack 빌드 하는 방법 외에는 써본 적이 없고 2. Node.js(자바스크립트)의 MVC 프레임워크가 아닌 Python의 Django의 템플릿으로 작성을 해본 적도 없었다. (이건 당연하지, 장고가 처음이니까..?) 이런 상황에서 여러모로 도전일 수 밖에 없는 상황이었는데 결론적으로는 뭐 생각보다 그리 어렵지 않았다. 1. Vue를 script로 호출 했을 때 문법과 작성방법이 크게 달라지는 것은 없었고 2. Node.js Express의 ejs, jade(pug)를 사용하는 것과 DTL을 사용하는 방법 자체가 다르진 않았기 때문이다. 작성 방법 이번 포스팅은 간단하게 두 개의 포인트를 가져가고자 한다. DTL(장고 템플릿) 내에서 어떻게 Vue를 작성할 것인가? 그리고 Webpack이 아닌 Script 방식에서 컴포넌트를 만들 때 어떻게 템플릿을 구성 것인가? 1. Vue와 DTL 구분자 일단 Vue 템플릿에서는 Vue의 변수를 호출할 때 <div>{{변수명}}</div> 이렇게 작성한다. 그런데 공교롭게도 DTL에서도 장고 내의 변수를 호출할 때 같은 방법을 취한다. 어떻게 처리해야할까? new Vue({ delimiters: ['${', '}'] }) 위와 같이 작성해주면 문제 해결! 저렇게 구분이 될 뿐만 아니라 장고 변수와 Vue의 변수를 결합하여 응용이 가능해진다. 2. 장고 템플릿으로 레이아웃 구성할 때 Vue 컴포넌트 작성법 장고 템플릿으로 구성하게 될 때 각 페이지마다 Vue가 선언이 되어야하는 구조가 된다. 그렇게 되면 Vue로 공통 레이아웃을 작성할 수 없을 것만 같은 느낌적인 느낌이 들고는 하는데 역시나 간단한 해결 방법이 있다. var mixin = { created: function () { console.log(1) } } var vm = new Vue({ created: function () { console.log(2) }, mixins: [mixin] }) // => 1( // => 2 출처: https://kr.vuejs.org/v2/api/index.html#mixins 위와 같이 mixin 기능을 사용하게 된다면 걱정 없다. 공통 레이아웃에서 new Vue를 선언하고 mixin을 선언하며 자식(컨텐츠가 담긴) 컴포넌트에서 mixin을 작성하면 된다. 물론 자식 컴포넌트의 스크립트가 공통 레이아웃 컴포넌트의 new Vue 선언보다 앞서 호출될 수 있도록 작성은 해야하지만 말이다. 그런 부분은 DTL의 extends와 block을 사용한다면 어떻게 작성해야할지 쉽게 이해할 수 있을 것이다. (공식 링크) 끝.

  • July 13, 2018

    Vue.js의 SSR 프레임워크인 Nuxt.js를 알아보자

    들어가며 블로그를 작성에 있어서 조금 뜸했다. 다름이 아니라 얼마 전 새 직장에 들어가게 돼서 정신이 없었다. 새 직장에서 일을 하게 됐는데 Vue를 사용하고 있다. 먼저 간략하게 소개를 하자면 필자는 가장 처음 웹을 시작 할 때 jQuery와 BootStrap으로 시작을 했고, 신규 프로젝트로 SPA(Single Page Application)를 만들기 위해 Angular.js를 사용했었다. 그리고 지난 몇년 간 관심을 주로 가지던 쪽은 React였고 최근에는 React의 SSR을 편하게 구현할 수 있는 Next.js를 사용해보는 등 JS UI 라이브러리/프레임워크 중에선 나름 깊게 학습해본 것 같다. 이것 저것 해봐서 그런지 Vue를 당장 이해하는 것에 있어서 어려움은 없지만 편하게 개발하는 것을 중요하게 생각하는 사람으로서 React의 Next.js 같은 프레임워크인 Vue 진영의 SSR 프레임워크인 Nuxt.js를 사용해보게 되었다. What is Nuxt.js? 백문이 불여일견. 먼저 공식 페이지부터 방문해보자. 첫 인상부터 좋다. 한글 문서도 제공한다. 소개 문구를 보면 다음과 같다. "2016년 10월 25일, zeit.co의 개발팀은 서버사이드 렌더링 React 애플리케이션을 위한 프레임워크인 Next.js 프레임워크를 발표했습니다. 발표 몇 시간 뒤, Next.js처럼 서버사이드 렌더링 Vue.js 애플리케이션을 위한 프레임워크를 만들자는 생각이 들었고, 그렇게 Nuxt.js 가 탄생했습니다." 그렇다. 소개글이 React의 Next.js와 비슷한 역할을 한다고 말할 수 있는 이유이다. 실제로 Next.js를 사용하면서 라우팅과 같은 여러 과정이 상당히 편하다고 생각이 드는데 필자가 간단하게 접해본 바로는 Next.js보다는 Nuxt.js가 조금 더 편한 것 같다는 생각이 들기도 한다. 오늘은 소개하는 차원에서 간단하게만 알아보도록 하자. 전체적인 동작 방식과 특징 역시나 먼저는 공식 문서를 보는 것이 좋긴하다. Nuxt.js는 Vue 2를 기반으로해서 Vue Router, Vuex(선택), Vue Server Renderer(spa 모드 제외), Vue-meta를 포함한다고 한다. 원래는 직접 구현해야하는 부분을 Nuxt가 간단하게 구현할 수 있도록 도와준다. 특징을 한 번 보면 SSR, HMR, Head 요소 관리, 비동기 데이터 기반 라우팅 시스템, ES6/ES7 지원 등이 눈에 띈다. 다른 요소야 개발자 입장에서 Next.js와 크게 다르다고 느끼진 못 할수도 있지만 한가지를 꼽자면 Head 요소가 있다. Next.js에서 Head 요소를 관리하는 방법은 Next에서 Head 컴포넌트를 불러와서 작성을 하는 것이지만 Nuxt.js는 nuxt.config.js에서 json 형식으로 작성하는 것이 조금 다르다고 볼 수 있다. 관련 된 내용은 아래 링크한 문서를 참고하자. nuxt.config.js 에서 Head 프로퍼티 관리, *.vue 파일에서 head 메소드로 요소 관리, 라우팅 라우팅 기능이 확실히 조금 편해보인다. pages라는 디렉토리 내에 example.vue 파일을 만든다면 자동으로 /example로 라우팅 하게 된다. pages 디렉토리 내에 user라는 디렉토리를 만들고 info.vue 파일을 생성하면 /user/info 로 라우팅이 된다. 파라미터가 필요한 경우에는 _{원하는 파라미터 명}.vue로 만들어서 /{원하는 파라미터}? 로 라우팅을 할 수 있다. 이 부분도 문서로 친절하게 설명이 되어있으니 참고하도록 하자. Vuex Vuex는 부모에서 자식 컴포넌트를 왔다갔다 하면서 데이터를 관리하는 것이 어려울 경우 사용하면 좋은 데이터 관리 라이브러리이다. Vuex를 아직 깊게 보진 못했으나 Redux와 비슷한 구석이 많아서 당장 기능을 구현하는데 큰 어려움은 없다. 역시나 Nuxt.js 프로젝트 내에 store라는 디렉토리를 만들고 파일을 만들면 쉽게 호출이 가능하도록 해놨다. 상황에 맞게 적절히 활용한다면 좋은 툴이 될 수 있다. 먼저 Nuxt에서 Vuex를 사용하는 방법은 클래식 방식과 모듈 방식이 있는데공식 문서를 참고하면 쉽게 이해가 가능하고 다음에 더 자세한 내용으로 포스팅할 예정이다. 끝.

  • June 20, 2018

    컨테이너 기반의 가상화 기술인 Docker를 알아보자

    들어가며 필자의 개발자로서 "나중에 덜 귀찮기 위해 지금 귀찮아야한다"는 마인드를 가지고 있다. 그러기 위해 프로그래밍 영역에서 모듈화 부분에 대해서도 많이 신경을 쓰고, 개발 언어도 다양한 영역(클라이언트, 서버, 앱)에서 최대한 많은 것들을 공유할 수 있는 Javascript(React, Node.js)에 관심을 크게 두고 있다. 요즘에는 개발환경에 대해서도 어떻게 구성해야 더 효율적으로 개발할 수 있는지를 고민하는데 그런 의미에서 Docker라는 기술에 아주 큰 관심을 가지고 있다. 오늘은 컨테이너를 기반으로 하는 가상화 플랫폼 Docker라는 기술이 어떤 것인지 알아보도록 하자. 컨테이너란? 컨테이너는 흔히 말하는 가상 머신(VM, Virtual Machine)이랑은 다르다. 공통점이라면 일단 가상화를 목적으로 한다는 것이 있겠다. 그렇다면 각각의 특징이 무엇인지 알아보자. 컨테이너는 여러 개 컨테이너가 한 OS에 올라가지만 VM은 작업 영역 분리 시 각각의 Guest OS가 필요하다. VM은 Host OS와 상관 없이 OS를 자유롭게 선택 가능하지만 가상화 컨테이너는 그렇지 않다. 컨테이너는 이미지를 기반으로하여 동일한 개발환경 구성과 배포에 용이하지만 VM은 비교적 쉽지 않다 컨테이너는 보안에 취약하다. 컨테이너가 VM에 비해 성능이 좋다(물론, 둘 다 Host OS보다는 떨어진다.) 위와 같이 둘 다 장단점이 존재한다. 그래서 꼭 "컨테이너가 가상머신을 대체할 것이다."라는 관점보다는 서로 상호 보완할 수 있는 존재로 여기는 게 좋지 않을까 싶다. 도커와 VM의 기술적인 차이 도커는 컨테이너 기술의 대표주자이기 때문에 도커가 거의 대명사처럼 불린다. 그래서 이번에는 도커와 VM이 어떤 형태로 구성이 되어있는지를 알아보자. image 출처 docker blog VM은 Host OS > HyperVisor > Guest OS(여러 개 나뉘기 시작) > Bins/Libs > App 이런 순서로 나뉜다. 도커는 Host OS > Docker Engine > Bins/Libs > App 순서로 나뉜다. 차이는 VM은 Host OS 위에 Guest OS로 분리 되지만 도커에서는 Host OS 하나만 존재하고 Docker Engine에서 작업 영역이 격리된다는 것이다. 그래서 도커가 성능에서 더 좋은 퍼포먼스를 보여주는 것이다. 반대로 도커는 한 컨테이너만 보안적인 이슈가 생겨도 나머지 컨테이너와 Host까지 위험할 수 있지만 VM은 한 영역의 공격은 한 영역에서 끝난다. 그래서 VM은 여러가지 OS에서 애플리케이션을 띄워야 하는 경우에 용이하다고 볼 수 있고 도커는 한 컨테이너 내에서 애플리케이션을 여러 개 띄울 경우 좋은 케이스가 될 수 있겠다. 도커의 중요한 개념. 이미지와 컨테이너 도커에는 중요한 개념인 이미지와 컨테이너가 있다. 이미지를 먼저 알아보자면 컨테이너를 구동하기 위한 기능과 환경설정 등이 포함되어 있다. 이런 것들은 사용자 정의를 통해서 재구성도 가능하다. 기본적으로 Dockerfile에 정의해서 사용한다. 컨테이너는 위에서도 말했지만 OS로 분리되지 않는다. 프로세스가 격리된다고 보면 되겠다. 의존성과 링크 기능을 제공하는 Docker Compose Docker를 사용하면서 한 애플리케이션만 올리는 경우는 별로 없을 것이다. 그래서 애플리케이션을 여러 개 띄울 때 순서대로 띄우거나 링크 기능이 필요한 경우도 있다. 그럴 때 사용하는 것이 Docker Compose다. Docker Compose로 여러 개의 컨테이너를 한 번에 구동시킬 수 있는 편리성 제공이 우선이다. 여러 개의 컨테이너를 정의한 docker-compose.yml을 작성한 후 "docker-compose up" 명령어 하나면 쉽게 구동이 가능하다. 그리고 한 컨테이너가 먼저 구동되고 다른 컨테이너에서 실행이 되는 depends_on 기능, 다른 컨테이너에서 명시적으로 호출할 수 있는 link 기능으로 명시적인 url이나 ip를 사용하지 않고 호출 가능하다. Docker Orchestration 서비스가 커지면 커질 수록 물리적인 서버 한 대로 커버하기 힘들 것이다. 그럴 때 Docker 또한 자유롭지 못하다. 그래서 Docker Orchestration라는 개념이 존재한다. 물리적으로 분리된 여러 대의 서버에서도 Docker를 사용하고자 할 때 사용하는 기술이다. 그 도커 오케스트레이션에서 가장 유명한 기술이 Docker Swarm이다. 이 부분은 공부를 자세히 하지 않아 모르겠어서 자세히 언급하지 않겠다. Next.js와 Docker Next.js를 공부하고 있다보니 이것을 어떻게 Docker에 잘 적용시킬 수 있을지를 고민한다. Production 서비스의 경우 큰 문제는 없다. Development에서는 HMR 기능을 사용하게 되는데 이 부분을 Docker에서도 사용할 수 있는지 파악 중이다. 일반적인 기술 사용에서 HMR에 대한 글은 있지만 Next.js HMR 기능과 Docker에 연관되어 쓰여진 글을 본 적이 없다. 이 부분을 연구해서 블로그 포스팅을 해보는 게 목표다. 끝.

  • June 17, 2018

    Next.js에서 Redux 적용해보기

    들어가기 전에 이 글에서 사용하는 기술 Node.js(v8) & Express MVC Framework(v4) React(v16) & Next.js(v6) Redux 위와 같은 기술을 사용할 예정입니다. 다른 언어, 다른 서버 MVC Framework에서 Next.js를 사용하는 방법을 제시하지는 못합니다. (추후에 Python Django와 React의 조합을 계획 중에 있습니다.) 양해 부탁드립니다 :) 들어가며 요즘 Next.js로 프로젝트를 진행하면서 Redux를 어떻게 적용해야 하는지 고민하고 계속 수정하며 방법을 찾아봤다. 기존에 Next.js를 사용하지 않는 React SSR(Server Side Rendering)을 개발해봤지만 Next.js는 나름대로의 규격을 따라줘야하는 프레임워크다. 그렇기에 이런 규격 내에서 어떻게 개발을 하면 좋을지 Next.js의 GitHub의 이슈 페이지와 Example, 국내외 블로그 등 수 많은 글들을 참고했다. 그러면서 어떻게 개발을 해야할지 나름대로의 방식을 터득한 것 같아서 뿌듯한 상태에서 포스팅을 해보고자 한다. 이런 과정 중에 Next.js의 default 페이지 격인 _document.js, _error.js, _app.js 중 _app.js를 어찌 활용하면 좋을지 조금이나마 팁을 얻을 수 있다. 다만 이 것이 정답은 아니다. 수 많은 방법 중 하나의 방법으로 참고하는 용도로 본다면 좋다. 간단한 세팅. 필자의 이전 포스트인 "React의 SSR Framework인 Next.js로 간단하게 프로젝트 생성하기(Node.js Express)" 글을 참고한 사람이라면 거기서 시작해도 상관 없다. 먼저 필자는 패키지매니저를 yarn으로 사용하기에 yarn을 주로 언급할 예정이다. yarn add react-redux redux redux-thunk 위와 같이 react-redux, redux, redux-thunk를 설치한다. react-redux는 React에서 Redux를 사용할 수 있도록 기능을 제공해준다. redux는 더 설명할 것 없이 Redux 기능 그 자체이다. redux-thunk는 Redux에서 비동기 통신을 위해 사용하는 라이브러리이다. Next.js 프로젝트를 처음부터 구성해야하는 사람이라면 next, react, react-dom도 패키지매니저로 설치해주어야 한다. 하지만, Next.js와 Redux를 동시에 검색한 분들이라면 기본적으로 Next.js를 설치하고 프로젝트를 간단하게나마 구성한 사람으로 생각이 들기에 기본적인 구성은 마쳤다는 가정을 하고 포스팅을 하겠다. 간단한 프로젝트 생성에 관해서는 위에서도 언급한 필자의 직전 포스트를 참고한다면 좋을 것이다. 예제 시작. 간단한 Redux 스토어부터 만들기 아주 간단한 Redux 예제를 만들며 시작한다. 이번 글에서는 Redux의 구조를 자세히 다루거나 설명하지는 않을 예정이다. /* ./stores.js */ import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import index from './reducers/index'; const finalCreateStore = applyMiddleware(thunk)(createStore); export default finalCreateStore(index); /* reducer, ./reducers/index.js */ import { combineReducers } from 'redux'; import members from './members'; /* 여러 Reducer를 묶는다. 현재 예제는 하나이지만 추후에 여러 개 Reducer를 생성 예정이라면 아래와 같이 사용하면 된다. */ export default combineReducers({ members }); ...... /* reducer, ./reducers/members.js */ function members(state = { id: '' }, action) { switch (action.type) { case 'checkSignInStatus': { return { ...state, id: action.id, }; } default: return state; } } export default members; /* action, ./actions/members.js */ const checkSignInStatus = reqDataObj => ({ type: 'checkSignInStatus', id: reqDataObj.id }); module.exports = { checkSignInStatus }; 위의 코드의 의미를 간단하게 설명하자면 로그인 데이터 정보를 세션으로부터 받아와서 관리하기 위한 로직이라고 보면 되겠다. Express Session 데이터를 가져오는 로직은 이번 포스팅에서 다루지 않을 것이다. 아무튼 이렇게 하나의 매우 간단한 Redux 스토어를 만들었다. 이것을 그러면 어떻게 적용시켜야 할까? _app.js를 활용하라 일반적으로 SSR을 구현 시, Redux를 적용시킬 때 클라이언트에서는 흔히 app.js라고 이름들을 짓는 Webpack 번들링 엔트리 파일에 적용시키는 것이 일반적이다. 서버 단에서는 Rendering하는 부분에서 적용시킨다. 그런데 Next.js 프로젝트를 시작하고 app.js와 같은 파일을 찾아볼 수 없어 당황스러울 수 있다. 하지만 이런 기능을 구현할 수 있는 방법이 없는 게 아니라 default 파일로 숨겨져 있을 뿐이다. 그 중 하나인 _app.js를 활용하면 이 부분을 쉽게 해결할 수 있다. 먼저 ./pages 디렉토리에 _app.js를 생성하고 아래와 같이 코드를 작성하자. import App, { Container } from 'next/app'; import React from 'react'; import { Provider } from 'react-redux'; import store from '../store'; export default class MyApp extends App { render() { const { Component, pageProps } = this.props; return ( <Container> <Provider store={store}> <Component {...pageProps} /> </Provider> </Container> ); } } 이게 끝이다. default 구조를 기반으로 해서 추가해준 구문은 코드의 3, 4 line과 Container 태그 안의 Provider 태그 밖에 없다. 필요에 따라 mapStateToProps 함수를 만들어서 해당 컴포넌트에서 직접 호출하며 활용하면 될 것이다. _app.js는 이렇게 사용자가 커스터마이징을 통해 전역적인 관리가 가능하다. 기본 먼저 default 값을 호출하고 사용자가 정의한 부분 중 바뀐 부분을 변경 적용하는 것으로 알고 있다. _document.js도 글로벌한 페이지 관리에 있어서 활용을 할 수 있다. head 태그나 전역적인 스타일 관리에 있어서 사용하는 것이 좋은 것으로 보인다. 하지만 공식 문서를 참고했을 때 data fetching과 runtime Lifycycle은 _app.js 안에서만 처리가 가능하다고 하니 참고하도록 하자. 깃 허브 또한 custom _app.js, custom _document.js에 대한 언급이 있다. 간단히 설명하자면 _document.js는 server 렌더링에서 작동하고, _app.js는 페이지 변경 간의 레이아웃 유지, 네비게이팅 상태에 있어서 유지할 수 있다고 언급되어 있다. 이런 특징들을 잘 숙지하여 필요한 기능에 있어서 글로벌한 처리가 필요한 부분을 _document.js와. _app.js로 잘 활용해보도록 하자. /* ./pages/index.js */ import React, { Component } from "react"; import { connect } from "react-redux"; import Nav from "../components/Nav"; class Index extends Component { render() { const { members } = this.props; return ( <React.Fragment> <Nav /> <h1>This is Home</h1> <h2>Hello {members.id !== "" ? members.id : "Guest"}!</h2> </React.Fragment> ); } } function mapStateToProps(state) { return { members: state.members }; } export default connect(mapStateToProps)(Index); 위와 같이 ./pages 디렉토리의 페이지 파일에서 connect를 해준다면 끝. 아래와 같은 화면을 볼 수 있다. 여기서 member.id의 값을 dispatch로 값을 입력해주는 함수가 있다면 Guest가 아닌 원하는 id의 값을 볼 수가 있을 것이다. (아래 화면과 관련된 코드의 자세한 내용은 전 글에서 확인 가능합니다.) 끝.

  • June 12, 2018

    React의 SSR Framework인 Next.js로 간단하게 프로젝트 생성하기(Node.js Express)

    들어가기 전에 이 글에서 사용하는 기술 Node.js(v8) & Express MVC Framework(v4) React(v16) & Next.js(v6) 위와 같은 기술을 사용할 예정입니다. 다른 언어, 다른 서버 MVC Framework에서 Next.js를 사용하는 방법을 제시하지는 못합니다. (추후에 Python Django와 React의 조합을 계획 중에 있습니다.) 양해 부탁드립니다 :) 들어가며 앞서 React의 SSR(Server Side Rendering)에 대해서 포스팅한 적이 있다. React에서 SSR은 "react-dom"의 server 기능을 이용해서 작성하는데 Next.js를 이용하면 방식이 사뭇 다르게 느껴질 수 있다. 하지만 결국 Next.js도 "react-dom"을 기반으로 하여 작동한다. 그래서 이번 포스팅에서는 Next.js를 간단히 알아보고 이를 이용하여 SSR을 구현하는 방법을 알아보고자 한다. (이 글은 일단 무작정 따라해보며 감을 잡고 싶은 사람에게 좋을 수 있다.) What is Next.js? Next.js는 React 전용 SSR 프레임워크이다. 그와 비슷한 예를 찾자면 Vue.js의 SSR을 구현하는 프레임워크 Nuxt.js가 있다. 필자는 기존에 개인적인 프로젝트를 진행할 때 React의 "react-dom"으로 서버 사이드 렌더링 기능을 직접 구현했으나, 솔직히 작성하는데 있어서 마냥 편하진 않은 것이 사실이다. Redux 코드까지 추가되면서 페이지가 많아질수록 복잡성이 증가하는 것 같다는 느낌적인 느낌이랄까. 그런 의미에서 "react ssr tool"을 구글에 검색해서 발견 하게된 Next.js는 확실히 구성하고 관리하기 편리하다. HMR(Hot Module Replacement) 기능까지 따로 구현하거나 설정할 필요 없이 development 환경에서 실행만하면 된다. 나머지 기능에 있어서는 간단한 예제를 만들면서 알아보자. 간단한 세팅. yarn global add create-next-app 먼저 패키지 매니저는 yarn으로 사용하겠다. create-react-app 처럼 Next.js를 간단하게 구성할 수 있는 라이브러리를 사용하면 기본 디렉터리 구현에 있어서 편하게 된다. 이 툴을 사용하면 example 파일을 가져오는데도 편리하게 가져올 수 있다. 그래서 제목에 쓴 것 같이 Node.js Express 웹서버를 기반으로 SSR을 구현하기 위해 예제를 가져오겠다. yarn create next-app --example with-next-routes next-app 이렇게하면 with-next-routes의 예제를 next-app 이라는 디렉토리에 가져온다. 이 상태에서 바로 yarn dev를 실행시킨다면 localhost 3000포트에서 간단한 Next.js 기반의 Node.js Express Server Application이 구동된다. 특별히 이 예제는 라우팅을 Next.js의 기본 방법보다도 더 쉽게 작성할 수 있는 next-routes라는 라이브러리를 사용하는 예제이다. 지금부터는 잠깐의 조정과 함께 디렉토리를 살펴보겠다. 예제 시작 먼저 몇 가지 작업을 하려고 한다. root 디렉토리에 components 디렉토리 생성 routes.js 하단의 예시처럼 바꾸기 const routes = require('next-routes')(); /* name: Router에서 링크로 바로 직접 호출하지 않고 name을 호출하여 라우팅 pattern: url 패턴을 의미한다. page: pages 디렉토리의 어떤 파일을 바라볼 것인지(.js, .jsx 등의 확장자는 생략) */ routes .add({ name: 'index', pattern: '/', page: 'index' }) .add({ name: 'about', pattern: '/about', page: 'about' }); module.exports = routes; pages/ 디렉토리 내 index.js와 about.js 제외하고 삭제 및 inex.js와 about.js 아래와 같이 수정 /* index.js */ export default () => ( <h1>This is Home</h1> ) ... /* about.js */ export default () => ( <h1>About Me</h1> ) 이 상태에서 yarn dev를 실행시킨다면 localhost:3000에서 아래와 같은 페이지를 확인할 수 있을 것이다. 그러나 여기서 끝난다면 about 페이지를 확인할 수 없다. 내비게이션을 만들어보자. 앞서 만든 components 디렉토리에 공통적으로 사용할 파일을 생성하면 된다. 먼저 Nav.js를 생성하자. import { Link, Router } from '../routes'; import { Component } from 'react'; export default class Nav extends Component { render() { return ( <ul> <Link route="index"><a>Home</a></Link> <Link route="about"><a>About</a></Link> </ul> ); } }; 그리고는 앞서 만든 index.js와 about.js에 import해서 사용한다. /* index.js, about.js도 같은 방식으로 import하자 */ import Nav from '../components/Nav'; export default () => ( <> <Nav/> <h1>This is Home</h1> </> ) 이러면 홈 화면에서 아래와 같이 나올 것이다. 그리고 about 링크를 눌러 페이지를 확인하면 이렇게 나온다. 이런 식으로 응용을 하자면 next에서 제공하는 next/head 기능을 이용하여 공통적인 head 태그 파일을 저장할 수 있겠다. next/head는 링크를 참고하자 파라미터 처리는? 역시 라우팅 관련해서 파라미터 관련된 내용을 안 짚고 넘어갈 수는 없다. 역시나 next-routes 기능에서 손쉽게 처리 가능하다. 일단 routes.js에서 route.add로 아래와 같이 추가하자. (추후에 이 소스를 기반으로 포스팅을 진행한다면 이 부분은 임시로 설명하기 위한 부분이기에 삭제하고 진행할 것이다. 이번 포스팅에서만 설명을 위해서 추가한다.) routes .add({ name: 'index', pattern: '/', page: 'index' }) .add({ name: 'about', pattern: '/about', page: 'about' }) .add({ name: 'user', pattern: '/user/:id', page: 'user' }) /* 추가된 라인*/ 그리고 pages 디렉토리에 user.js를 추가하고 코드는 아래와 같이 작성하자. import { Component } from 'react'; import Nav from '../components/Nav'; export default class extends Component { render() { const { url } = this.props; return ( <> <Nav/> <h1>User: { url.query.id }</h1> </> ) } } 마지막으로 Nav.js를 손보자. /* 생략 ... */ <ul> <li><Link route="index"><a>Home</a></Link></li> <li><Link route="about"><a>About</a></Link></li> <li><Link route="user" params={{id: 'hi'}}><a>User Hi</a></Link></li> <li><Link route="user" params={{id: 'hello'}}><a>User Hello</a></Link></li> </ul> /* 생략 ... */ url을 호출 시 deprecated 기능이라고 언급되어 있다. 추후 업데이트 시 주의하자. 그 밖에 알아두면 좋은 것들 next로 빌드하게 되면 .next 디렉토리가 생성되는데 그 안에 보면 글로벌한 페이지 관리를 하는 _document.js, 에러 페이지를 구현할 수 있는 _error.js 등이 있다. 아무래도 이런 내용은 Next.js 공식문서를 한 번 읽어보는 게 좋을 것이다. 끝.