Skill/Programming - Server & Client

#2. [Node.js] 웹 어플리케이션 개발 - 프로젝트 생성

gyulee0220 2020. 5. 4. 00:59



1. 사이트 구조

  이제 실제로 프로젝트를 구성하고 사이트를 개발해보자. 우선 웹 어플리케이션 개발을 위한 영역을 크게 2가지로 나눌 수 있다. 첫번째 영역은 프론트엔드(Front-End)고 두번째 영역은 백엔드(Back-End) 이다.


<프론트엔드 (Front-End)>


  프론트엔드는 사용자에게 보여지는 부분을 의미한다. 이 부분에서 생각되어지는 가장 중요한 요소는 사용자에게 데이터가 어떻게 보여질 것이고, 사용자의 정보를 어떻게 입력 받을지에 대한 고민이다. 그렇기 때문에 프론트엔드 개발자들은 단순히 기능적인 부분에 대한 고민을 넘어서 디자인적인 요소도 반드시 고려해야한다.


  프론트엔드에서 주로 개발하게 되는 영역은 아래와 같다.


  • 사용자들에게 보여줄 정보
  • 사용자들이 사이트에서 입력하게 되는 정보
  • 벡엔드에 있는 데이터를 어떤 형태로 바꿔 사용자에게 전달 할 것인가
  • 사용자들에게 받은 정보를 어떻게 백엔드에 저장할 것인가


  프론트 엔드 개발을 위해서는 JavaScript, HTML, CSS 등의 언어를 공부해야 된다. 아래에 따라 조금더 프론트 엔드 개발자를 세분화 할 수 있다.


  • UX Desinger : 사용자들에게 정보 전달의 효율성을 위해 사용자 경험(User Experience)을 디자인 하는 사람
  • UI Desinger : 사용자들에게 보여지는 화면 (User Interface)을 디자인 하는 사람
  • 웹 퍼블리셔 : 구성된 디자인을 토대로 웹 브라우저에 띄을 수 있고 CSS, HTML을 구성하는 역할
  • 프론트엔드 개발자 : 클라이언트에 대한 종합적인 개발을 진행하는 사람


<백엔드 (Back-End)>


  백엔드는 사용자들에게 보여지지 않는 서버와 DB쪽 부분을 의미한다. 백엔드는 사용자가 보게될 데이터를 어떻게 입력/저장/관리할 것인지 고민해야 하며, 서버에서 전달하게 되는 데이터들을 효율적으로 이동 될 수 있도록 하는 것. 그리고 서버 전체에 대한 운영체제에 대한 고민을 하는 등 시스템의 코어 부분을 담당하게 된다. 


  프론트 엔드의 경우는 하게 되는 일이 서비스 별로 큰 차이를 보이지 않는다는 점이 있지만, 백엔드는 우리가 개발하려는 서비스 별로 개발하게 되는 부분이 큰 차이를 보이게 되는 특징이있다. 따라서 백엔드 개발자는 특정 언어에 대한 숙련도 보다는 시스템 아키텍쳐를 이해하고 구성할 수 있는 능력이 가장 중요하다. 백엔드에서 주로 개발하게 되는 영역은 아래와 같다.


  • 사용자들의 입력한 정보를 어떻게 저장할 것인가
  • 사용자들에게 보여줄 정보를 어떻게 관리할 것인가
  • 서버 데이터를 효율적으로 전달하는 방법
  • 서비스를 위한 적절한 운영체제와 DB 구축


  백엔드의 경우는 서비스에 따라 사용되는 언어가 크게 다르지만, DB를 관리한다면 기본적으로 SQL과 JSON을 알고 있어야 하며, JSP와 PHP가 가장 많이 사용되고 있는 언어이다. 하지만 최근 Node.js의 점유율이 크게 높아지고 있으므로 JavaScript에 대한 활용 역시 필수적이다. 백엔드는 다음과 같이 세분화 된다.


  • 서버 관리자 : Window, Linux 등 서버 OS에 따라 서버의 구성을 관리하는 사람
  • DB 관리자 : 서비스에서 사용되는 DB에 대해 스키마를 구성하고 관리하는 사람



2. 개발 환경 만들기

  이제 드디어 개발 환경을 만들어 웹 사이트 제작을 시작해보자. 앞서 소개한 IDE 중 Visual Studio를 사용하여 프로젝트를 만들어 보자. 첫번째로 해야할 작업은 개발을 진행할 디렉토리를 만드는 작업이다.


  1) Yarn 패키지 설치


  우선 비주얼 스튜디오를 실행시켜보자. 그 다음 프로젝트를 진행할 디렉토리를 불러온다


File > Open Folder > [폴더 명]


  이제 터미널을 실행 시킨다.


Terminal > New Terminal


  터미널 실행 후 우리가 불러온 폴더 명의 이름으로 이동한다. (불러오기 이후 터미널을 실행했다면 기본적으로 해당 디렉토리가 선택되어 있을 것이다.)


  만약 설정이 안되어 있다면 cd 명령어를 통해 이동하면 된다. 이제 해당 디렉토리에서 아래의 Yarn 패키지를 설치한다.


1
$ npm i -g yarn
cs



  2) Nuxt 스캐폴딩


  이제 Nuxt.js 프로젝트를 만들자. 앞서 선택한 yarn 패키지를 활용하여 자동으로 설치시킬 수 있다. 우선 설치를 위해 아래의 스캐폴딩 명령어를 입력한다. 이때 </Directory>에는 만들기를 원하는 폴더의 이름을 넣어주면 된다.


1
$ yarn create nuxt-app </Directory>
cs


  프로젝트 이름, 설명, 개발자 등을 입력하라는 메세지가 나온다. 모두 입력하고 나면 설치가 진행된다. 설치를 위해 꽤 오랜 시간이 걸릴 것이다. 설치 완료 후 좌측의 디렉토리를 보면 다음과 같이 구성되어 있을 것이다.




  3) 개발 서버 구동


  이제 터미널의 디렉토리를 이동하고 개발 서버를 실행시킨다. 이 서버는 LocalHost에서만 작동된다. 


1
2
3
$ cd </Directory>
 
$ yarn dev
cs


  이 다음 http://localhost:3000/ 주소로 들어가보면 아래의 사이트를 볼 수 있다.



  이제 개발에 필요한 Nuxt.js 프로젝트를 생성하고, 개발 환경의 구축을 완료했다.



3. 사이트 구조 만들기

  이제 웹 사이트의 구조를 만들어보자. 웹 사이트를 들어가 보면 기본적으로 세팅되어 있는 구조가 있다. 아래의 사이트를 보면 조금 더 감이 잘 올것이다.


  위 사이트는 NAVER D2 사이트 인데 위에 보면 Global Navigation Bar가 존재해 사용자들이 사이트 내에 서비스간의 이동을 하는데 좀 더 편리하게 할 수 있도록 지원해주는 기능을 한다. 이 Bar는 어느 페이지에 있는 공통적으로 표시 되어 주어야 한다.  


1) 웹팩(WebPack) 설치


  지금 보이는 부분은 모든 웹 페이지에 띄워지는 부분이다. 이 부분을 모든 페이지마다 다 달아서 설치해도 되긴 하지만, 이렇게 된다면 매번 웹 페이지를 만들때 마다 로딩을 해야하서 데이터를 전달해야하는 양이 늘어난다. 따라서 지금 처럼 공통부를 효율적으로 만들기 위해서는 웹팩을 사용하여 데이터 량을 줄여야한다.


  웹 페이지에 필요한 다양한 모듈간의 엔트리 설정을 하는 기능을 담당한다.



이 중에서 우린 sass loader를 설치할 것이다.


1
npm install sass-loader node-sass webpack --save-dev
cs


npm 패키지를 이용해 sass loader를 설치해보자.


2) style.scss 생성


  이제 웹 팩의 설치를 완료 했으니 assets 디렉토리에 scss 폴더를 만들고 안에 componets와 elements 폴더를 만든다. 


1
2
3
4
5
6
7
8
9
assets/
--| scss/
-----| elements/
--------| body.scss
--------| ...
-----| components/
--------| util.scss
--------| ...
--| style.scss
cs


  그 다음 assets/scss 디렉토리에 style.scss를 생성한다.


1
2
3
4
5
6
7
8
9
10
11
12
$brand-color: #357F8A;
$breakpoint-small: 480px;
$breakpoint-medium: 768px;
$breakpoint-large: 960px;
$breakpoint-xlarge: 1220px;
$breakpoint-mini-max: ($breakpoint-small - 1);
$breakpoint-small-max: ($breakpoint-medium - 1);
$breakpoint-medium-max: ($breakpoint-large - 1);
$breakpoint-large-max: ($breakpoint-xlarge - 1);
 
@import 'elements/body.scss';
@import 'components/util.scss';
cs



3) Google 폰트 추가


  이제 HTML에 사용할 폰트를 추가해보자. 많은 폰트가 있지만 가장 보편적으로 사용할 수 있는 구글 폰트를 가져다가 써 보자. 오픈 소스로 나와있는 것 중 모질라 재단에서 만든 Zilla-Slab을 사용해보자. 아래와 같이 assets/scss/elements/body.scss 에 만들어주면 된다. 


1
2
3
4
5
6
7
8
body {
  font-family: 'Zilla Slab', Helvetica, sans-serif;
  line-height: 1;
  font-size: 18px;
  color: #000;
  margin: 0;
  padding: 0;
}
cs


  그 다음 해당 모듈을 사용한다는 정보를 안내하기 위해서 nuxt.config.js에 모듈 정보를 추가 한다.


1
2
3
4
5
6
7
8
9
10
head: {
    ...
    link: [
      ...
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Zilla+Slab:400,700'
      }
    ]
},
cs



4) 유틸 정의


  이제 Navigation 에서 사용하게 되는 유틸을 정의한다. 클래스 형태로 정의를 하면되고 assets/scss/component/util.scss에 정의한다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.util__flex {
  display: flex;
}
.util__flex-col {
  flex: 0 0 auto;
}
.util__flex-eq {
  flex: 1;
}
.util__container {
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
cs


  이제 개발 환경을 구성했고, 프로젝트 구조와 웹펙에 대한 사용 준비를 마쳤다. 이제 다음 시간 부터는 실제로 레이아웃을 만들어 보도록 하자.



저작자표시 동일조건