코딩하는 이채야채

docker 구동

이채야채 — Fri, 11 Apr 2025 13:31:43 +0900

Dockerfile에 필요한것은

-어떤 OS쓸건지

-어떤 프로그램 설치할지

-어떤 터미널 명령어 실행할지

-어떤 파일 집어넣을건지

내프로그램 구동하려면 어떤짓을 해야하는지

FROM 명령어

어떤 OS 환경에서 내 프로그램을 실행할지부터 정해야하는데 FROM으로 정의가 가능하다.

그래서 Dockerfile은 항상 FROM 부터 시작한다.

FROM 뒤에 어떤 OS를 설치해서 시작할건지 정하면 되는데

그건 Docker hub에서 찾아올 수 있다.

/*
1.Node.js 설치
2. express 설치
3. 코드작성
4. 코드실행 서버 실행
---> 귀찮으니까 밀키트로 만들고 실행하게끔 docker image를 만든다.
*/

npm install express를 해야하는 차례인데

RUN 명령어

사용하는 라이브러리를 하나하나 RUN 명령어로 집어넣는것은 비효율적이다.

어떤 라이브러리르 사용하고, 몇 버전을 사용하는지 적혀있는 package.json을 활용하는 것이 좋다.

COPY 명령어

1. pakage.json 을 다른 컴퓨터에 복사하고 (COPY 명령어로)

2. npm install 터미널에 입력

FROM node:18.19.2

COPY . .

이미지의 디폴트 경로에 카피하면 더러울 수 있다. 그렇기에

WORKDIR 명령어

FROM node:18.19.2
WORKDIR /app
COPY . .
RUN npm install

* RUN 명령어 문법에는 두가지 방식이 있는데

1. RUN npm install <- /bin/sh-c npm install 실행됨 (이방식은 OS에 있는 기본 shell 이용해서 실행하라는 뜻)

2. RUN ["npm"m "install"]

CMD 명령어, ENTRYPOINT 명령어

마지막 터미널 명령어는 RUN 말고 CMD

EXPOSE 명령어

FROM node:18.19.2
WORKDIR /app
COPY . .
RUN ["npm", "install"]
EXPOSE 2873
CMD ["node", "server.js"]

2873 포트를를 열어서 쓰겠다는 용도

port : 열려있으면 남들이 접속가능한곳

-- 터미널에 docker init 명령어를 쓰면 자동으로 채워준다.

내가 만든 docker 이미지를 만들기위해서

docker build를 하고 docker run을 해도, 2873 localhost port에서 아무런 내용물이없었다.

이유는:

어떤 방식이든 Docker 컨테이너 내부에서 서버가 열린다면, 로컬에 접근하려면 무조건 포트연결(-p)을 명시적으로 설정해야한다.

Docker 컨테이너는 독립적인 네트워크 환경을 가지고있다.

컨테이너 내부의 서버는 기본적으로 컨테이너 안에서만 접근가능하고, 외부에서는 접근이 차단되어 있다.

따라서 컨테이너의 포트를 로컬 머신으로 매핑(-p)해야 로컬에서 접근 할 수 있다.

EXPOSE만 사용하고 -p 옵션이 없다면?

Docekr 컨테이너 내부에서는 서버가 정상 작동하지만, 로컬머신의 웹 브라우저로는 접근 불가능

컨테이너가 작동 중이어도, 브라우저는 연결 되지않는다.

docker run -d -p 2873:2873 도커미이지 이름

<명령어들>

실행중 컨테이너 확인

docker ps

실행중 컨테이너 로그 출력은

docker logs 컨테이너명

* 실행중 컨터에너 접속은

docker exec -it 컨테이너명 sh

ls, cd 등으로 경로이동 등 실제 개발모드일때 하던 짓을 할 수 있다.

성능을 위한 docker build 시간 단축법

변동사항 많은 부분은 밑에 작성하기.(예를 들어 소스코드 복사하는 부분)

FROM node:18.19.2
WORKDIR /app
COPY . .   <- 캐싱해둠
RUN ["npm", "install"] <- 캐싱해둠
EXPOSE 2873
CMD ["node", "server.js"]

docekr build 할때 저번이랑 차이가 없으면 캐싱해둔 결과를 사용한다.

잘 안변하는 것들은 위쪽에

자주 변하는 것들은 아래쪽에

예를들면, package.json 라이브러리 파일은 변동사항이 별로없다.

1. package.json 파일 먼저 옮기고

2. npm install 실행

3. 소스코드 옮기고 실행

FROM node:18.19.2
WORKDIR /app
COPY package*.json.
RUN ["npm", "ci"] 

---------------------- 여기까지 캐싱이 잘되어있으면 좀 더 빠르게 된다.

COPY . . <- 소스코드 복사
EXPOSE 2873
CMD ["node", "server.js"]

npm install보다 npm ci가 좋은것은??

^4.21 에서 업데이트디ㅗ어서 ^4.2 로된다면

- npm install 하면 4.2가 설치된다

"package-lock.json 파일 바탕으로 설치하라고 하는게 좋다." 그 명령어가 ci !

Dockerfile에서 실행되는 것은 ROOT 권한으로 실행된다.

코드 실행 전 유저 권한을 낮추면 좀더 안전하다.

FROM node:18.19.2
WORKDIR /app
COPY package*.json.
RUN ["npm", "ci"] 

---------------------- 여기까지 캐싱이 잘되어있으면 좀 더 빠르게 된다.

COPY . . <- 소스코드 복사
EXPOSE 2873

USER sophie
CMD ["node", "server.js"]

USER sophie를 하지않은 상태에서, 실행시켰을경우

docker에서 확인을 하기위해서 docker exec -it nodeserver:1 sh로 접근 한후 ls-ld를 했을때

root가 아닌 sophie가 나와서

root권한이라는 말이 너무 헷갈렸다.

chat gpt에 물어보니

표시만 sophie일뿐이고 root와 같은 역할을 하고있다고한다.

USER 명령어

USER 명령어를 사용할때는, 실제로 있는 사용자를 써야지 실행이된다. 그렇기에

아래와 같은 명령어로 사용자 생성을 하는것이 USER 명령어를 쓸때 굉장히 중요하다.

왜냐면 -> 새로만든 컨테이너는 독립적인 네트워크를 가지고있는데 만들때, 생성된 사용자가 없을 가능성이 크기때문이다

FROM node:18.12.0

# 사용자 생성
RUN useradd -m appuser

# 이 시점부터 appuser 권한으로 실행
USER appuser

WORKDIR /home/appuser/app
COPY . .
RUN npm install
CMD ["node", "server.js"]

컨테이너간의 통신 -Nginx, 정적파일?

컨테이너간에 통신을 하려면?

Nginx

User -> Reverse proxy -> Web server

Reverse proxy의 장점 ==> Nginx

- 서버 정보를 숨길 수 있다.

- https 인증서 설치가 쉽다.

- 로드밸런싱이 가능하다

- 로그 남기기

- IP 차단 등

컴퓨터에서 nginx 실행시키기위해서는

1. nginx 설치

2. nginx 설정파일 작성 -> conf

3. nginx 실행 명령어 입력

아래와 같이 defualt.conf 파일을 만들어서 사용할 수있다.

server {
    listen 9710;
    server_name localhost;
    client_max_body_size 500M;

    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Host $http_host;
        proxy_pass http://127.0.0.1:10000;
    }

    location /files {
        alias /usr/share/files;
        autoindex on;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    }

    error_page 500 502 503 504 /50x.html;

    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

/etc/nginx/conf.d/defualt.conf (자동파일 생성) => 우선적용될 가능성이 크다.

그렇기에 프로젝트에서 사용하는 Dockerfile만 봐도

FROM node:18.20.3 AS builder

WORKDIR /app

COPY . .

RUN yarn
RUN yarn build

FROM nginx:stable-alpine

RUN rm -rf /etc/nginx/conf.d/default.conf
RUN rm -rf /etc/nginx/nginx.conf

RUN mkdir -p /usr/share/files
RUN chown -R nginx:nginx /usr/share/files 

COPY --from=builder /app/dist /usr/share/nginx/html
COPY --from=builder /app/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/nginx/nginx.conf /etc/nginx/nginx.conf

EXPOSE 9710
CMD ["nginx", "-g", "daemon off;"]

rm -rf로 default설정 팡리과 nginx.conf를 삭제한후에 다시 복사하기에, 정상적으로 작동이된다.

기존 Nignx 설정 파일을 먼저 삭제하고, 그 후에 빌드한 결과물에서 커스텀 설정 파일을 복사하는 구조

ㅡ래서 문제없이 default.conf와 nginx.conf로 덮어쓰기 되는 구조

현재 프론트 Dockerfile과 conf 파일들을 살펴보면

개발중에는 Nginx 컨테이너는 꺼져있고, 운영/배포시점만 Docker 빌드 결과로 만들어진 Nginx 이미지가 실행되도록 구성되어있다.

Dockerfile 구조는

"빌드 전용 스테이지"와 "운영용 스테이지" 를 분리한 전형적인 멀티 스테이지 Dockerfile이다.

FROM node:18.20.3 AS builder

WORKDIR /app
COPY . .
RUN yarn
RUN yarn build

여기서는 포른트엔드 소스를 설치하고 빌드한다.

dist/ 폴더가 생성되고, 이결과물이 실제로 Nginx에 복사된다. (dist 폴더가 복사된다.)

nginx단계 (운영용)

FROM nginx:stable-alpine

RUN rm -rf /etc/nginx/conf.d/default.conf
RUN rm -rf /etc/nginx/nginx.conf

RUN mkdir -p /usr/share/files
RUN chown -R nginx:nginx /usr/share/files 

COPY --from=builder /app/dist /usr/share/nginx/html
COPY --from=builder /app/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf
COPY --from=builder /app/nginx/nginx.conf /etc/nginx/nginx.conf

두번째 스에티지는 운영 시점에 사용될 Nginx 컨테이너를 구성한다.

개발 서버가아닌 정적 배포 서버

***

개발 중에는 yarn serve를 통해서 vue에서 제공하는 개발 서버를 사용한다.

하지만 운영/배포 시에는 Nginx가 필요하다

개발때 만들어놓은 Dockefile은 Nginx를 통해

정적 파일(dist/)를 /경로에 서빙하고
/api요청은 백엔드 API 서버로 프록시하고
/FILES 경로는 로컬 디렉토리 /usr/share/files를 서빙한다.

상황가능 여부이유

nginx 없이 Vue dev 서버 (npm run serve)만 띄움	⚠️ 로컬 테스트 O / 외부 접근 X	개발용 서버는 외부 노출에 적합하지 않고 보안 취약, 설정 부족
nginx 등 웹서버로 dist/ 폴더를 제공	✅ 가능	웹브라우저 요청을 받아 실제 HTML, JS를 응답할 수 있음

쉬어가기: 정적파일 /dist의 개념을 바로알기

정적파일: 서버가 요청이 들어올때 변경없이 그대로 클라이언트에 보내주는 파일

- html, css, js, png, svg, npm4, woff 등등

- 서버에서 그대로 보내는 파일 -> 정적

동적파일: 요청이 들어올때마다 서버가 데이터를 처리해서 결과를 실시간으로 생성해서 응답하는 방식

- Node.js에서 res.send

그렇다면 프론트 프로젝트에서는 왜 build를 때리면 나오는 dist/가 정적 파일인가

프론트의 개발에서는 다음구조로 작업한다.

src/ 디렉토리에서 .vue, .js, .ts, .scss 등등 작성
개발중에는 npm run dev, yarn serve 등등 개발 서버가 실시간 빌드
운영에서는 npm run build, yarn build로 최적화된 번들파일을 생성 -> 이게 dist/

dist/ 안에는 보통 이렇게 셋팅된다.

├── index.html
├── assets/
│   ├── app.123abc.js
│   ├── style.456def.css

이 파일들은 서버에서 그냥 "있는 그대로" 보내기만 하면된다.

변환, 렌더링 DB 연동없이도 사용자에게 보여줄수있다.

---> 정적(static)

배포시에는 그렇다면 왜 정적파일만 쓰는가?

프론트엔드 앱은 Single Page Applicatoin 으로 대부분 구성이되어있고

실행 로직은 모두 javascript에 포함돼있으며

서버는 그냥 index.html, .js, .css 등 파일만 내려주면된다.

즉 정적 파일만으로 동작 할 쉬 있는 구조.

그래서 배포시에는 dist만 있으면되는데 ---> 이게 프론트의 최종 산출물

단계설명

개발	src/에서 .vue, .js, .ts 등을 개발
빌드	yarn build → dist/ 폴더 생성
배포	dist/를 Nginx 또는 S3, Netlify 같은 정적 서버에 올림
운영	클라이언트는 index.html, .js, .css 등을 받아서 앱 실행

정적 배포인데 왜 여전히 동적인 웹사이트 처럼 동작하는가

정적 배포 = 서버는 파일만 제공

동적으로 보이는 이유 =브라우저가 javascript로 렌더링을 처리하기 때문

1. 정적 배포란?

서버 nginx, s3등 단지 이파일들을 "있는 그대로" 제공한다.

그외에 서버는 아무런 로직을 실행하지않는다. 그냥 파일 전송기계 역할만 수행한다.

2. 그런데 브라우저는 app.js를 실행한다.

index.html 안에 포함된 <script src="/assets/app.js"> 가 실행되면서

vue앱이 부팅된다.
내부적으로 라우터가 활성화 되고
필요한 데이터를 API 서버에서 가져오고
DOM을 동적으로 렌더링 한다.

즉 실제로 동적인 동작 은 서버가 아닌 브라우저(클라이언트) 에서 일어난다. --> CSR (Client-Side-Rendering)

역할	프론트엔드 개발자	백엔드 개발자
화면 구성	✅ HTML/CSS/JS 렌더링	❌
사용자 이벤트 처리	✅ 버튼 클릭, 폼 입력 등	❌
서버에 요청 보내기	✅ axios, fetch 등 사용	❌
요청 응답 처리	❌	✅ REST API, DB, 인증, 비즈니스 로직 등 처리
데이터베이스 연동	❌	✅

사용자가 버튼 클릭
프론트엔드에서 axios.get('/api/posts') 호출
브라우저 → 백엔드 서버에 HTTP 요청 전송
백엔드 서버가 요청을 받아 DB 등에서 데이터 조회
JSON으로 응답 반환
프론트는 받아서 화면에 렌더링

------> 다시 구체화

사용자가 http://example.com 접속
Nginx나 S3가 index.html, app.js, style.css를 클라이언트에 전달
브라우저에서 app.js 실행
axios.get('/api/posts')로 API 요청 발생
이 요청은 백엔드 서버로 전송
백엔드는 DB에서 게시글 조회 후 JSON 응답

✔️ 정적 파일을 서빙하는 서버(Nginx, S3 등) 와
✔️ 동적 데이터를 처리하는 백엔드 서버(API 서버) 는
▶️ 완전히 다른 역할을 하는 독립된 개념. 프론트 = 정적 파일 서버, 백엔드 = API 서버

 이 둘을 하나로 묶는 docker-compose, 혹은 도메인/SSL 연동

nginx

localhost: 2870 으로 들어오면 localhost:2873 으로 보내기를 해보려는데

열어봤자 2873으로 들어가지않는 이유는

가상컴퓨터1과 가상컴퓨터2가 따로 존재하기때문이다.

localhost:2870 으로 들어오면 내컴퓨터말고 가상컴퓨터2의 2873으로 보내야한다 (현 프로젝트에서 사용하는방법)

back, front 각각의 port로 올리고, 역으로 가상컴퓨터2로 보내는 방식

이방식으로는 너무 어려우니까

네트워크를 하나 파고,

가상 IP주소를 파는것이 훨씬 빠르다.

컨테이너끼리는 Network를 만들어서 통신한다. (원래 프로젝트에서는 컨테이너를 2개만든것이 아니고 하나의 Dockerfile안에서 결정났었다.)

@Check

현재 사용하는 방식으로 보면, 역방향으로 reverse 연결을 하는 방식.

핵심구조:

포론트 nginx 컨테이너가 /api 요청을 127.0.0.1:1000 (localhost) 도는 .env에 host:포트로 설정된 외부 포트로 프록시하고,

그 주소는 실제로 호스트 머신의

Docker 기본적으로 컨테이너 내부에서 127.0.0.1은 그 컨테이너 내부 자신을 의미한다.

location /api {
    proxy_pass http://127.0.0.1:10000;
}

이 설정은 프론트 컨테이너 내부에서 localhost:10000으로 무조건 프록시요청을 보내는것이다 --> 이방식은 백엔드에서 사용하는 api server의 port번호다.

통신 플로우는 다음과 같다.

[사용자 브라우저]
        │
        ▼
http://localhost:9710
        │
        ▼
[nginx 컨테이너:9710]
        │  (정적파일 서빙)
        │
        └── /api 요청 발생
                ▼
       proxy_pass http://127.0.0.1:10000;
                ▼
     [같은 컨테이너에서 127.0.0.1:10000 연결 시도]
                ▼
     [--network="host" 옵션 덕분에 실제 PC의 10000 포트로 연결됨]
                ▼
     [호스트에서 실행 중인 백엔드 서버로 요청 전달 성공!]

docker run --network=host -p 2870:2870 nginx:1

로 nginx를 띄우면 2870으로 가도, 2873 으로 매칭이된다.

Docker에서 volume이란?

볼륨이란 컨테이너에서 발생한 데이터를 백업해둘 폴더

컨테이너로 DB를 띄우면 문제가, 컨테이너를 껏다켜면 항상 안에있던 내용이 초기화 되고, DB에 있던 데이터도 날아간다.

그래서 껏다켜도 데이터를 유지하고싶으면 volumne에 데이터를 복사하는 용으로 쓴다.

즉 하나의 하드디스크에 폴더 하나 만드는것

하나의 디렉토리. 컨테이너 삭제후에도 보존되는 디렉토리

호스트 os 기준으로 보자면

/var/lib/docker/volumes/my-data/_data

리눅스 파일 시스템상의 실제 디렉토리인데, Docker가 자동으로 생성/관리해주는 구조이다.

Docker Compose

Makefile과 Docekr Compose의 차이부터 알아보자

Makefile은 컴파일 빌드 자동화를 위해 사용되던 도구지만

현재는 Docker,Frontend, CI/CD등 다양한 곳에서 쉘명령어를 자동으로 실행 하는 용도로 많이 쓰인다.

핵심: 도커 명령어를 대신 실행하는 껍데기 스크립트

docker-compose는, 여러개의 Docker 컨테이너를 한꺼번에 정의하고 실행 할 수 있는 도구

예를들면

version: '3'
services:
  frontend:
    build: ./frontend
    ports:
      - "3000:3000"

  backend:
    build: ./backend
    ports:
      - "10000:10000"

docker-compose up -> 프론트, 백엔드를 동시에 실행
각 서비스 끼리 이름 기반으로 통신이 가능하다.

핵심: 여러 서비스를 한 세트로 정의하고 함께 관리

Docker compose는 docker 명령어들을 한 파일에 보관, 실행이 가능하다.

dcoker compose문법 즉 yaml 파일 형식에 맞춰서 만들어야한다.

<.yaml 파일 작성법>

yaml파일이란 데이터 보관용 파일

.json 파일과 유사하다.

이름 : 값

하위 속성 작성하려면

두번 스페이스바 치고서 그밑에 작성하기

(docker-compose.yml)

services:
  컨테이너이름:
    image: 이미지이름
    ports: 
      - 내컴퓨터포트:컨테이너포트
    environment:
      - 환경변수이름=값
      - 환경변수이름=값

LOAD BALANCING

이채야채 — Fri, 14 Feb 2025 15:54:58 +0900

Load = 서버가 받는 부하 : 서버가 받는 트래픽을 의미

트래픽이 늘어났을때? 선택할 수 있는 방법이 2개가있다.

1.Vertical Scale up

우리가 가지고있는 서버자체의 퍼포먼스를 늘리는 방법

예를 들면

RAM이 4GB 였다면 그것을 32GB로 늘릴수도있고, 혹은 CPU가 옛날것이면, 더 좋은 CPU로

더 많은 코어를 가지고있는 CPU로 바꿀 수 가 있다.

----------------------------> 기술의 한계에 부딪히게 된다.

2.Horizontal Scale out ✅

한대로 처리할 것을, 여러대로 처리를 하는 방식.

분산시스템을 구축 이때 중요한게 바로 로드밸런싱!!

어떻게, 분산 시키는지 결정하는 그 모듈이. 이 똑똑이가 바로 로드 밸런서 이다.

로드밸런싱 방식??

1. round robin

여러대의 서버가있을때 들어오는 request를

순.차.적 으로 보낸 후 그다음에 다시 처음으로 돌아와서 시작하는 방식

수건돌리기 방식 -> 골고루 분산할 수 있는 방식

2. random select

로드밸런서거 랜덤으로 서버에 리퀘스트를 보내는 방식.

운이 나쁘면 하나에 걸려서 부하가 걸릴수도있다.

하지만 사실상은 유니폼하게 request를 받게된다.

3. smart - least connection

역으로 얼마만큼의 컨넥션을 맺고있는지 알려준다.

server a,b,c,d 있으면 a,b는 바쁘고 c,d가 여유롭다.

여유로운 애들한테 몰아주자.

-> 실시간 통신으로 좀더 복잡할수있지만 스마트한 방식이다.

4. smart - ratio

어떤 서버는 굉장히 성능이 좋은 서버이고, 안좋은 서버가있을것이다.

그러면 성능이 좋은 서버에 몰아준다.

미리 스펙을 개산 후 , ratio를 부여해서 그쪽으로 트래픽을 몰아주고 여러가지 분산 처리를 할 수있다.

로드밸런싱 구축

두가지 방식

1. 소프트웨어 방식

- Ha Proxy, Reverse Proxy(Nginx, Apache)

- 로직만 구현하면 되니, 어려운 방식이 아니다.

2. 하드웨어 방식

- 물리적으로 서버를 묶는다.

- 서버는 보통 데이터센터에 위치할텐데, 직접 서버를 묶는다.

- L4 / L7 Switch

- 비싸지만 안정성이 높음.

- 아무다 IDC에 출입할 수없고 security적인 측면도 좋다

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

로드 밸런서가 죽으면? 우리 시스템도 죽는다.

SPOF : Single Point Of Failure

로드밸런서를 한 서버에만 구축해서 뒷단에서 분산을 해봤자

서버가 죽어 버릴 수 가 있기에

로드밸런서도 scale out을 해야한다.

마스터가 일을 하되, 뒤에 슬레이브를 마스터로 구축 하는 방식

현재 회사에서 사용되는 서비스인

tms, tas같은 경우 로드밸런싱을 하고잇을까??

- yes.

nginx 자체적으로 로드밸런서를 가지고있고, 설정을 해줄 수가 있다.

실제로 웹서버를 구동시키면 그 웹서버 nginx 나 apche 내부에서 로드밸런싱을 하게된다.

vue.config.js

이채야채 — Thu, 13 Feb 2025 11:22:20 +0900

vue.config.js는 vue내부에서 언제 실행되나요?

vue-cli-service가 실행될 때 초기 단계에서 로드됩니다.
vue-cli-service serve (개발 서버 실행) 또는 vue-cli-service build (빌드 실행) 시 vue.config.js를 읽어 Webpack 및 기타 툴의 설정을 동적으로 변경합니다.
vue.config.js는 Vue 프레임워크의 런타임이 아니라 빌드 타임에서 실행되며, Webpack을 포함한 빌드 프로세스의 일부로 동작합니다.

vue-cli-service란 무엇인가요

vue-cli-service는 Vue CLI(@vue/cli)에 의해 설치되는 패키지로, Vue 프로젝트를 실행, 빌드, 테스트, 배포하는 데 사용됩니다.
Vue 프레임워크 자체(vue 패키지)에는 포함되지 않으며, Vue 프로젝트를 편리하게 관리하기 위한 빌드 도구입니다.
Webpack, Babel, ESLint 등의 빌드 관련 툴을 자동으로 설정하고, 필요에 따라 사용자 정의 설정을 반영할 수 있습니다.

결론:

vue-cli-service는 Vue 프레임워크 내부에 존재하는 것이 아니라, Vue CLI(@vue/cli)의 일부로 제공되는 독립적인 빌드 및 개발 도구입니다.
Vue 프로젝트를 실행, 빌드, 테스트하기 위해 사용되며, vue.config.js를 통해 Webpack 설정을 조정할 수 있습니다.
Vue 프레임워크(vue 패키지)와는 별개이며, Vue의 UI 렌더링이나 반응형 시스템을 담당하는 것이 아니라, Vue 프로젝트의 개발 및 빌드 환경을 관리하는 역할을 합니다.

vue.config.js의 샘플을 통해서 설정을 알아봅시다.

const { defineConfig } = require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

const API_IP = "10.30.200.15";
const API_PORT = "8090";

module.exports = defineConfig({
    transpileDependencies: true,
    configureWebpack: {
        plugins: [new NodePolyfillPlugin()],
    },
    chainWebpack: (config) => {
        config.plugin("html").tap((args) => {
            args[0].title = "Laon Sentinel";
            return args;
        });
    },
    devServer: {
        proxy: {
            "/api": {
                target: `http://${API_IP}:${API_PORT}/api/test`,
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "",
                },
            },
            "/prod": {
                target: "http://10.30.8.12:10000/api/v1/sentinel",
                changeOrigin: true,
                pathRewrite: {
                    "^/prod": "",
                },
            },
        },
    },
    css: {
        loaderOptions: {
            sass: {
                additionalData: `@import "@/assets/scss/abstracts/variable";`,
            },
        },
    },
});

1. 기본 설정 및 플러그인

const { defineConfig } = require("@vue/cli-service");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

defineConfig : Vue CLI 4.5 이상에서 defineConfig를 사용하면 자동 완성 및 타입 지원이 향상됩니다.
NodePolyfillPlugin : Node.js의 일부 내장 모듈(fs, path, crypto 등)을 브라우저에서 사용할 수 있도록 Webpack에 폴리필(polyfill)을 추가하는 플러그인입니다. 이를 통해 브라우저 환경에서도 일부 Node.js API를 사용할 수 있습니다.

2. API 서버 IP 및 포트 정의

const API_IP = "10.30.200.15";
const API_PORT = "8090";

API 서버의 기본 IP와 포트를 정의하는 상수입니다.
이후 devServer.proxy에서 이 값을 사용하여 API 요청을 프록시할 때 활용됩니다

3. module.exports 내 설정

module.exports = defineConfig({

defineConfig를 사용하여 Vue CLI 서비스의 설정을 정의합니다.

defineConfig를 사용하여 Vue CLI 서비스의 설정을 정의합니다.

4. transpileDependencies: true

transpileDependencies: true,

Babel이 node_modules 안의 일부 패키지를 트랜스파일하도록 설정하는 옵션입니다.
보통 ES6+로 작성된 외부 라이브러리가 IE11 같은 구형 브라우저에서 실행되지 않을 경우, 이 옵션을 사용하여 트랜스파일할 수 있습니다.

5. configureWebpack 설정

configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
},

Webpack 설정을 직접 수정하는 옵션입니다.
NodePolyfillPlugin 플러그인을 추가하여 브라우저 환경에서도 일부 Node.js 모듈을 사용할 수 있도록 설정합니다.

6. chainWebpack 설정 (HTML 타이틀 변경)

chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
        args[0].title = "Laon Sentinel";
        return args;
    });
},

chainWebpack은 Webpack의 설정을 체인 형태로 수정할 수 있도록 합니다.
여기서는 Vue 프로젝트에서 index.html을 생성하는 HTMLWebpackPlugin의 설정을 수정하여, 브라우저 탭에 표시될 기본 타이틀(title) 을 "Laon Sentinel"로 변경합니다.

7. devServer 설정 (API 프록시)

devServer: {
    proxy: {
        "/api": {
            target: `http://${API_IP}:${API_PORT}/api/test`,
            changeOrigin: true,
            pathRewrite: {
                "^/api": "",
            },
        },
        "/prod": {
            target: "http://10.30.8.12:10000/api/v1/sentinel",
            changeOrigin: true,
            pathRewrite: {
                "^/prod": "",
            },
        },
    },
},

개발 서버(vue-cli-service serve) 실행 시 프록시(proxy) 설정을 적용하여, 특정 경로(/api, /prod)로 요청을 보낼 때 API 서버로 리다이렉트합니다.
proxy 설정의 각 속성 설명:
- "/api" : API 요청을 로컬 개발 서버(localhost:8080)가 아니라 실제 API 서버 (http://${API_IP}:${API_PORT}/api/test)로 보냄.
- target : 요청을 보낼 실제 API 서버의 주소.
- changeOrigin: true : 브라우저에서 요청할 때 CORS 문제를 방지하기 위해 origin을 변경함.
- pathRewrite : 프록시 요청 시 경로 변경 (/api를 빈 문자열로 변환하여 실제 API 요청에서 /api를 제거).
예제:
- 클라이언트에서 http://localhost:8080/api/users 요청 → http://10.30.200.15:8090/api/test/users로 변환되어 전송됨.
- /prod도 같은 방식으로 http://10.30.8.12:10000/api/v1/sentinel로 라우팅됨.

이 설정을 통해:

개발 환경에서 API 요청이 자동으로 서버로 프록시되고,
프로젝트의 index.html 타이틀이 "Laon Sentinel"로 설정되며,
SCSS 전역 변수를 추가하는 등의 편리한 기능을 활용할 수 있습니다.

gateway - self

이채야채 — Tue, 15 Oct 2024 14:45:18 +0900

TODO : 에러코드 통일화, 상황에 알맞는 에러코드 사용하기,

심화: 백엔드에서 들어오는 에러 메시지를 바로 팝업창에 보여줘서 굳이 프론트에서 코드에따라서 처리하지않아도 좋을것같다.

1. /api/v1/user/self2 -

    getUserInfo: () => {
        return get(GATEWAY_URLS.SELF, "");
    },

TMS 사용하는곳
세션확인을위해 router에서 접근할때마다 확인하는 용도

-TEST1: 로그인 안되어있어서 로그인페이지로 가야하는 상황(로그인 상태확인)
에러코드: 27001 - user 아이디를 가져올수없음, 세션이 아이디x 세션 만료 혹은 확인할 수 없음.

수정사항(메시지) : 사용자 ID를 가져오는 데 실패했습니다. /혹은/ 접근권한이 없습니다 (27001 코드 여기서만 사용하는방향으로)

2. /api/v1/user/self2/auth

    requestLogin: ({ ID, Password }) => {
        return post(GATEWAY_URLS.SELF, "/auth", { ID, Password });
    },

* 유의사항: ID나, PASSWORD가 빈값일때는 프론트 내부에서 서버에 전송이안되도록 에러처리를 해놓음.

- TAS도 내부에서 처리로직 있는지 확인

사용하는곳
로그인 페이지

-TEST1: 프론트에서 서버에 PARAM을 보낼때, ID나 PASSWORD를 아예 빼먹을때(개발자 코드 문제)

에러코드: 27011 - id or password is empty

수정사항(에러코드): 8000으로 수정.

수정사항(에러메시지): 27011 - 입력값이 없습니다. (현재 빈값)

-TEST2: Password에 SHA256을 넣지않고 Password: 1234 로 보냈을때

에러코드: 8000 - failed to bind json , json: cannot unmarshal number into Go struct field RequestUserLogin.Password of type string

** 8000일때는 메시지를 띄우면 x 내부에러. 2000번때일때만 error code를 띄우게 변경하기

문제없음

-TEST3: LAON2023 과, 비밀번호 제대로 쳤지만, LAON2023은 없는 아이디이고, 사용자가 비밀번호를 제대로쳤지만 PARAM이 안들어간경우(개발자문제 혹은 내부)

에러코드: 27011 - id or password is empty

Test1수정하면 자동 수정 8000으로 변경될것같음. (에러코드는 유지하지만, test1같은 경우를 8000으로 돌릴경우 27011코드는 나올일이 거의없을것같습니다)

-TEST4: LAON2023 과 비밀번호 제대로 쳤지만, LAON2023은 없는 아이디이고, 사용자가 비밀번호를 제대로쳤지만 SHA256문제가 생기도록 1234로 넣어봤을때(개발자 문제 혹은 내부문제)

에러코드: 8000 - failed to bind json , json: cannot unmarshal number into Go struct field RequestUserLogin.Password of type string" 입력값이 잘못되었습니다

-> 백엔드 수선코드가 아이디확인 이전에 SHA256부터 감지하는것같음. DB를 찾기전에 RETURN?

-TEST5: LAON2023(없는 아이디) 과 비밀번호 제대로 친경우

에러코드: 27006 - "does not exist user id"

수정사항(에러메시지): 에러메시지 추가 27006 - 존재하지 않는 사용자.

-TEST6: laon(알맞은 사용자), laon2021!(사용자가 틀린비밀번호, SHA256은 재대로)

에러코드: 27001 - ErrorDetail: {FailCount: 3, FailTime: 0}} 아이디 또는 비밀번호를 잘못 입력하셨습니다.

수정사항(에러메시지): 27001 코드를 쓰지않고, 27000 을 쓰는게 맞아보인다. -> TEST1에서 27001을 사용하고, 여기서는 비밀번호가 틀렸을때 에러코드에 초점을 맞추는게 좋지않을까? -> 아니면 TEST1부분을 수정하던가. 둘중하나 수정필요.

이유 : 아이디는 잘못 입력했을때, 존재하지않는 사용자라고 나오며, 빈값으로는 아예 보낼수가없기에 비번틀렸던거로 MESSAGE나 코드를 디테일하게 에러디테일 또한 failcount, failtime 비밀번호에 중점을 둔 사례

-TEST7: laon3(알맞은 사용자 but 승인안해줌), laon2021!(사용자가 틀린비밀번호, SHA256은 재대로)

에러코드: 27007 - "permission denined, permission = none"

수정사항(에러코드): 27007 -> 8000으로 수정.

수정사항(메시지) : 27007 에러메시지, (스웨거: 권한 에러 )-> 회원가입 승인 요청이 대기 중입니다. 에러코드 변경하거나 권한쪽을 하나 더 파던가해야할듯싶습니다

권한에러 에대한 코드 확인 하기

-TEST8(성공사례) - {StatusCode: 0, Message: "성공", Data: {IsLogin: true, ID: "laon", Permission: 3}}

***이외: 90일 초과는 확인 불가. 로그인중이 아닙니다.? 나오는 상황

3. /api/v1/user/self2/password

 changePassword: ({ ID, BeforePassword, AfterPassword }) => {
        return put(GATEWAY_URLS.SELF, "/password", {
            ID,
            BeforePassword,
            AfterPassword,
        });
    },

-TEST1: 없는 아이디, 위아래 똑같은 password - 프론트에서 막을예정

에러코드: 27010 - 현재비밀번호와 변경비밀번호가 동일

-TEST2: 있는 아이디, 현재 비밀번호 틀렸을경우

에러코드: 27001

수정사항(메시지) : 27000 수정 부탁합니다!

-TEST2: 없는 아이디, 현재 비밀번호 틀렸을경우

에러코드: 27006

 	creatUserData: ({ ID, Password, Permission }) => {
        return post(GATEWAY_URLS.SELF, "", { ID, Password, Permission });
    },
    addPageNavigationHistory: ({ URL }) => {
        return post(GATEWAY_URLS.SELF, "/page", { URL });
    },
    changePassword: ({ ID, BeforePassword, AfterPassword }) => {
        return put(GATEWAY_URLS.SELF, "/password", {
            ID,
            BeforePassword,
            AfterPassword,
        });
    },
    extendPasswordExpiration: ({ ID, BeforePassword, AfterPassword }) => {
        return put(GATEWAY_URLS.SELF, "/password/extension", {
            ID,
            BeforePassword,
            AfterPassword,
        });
    },
    deleteUserData: ({ ID }) => {
        return del(GATEWAY_URLS.SELF, "", { ID });
    },
    requestLogout: () => {
        return del(GATEWAY_URLS.SELF, "/auth");
    },
};

vue - slot

이채야채 — Mon, 27 May 2024 15:42:22 +0900

vue는 slot을 사용하여 할 수 있는 일이 많이 있는듯 싶다.

자식컴포넌트에게 간단하게 무언가를 전달할수가있는데

그때 사용하고 싶은 구간에서 slot태그를 사용해서 넣어본다.

<script setup>
import SubmitButton from './SubmitButton.vue'
</script>

<template>
  <!-- 대체 텍스트 사용 -->
  <SubmitButton />
  
  <!-- 사용자 정의 텍스트 제공 -->
  <SubmitButton>부모컴포넌트가이김</SubmitButton>
</template>

이렇게 해줬을때,

자식 컴포넌트안에

<template>
  <button type="submit">
	  <slot>
    	제출 <!-- 대체 컨텐츠 -->
  	</slot>
	</button>
</template>

이렇게 사용했어도 버튼모양은 제출이 뜨는것이 아니고

부모컴포넌트가이김 이 나온다.

즉, 부모컴포넌트에서 무언가를 넘겨줬으면 대체컨텐츠보다 위에서 넘겨준것이 우세하다는 이야기다.

좀더 심화하여,

이름이 있는 슬롯을 공부해보자.

<div class="container">
  <header>
    <!-- 우리는 여기에 헤더 컨텐츠를 원합니다. -->
  </header>
  <main>
    <!-- 우리는 여기에 메인 컨텐츠를 원합니다. -->
  </main>
  <footer>
    <!-- 우리는 여기에 푸터 컨텐츠를 원합니다. -->
  </footer>
</div>

위와같은 모양의 구조를 만든다고 가정해보자,

name이라는 특수속성을 사용한다고 할때 마치 ID처럼 SLOT에게 이름을 부여해줄 수 잇다.

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

MAIN부분에 이름 속성없는 아이는 임시적으로 default라는 이름을 가지게도니다.

<BaseLayout>
  <template v-slot:header>
    <!-- 헤더 슬롯의 컨텐츠 -->
  </template>
</BaseLayout>

이름있는 slot전달할때는 template을 함께 사용해서 전달을 해야한다.

이름있는 슬롯컨텐츠 전달할때 이렇게 사용해도된다

<BaseLayout>
  <template #header>
    <h1>다음은 페이지 제목일 수 있습니다.</h1>
  </template>

  <template #default>
    <p>주요 내용에 대한 단락입니다.</p>
    <p>그리고 또 하나.</p>
  </template>

  <template #footer>
    <p>다음은 연락처 정보입니다.</p>
  </template>
</BaseLayout>

template 엘리먼트 내부의 해당슬롯으로 전달된다.

자식부분에서 그렇담 어떻게 보여지는가?

<template>
  <div class="container">
    <header>
      <slot name="header"></slot>
    </header>
    <main>
      <slot></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<style>
  footer {
    border-top: 1px solid #ccc;
    color: #666;
    font-size: 0.8em;
  }
</style>

이름으로 엮어서, 여러가지 정보를 다 다르게 밑으로 내려줄수있다는 말이다.

vue - watch

이채야채 — Wed, 22 May 2024 13:05:19 +0900

watch사용시에 유의해야할 점.

1. 값참조

const obj = reactive({ count: 0 })

// 이것은 작동하지 않습니다. watch()에 숫자를 전달하고 있기 때문입니다.
watch(obj.count, (count) => {
  console.log(`Count는: ${count}입니다`)
})

// getter를 사용해야한다.
watch(
  () => obj.count,
  (count) => {
    console.log(`Count는: ${count}입니다`)
  }
)

2. 깊은감시

state.someObject.nestedProperty = 'another value'; 로 바꿀시에는, 깊은감시로 참조를 할 수 있고,

얕은 감시에는 state.someObject = { nestedProperty: 'new value' }; 를 사용해야 감시할 수 있다.

한단계 아래까지만 사용을 하고 있어서, 깊게 감시할 수 없다.

<script setup>
import { onMounted, ref, watch, reactive } from 'vue'

const state = reactive({
  someObject: {
    nestedProperty: 'value'
  }
});

// 기본 watch: 객체 자체가 교체될 때만 반응
watch(
  () => state.someObject,
  (newValue, oldValue) => {
    console.log('기본 watch:', newValue, oldValue);
  }
);

// deep watch: 객체의 모든 속성 변화를 감지
watch(
  () => state.someObject,
  (newValue, oldValue) => {
    console.log('deep watch:', newValue, oldValue);
  },
  { deep: true }
);

// 테스트 변화



const test = ()=>{
 // 기본 watch와 deep watch 모두 감지
state.someObject.nestedProperty = 'another value';
}
</script>

<template>
  
  <div>
    <div disabled value="">깊음감시공부하기</div>
    <div @click="test">가</div>

  </div>
</template>

3. immediate 옵션과 함께 사용할때와, 아닐때 차이는?

setTimeout을 걸어봤을때, count를 변경시키면 count가 변경될때만 변경이된다.

즉 초기값 설정시 호출 되지 않는다.

하지만 immediate: true 속성을 넣는다면, 최초에 mount될때 내부의 코드가 동작한다.

첫 번째 경우:
2초 후에만 로그가 출력됩니다: Watch without immediate: 1 0
두 번째 경우:
컴포넌트가 마운트되자마자 로그가 출력됩니다: Watch with immediate: 0 undefined
2초 후에 다시 로그가 출력됩니다: Watch with immediate: 1 0

4. once감시자.

단 한번만 감시하고 이후부터는 감시하지않는다.

useEffect의 [상태] + [] 와 비슷한것같다.

5. watchEffect

immediate: true를 사용하지않고서 즉시 실행할수있게만들어준것?

차이점을 보는것이 중요하다.

종속성을 명시적으로 지정할 필요없고, immdeditate기능이 탑재되어있다.

하지만 의도하지않은 반응성상태까지 추적이된다.

도커

이채야채 — Fri, 17 May 2024 10:06:27 +0900

어플리케이션을 패키징 할 수 있는 tool

도커 :

application, 그에필요한 system tools, 환경설정, dependencies를 하나로 묶어 = 컨테이너 (하나의 작은 소프트웨어 유닛)

다른 서버, 다른 PC

그 어떤것에도 쉽게 배포하고, 안정적으로 구동할 수 있게 도와주는 tool

테크놀로지가 복잡해짐에 따라서, 우리 어플리케이션 구동에는 꽤 많은 것들이 필요하다

node.js를 예로 들어보자, 우리의 소스파일(코드 친것) 만 서버에 배포하는것으로는

우리의 어플리케이션을 구동하는데 문제점이 있다.

nodejs, npm 여러 라이브러리를 사용한다면, 여러 dependencies, configs(환경설정) 하는 것

이 모든 것들을 설정 해줘야한다.

서버마다, 개발자들의 pc마다 이런 모든것들을 설치 하고 설정하는것은 꽤 번거롭고, 오류가 있을 수 있다.

내 pc에서 잘된다고 server에서 잘되지않을 수 있다. (버전이 달라서..)

도커안에는 그렇담 뭐뭐 포함 될 수 가 있을까?

소스코드 app.js + 정상적으로 작동하기위한 node.js + 환경설정 configuration + npm + 여러 라이브러리들의 dependencies + 어플리케이션에 필요한 다양한 resource들

도커를 사용하여, 어디에서든, 어떤 pc에서도 동일하게 구동할 수 있다.

도커의 container 그리고 vm?

vm은

하드웨어 Infrastructure위에 vmware나 virtualbox같은 hypervisor 소프트웨어을 이용하여, 각각의 가상의 머신을 만들 수 있다.

한 운영체제 위에서 동일한 어플리케이션을, 각각의 고립된 다른 환경에서 구동하기 위해서는

이 virtual machine을 이용해서 어플리케이션을 구동해야했는데

이 vm virtaul machine은 , 각각의 운영체제를 포함하고 있기 때문에

mac위에서 윈도우, 리눅스 동시에 구동 할 수 있다.

경량화된 컨셉!

반면 container는 하드웨어에 설치된 운영체제 Host OS에서 container engine 소프트웨어를 설치하면 개별적인 컨테이너를 만들어서 각각의 고립된 환경에서 구동되게 해준다.

차이점!

virtual machine 운영체제를 포함

운영체제를 포함 x, container engine을 포함한 운영체제를 공유한다.

container engine중에 도커를 가장 많이 사용한다

그럼이제 도커를 봐보자

도커의 3대 구성요소

1.만들고

2.배포하고

3.구동한다.

1. Building Container

Dockerfile을 만들고 Image를 만들어서 Container를 구동한다.

Dockerfile은 컨테이너를 어떻게 만들어야하는지 설명서. 레시피이다.

1.어플리케이션 구동위해 필요한 파일은 무엇인지

2.어떤것들을 설치해야하는지 dependencies

3.필요한 환경변수 설정

4. 어떻게 구동해야하는지 스크립트 포함

이렇게 작성한 dockerfile을 통해서 이미지를 만든다. => 필요한것들을 찰칵 snapshot해서 이미지파일로 만든다. = 변경불가 불변의 상태

container는 샌드박스처럼 어플리케이션의 이미지를 고립된 환경에서 실행할 수 있는것. 컨테이너안에서 우리의 파일이 동작한다고 볼 수 있다.

즉 conatiner는 이미지파일을 이용해서 구동하는것!

이미지를 class라고 생각한다. 청사진.

이미지를 이용해서 컨테이너를 만드는것 => 인스턴스

1.만들고

2.배포하고

3.구동한다.

2번째 방법인 배포

2. shippinig container

local machine에서 이미지를 만들어서,-> github와 같은 container registry에서 image를 push하고 내가 만든이미지를 pull해서 가져와서 사용하면된다.

docker와 같은 컨테이너 엔진이 꼭 필요하다!

public서비스 = docker hub

private서비스 = aws, google cloud, microsoft azure

우리가 사용하고있는 local machine에 도커를 설치하고, 서버에도 도커를 설치하고

1. build

2. image push하고

3. pull

vue - 계산된 속성: computed

이채야채 — Wed, 15 May 2024 17:47:07 +0900

템플릿에 너무 많은 논리를 넣으면안된다.

export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  }
}



<p>책을 가지고 있다:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

위와 같은것은 좋은 예제가 아니다.

계산된 속성을 사용해야한다.

export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 계산된 값을 반환하는 속성
    publishedBooksMessage() {
      // `this`는 컴포넌트 인스턴스를 가리킵니다.
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  }
}

=> 이부분에대해서 이후에 코드 고도화 하는 작업에서 어떻게 해야할지 고민해봐야될것같다.

publishedBooksMessage 같은경우에는, author.books에 의존이된다.

그럼으로 methods의 어떤함수를 통해서 books를 변화시키면, computed의 값도 자동 바인딩된다.

<script>
export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  },
  computed: {
    // 계산된 값을 반환하는 속성
    publishedBooksMessage() {
      // `this`는 컴포넌트 인스턴스를 가리킵니다.
      return this.author.books.length > 0 ? 'Yes' : 'No'
    }
  },
  methods: {
    test(){
      this.author.books = [];
    }
  }
}
</script>

<template>
  <p>책을 가지고 있다:</p>
  <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
  <button @click="test">여기서뭔가</button>
</template>

이렇게바꿔보니

span의 값이 yes에서 no로 바뀜을 알 수 있다.

계산된 캐싱 vs 메소드

계산된 캐싱과 메소드가 다른점은 무엇일까?

계산된 속성은 의존된 반응형을 기반으로 캐시된다. => useMemo사용과 비슷한 원리.

공식문서를 봐보면 복잡한 연산결과는 넣어두고 다른부분이 리렌더링되어도 다시 계산되지않는것같다.

반면 메소드는 리렌더링이 될때마다 새로운 함수 호출

수정가능한 계산된 속성

getter로서 Retrun된값이 원칙이긴하나, 수정을 할수도있는데

예를들어,

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      // getter
      get() {
        return this.firstName + ' ' + this.lastName
      },
      // setter
      set(newValue) {
        // 참고: 분해 할당 문법을 사용함.
        [this.firstName, this.lastName] = newValue.split(' ')
      }
    }
  }
}

newValue가 sophie lee라고 했을경우?

firsName 이 sophie, name이 Lee로 state가 업데이트된다.

이를통해서 계산된값도, 자동으로 업데이트가된다는 의미

계산된 값 자체를 변경하지는 말자. => pure하게 움직이자. read only로

vue - 반응형 기초

이채야채 — Wed, 15 May 2024 11:33:25 +0900

1. 반응형 상태 설정

script안의

data(){} 보관함을 통하여 상태를 선언및 저장한다. (state처럼 this를 통하여 변경가능)

export default {
  data() {
    return {
      count: 1
    }
  },

  // `mounted`는 나중에 설명할 생명 주기 훅입니다.
  mounted() {
    // `this`는 컴포넌트 인스턴스를 나타냅니다.
    console.log(this.count) // => 1

    // 값을 변경할 수 있습니다.
    this.count = 2
  }
}

메서드를 통해서 함수를 사용할 수 있다.

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    // 메서드는 생명 주기 훅 또는 다른 메서드에서 호출할 수 있습니다!
    this.increment()
  }
}

메서드안에서 data의 state를 바꾸고싶다면,

무조건 this를 통해서 바꿔야한다. :: 완전중요:: 화살표함수의 this 같은경우는 state에 접근할수없음.

그렇기에 화살표함수를 사용하지않는다.

리액트와 마찬가지로 , dom업데이트는 동기적으로 진행되지않는다. (리액트의 배칭이랑 비슷한 느낌.?)

상태관리후에 dom 업데이트 까지 기다리려면 nextTrick() api를 사용해야한다고 한다.

export default {
  created() {
    // 이제 각 인스턴스는 자체적인 디바운스된 핸들러를 가집니다.
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // 컴포넌트가 제거된 후 
    // 타이머를 취소하는 것은 좋은 방법입니다.
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... 클릭에 응답 ...
    }
  }
}

이벤트 등록시에, 생명주기 메소드를 활용하여 사용한다.

(useEffect나, 앵귤러 ngOninit등에서 리사이즈 등록해서 사용하는 이벤트와 비슷 )

vue - 템플릿 문법

이채야채 — Wed, 15 May 2024 10:23:07 +0900

싱글파일컴포넌트 (SFC) - 파일형식이다. => 컴포넌트 정의하고 만든다.

Single-File-Component = JAVASCRIPT, HTML, CSS 를 하나의 파일로 묶는다.

API스타일

- 옵션 API - 회사 예전 코드 옵션으로 되어있음

data, method 등을 사용하여 표현

(리액트 상의 class로 사용이 가능하고, OOP적 사용으로 this 등이 들어감)

- 컴포지션API - 고도화 및 마이그레이션 시 필요한 코드

function 등을 사용하여 표현

(리액트 상의 함수형 컴포넌트로 생각 할 수 있다.)

1. 여러 속성바인딩

객체안에 id, class 등을 넣고서,

v-bind를 사용하여 넣어주면 끝!

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

<div v-bind="objectOfAttrs"></div>

2. 자바스크립트 사용

{{ message }} 를 사용하여 쓸수있다.

data 보관함에, message값을 넣어주면 된다.

리액트와 마찬가지고, 삼항연산식만 가능하고 var a = 1 과 같은 표현식은 불가능하다

<!-- 이것은 표현식이 아니라 선언식입니다: -->
{{ var a = 1 }}

<!-- 흐름 제어도 작동하지 않습니다. 삼항 표현식을 사용하십시오. -->
{{ if (ok) { return message } }}

디렉티브

디렉티브란? v- 접두사를 가진것들을 의미한다.

예) v-html, v-bind, v-if

디렉티브의 역할이란?

표현식 값이 변할때, Dom에 반응적으로 업데이트를 적용하는 것

<p v-if="seen">이제 이것을 볼 수 있습니다.</p>


seen은 true혹은 false의 boolean 타입

축약사용

<a v-bind:href="url"> ... </a>

<!-- 단축 문법 -->
<a :href="url"> ... </a>



<a v-on:click="doSomething"> ... </a>

<!-- 단축 문법 -->
<a @click="doSomething"> ... </a>