[웹개발 종합] 5주차 스터디(WIL)

5주 차에서는 4주 차와 비슷한 Flask Framework 프로젝트를 진행했다. bucket의 경우 기록하기, 목록 보기 기본 기능을 구현하여 사실상 mars 프로젝트와 비슷한 프로젝트를 빠르게 복습하는 느낌이었다. fan 같은 경우에도 동일한 기능으로 솔직히 주제만 조금 변경되고 bucket과 동일하게 진행되는 강의를 보고 나는 추가적으로 DB 연결과 create, read 기능 외에도 현재까지 배운 다른 기능도 복습 삼아 넣어보고 싶었다. 특히 웹 크롤링에서 내가 원하는 키워드로 파싱 받은 HTML 소스 내의 키워드의 부모 태그들을 찾아가는 것을 구현했지만 keyword.parent.parent.parent와 같이 조금 지저분한 코드로 찾아가는 게 맞나 아직도 의심스럽긴 하다. 검색으로도 원하는 결과를 찾지 못하고 있어 스택오버플로우나 한국 커뮤니티에 질문을 올려봐야 할 것 같다.

 

과제에서 안내된 기본 기능 외에도 전 프로젝트들에서 부분적으로 구현한 기능이었던 웹 크롤링을 Spotify 차트 웹 사이트로부터 데이터를 가져오는 것을 구현했다. 또한 Date 객체를 생성해서 현재 날짜를 얻어 표기해주는 기능을 추가했다. 4개 미니 프로젝트는 전체적으로 HTML에 CSS, JS를 기록하도록 안내되었지만, Java의 Spring framework에 익숙해서 그런지 Flask도 아무리 미니 프로젝트라도 CSS, JS는 모듈화 시켜줘야겠다는 생각에 찾아보고 static이란 폴더로 구분하는 것도 모두 적용하게 되었다.

 

5주차에서 가장 중요한 부분은 "배포"였다. 이전 국비교육을 통해서도 Spring 프로젝트를 완료했었어도 마지막에 프로젝트 패키징으로 jar 파일로 압축하는 것 외에 실질적으로 웹상에 배포하는 과정을 배우지 못해서 아쉬웠었고, 이번 웹개발 종합반을 통해서 마지막에 해당 부분이 있어 아주 큰 가이드가 되었다. 하지만 AWS의 Elastic Beanstalk로 배포하는 것은 생각보다 너무 간단하게 종료되었다. 무언가 내가 생각하던 서버의 활동스러운 지식이 들어왔다기보다는 AWS의 자동화 시스템에 그저 폴더 구조를 맞추고 프로젝트 덩어리를 단순히 맡겨버린 느낌이었다. 

 

무언가 부족했다. 나는 아마존이 해주는 서비스가 돌아가는 방식 자체가 궁금해졌다. 그래서 내가 결정한 것은 내가 소장하고 있는 Synology사의 NAS 서버 장비를 통해서 AWS의 웹 호스팅, 지정 도메인으로 포트 포워딩 해주고, 프로젝트 패키지는 어떤 폴더 구조로하고. 어디에 저장되고. 이러한 자동으로 해주는 부분들을 뜯어보기 시작했고 내가 웹 호스팅을 내 서버로 직접 해보자 하고 NAS의 이해부터 포트, DDNS, DNS, HTTP, 프로토콜 등 웹 관련 기본 지식들을 과정에 맞추어 추가적으로 지식을 주섬주섬 주워갔다. 공부하면서 웬만하면 오류가 발생하면 스스로해결하고, 같은 실수를 반복하지 않으려 하고 싶어 하는데 기초 java, python, html, css 등 비교적 오류가 어디서 나타날지, 오타가 어디서 자주 발생하는지 이제 익숙해지고 있는 시점인데 서버, 호스팅 이쪽은 거의 대~충 그런가 보다 하고 사전지식이 부족했어서 상당히 많은 오류, 어려움을 경험했다. 윈도우의 cmd, 맥의 unix까지는 익숙해졌는데 NAS는 기본 Linux로 명령어부터 익숙하지 않았다. 또한 내가 마지막에 만든 fan 프로젝트를 AWS EB 배포와 마찬가지로 NAS에서 배포하는 것을 구현하고 싶었는데 계속 이것저것 모르는 것에 대해서 이해하려고 찾아보고 영상 보고 하면서 점점 현재 레벨에서 이해하지 못할 수준까지 딥하게 내용이 나타나기 시작하고 배포라는 목적을 잃어가기도 했다. 이런 우여곡절 끝에 정확하게 배포라는 목적을 위해서 우선 로컬 PC에서 되는 것은 NAS PC에서도 된다라는 전제를 강하게 두고. 우선적으로 로컬 PC에서는 docker-compose를 통해 로컬 PC의 포트에서 웹페이지가 나타나게 구현, 이는 곧 NAS에도 동일하게 docker, docker-compose를 설치하고 동일하게 NAS PC에서도 특정 포트로 웹페이지가 나타나게 구현했으며, 이 시점 과정까지 오면서 NAS를 통해 도메인~ DDNS로 외부접속~ 포트포워딩~ 이러한 주변 지식들을 버리지 않고, 각각 적재적소에 설정을 하면서 결과적으로 NAS를 통해 동일한 웹 페이지를 외부접속(www(http://xx.xx:80))으로 배포하는 것을 성공했다. 이때 너무 뿌듯했다. 지금 와서야 너무 당연하게 로컬하고 동일한 환경을 구성하면 된다라고 요약할 수 있지만 로컬 PC는 생각보다 많은 기본 세팅들이 편리하고 화려하게 되어 있지만 NAS는 정보도 조금 부족하기도 했으며 내가 원하는 키워드로 딱 들어맞지 않았다. 예로 배포는 대부분 Web Station 패키지를 활용해서 wordpress 정도만 연결하고 정해진 폴더에 넣는 식의 배포 영상, 가이드가 대부분이라 내 궁금증 해소에는 반정도밖에 도움이 되지 않았다. nas docker-compose라는 키워드로 검색하기 시작하면서 나의 의문들이 풀리기 시작했고, NAS의 터미널을 들어가기 위하여 ssh 포트를 열고 ubuntu를 docker로 가상환경에 설치하여 해당 포트에 입력하면서, NAS의 제한적인 GUI환경에서 본격적으로 원하는 것을 CLI 명령어로 설치하면서 대부분의 기능을 이용할 수 있겠다는 자신감이 생겼다. 자동적으로 Web Station이 어떤 포트를 쓰고 있는지,  내부 패키지(앱)와 연결되어 있는 경우도 많아서 혼란스러웠다. 하지만 중간중간 내가 해야 할 것을 명확하게 정리하고 웹 서버 설정, 내 라우터로부터의 설정과 NAS 로컬 설정을 맞추면서 차근차근 진행했다. 수많은 블로그를 참고했고 youtube에서도 50대 NAS와 웹 설정 부분을 알려주는 강의하시는 분의 강의도 자세히 봤다.(사실 내가 원하는 설정 방향보다는 간편한 쪽과 본인의 세팅의 기준이 명확하셔서 조금 내용을 거르면서 봤다. 또한 너무 영상이 길다.. 힘들었다.) 가장 나에게 도움 되었던 영상은 서울리안님의 신나다 Ep.02이다. 가장 먼저 찾아봤으면 먼 길을 안 돌았을 정도로 간략하고 내가 원하는 방향과 90% 일치했다. 10%는 이 강의도 그렇지만 대부분 NAS를 웹하드처럼 DSM에 접근하는 것을 80 포트로 포워딩하는 경우가 많지만 나는 내가 제작한 홈페이지를 Docker에 돌리고, 도커에 설정한 81번 포트를 또 80번 포트로 띄워야 한다는 점이 핵심인데 지금은 당연하게 느껴지지만 사전 지식이 없는 상태에서는 외부포트? 내부포트?? 내부 IP? 외부 IP???? 이러한 궁금증이 많았었다.. 무식한 과거의 나를 이긴 점에서 행복하다. 아직도  Spring 프로젝트를 어떻게 배포하는지는 시도해보지 않았기 때문에 의문점들이 많다. 어떤 세팅들을 어디서 하게될까? jar? 이걸 넘기는것인가? 서버세팅은 어디서하는가? 이 의문점들은 Spring 프로젝트 기간이 되면 시도해보려고 한다. 또한 NAS로도 똑같이 해보고자 한다. 일단 기초적인 틀을 살펴본 것 같아서 좋았다.

 

두서없이 회고를 작성하지만, 실제로는 5주차 fan 프로젝트는 3일 전에 AWS EB배포까지 마무리 했다. 그런데 마지막 AWS EB배포에서 생겨난 궁금증으로부터 시작한 NAS 배포가 하루정도면 이해하고 완성할 줄 알았다. 하지만 여러 우여곡절로 3일간 들이박으면서 결국 내가 원하는 상태는 성공했다. 5주차 회고가 늦었다. 이제 본 프로젝트가 시작하기 전에 Java로 다시 돌아가서 본 프로젝트의 Spring에 지장이 없도록 기억이 가물가물한 Java 기본 문법들부터 주말에 한번 쓱 훑고 시작해야겠다. 중요한건 이번에 python과 flask를 처음 써본 것 처럼 모든 것에 의문(왜?)를 가지고 데이터의 흐름, 요청 응답의 흐름, 프로젝트 구조의 흐름을 진지하게 공부하자는 마음가짐을 갖자. 보여주기 위한 블로그가 아니다. 나의 사전이며 오답노트이다.

 

아 또한 Intellij IDE를 사용해보고자 한다. 전에 Eclipse와 Spring용 STS를 사용했었는데, 한글입력에 대한 문제가 있어서 Karabiner 키맵핑을 사용하고 있긴 한데 Intellij는 이 문제가 없다고 들었다. Java기본 문법강의에서는 해당 IDE를 추천하고 있으니 이번 기회에 해당 툴도 익혀보고 Eclipse와 비교하여 선택하는 것이 좋겠다. 검색을 해보니 Mac환경에서 Intellij가 괜찮다는 평도 많고, 속도면이 좋다.. 뭐 이런 이야기가 많다. 좋다 나쁘다를 떠나서 한글 입력 문제는 고질병이라 Eclipse에서도 해결할 생각이 없어 보였다. 실제로 이전 교육에서 상당히 거슬리던 문제였다. 중요한 건 STS와 호환성에 문제가 있었다는 일부 댓글을 봤는데, 이것이 지장이 있다면, Eclipse와 STS를 사용하는 게 맞다보고, 추가 댓글을 보니 그저 구문 오류였던 거 같기도 하다. 일단 안 써봐서 모르겠다 뭔가 intellij가 기능이 더 좋다는 평가가 많아서 이번에 Intellij까지 둘 다 써보고 내가 직접 판단하는 게 맞을지도.