-
항해 99 5기 TIL_18항해 99 2022. 1. 28. 00:52
▶ Today I Learned
<CS 스터디>
hysteresis(이력 현상)
:어떤 물리량이 그때의 물리 조건만으로는 일의적으로 결정되지 않고, 그 이전에 그 물질이 경과해온 상태의 변화 과정에 의존하는 현상
ex) 취업을 못하던 사람이 취업을 계속 못함
<홈페이지 구현>
웹 클라이언트: 요청하는 쪽, 사용자 측
웹 서버: 요청받아서 처리해주는 쪽
[서버 배포]
IP 주소
: 각 기기에 존재하는 좌표 같은 개념, 특수한 주소, 네트워크 연결 시 IP 할당받음
공인 IP 갯수가 너무 많아 갯수를 관리하기 위해 사설 IP 도입
ex) 공유기에 공인 IP를 주고 연결, 그 공유기(라우터, 인터넷과의 통로역할 하는 이런 것을 NAT 라고 함)를 이용하는 기기들에는 공유기에서 주는 사설 IP 발행, NAT 덕분에 사설 IP를 써도 공인 IP와 연결되어 인터넷을 쓸 수 있음
cf) NAT 네트워크 주소 변환(Network address translation)를 추후 알아보자.
AWS EC2 & Instance?
Instance: AWS EC2에서 부르는 컴퓨터 하나의 단위
cf) 서버컴퓨터를 다룰 땐 왜 화면과 마우스를 이용하지 않을까?
- 화면이나 마우스가 서버에서 자주 필요할 일은 없기 때문에
거기에 들어갈 리소스(CPU, RAM 등등)를
서버 운영에 쓰는게 더 효율적이기 때문! 화면이 없으니 마우스도 없음
AWS에서 인스턴스 생성 후 다음과 같은 코드를 터미널에 입력한다
chmod 400 "등록한 키체어 파일 여기다 드래그"
이러면 파일의 권한을 읽기 전용으로 수정하게 된다.
(이렇게 하지 않으면 SSH에서 해당 파일을 위험한 것으로 간주할 수 있다.)
그런 다음
ssh -i "인증키" 사용자 이름@인스턴스 주소
ssh에서 인증키로는 "인증키"를 사용함, 사용자 이름을 사용해서 호스트로써 @뒤의 인스턴스 주소로 된 컴퓨터에 접속할 것이다라는 뜻
그 다음 서버에서 돌릴 node.js파일과 npm파일이 필요하다.
서버에 아래와 같이 설치를 해준다.
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash - // 설치할 파일 셋업같은 느낌 sudo apt-get install -y nodejs // 우분투에서 사용하는 apt라는 패키지 관리 명령어로 node.js라는 파일을 참조하고 설치할 수 있게 해줌
그런 다음 버전을 다음의 코드로 확인하여 잘 설치되었는지를 본다.
node -v npm -v
그 다음 Mongo DB를 설치해주자.
wget -qO - https://www.mongodb.org/static/pgp/server-4.2.asc | sudo apt-key add - echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list sudo apt-get update sudo apt-get install -y mongodb-org
그 다음 Mongo DB 실행
sudo service mongod start
AWS EC2 내 HTTP 80번 포트 생성!
AWS 쪽에선 열었지만
서버에서는 아직 해당 포트 제공하지 않아 여전히 접속 불가!
iptables
: 리눅스 운영체제 내부에서의 방화벽 역할을 하는 프로그램,
특정 포트로 들어오는 것을 어떻게 처리할 건지 등에 대해 컨트롤 가능
터미널에서 인스턴스에 접속해 있는 채로 다음 코드를 실행한다.
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3000
명령어는 복잡하지만 해당 명령어를 이용해 80번 포트(기본 포트, http로 이루어진 페이지는 기본이 80번 포트이며
주소에 따로 입력하지 않아도 주소 끝에 :80이 생략되어 있는 것이나 마찬가지다. 참고로 HTTPS는 기본이 443)로
접속하면 3000번 포트로 갈 수 있게 해줌
그런 다음 실행하면 접속이 잘 되는 것을 볼 수 있다!
하지만 터미널이나 node를 꺼도 서버는 꺼지지 않는 것이 필요하다.
여기서 pm2를 사용한다.
다운로드 실행 전 먼저 sudo -s를 입력! 이 정도 파일은 관리자 권한이 필요하다.
이후 코드는 다음과 같이 입력!
npm install -g pm2
pm2는 npm에 들어있어서 이렇게 설치 가능하며 -g는 global의 약자로 여기선 전역에서 pm2를 사용할 수 있게 해준다는 의미이다.
관리자 권한 계정에서 나와 다음을 입력하여 실행하면 끝!
pm2 start app.js
이후 만약 깃헙에서 파일이 업데이트 되었다?
서버로 접속해 git pull 해서 불러온 다음 pm2 restart app 이라고 입력하면 됨
추후 실행 종료시에는 pm2 kill 을 하면 된다.
간단쓰!
그 외 명령어는 아래 링크 참조 바람
그렇게 성공적으로 홈페이지 구현을 완료하였다!
확인 결과 DB에도 값이 잘 들어오고 나가며
수정이나 삭제 기능도 잘 작동한다! 유후! ;)
배움부터 실현까지, 7일간의 대 장정이었다 ㅎㅅㅎ 뿌듯쓰.. 이 맛에 개발하지! ㅎ헿ㅎ히히히헤헿힣헤힣ㅎ히히ㅣ헤헤헤
<git>
브랜치를 따로 만들어 커밋하려 하니
fatal: Not a valid object name: 'master'.
왜 이런 에러가 뜰까 하고 검색해보았더니
해당 repository에서 commit을 한번도 하지 않아서 그렇다고 한다.
그렇다면 우선 master로 커밋하고 다시 생성해보아야지..!
<DNS>
: Domain Name System, 홈페이지 도메인(URL)을 입력했을 때 그것이 어떤 IP 주소를 가리키고 있는지 찾아주는 규칙, 시스템
<OSI 7 계층>
ISO(International Organization for Standardization, 국제 표준화 기구)가 제정,
네트워크 상 데이터 전송 과정을 나타내는 표준 규격,
- 과거 같은 회사나 구역에 있는 컴퓨터끼리만 통신이 가능했던 것을 해결하고자
통일을 위한 표준이 필요했고 이를 위해 만들어졌다.
각 계층에는 프로토콜(데이터 통신 규칙)이 있으며 다음과 같이 나누어 진다.
계층 이름 설명 7 계층 응용 계층 (Application Layer) 애플리케이션에 대한 서비스 제공 ex) 웹 사이트 조회, 파일 전송 6 계층 표현 계층 (Presentation Layer) 문자 코드, 압축 등 데이터 변환 5 계층 세션 계층 (Session Layer) 세션과 체결, 통신 방식을 결정함 4 계층 전송 계층 (Transport Layer) 신뢰할 수 있는 통신 구현 3 계층 네트워크 계층 (Network Layer) 다른 네트워크와 통신하기 위한 경로 설정 및 논리 주소 결정 2 계층 데이터 링크 계층 (Data Link Layer) 네트워크 기기 간의 데이터 전송 및 물리 주소 결정 1 계층 물리 계층 (Physical Layer) 시스템 간의 물리적인 연결과 전기 신호 변환 및 제어 담당 가령 컴퓨터를 이용해 A회사 측에서 B 측으로 데이터를 전송한다면
A측 컴퓨터에서 각 계층을 넘어갈 때 마다 헤더라는 정보가 하나씩 붙으며 이동한다.
A사의 7 계층부터 시작해 1 계층에서 전기신호로 변환, 그것을 B사에게 전달,
B 사는 그것을 각 계층을 거쳐가며 헤더를 하나씩 제거해 나감 -> 7 계층에 도달 시 헤더없이 데이터만 남아 있음
cf) 데이터가 계층을 거치며 데이터 앞에 헤더를 붙이는 것을 '캡슐화', 데이터 앞의 헤더를 제거하는 것을 '역캡슐화'라고 일컫는다.
cf) TCP/IP 모델: OSI 7계층을 간소화하여 4계층으로 나온 것이다.
<반응형 웹>
반응형 웹: 별도의 브라우저를 두지 않고도 다양한 종류의 기기에 최적화된 화면을 보여주는 것,
동작 기기의 화면과 해상도에 저절로 반응한다.
장점:
- 기기별 해상도와 크기에 따른 웹사이트를 별도로 만들 필요가 없다.
- 어떤 환경에서도 URL이 같다.
- 검색엔진 최적화가 가능하다.
구글의 경우 사용자가 PC나 모바일 등 환경에 상관없이 통일된(integrated) 경험을 하기를 바란다.
그러나 적응형 웹의 경우 일부 기능이나 내용이 다를 수 있어 구글에서는 반응형을 추천해 높은 점수를 준다.
또한 URL이 여러개로 나뉜 것 보다 하나로 쓰이는 경우가 크롤링에 용이하다고 할 수 있다.
단점
- 로딩 속도 등 성능이 비교적 안 좋을 수 있다.
기기 종류나 조절에 따라 이미지 크기 등이 변경되어야 하기에 모든 경우에 대한 CSS를 전부 다운로드 받아야 한다.
하나의 기기만을 쓰는 사용자의 경우라면 이는 불합리한 선택이 될 수 있다.
- 기존 사이트가 있을 경우 이를 변경하는 작업이 필요하다.
모바일 웹을 따로 만든다면 기존사이트를 건드릴 필요없이 모바일 용 사이트만 작업해주면 된다.
cf) 모바일 웹: PC 브라우저와 별개로 모바일 브라우저에서 이용자들이 편하게 이용할 수 있도록 구성한 웹
보통 모바일 웹의 기본 해상도는 480 x 640이다.
모바일 맞춤 페이지이기에 때에 따라 적응형 웹이라고도 불린다.
ex) 네이버 PC 주소 www.naver.com
모바일 주소 m.naver.com
모바일로 접속 시 m으로 시작하는 도메인에 들어가게 된다.
▶ 느낀 점
또 하나의 주차가 끝났다. 하고 싶었던 기능을 다 구현하지 못해 아쉽기도 하지만
새벽 4시까지 잠들지 않은채 어둠 속에서 코딩을 하며 뿌듯함을 느꼈다.
힘들어도 즐겁다. 이렇게 나만의 꽃잎을 하나씩 피워나가자 :) 즐거운 하루였다.
▶ 공부 시 참고 링크들
https://kkotkkio.tistory.com/22
Mongo DB의 명령어가 궁금할 때 참고하면 좋을 공식 문서
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-ubuntu/
Mongo DB로 로컬호스트에서도 서버의 DB를 볼 수 있게 하는 법 설명
https://swtpumpkin.github.io/backend/aws/ec2RoboMongo/
https://wotres.tistory.com/entry/git-push-u-%EC%98%B5%EC%85%98-%EC%82%AC%EC%9A%A9-%EC%9D%B4%EC%9C%A0
도서 '모두의 네트워크'
http://www.yes24.com/Product/Goods/61794014
https://brunch.co.kr/@bunbury/96
https://jwprogramming.tistory.com/30
'항해 99' 카테고리의 다른 글
항해 99 5기 TIL_20 (0) 2022.01.30 항해 99 5기 TIL_19 (0) 2022.01.29 항해 99 5기 TIL_17 (0) 2022.01.27 항해 99 5기 TIL_16 (0) 2022.01.26 항해 99 5기 TIL_15 (0) 2022.01.25