Technical

NoSQL을 사용한 FullStack 웹개발-1편

시작하며

NoSQL을 알아보면서 다양한 유형의 DB들을 직접 사용해 보고 싶다는 생각이 들었다. 그래서 간단한 웹페이지를 FullStack으로 개발하여 NoSQL DB를 적용해보고자 한다.

Front-end 언어는 javascript 라이브러리인 React.js를 선정하였고, Back-end 언어는 Java 프레임워크인 Spring Boot를 사용하고자 한다.

약 5~6회차에 걸쳐 주요 개념 및 개발 과정을 소개할 예정이며, 해당 포스팅을 통해 개발을 따라해보고자 한다면 기초 문법 및 세부적인 내용은 개인적으로 학습이 필요할 것이다.

FullStack 이란

web developer or engineer who works with both the front and back ends of a website or application

대부분이 알고 있는 Full Stack 개발자라고 한다면 프런트엔드, 백엔드 모든 분야에 전문가로서 혼자서 개발 가능한 능력을 갖춘 사람으로 생각할 것이다. 그러나 full stack 개발자는 모든 분야에서 전문가라는 의미는 아니다. 직무와 관련된 지식을 갖고 있고, 관련 개념을 완제품에 적용해 구현시킬 능력을 갖고 있는 사람이다. 모든 것이 작동하는 원리를 이해하고 있고, 따라서 문제를 적절히 예측할 수 있는 것이다. 하나의 예로 백엔드에 대부분의 업무 시간을 사용하고 있는 경우에도, 관련 팀과 효과적으로 협력하고, 전체 프로젝트의 큰 그림을 볼 수 있는 프론트 엔드 개발에 대한 지식을 갖추고 있는 사람이라는 의미이다. ‘완전한 마스터’보다는 ‘전체적’이라는 비전을 강조하고 있다.

JavaScript Library

자바스크립트 라이브러리는 AJAX, 기타 웹 중심 기술을 위해 자바스크립트 기반 애플리케이션을 더 쉽게 개발할 수 있도록 제공해 준다.

위 자료는 Google Trends에서 제공되는 최근 5년간의 스크립트 언어에 대한 관심변화도를 보여주는 자료이다. 현재에는 React가 가장 많은 관심을 보이고 있으며, Vue가 점차 관심을 받고 있는 상황이다. 각 라이브러리에 대해 간단히 알아보자.

React : 페이스북에서 개발된 UI 컴포넌트 라이브러리이며, 대표적으로 페이스북, 인스타그램에서 사용되고 있다. 컴포넌트 기반 아키텍처, Virtual DOM, 단방향 데이터 흐름 지향, JSX 의 특징을 갖고 있다.

Angular : SPA(Single Page Application) 개발을 위한 구글의 오픈소스 자바스크립트 프레임워크이다. 정적 타입을 제공하는 TypeScript를 주언어로 채택하여 대규모 애플리케이션 개발에 보다 적합한 환경을 제공한다.

Vue : Angular, React에 비하여 매우 작고 가벼우며, 복잡도도 낮다. React의 단방향 데이터 흐름과 Angular의 양방향 데이터 바인딩의 장점을 가진 프레임 워크이다.

React.js 특징

이번 프로젝트에서 Front-end 개발 언어로 선정한 React의 특징을 보다 자세히 살펴보자.

컴포넌트 기반 아키텍쳐

Component-based architecture of a single-page application

위 그림과 같이 화면을 구성함에 있어서 여럿 컴포넌트들을 조합하여 사용자에게 제공한다. 기능별로 컴포넌트 단위로 개발하는데 이는 재사용성이 용이하고 코드를 파악함에 있어 보다 쉽다는 장점을 가지고 있다.

Virtual DOM

사용자 액션에 따라 DOM을 일일이 다루었던 과거 개발 방식(jQuery와 같은 라이브러리만을 사용하는)과는 달리 개발자가 DOM을 직접 다루지 않고 React가 데이터 상태에 따라 자동으로 UI를 관리하기 때문에, 개발자는 단순히 특정 상태에 대한 뷰의 변화만 구현하면 된다.

Virtual DOM이란 Virtual Document Object Model의 의미이다. 기존에는 DOM의 수정이 있을 경우 전체를 다시 생성하는 단점을 가지고 있었던 반면 Virtual DOM을 사용할 경우 먼저 Virtual DOM에 반영 후 특정 시점에 DOM과 비교하여 한꺼번에 반영한다. 이는 반영횟수가 줄어들어 성능개선의 장점을 가져다 준다.

단방향 데이터 흐름

React의 컴포넌트는 아래와 같이 트리형태로 구성된다. 부모 컴포넌트에서 자식 컴포넌트 방향으로 데이터를 전송한다.

5d883f86-98a6-11e6-9444-4a15d340d46c.png

JSX 문법

const element = <h1>Hello, world!</h1>;

JSX 문법이란 위 예시 코드와 같이 XML 형태의 구문을 자바스크립트 구문 사이에 사용할 수 있는 문법이며, 이를 React에선 허용한다.

React.js 개발환경 구축

이제 개발환경을 구축해보고자 한다. 필요한 추가적인 개념들은 개발 진행하면서 설명하겠다.

먼저 node.js설치가 필요하다. 아래 주소에서 자신의 개발환경에 맞는 os에 맞게 최신버전을 다운로드하여 설치하면 된다.

https://nodejs.org/ko/download/

node.js가 정상적으로 설치되었는지 확인해보기 위해선 터미널에서 “node -v” 명령어를 통해 버전 정보가 정상적으로 뜨는지 아래와 같이 확인해 보면 된다.

$ node -v
v12.14.0

node.js 설치파일을 통해 설치하게 되면 npm이 함께 설치된다. npm이란 node package manager로 자바스크립트 언어를 위한 패키지 관리자이며, npm을 통해서 필요한 모듈을 설치할 수 있다. 설치 확인을 위해선 “npm -v” 명령어를 통해 버전 정보가 제대로 뜨는지 확인하면 된다.

$ npm -v
6.13.4

다음은 create-react-app 모듈을 설치하겠다. create-react-app은 React 작업을 위한 기본 환경을 제공해준다. ES6, JSX 기술로 구현된 리액트는 직접 웹팩 설정을 구성하여 빌드 환경을 만들어야하는데 터미널 기반의 코드 제너레이터를 사용하면 이러한 설정을 자동으로 만들어준다. create-react-app이 바로 그러한 도구중 하나이다. npm을 통해 설치해보자.

$ npm install -g create-react-app 
또는
$ sudo npm install -g create-react-app

create-react-app을 설치하고 자신이 원하는 프로젝트명으로 create-react-app에서 제공하는 환경으로 sample project를 생성할 수 있다.

$ create-react-app [project name]

생성이 완료되면 project name으로 폴더가 생성 되었을 것이다. 해당 폴더에 들어가면 sample project가 생성된걸 확인할 수 있다.

README.md	package.json	src
node_modules	public		yarn.lock

create-react-app로 React 개발 환경을 만들었다면 sample 소스를 build 후 로컬에서 돌려볼수가 있다.

$ npm run build
$ npm start

정상적으로 진행된다면 아래와 같이 localhost:3000 으로 웹화면이 뜨는걸 확인 할 수 있다. (create-react-app v2 부터는 Internet Explorer를 지원하지 않는다. Chrome으로 확인 가능하다.)

이제 개발환경을 구축했으니 개발을 하기 위해선 개발 Tool이 필요하다. VS code, Atom, Intellij 등이 있는데 본인이 원하는 툴을 설치하면 된다. 대부분의 자료가 VS code로 제공되기 때문에 VS code 사용하기를 권장한다.

https://code.visualstudio.com

React.js 구조

설치한 개발 툴에서 프로젝트를 오픈 해보자. 왼쪽 Explorer 창에서 아래와 같이 구조를 확인할 수 있다.

중요 요소들을 살펴보자면 node_modules는 프로젝트 필요한 모듈이 저장되는 공간이며, src 폴더아래 컴포넌트 등의 개발 소스가 저장된다.

App.js는 최상위 컴포넌트이다. 로컬에서 돌렸을 때 처음 보이는 화면이 App.js에 있는 내용이 마운팅된 것이다. App.js 내부 구조를 살펴보면 import 선언을 통해 자신 이외에 필요한 모듈과 컴포넌트를 가져올 수 있으며, return() 함수를 통해 표현하고자 하는 태그들이 입력되어 있는 것을 확인할 수 있다. 그리고 아래 export를 통해 다른 컴포넌트에서 해당 컴포넌트를 접근할 수 있도록 선언할 수 있다.

index.js는 애플리케이션의 엔트리 포인트 역할을 하는데 react 루트 컴포넌트를 DOM에 마운팅 하는 역할을 한다. 내부 구조를 살펴보면 ReactDOM.render() 안에 App 컴포넌트를 선언해주었고 이로 인해 App 컴포넌트가 최상위 컴포넌트가 되는 것이다. <div>, <p>, <a> 등 태그 및 각 태그에 대한 속성에 대한 내용은 간단히 검색을 통해 학습하는 것이 좋다. 대부분 UI 프레임워크를 통해 커스터마이징된 태그를 사용하겠지만 기초적인 태그에 관해서는 학습해 보면서 태그에 대한 사용법을 익히는 걸 추천한다.

컴포넌트의 클래스형과 함수형

컴포넌트는 위의 App 컴포넌트와 같이 function으로 선언된 함수형이 있고 이와 달리 class로 선언된 클래스형이 있다.

<클래스형>

render 함수가 반드시 존재해야 함

state의 사용이 가능

라이프 사이클 API의 사용이 가능

class App extends Component{
  render(){
    const test = "";

    return <div>{test}<div>;
  }
}

<함수형>

state가 없고 입력(props)이 수정되어 UI가 변할 경우 적합

메모리 자원을 클래스형 컴포넌트에 비해서 덜 차지

function App(){
  const test = "";

  return <div>{test}<div>
}

사용자의 선택에 의해 사용여부가 결정되며, 현재는 React 업데이트 후 Hooks 기능을 통해 클래스형 컴포넌트에서만 가능한 기능들이 함수형 컴포넌트에서도 구현 가능하게 되었다. 현재는 함수형 컴포넌트를 작성하는 추세이지만 처음 배우는 입장에서 두 개의 유형을 모두 사용해보고자 한다.

마치면서

다음 편에서는 컴포넌트들을 직접 개발하고 추가하여 화면을 구성하고자 한다. 이때 필요한 모듈 또는 프레임워크가 있다면 어떻게 설치하고 어떻게 사용하는지도 알아보자.

참고사이트

http://www.ciokorea.com/news/116667

댓글 남기기

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

%d 블로거가 이것을 좋아합니다: