준비물- 짧은URL 24시간 가동되는 서버 필요.​프론트1. 주소를 입력을 받을 창 입력 폼 하나를 만든다.​백엔드2. DB에서 원래 주소를 저장한다.3. DB에서 원래 주소를 찾은 후 Redirect 한다.​​강좌가 아니고 개발 일지이므로 임팩트 있게 요약하여 설명하진 않으므로 주의 바란다. 필자가 교수도 아니고, 애초에 이 설명을 읽고 있을 사람은 없을 거라고 본다.​​백엔드 구축(서론)백엔드 구축 작업을 해보록 하자. 백엔드는 간단히 말하면 서버를 구축하는 일이다. 이런 백엔드는 서버나 네트워크 장비 설정과는 거리가 상당히 멀다. ​네이버 메일이나 카페, 블로그에서 주로 쓰는 JSP, 쇼핑몰에서 주로 사용하는 ASP.NET, 디씨인사이드나 아프리카TV, 페이스북에서 주로 쓰는 PHP 등이 바로 이 백엔드 환경이다. ​보통 웹 서버 프로그램이 따로 있어서 그걸 돌리면 별 다른 지식이 없어도 서버를 돌릴 수 있게 되어있다.​그러나 필자는 템플릿 엔진을 통해 완성된 HTML 문서를 짧은URL 받아보고자 하는 것이 아니다. 그저 API 서버만 필요하기 때문에 Node.js를 선택했다.​기본적은 Express 세팅은 필자도 자세히 모르므로 생략하도록 하겠다. express-generator 같은 정해진 틀을 생성해주는 툴이 있으므로 그것을 써도 좋다.​백엔드 서버 만들기 (본론)몽고DB나 파이어베이스 같은 비관계형 데이터베이스도 있는데, 개인적으로 파이어베이스는 유료이기 때문에 선호하지 않고 몽고DB는 설치하기가 귀찮아 그냥 이미 구축해놓은 마리아DB를 쓰도록 하겠다. ​마리아DB는 MySQL 개발자들이 따로 나와서 만든 DB로 MySQL과 100% 호환된다. ​우선, npm을 이용하여 mysql2를 설치하고 require로 mysql2를 불러온다.MYSQL 관련 코드는 다음과 같다. Express는 현재 글을 쓰는 시점에서 Promise와 완전히 동화되지 않는다(Express 말고 ES6하고도 동화되는 Koa라는 것도 있다) 오류 핸들링이 되지 않기 때문에 아직까지 쓰기가 부적절하다. 무시하고 그냥 쓰는 방법과 래퍼 함수를 걸어서 수동으로 오류를 발생시키는 방법 등이 있는데 후자는 하다가 짧은URL 실패했다.다시 한 번 말하지만 Express는 ES6이 나오기 전에 만들어졌기 때문에 최신 문물인 Promise를 사용할 경우, 오류 핸들링이 제대로 되지 않는다. 필자는 이것을 해결하려다 실패했다. 해결 방법은 나오지만 뭔가 해결이 되지가 않았기 때문이다.​우선 SQL 작성 프로그램 등을 사용하여 테이블을 생성하는 코드를 작성하여 실행한다. 필자는 tools 라는 데이터베이스에 다음과 같은 테이블을 생성했다.새로운 데이터의 삽입은 다음과 같다. LEFT 함수를 사용하여 왼쪽에서 6개의 글자를 잘라냈다. 이렇게 할 경우, 중복 문제가 생길 수 있는데 어차피 중복된 데이터는 들어갈 수 없기 때문에 디테일 한 내용은 무시하도록 하겠다. 이렇게 하고 테스트 데이터를 삽입하면 DB에 아래와 같이 저장된다.데이터 검색은 다음과 같이 할 수 있는데, 간단한 질의문이기 때문에 설명은 생략하도록 하겠다. ​이것을 모듈화하여 다음과 같은 클래스를 만들고 모듈로 배포한다.​코드 설명은 짧은URL 생략하도록 하겠다. 다시 한 번 말하지만, 이 포스트는 초보자를 위한 강좌가 아니고 그저 개발 일지에 가깝다. 구조 상으로 async나 await 같은 문법이 사용되는데 Express에선 이 문법의 사용이 아직 좋지 않다. 사실 이런 SQL 접근 코드들은 MVC 패턴 상에서 DAO 등으로 관리하는 편인데, SQLManagerImpl가 여기서 DAO와 같다고 보면 된다.​​주소를 등록하는 REST API를 하나 작성한다.​다음은 localhost:9003/~이하주소~ 로 접근할 경우, DB를 검색하여 원래 주소로 리다이렉션을 거는 코드이다.이렇게 코딩을 하고, 리눅스에 해당 코드를 깃헙을 통해 올리고 pm2로 서버를 돌리게 되면 짧은 주소 서비스를 만들 수 있게 된다.​그러나 지금까지 백엔드 단만 만든 것이다. ​프론트엔드] HTML 파일 만들기원래 백엔드를 Node.js로 시작했으면 뷰 엔진을 사용해서 완성된 문서를 전송해야 하지만 우리는 백엔드를 API 서버로만 사용했다. ​따라서 프론트 엔드 단은 짧은URL 깃허브 페이지 기능을 활용하여 만들 생각이다. 깃허브에서는 github.io라는 개인 도메인을 제공하는데 이를 사용하면 쉽다.​깃허브 페이지를 사용하려면 깃허브에서 새로운 저장소를 만들어야 한다. 원래 페이지는 CSS로 직접 디자인해야 하지만, 화면 크기에 맞는 페이지를 만드려면 그냥 부트스트랩을 쓰는 것이 낫다. ​입력 폼과 버튼 하나를 만드는 정도는 쉽다. 부트스트랩은 최신 버전인 5를 사용했다.​​부트스트랩을 사용하여 페이지를 꾸미고, axios나 XMLHttpRequest를 사용하여 REST API를 GET 방식으로 호출하면 된다.​index.html은 다음과 같다.index.js는 다음과 같다.​백엔드 서버를 리눅스에 올리고, pm2로 가동한다.​​서버가 백그라운드에서 실행되었다.​​그러나 위와 같은 오류가 발생했다. ​​​​​​그런데 인증서 경로가 기억이 나지 않는다. Putty (또는 Open SSH)를 켜서 certbot certificates라고 치면 경로가 반환된다. 복사해주자. 드래그해서 클릭하면 복사된다.​​복사한 인증서 경로를 다음과 같이 옵션으로 추가한다.​원래 이렇게 인증서 경로를 알려주면 안된다.​테스트 동작 결과 OK​정상적으로 실행되었다. 짧은URL 그런데 이것은 로컬호스트에서만 접근 가능하도록 되어있기 때문에 외부에서 접근할 수 있게 설정을 또 해줘야 한다. 외부 접근을 풀려면 ufw를 쓰는 방법도 있지만, 방화벽 관련 정책을 새로 설정해야 한다. 즉, 방금 서버가 실행된 9004 포트를 외부에서 접근할 수 있도록 열어줘야 한다. 다양한 방법이 있지만 필자의 서버에선 iptables를 사용하면 된다. 적용 후엔 서버를 재가동시켜준다.​iptables를 아래 명령어를 사용하여 저장해줘야 우분투 서버 재부팅 후에도 반영된다.​추가로 서비스로 등록하는 방법도 있다. 동일하게 백그라운드에서 실행되며 서비스이므로 부팅 시에도 자동으로 동작한다. 순서는 다음과 같다. 다만 이렇게 node로 실행하면 파일 수정 시 서비스를 수동으로 재실행해야 하는 문제가 있다. 이때, node 대신 nodemon을 쓰면 알아서 재실행이 된다. 주의할 점은 innerHTML은 사용하지 않는 것이 좋다. 비동기이기 때문에 코드 실행 순서에 문제가 생긴다.제대로 짧은URL 되는 지 한 번 테스트 해보자.​필자의 네이버 블로그 주소를 넣고, Short Url! 버튼을 눌러보았다.더 길어진 것 같은 주소가 반환되었다!​반환된 주소로 들어가면, 아래와 같이 썸네일이 정상 등록된다.​그리고 필자의 블로그로 성공적으로 리다이렉션 된다.​그런데 영원히 Short URL! 서비스를 유지할 수는 없으므로 crontab 같은 리눅스 스케줄러 기능으로 30일 또는 90일 간격으로 DB를 한 번 초기화 해주는 것이 성능에 도움이 될 것이다.​즉, URL을 만들 때 테이블에 등록일과 최근 방문일 등이 설정되어있으면 더 좋을 것이다. 최근에 사용되지 않았다면 where 절을 이용하여 조건을 검색하여 삭제를 할 수가 있다.​프론트 단도 Express를 통해 서버로 변경해보자현재 서버와 프론트가 나뉘어져 있는데 사실 이렇게 할 필요가 없다. ​npm으로 express-generator를 로컬에 설치하자.그 다음에는 현재 프론트엔드 프로젝트 폴더가 있는 곳으로 cd 명령으로 이동한 후 아래 짧은URL 명령어를 호출한다.MVC 패턴이므로, views 폴더의 index.ejs 파일에 뷰가 선언되어있다. 뷰 파일을 수정한다. 리눅스 우분투 서버로 돌아와 /home/ubuntu/로 이동하고, 다음 명령어를 호출한다.​기존의 라우트 코드들을 새롭게 만든 백엔드 서버로 옮겨주고 mysql2 모듈만 새로 깔면 하나의 프로젝트로 프론트/백엔드가 모두 돌아갈 것이다.​참고로 필자의 우분투 서버의 80포트와 443 포트에는 apache2 (PHP) 서버가 이미 돌아가고 있어서 포트 번호를 없애려면 포트 포워딩을 하거나 리다이렉션을 걸어줘야 한다. 그러나 이미 사이트 여러 개를 한 서버에서 돌리고 있어 그럴 필요가 없다.​필자의 서버에서 꽤나 무겁게 돌아가는 건 톰캣 서버인데, 톰캣 서버는 자바 기반이라 껐다 켰다를 하면 서버 컴퓨터가 다운되기도 하므로 되도록이면 서버를 끄지 않고 있다. 어차피 자동 재배치 기능이 있어서 알아서 재시작되기 때문이다.​참고 서적- Do it! Node.js 프로그래밍 (정재곤 저)- 이것이 리눅스다 짧은URL (우재남 저)- 이것이 MySQL이다 (우재남 저)