분류 전체보기
[Nginx] 내부 구조와 리버스 프록시
[Nginx] 내부 구조와 리버스 프록시
2023.12.21엔진엑스는 정적 리소스를 제공하는 웹 서버로도 동작할 수 있고 여러 백엔드 서버로 로드밸런싱을 수행하는 리버스 프록시, 메일 프록시로도 동작할 수 있는 다재다능한 웹 서버이다. 리액트로 프론트엔드 웹 애플리케이션을 만들고 사용자들에게 배포 할 때 엔진엑스 웹 서버를 사용할 수 있다. npm build 명령어로 애플리케이션을 번들링하고 엔진엑스를 정적 리소스를 제공하는 웹 서버로 사용하는데, 이 때 root 지시어를 사용해 번들링된 파일이 위치한 디렉토리를 지정하고 모든 서버 요청을 index.html으로 리다이렉트하도록 설정해 SPA 라우팅을 처리한다. server { listen 80; server_name myapp.com; root /app/react/build; index index.html; l..
[k8s] 쿠버네티스 도입
[k8s] 쿠버네티스 도입
2023.12.17도커를 사용해 여러 애플리케이션을 배포할 때, 한 컨테이너에 문제가 생겨 종료되는 경우 관리자가 문제를 확인하고 컨테이너를 다시 시작해 줘야 한다. 또, 특정 컨테이너에만 트래픽이 몰리는 경우 역시 관리자가 문제를 확인하고 스케일링 작업을 수행해 줘야 한다. AWS ECS 클라우드를 사용하는 경우 위에서 언급한 문제를 일부 해결해 주지만, 클라우드가 제공하는 기능에 의존적이게 돼 클라우드 변경 시 다른 방법을 찾아야 한다. 이런 문제를 해결하기 위해 Kubernetes가 도입됐다. 쿠버네티스는 컨테이너화된 애플리케이션의 배포, 확장 관리를 자동화하는 오픈소스 시스템으로 배포 환경에 관계없이 어디서든 사용될 수 있다. 1. 확장성 트래픽에 따라 컨테이너 인스턴스를 확장하거나 축소할 수 있고 로드밸런싱을 통..
[Docker] 네트워킹과 Docker Compose
[Docker] 네트워킹과 Docker Compose
2023.12.10도커는 다른 환경으로부터 격리된 환경에서 작동하고, 도커를 통해 만든 애플리케이션을 배포하게 되면 localhost가 더 이상 호스트 머신의 localhost를 의미하지 않게 된다. 백엔드 / 프론트엔드 / 데이터베이스 각 애플리케이션을 도커를 통해 배포했다고 해보자. 로컬에서 도커를 사용하지 않고 배포한 경우 백엔드에서 데이터베이스로 통신할 때 localhost:27017처럼 localhost로 데이터베이스와 연결할 수 있지만, 각 애플리케이션을 도커를 사용해 배포한 경우 컨테이너들은 호스트 운영체제와 독립된 환경에서 동작하기에 localhost 말고 다른 방법으로 접속해야 한다. docker run -p 8000:80 my_image 여기서 -p 8000:80 부분은 호스트 머신에서 사용할 포트 : ..
[Docker] Dockerfile 프로젝트 배포하기
[Docker] Dockerfile 프로젝트 배포하기
2023.12.06FROM node WORKDIR /app COPY . /app RUN npm install EXPOSE 80 CMD ["node" "server.js"] FROM :이미지 빌드를 위한 기반 이미지를 설정하고, 도커는 node라는 이름으로 이미지를 찾는다. WORKDIR : 컨테이너 내부의 작업 디렉토리를 생성한다. 모든 작업은 이 경로에서 실행된다. COPY : (Dockerfile이 위치한 호스트 파일시스템) (컨테이너 내부) / 실행에 필요한 소스코드나 묶음 파일을 복사할 때 사용한다. 도커는 실행 환경을 구축하는 역할도 하지만, 실제로 애플리케이션을 실행할 수 있어야 한다. 마운트를 사용해도 괜찮다. RUN : 이미지 빌드 중 명령어를 실행해 WORKDIR 내부에서 필요한 종속성을 설치한다. EXP..
대용량 파일 업로드 처리 (30GB)
대용량 파일 업로드 처리 (30GB)
2023.12.03FastAPI에서 대용량 파일 업로드 기능을 구현해보자. 프론트엔드에서 백엔드로 요청을 보낼 때는 axios를 사용하고, FastAPI의 웹서버 구현체로는 uvicorn을 사용한다. 1. 타임아웃 설정 용량이 크다 보니 데이터를 주고받는데 시간이 많이 소요될 수 있다. uvicorn과 axios 부분을 조작해 타임아웃 기간을 늘리자. uvicorn app:app --timeout-keep-alive 1200 우선 uvicorn에서는 --timeout-keep-alive 속성값으로 uvicorn 서버가 클라이언트와의 비활성 HTTP 연결을 얼마나 오래 유지할 지 설정할 수 있다. 예시는 1200초동안 연결이 비활성화 상태로 유지되면 자동으로 닫히도록 설정한다. upload_axios_timeout: 120..
FastAPI에서의 동시성 처리
FastAPI에서의 동시성 처리
2023.11.29스프링 같은 경우는 Tomcat (서블릿 컨테이너) 을 웹 서버로 사용해 동시성을 처리한다. 서버 컴퓨터에다가 자바 기반으로 작성된 Tomcat을 프로세스로 실행시키고 Tomcat 프로세스의 쓰레드로 스프링 애플리케이션을 실행시킨다. Tomcat에 동시에 100명의 사용자가 접속하는 경우 Tomcat은 100개의 쓰레드를 생성하고 (쓰레드 풀의 개수에 따라 달라질 수 있다) 각 쓰레드들은 디스패처 서블릿으로 접근하고 디스패처 서블릿은 요청을 처리하는 메서드로 쓰레드들을 안내해준다. 이런 방식으로 멀티쓰레딩 방식으로 동시성을 처리하고, 각 쓰레드들은 스프링 컨테이너의 빈을 공유하며 메모리를 효과적으로 사용한다. 파이썬은 자바와는 다르게 인터프리터 언어이고, Global Interpreter Lock 이라는..
Shadow DOM 다루기
Shadow DOM 다루기
2023.11.22다른 사람이 만든 자바스크립트 라이브러리를 사용해 원하는 기능을 구현하고, CSS를 적용할 때 렌더링된 결과를 개발자 도구를 통해 살펴보면 #shadow-root 라는 부분이 나타날 때가 있다. #shadow-root는 웹 컴포넌트의 Shadow DOM을 나타내는 용어로, 스타일과 마크업을 실제 DOM에서 격리시켜 컴포넌트의 내부 구현을 캡슐화하는 도구로 사용된다. Shadow DOM 내부의 스타일은 해당 DOM에만 적용돼 격리된 UI 컴포넌트를 만들 때 사용할 때 사용된다. Vue에서는 DOM을 추상화한 Virtual DOM을 사용해 실제 DOM에 접근하고 조작하는 비용을 최소화하고, Shadow DOM은 웹 컴포넌트의 캡슐화와 스타일 격리를 위해 사용된다. 이전에 wav파일을 시각화하는 자바스크립트 ..
map 함수와 Vue3의 반응형 시스템
map 함수와 Vue3의 반응형 시스템
2023.11.16서버에서 데이터를 받아오고, 받아온 데이터를 v-for 반복문을 사용해서 렌더링한다고 생각해보자. {{ subject.subject_no }} 성별 여성 남성 각 subject에 대해 watch 등 비즈니스 로직을 추가하려면 서버로부터 subjects를 받아올 때 map, forEach 등 반복문을 사용해 각각의 subject에 로직을 추가하는 방식으로 작업하면 된다. 여기서 map을 사용할 때는 주의할 점이 하나 더 있다. Vue3 에서는 reactive 또는 ref로 감싼 객체만이 반응형으로 동작해 데이터의 변경을 감지하고 해당 Vue 컴포넌트를 동적으로 업데이트 할 수 있다. (ref는 단일 값을 반응형으로 만들 때 사용하고 reactive는 객체를 반응형으로 만들 때 사용한다. ref는 .valu..
Git 협업 시 충돌 해결
Git 협업 시 충돌 해결
2023.11.14A와 B 두 명이서 협업을 하고 있다고 하자. A는 101까지 작업을 진행하고 커밋 및 원격 저장소에 push 했고, B는 101까지 진행된 작업을 pull 받아서 이어서 작업을 진행했다. 이후 A와 B는 각각 이어서 작업을 진행해 102A - 103A / 102B - 103B 까지 작업했고, B는 103B 까지 작업한 내용을 커밋 후 원격 저장소에 push 했다. 이후 A가 103A까지 작업한 내용을 커밋 후 원격 저장소에 반영하려면 원격 저장소의 최신 변경사항 (103B) 을 로컬 저장소로 가져온 후 103A 관련 작업을 커밋해야 한다. git pull origin master 명령어를 통해 원격 저장소의 변경 사항을 가져올 수 있는데... A와 B가 동일한 파일의 같은 부분을 수정하고 각각 커밋했다..
[FastAPI] SQLAlchemy
[FastAPI] SQLAlchemy
2023.11.06SQLAlchemy는 파이썬의 ORM 기술으로 자바 진영의 JPA와 유사한 부분이 많다. JPA의 영속성 컨텍스트와 1차 캐시 : SQLAlchemy의 Session객체 N+1 문제를 해결하기 위한 JPA의 fetch 속성 : SQLAlchemy의 joinedload(), subqueryload() JPA의 @Entity : SQLAlchemy의 declarative_base() @ManyToOne, @OneToMany : relationship() 이렇듯 같은 ORM 기술이다 보니 비슷한 개념을 공유하고 있어 JPA에 익숙하다면 SQLAlchemy도 어렵지 않게 적응할 수 있다. Core SQLAlchemy의 Core는 데이터베이스별 SQL과 스키마 정의를 위한 시스템으로, SQL 대신 Python코드..
[FastAPI] 요청과 응답
[FastAPI] 요청과 응답
2023.11.02FastAPI는 내부적으로 Pydantic 모델을 사용해 데이터의 유형을 선언하고 데이터를 검증하며 데이터를 전달한다. Pydantic은 Python의 데이터 파싱 라이브러리로, FastAPI에서는 JSON과 Python 객체간 데이터 변환, 데이터 전송 형식 검증에 사용된다. 스프링에서는 @Valid 애너테이션을 사용해서 객체를 검증했는데 FastAPI에서는 Pydantic이 비슷한 역할을 수행한다. class SubjectListResponse(BaseModel): selected_subject: str subjects: list @subject_router.get("/get-list", response_model=schemas.SubjectListResponse) def fetch_subject_l..
디렉토리 구조 탐색과 이미지 메타데이터 저장
디렉토리 구조 탐색과 이미지 메타데이터 저장
2023.09.17서버에 위와 같은 구조로 파일과 디렉토리가 구성되어 있을 때, 이 구조를 데이터베이스에 적합한 형식으로 저장하고 화면에 위와 같은 구조로 출력하는 기능을 작성해보자. 서버에 저장되는 디렉토리와 파일 구조는 고정되지 않고, 이미지만을 저장한다고 가정한다. (디렉토리를 몇 번 거친 후에 이미지 파일이 등장하는지는 정해지지 않았다) 1. 서버에 저장되는 이미지의 수는 적어도 10만장을 넘어간다. -> 저장하는 로직은 스케쥴러를 통해 특정 시간마다 수행될 수 있도록 설정할 수 있어야 한다. 2. 새로 추가된 디렉토리 및 이미지를 감지할 수 있어야 하고, 디렉토리와 이미지가 수정된 경우도 감지할 수 있어야 한다. -> 마지막으로 수정된 날짜, 저장된 이미지 수를 사용한다. 3. 특정 디렉토리를 선택하고 하위 이미..