1. 레이아웃 설정 Nuxt.js를 통해 기본 레이아웃을 설정해보자. 앞서 웹앱을 설치하는 이유를 Navigation Bar와 같이 모든 페이지에서 공통적으로 쓰이는 요소의 개발을 위해 사용한다고 안내했다. 이제 설치는 완료가 되었으므로 실제로 구현을 해야한다. 그러기 위해서 사용하는 것이 바로 레이아웃 설정이다. Nuxt.js 공식 홈페이지를 살펴보면 다음과 같은 경우에 레이아웃을 사용하라고 안내가 되어 있다. - 사이드바를 포함할 지 또는 모바일 및 데스크톱을 위한 개별 레이아웃을 포함할지 여부와 같은 Nuxt.js 앱의 모양과 느낌을 바꾸고 싶을 때 레이아웃을 사용한다. 레이아웃에 대한 기본 설정은 레이아웃 디렉토리 안에 있는 default.vue에서 생성한다. 경로 : Layout > defaul..
1. 사이트 구조 이제 실제로 프로젝트를 구성하고 사이트를 개발해보자. 우선 웹 어플리케이션 개발을 위한 영역을 크게 2가지로 나눌 수 있다. 첫번째 영역은 프론트엔드(Front-End)고 두번째 영역은 백엔드(Back-End) 이다. 프론트엔드는 사용자에게 보여지는 부분을 의미한다. 이 부분에서 생각되어지는 가장 중요한 요소는 사용자에게 데이터가 어떻게 보여질 것이고, 사용자의 정보를 어떻게 입력 받을지에 대한 고민이다. 그렇기 때문에 프론트엔드 개발자들은 단순히 기능적인 부분에 대한 고민을 넘어서 디자인적인 요소도 반드시 고려해야한다. 프론트엔드에서 주로 개발하게 되는 영역은 아래와 같다. 사용자들에게 보여줄 정보사용자들이 사이트에서 입력하게 되는 정보벡엔드에 있는 데이터를 어떤 형태로 바꿔 사용자에..
1. 웹 어플리케이션 구축 개발 공부를 하는데 있어 이론만 공부하는 건 정말 바보 같은 짓이다. 이 과정을 정말 재미도 없고 머리에 잘 들어오지도 않는다. 우린 앞서 3단계의 과정으로 Vue.js, Nuxt.js, Node.js를 배웠다. 각각의 개념에 대해 간략한 소개와 개발 환경 구축 방법을 배웠다. 그다음 간단한 문법과 작동 원리에 대해 배웠다. 앞서 배운것만 잘 응용한다면 우린 웹 어플리케이션 하나를 만들 수 있다. 하지만 노트북을 들고 어플리케이션을 막상 개발할려고 하니 쉽지가 않을 것이다. 특히나 개발을 한번도 안해본 사람들은 더더욱 그렇다. 이제 앞서 배운 이론들이 어떻게 적용되어 우리가 원하는 웹 애플리케이션이 되는지 살펴보자. 사이트 기획 전에 기초적으로 알아야할 사항을 복습해보자. 1)..
1. Express-generator란? Express를 통해 우리는 편리하게 서버를 구축할 수 있었다. 지금까지 배운 Express를 이용해 배운 지식을 활용해 서버를 구축하게 된다면 다음과 같은 순서를 따르게 될 것이다. - Express 서버 구축 순서 1) express 패키지 설치 npm install express --save 2) express 객체 선언 1const express = require('express');cs 3) 서버 요청 만들기 1app.get('/', (req, res) => res.send('Hello World!'))cs 4) 라우팅 선언 1var router = express.Router();cs 5) 미들웨어 선언 1234app.use((req, res, next)..
1. 미들웨어 모듈 형태로 만들어진 라우터를 app.use에 등록하여 사용했다. 이번 시간에는 app.use 부분에 대해 알아보자. 해당 부분은 Express에서 미들웨어를 등록하는 부분이다. 사전에 정의된 미들웨어를 사용할 수도 있고, 사용자가 직접 미들웨어를 설계하여 등록할 수 도 있다. 미들웨어는 다음과 같은 일을 수행한다. 모든 코드를 실행요청 및 응답 오브젝트에 대한 변경을 실행요청-응답 주기를 종료스택 내의 그 다음 미들웨어 함수를 호출 미들웨어는 요청 객체, 응답 객체, next 객체 3가지를 인수로 가지게 된다. 만약 미들웨어가 요청과 응답이 끝나지 않는다면 다음 미들웨어 함수인 next 객체에 인자를 전달하게 된다. 만약 next 객체가 없다면 미들웨어는 정지한채로 동작을 멈추게 된다. ..
Express에서 역시 사용자가 원하는 요청 객체와 응답 객체를 구현할 수 있다. Express의 콜백 함수는 라우팅 기능을 통해 구현되는데, 이번 시간에는 Express 라우팅 기능을 중심으로 하는 콜백 함수에 대해 알아보자. 1. 요청 객체 Express의 라우팅 기능을 활용해서 url parsing 없이 객체를 선언할 수 있다는 것을 알았다. 이번에는 Express get 함수에 들어가는 콜백 함수에 대해 알아보자. 콜백 함수에는 총 3가지의 인자가 들어간다 요청 객체응답 객체NEXT 객체 이 중 NEXT 객체는 선택 사항이다. 요청 객체에는 아래 3가지 변수가 담긴다 paramsquerybody 123456app.get('/users/:id', function(request, response) {..
1. express Node.js 기반의 웹 서버의 요청을 하기 위해선 우리는 매번 서버를 올려야 한다. 그리고 서버를 올리는 데는 많은 사전작업이 필요하다. 우리는 더 빠르고 효율적인 웹 서버 개발을 위해서 Node.js 기반으로 작동하는 웹 애플리케이션을 만들어야 할 필요성이 존재한다. 이때 사용하는 Node.js기반의 웹 프레임워크가 바로 express이다. - express의 특징 빠르고 간편한 Node.js 시스템 구축을 위한 웹 프레임워크미들웨어(Middleware) 구조를 통해 개발자가 필요로 하는 라이브러리만 골라서 사용 가능 - express 공식 홈페이지 https://expressjs.com/ko/ 우선 express 프레임워크를 사용하기 위해서는 설치가 선행되어야 한다. npm 패키..
클라이언트가 HTTP 서버를 요청할 때 우리는 URL과 Method를 사용한다. URL은 앞서 말했듯이 서버의 도메인과 파일 디렉토리를 지정해 주는 역할을 한다. 반면에 Method는 요청 방석을 정해주고 크게 2가지 메소드를 사용하게 된다. 바로 GET과 POST이다. GET 1. GET 요청 처리- GET 요청이란? GET 요청은 서버로 부터 정보를 조회하는데 사용한다. 가장 큰 특징은 서버에 요청하는 Query String에 우리가 전달하려는 데이터가 담기게 된다. 클라이언트가 서버에 대한 정보를 단순히 가져와 보고 싶은 경우에 GET을 사용하게 된다. - GET 요청의 특징서버 데이터 조회를 위해 사용Query String에 우리가 전달하려는 정보가 담기게 됨String 길이에 제한이 있으므로 많..
1. 서버 요청 테스트 - Postman 서버를 만들기 위해서는 많은 어플리케이션이 사용됩니다. 실제 서버를 만들기 위해서 우린 물리적인 서버도 필요하고, 물리적 서버가 우리가 만든 서비스와 통신할 수 있도록 다양한 API의 설치가 필요합니다. 하지만, 우리가 서버를 구축하는 단계에서 이와 같이 모든 API 구성을 만들기란 상당히 까다롭습니다. 그래서 우리는 이 문제를 해결하기 위해 간단한 서버 테스트 API를 활용하게 됩니다. 대표적인 도구가 바로 Postman입니다. Postman 설치는 Chrome 웹스토어를 활용해 진행할 수 있습니다. - Postman 설치 URL (Chrome Web Store) https://chrome.google.com/webstore/detail/postman/fhbjg..
1. Node.js란? 앞선 개념읕 통해 우린 javaScript언어를 이용해 웹 페이지가 어떻게 만들어지는 지 확인했다. 이는 우리가 이제 javaScript를 활용해 네트워크 클라이언트를 구현할 수 있다는 것을 의미한다. 그리고 구현한 클라이언트가 어떻게 서버에 렌더링 되는지 역시 알 수 있었다. Vue.js : 클라이언트 사이드 렌더링 (CSR)Nuxt.js : 서버 사이드 렌더링 (SSR) 이번 시간부터는 서버를 구축 하는 방법에 대해서 배워볼 차례이다. 서버는 네트워크 애플리케이션의 작동을 제어한다. 우리의 애플리케이션에 장착된 DB를 연동하고, 사용자 인증도 진행할 뿐더러 파일을 업로드 하는 등 다양한 작동을 하게 된다. 즉, 애플리케이샨을 사용하는 사용자의 요청이 오게되면 이를 듣고 원하는 ..