웹 개발 언어는 크게 2가지로 분류할 수 있다

프론트엔드 언어와 백엔드 언어

프론트엔드 언어는 클라이언트에서, 백엔드 언어는 서버에서 실행된다

# 프론트엔드 언어

프론트엔드는 기본적으로 HTML/CSS/JS로 구성되지만, 이 세 언어를 기반으로 한 Framework들을 이용하여 생산성을 높이는 방향으로 발전하고 있다

# 백엔드 언어

백엔드 언어는 서버에서만 실행되며, DB 연동 등의 데이터 처리를 주로 담당한다

백엔드 언어는 php, java(Spring, Servlet, JSP), Node.js, python(Django, Flask) 등 다양하게 존재한다

이 post에서는 백엔드 언어의 종류별 차이/특징을 아는대로 정리해보려 한다.

# php

php는 빠른 개발속도를 장점으로 알고 있다.

기본적인 개발환경 세팅이 비교적 간단하다

MVC 패턴 구조를 취하지 않아도 되기 때문에, 개발 자체는 빠르지만 유지보수를 고려하지 않고 개발하면

유지보수할 수 없는 코드가 되어버린다

하나의 파일에 HTML/CSS/JS 코드와 php 코드가 섞여 있으므로, 코드가 길어지면 코드를 읽기가 힘들어진다

중소규모 프로젝트에 적합할 것이다

웹개발을 시작하거나 중소규모 웹개발 프로젝트에 추천,

# java

Java 언어 자체가 Pure OOP 언어이므로, 다른 언어보다는 유지보수가 용이하도록 코드를 작성하게 될 것이다

대규모 프로젝트에 적합하며, 그만큼 개발환경 세팅이 다른 언어보다 비교적 복잡하다

Spring Framework는 MVC 패턴, Dependency Injection 패턴을 사용하는 구조인 것으로 알고 있다

Servlet, JSP 파일 등으로 구분하여 View는 JSP, Servlet은 Control, 그 외 Model class를 작성하여 Model 역할로 나누어 MVC 패턴을 준수하는 구조일 것이다

웹개발 경험이 있는 사람에게, 대규모 웹개발 프로젝트에 추천.

Spring F/W는 책으로 공부하는 것을 추천, (워낙 방대해서)

# Node.js

프론트엔드 언어인 자바스크립트 문법을 사용함으로써, 프론트엔드 개발자가 풀스택 개발을 하기에 가장 쉽다

가장 큰 특징인 Async(비동기) 처리 방식으로, throughput(시간당 처리량)이 가장 높다

하지만 처리시간에 오래 걸리는 서비스에는 적합하지 않다

callback을 이용한 비동기 처리 방식과 자바스크립트 문법이 개인적으로 굉장히 복잡하게 느껴졌다

높은 throughput을 요구하는 (=요청이 많은) 웹개발에 추천

예를 들면 모바일 앱, 게임 백엔드 서버

# python

python이 웹 개발 언어가 아닌 범용 언어이므로, python을 사용하던 사람들에게 좋은 접근성을 제공한다

python의 장단점들을 모두 가져올 수 있다는 특징이 있다

Flask framework는 중소규모 프로젝트에, Django framework는 대규모 프로젝트에 적합하다

필자는 python 언어가 자유도가 높다고 생각하나, 그럼에도 불구하고 Django 프레임워크를 처음 사용할 때는 제한이 많다고 느꼈다

python을 좋아하는 사람들에게 추천

Spring F/W처럼 Django도 책을 가지고 공부하길 추천

아주 간단한 웹개발이라면 Flask, 이후에 프로젝트가 커질 것을 생각하면 Django를 추천

그 외에 무슨 언어들이 있었지?

지금 생각나는 것들은 이 정도.

React, Angular가 어렵거나 부담스럽다면

프로젝트 규모가 작다면

프론트엔드를 너무 깊게 공부할 생각이 없다면

vue를 사용해보자

https://kr.vuejs.org/v2/guide/installation.html#CLI

필자의 경우 webpack 대신 webpack-simple을 사용하였다

---

react를 사용하다가 vue로 넘어오게 되었는데 몇몇 주요 요인은 아래와 같다

class의 method binding 문제 (window or instance own)

위와 연관하여, sublime Babel syntax highlight 문제 + reindent 문제

state 관리 문제 (redux까지 배우고 싶진 않았음.. 코드양도 너무 많아지고)

react, JSX와 함께 사용하기 위해 설치했다

Emmet package 설치 후

태그 입력 후 Ctrl+E

예를 들면 div>div 입력 후 Ctrl+E

관리자 권한으로 cmd 실행

npm i -g create-react-app

create-react-app APP_NAME

cd APP_NAME

npm start

<클라이언트 입장>

form tag로 데이터를 전송할 경우, Content-Type은 아래와 같다

Content-Type: application/x-www-form-urlencoded

즉, 한글 데이터는 URL Encoding되어 %xx%xx%xx... 식으로 변환되어 submit 된다

<서버 입장>

그리고 서버에서 해당 필드를 읽을 때, url encoded string을 그대로 읽힌다 (tomcat servlet 기준)

(참고로 '%'의 경우 %25로 encoding 될 것 이다)

따라서, 서버에서는 별도의 decoding 작업이 필요하다

이 때 encoded type과 decode type이 sync 되어야 한다

encoding type을 cp949 또는 euc-kr에서 UTF-8로 맞춰주는 부분을 가장 먼저 신경 쓰지만

값이 url encoded string으로 읽힌다는 부분은 많이 놓치지 않을까 싶다

필자가 겪은 시행착오의 메모였다

var는 function-scoped

let은 block-scoped

let이 좀더 C언어의 변수선언과 비슷한 느낌이다

https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d

필자는 React Javascript Framework를 통해 웹페이지를 개발하고 있다

그리고 elasticsearch도 이용하고 있다

아래 모듈은 elasticsearch 사용을 더 쉽게 만들어줄 것이다

아래 커맨드를 통해 설치할 수 있다

npm i --save-dev elasticsearch

아래 Quick Start를 따라가자

https://www.elastic.co/guide/en/elasticsearch/client/javascript-api/current/quick-start.html

https://stackoverflow.com/a/4673436

네이버 캘린더 오픈API는 일정추가 밖에 없다

필자는 일정 가져오기를 원했는데, 구글링을 하던도중 CalDAV를 듣게 되었다

네이버 캘린더가 CalDAV 기반인지, CalDAV를 서포트하는 것인지는 잘 모르겠지만.

https://en.wikipedia.org/wiki/CalDAV

CalDAV는 WebDAV 기반 캘린더링이라는 프로토콜 명세(specification)이다

그럼 WebDAV는?

https://ko.wikipedia.org/wiki/WebDAV

WebDAV도 마찬가지로 프로토콜 명세로서, Web Distributed Authoring and Versioning의 약자이다

HTTP의 익스텐션 프로토콜이라고 한다

---

저 프로토콜 명세에 맞춰서 구현하기에는 시간도 많이들고, 네이버에서 얼마나 명세에 맞춰서 개발되었는지도 모르기 때문에 패스

네이버 로그인 오픈API를 사용고

캘린터 REST API를 사용할수 있는지 확인해봐야 겠다

---

아무튼 CalDAV, WebDAV라는 프로토콜에 대해 접하게 되었다

pip freeze, requirements.txt 파일의 내용처럼 특정범위 버전의 패키지를 다운받고 싶을 때

https://stackoverflow.com/a/33812968

pip install 'pkg-name>=minimum,<maximum'

ex) pip install 'elasticsearch-dsl>=5<6'

(5버전 중에서 최신버전)

single quote(')를 꼭 사용해야한다

react에서 데이터를 저장하는 방법들과 그것들을 배워나가는 과정들을 보여준다

https://medium.freecodecamp.org/where-do-i-belong-a-guide-to-saving-react-component-data-in-state-store-static-and-this-c49b335e2a00

새롭고 유용한 ES6 syntax들을 소개해준다

https://gomugom.github.io/es6-for-react/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Map

일단 Map은 size 멤버를 가지고있다

https://velopert.com/921

react에서 mutable value는 state에, immutable value는 props에 저장한다고 한다

props는 component를 tag로 사용할 때, attribute를 통해서 세팅되기도 하지만

Component 클래스에 defaultProps라는 attribute(멤버 변수 비슷)를 통해서 세팅할 수도 있다

class App extend React.Component {

    ....

}

App.defaultProps = { ... }

아래와 같이 할수도 있다

class App extend React.Component {

    static defaultProps = { ... }

}

static keyword를 사용하지 않으면 ignore되므로, 주의하자 (error code에서 알려줌)

undefined는 아예 정의가 되지 않은 것이고

null은 명시적으로(explicitly) null이라고 정의된 것이다

Component class를 extend해서 custom tag를 만들수도 있지만

단순히 function(class의 method 조차도)도 custom tag로 사용할 수 있다

Component의 render()를 정의하듯, function이 JSX를 return하면 된다

Test = () => (<p>test</p>);

// in render(), you can use

<Test />

다른 주제의 문서이지만, 아래 문서를 보다가 알게되었다

https://reactjs.org/docs/conditional-rendering.html

Javascript는 Java String.equal()이 따로 있는 것처럼, ==와 ===가 별도로 있다

==는 느슨한 비교

===는 엄격한 비교

단, Object == Object는 Object === Object와 동일하다 (React에서 Object == Object를 사용할 경우 warning이 뜨는듯함)

그래서 python에서는 {} == {}는 True이지만

javascript에서는 {} == {}는 False이다 ({} === {}이기 때문예)

<p>str</p>

<h1...6>str</h1...6>

<div>str</div>

<span>str</span>

<table>

<thead> # table head

    <tr><th>str</th></tr> # TableRow, TableHead

</thead>

<tbody> # table body

    <tr><td>str</td></tr> # TableRow, TableData

</tbody>

<tfoot>

    <tr><td>str</td></tr> # TableRow, TableData

</tfoot>

</table>

<br />

<img />

<form>

<select>

<option...>

</option...>

</select>

<input type="text, radio, secret, ..." />

<button>str</button>

</form>

<button>str</button>

<a>str</a>

<img />

attribute 리스트

onClick=func

a href=url

img src=img-path, alt=alternative-str

style="width:100%;height:100%"

<문제상황>

conponentDidMount() 메서드에 아래와 같은 코드를 작성하였다

this.html_code = <h5>test</h5>;

그리고 아래와 같은 에러가 발생하였다

'React' must be in scope when using JSX

직역하면, JSX를 사용할 때는 React가 scope 안에 있어야한다

아래와 같은 라인 최상단에 추가하였다 그리고 문제가 해결되었다

import React from 'react';

setState({ ... }) 또는 setState((state) => { ...; return state; })와 같이 사용할 수 있다

<문제상황>

Component의 state에 Object를 저장하였다

그리고 그 Object(obj라고 가정하자)의 attribute 하나(data라고 가정하자)를 바꾸려고 한다

this.state.obj.data = ...

이렇게 다이렉트로 데이터를 바꾸고 나면, re-render가 이루어지지 않는다

(setState 함수를 사용했을 때와 달리)

그리고 아래에 코드를 한줄 추가했다

this.setState({}); // re-render

하지만 이러한 코드는 가독성이 떨어진다고 느껴서, re-render 기능만 하는 함수를 찾아보다가 아래 글을 찾게 되었다

<solution>

https://medium.com/@baphemot/understanding-reactjs-setstate-a4640451865b

setState에 (state) => { /* ... */ return state; }

와 같은 콜백 파라미터를 사용할수 있다고 위 포스트에 설명되어있다

즉, setState 함수 안에서 obj.data 하나만을 수정할 수 있게 되었다

특정 문제상황에서 편리함이 느껴져 포스팅을 시작했으나, 잘못된 방법이었다

https://velopert.com/3486

프로젝트 규모가 커지게 되면, 위와같은 방식은 불필요한 CPU 리소스를 낭비하게 된다

그러므로 간단한 대안인 shouldComponentUpdate를 사용할 수 있다

shouldComponentUpdate(nextProps, nextState) { ... }

(위 링크의 포스트에는 prev로 오타가 났는데, nextProps, nextState가 맞다)

하지만 state를 직접 수정하고 warning과 함께해야하는 불편함이 있다

자세한 내용은 다른 블로그를 참고하자

----

필자가 react를 사용하는 이유는 생산성이다

그리고 위 내용은 성능에 대한 내용인데, 

생산성에 더 중점을 둔다면 성능은 속도가 체감될 때 최적화하는 것으로 미뤄두는 것이 좋다

성능에 너무 연연하지 말자

tag[@조건태그]

router 종류 라이브러리는 사용법이 복잡하여 진입장벽이 높다

이것은 react, vue 모두 동일하게 느껴졌다

router는 마지막에 추가하기로 하자

<Javascript Library/Framework의 필요성>

코드 생산성이 떨어진다.

-> 관리 및 재사용이 어렵기 때문

-> 모듈 분리 불가능 등등의 문제 때문

필자는 jQuery, Vue, React 순으로 사용해보았고 React를 가장 선호한다

React, Vue 중 선택을 고민하고 있다면 아래를 읽어보자

React vs Vue (부제: React가 Vue보다 좋은 점)

공통점

 - ES5, ES6, NPM, babel이 무엇인지 알아야한다 (개념 정도)

 - JSX를 지원하며, 필자는 JSX가 효과적이라고 생각한다

차이점

 - Vue는 vue-loader가 별도로 존재하기 때문에, 추가적으로 공부해야 한다

 - React는 코드가 직관적이며(이해하기 쉬우며) 범용적인 지식을 통해 충분히 활용할 수 있다.

   즉, 추상화가 적절하여 지나치게 의존하게 만들지 않는다 (React가 F/W라기보다는 Library인 이유)

 - React는 attribute 이름을 잘못 줬을경우, 에러로그가 잘 알려준다 (어떻게 수정해야 하는지 등)

 - Vue의 장점으로, Vue에 능숙하다면 훨씬더 간결한 코드를 작성할수 있다

   하지만, 필자의 경우 다른 언어의 지식을 React에 활용할수 있었지만 Vue는 별도로 공부가 필요했다

 - vue는 webpack 등 다양한 dependency가 존재하여, 배울 것이 많게 느껴졌다

아래 방법은 완벽한 해결책이 아니다

---

문제상황은 아래와 같다

웹서버를 운영하다가, 새로운 버전을 개발하였다

이것을 legacy web과 new web이라고 할 때, 

legacy web 리소스들을 옮기지 않고, new라는 directory를 생성하여

new directory를 root로서 serving하고싶다

이러한 설정은?

<port로의 분리는 간단>

이 둘을 서로다른 port로 분리한다면 config에서 server block을 하나 더 작성하면 된다

하지만, 우리의 요구사항을 수용하려면 location으로 분리해야한다

중요한 것은, root가 아니라 alias를 사용해야 한다는 것이다

location / {

    alias /var/www/html/new;

}

location /legacy {

    alias /var/www/html;

}

location /static {

}

 - alias를 이용하면 /var/www/html이 아닌 다른 디렉토리를 통해서도 serving이 가능하다

 - /static/*의 경우, 원래의 것을 그대로 사용하기 위해 location /static block만 작성하였다 (명시하지않으면 /new/static/*으로 연결됨)

---

이슈: 상대경로를 통한 서브 디렉토리 사용 시, 즉

/legacy location에서 dist/build.js라는 상대경로를 통하여 요청 시,

/legacy/dist/build.js로 요청이 들어오는데

이는 location /legacy/dist에 해당하는 듯 하다

location block에 정규표현식을 사용하는 것이 가장 간단한 해결방법인듯 하다

'/'

 - root (absolute path)

 - example: '/html'

'//'

 - everywhere

 - example: '//p'

'.//'

 - relative path

 - example: './/p'

'*'

 - every node

 - example: '//*'

'@attr'

 - attribute

 - example: '//@title', '//img/@src', '//a/@href'

'[1]'

 - index, from 1 to n (not 0)

 - example: '//p[12]'

'[@attr="str"]'

 - condition

 - example: '//img[@src="phone.jpg"]'

'text()'

 - text of tag

 - example: '//p/text()'

https://stackoverflow.com/a/13000126

var f = document.getElementById.bind(document);

form onChange={this.change_state}

form의 모든 child tag들의 onChange 이벤트를 handling한다

form tag는 기본적으로 input type='submit' 태그를 사용하여, form tag의 action attribute에 정의된 페이지로 이동한다

필자는 이것을 ajax(axios)로 하여, 페이지 이동을 발생시키지 않으려 한다

방법은 간단했다

jQuery에서는 아래와 같은 방법을 제공하나,

$('form').submit(false)

npm 개발환경에서는 jQuery를 사용하는 것은 낭비처럼 느껴진다

input submit tag 대신 button tag를 사용해도 문제는 같았다

솔루션은 아래 링크에 있었다

https://stackoverflow.com/a/39959351

button tag에 type attr를 명시하지 않을경우, form tag 안에서는 기본값으로 type='submit'이 세팅되는듯 하다

그래서 button tag에 type='button'과 onclick=func를 정의해주면 원하는대로 동작시킬 수 있었다

필자는 react를 사용하고 있으므로 onclick 대신 onClick={this.func} 가 되겠다.

---

form element의 onSubmit attribute을 통해 submit function을 re-define 할 수 있다

ajax를 구현할 때 jQuery를 사용할 수도 있지만, npm axios를 활용할 수도 있다

JS Framework는 high-level abstraction을 제공해준다. 게임 개발로 치면 게임 엔진처럼.

하지만 그 사용법을 익히는 것이 부담스러웠다. Framework들의 종류가 너무 많기도 했고, 사용법이 쉽지 않았기 때문이다

그렇다고 HTML/CSS/JS를 그대로 사용하기는 생산성이 낮아서, Template Engine + jQuery를 사용하여 보완하려 했다

이때 문제점이 발생했다. 문제상황은 아래와 같다.

<Template Engine의 단점>

여러개의 html 파일을 사용하여 하나의 페이지를 구성하였다

이 때, 서로다른 파일에서 tag의 id, class 또는 javascript의 변수(함수) 이름이 겹치면 에러가 발생한다는 것이다.

이 문제는 webpack을 통해 해결할 수 있다

예를들면 vue-cli(Vue Framework + Webpack)이다

<Webpack>

Framework와 마찬가지로, Webpack 또한 high-level abstraction -> 진입장벽이 높다

따라서, 최선의 선택은 아니다

------------

AngularJS와 Vue는 Framework의 일종이고, React는 UI Library라고 한다

jQuery 대신 React를 한번 사용해 봐야겠다