-> 각 service에서 a <-> b 로 page전환 시, browser에 보이는 화면의 차이는 없어보인다.
-> 하지만 내부 동작은 다르다.
3. CSR vs SSR
CSR : Client Side Rendering Browser(Client)에서 js에 의해 View(HTML)을 동적으로 생산한다. 때문에 page전환이 SSR보다 상대적으로 빠르다. 대신 최초 접속 시, 모든 js(java script)와 static파일(HTML, image)를 가져와야 한다. 때문에 최초 접속시 로딩은 SSR에 비해 늦다.
SSR : Server Side Rendering Web Server에서 View를 생성한다. page가 전활될 때 마다, client가 server에 View 요청을 하고, server는 그것을 생성한 후 client에게 보내준다. 때문에 View 전환 속도가 CSR에 비해 상대적으로 늦다. 그리고 page 요청이 빈번해 질수록 CSR에 비해 server 부하가 더 커진다.
4. Wire Shark
-> SPA, MPA에서 page 전환 시, 네트워크 요청 & 응답이 어떻게 되는지 살펴보자,
-> 네트워크 packet를 capture하기 위해 Wire Shark 설치.
-> 네트워크 아답터를 선택해야 하므로 Capture->Options (이부분 확인안하면 확인불가/ 본인은 Wifi 선택함)
1) MPA접속
-> a <-> b 페이지 전환시, client/ server 간에 View를 요청/응답하는 packet 생성 확인
- 도커 버전 확인
docker -v
- 테스트용 Hello world 도커 컨테이너 실행
docker run hello-world
// "Hello from Docker!" 메시지 출력되면 성공
// 도커 이미지만 다운로드시
docker pull hello-world
- 도커 기본 명령어 실습
- 컨테이너 조회
docker ps -a
// -a 옵션은 실행 종료된 컨테이너까지 조회
- Hello world 컨테이너 삭제
docker rm [컨테이너 ID 또는 NAME]
- 도커 이미지 조회
docker images
- Hello world 도커 이미지 삭제
docker rmi [이미지 ID 또는 이미지명:TAG 명]
//latest태그명은 생략 가능
//프로젝트 코드 다운로드 git clone
- FE 도커이미지 제작(영화프로젝트 - Vue.js)
1. 로컬에서 FE 실행 및 웹 브라우저로 접속(http://localhost:8080) 확인
yarn install
yarn serve
2. Dockerfile 작성
# build stage
FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install --production
COPY . .
RUN npm run build
# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
3. 도커 이미지 빌드
docker build -t vue-app .
// . -> Dockfile 위치
//실행 이미지 확인
docker images
//docker container 실행
docker run -it -p 8080:80 --rm --name vue-app-1 vue-app
//실행된 컨테이너 확인
docker ps
//docker container 정지
docker stop vue-app-1
- 이미지 TAG 추가/ 삭제
docker tag front:0.1 front:latest
docker rmi front
Untagged: front:latest
- BE 도커 이미지 제작(data visualization - Node.js)
1. Dockerfile 생성
FROM node:12-alpine
WORKDIR /app
COPY package*.json /app
RUN npm install
COPY . /app
CMD [ "npx", "nodemon", "serve" ]
EXPOSE 8080
1. Docker Hub에 있는 node:12-alpine 이미지 사용
2. 이미지 안에 애플리케이션 코드를 넣기 위한 디렉터리 생성. 애플리케이션의 작업 dir가 된다
3. node:12 이미지에 node.js와 npm은 설치되어 있으므로 npm바이너리로 앱 의존성만 설치
4. npm 설치 (RUN은 새로운 레이어 위에서 명령어를 실행 주로 패키지 설치용)
5. Docker 이미지 안에 앱의 소스코드를 넣기 위함
6. CMD는 도커가 실행될때 실행되는 명령어를 정의
7. 8080번 포트로 실행
2. .dockerignore파일 생성
-> Docker image의 파일 시스템의 node_modules 디렉토리가 현재 로컬작업 디렉토리의 node_modules 디렉토리로 덮어지지 않도록 하기 위함.
- w * h - [ { ( w / gcd ) + ( h / gcd ) - 1 } * gcd ]
- w * h - ( w + h - gcd )
- GCD구현하기 (유클리드호제법)
long long a=W, b=H, c;
while (b != 0) {
c = a % b;
a = b;
b = c; }
long long gcd = a;
- 제출코드 (가로, 세로가 int로 주어지기때문에 계산시 형변환 해주거나 변수 재설정)
#include <string>
#include <vector>
#include <iostream>
using namespace std;
long long solution(int w, int h) {
long long answer;
long long W = w;
long long H = h;
if (w == h) {
answer = (W * H) - W;
}
else {
long long a=W, b=H, c;
while (b != 0) {
c = a % b;
a = b;
b = c;
}
long long gcd = a;
answer = (W * H) - (((W / gcd) + (H / gcd) - 1) * gcd);
}
return answer;
}
int main() {
cout << solution(8, 12);//80
return 0;
}
