Programming

[Nginx] Nginx 개념 및 nginx.conf 설정

Nginx 개념 및 nginx.conf 설정 1. 개념 nginx는 apache와 같은 웹서버 중에 하나인데, 가벼우면서 여러 요청을 한 번에 처리할 수 있는 장점을 가진 웹서버입니다. apache보다 동작이 단순하고 전달자 역할만 하기 때문에 동시접속에 특화되어 있다는 특징이 있습니다. 만약 동시접속자가 700명 이상이라면 서버를 증설하거나, nginx환경을 권장한다고 할 정도로 성능이 좋고 다중 접속에 특화되어있다는 것을 알 수 있습니다! 이 nginx는 구동 방식이 Event Driven(비동기처리방식)인데, 이것은 요청이 들어오면 어떤 동작을 해야하는지만 알려주고 다른 요청을 처리하는 방식입니다. 그러다보니 CPU와 관계없이 모든 입출력들을 전부 Event Listener로 전달하기 때문에 흐름이..

[Project] Docker Nginx Express React 연동하기

1. 개요 docker에 docker-compose를 사용해 nginx와 express-react 컨테이너를 생성하는 방법을 정리해보겠습니다! 먼저, docker가 설치가 되어있다는 가정하에 진행합니다 사용된 파일들의 디렉터리 구조는 위와 같습니다. backend에 express, frontend에 react, nginx는 proxy 서버로 워크플로우가 구성되어있습니다. 순차적으로 따라하시면서 frontend와 backend를 구성하는데 어떤 식으로 구성을 하는지 잘 유의하시면서 보시면 될 것 같습니다. 이 워크 플로우 구조를 구현하는데 굉장히 애를 많이 먹었어요ㅠㅠ 막상 복습하면서 만드니까 뚝딱 만드는데 nginx와 express간의 프록시 문제도 있었고… react와 express 간의 문제도 있었고..

[Docker] Docker Compose 문법 정리

docker compose 문법 정리 도커 컴포즈는 여러 개의 도커 이미지 + 여러 개의 도커파일을 순차적으로 실행시켜 컨테이너로 만들어주는 명령어 파일을 말합니다! 도커 파일이 이미지를 만드는 거니까... 여러 개의 이미지를 실행 할 때 필요한 환경설정 값들을 도커 컴포즈에서 모두 관리한다고 생각하시면 됩니다! 1. image docker-compose 안에서 베이스 이미지를 지정할 수 있는데, docker build를 할 때와 마찬가지로 이미지가 로컬 환경에 없다면 해당 이미지를 다운받아서 base 이미지로 사용합니다. : services: proxy: image: nginx:latest # nginx 이미지 2. build build는 docker-compose에서 dockerfile을 이용해 자동..

[Dockerfile] Dockerfile express 연동하기

dockerfile을 이용해서 node.js 기반, express로 구현한 웹 서버를 docker에 올리는 방법을 테스트해보겠습니다. 먼저 전체적인 파일의 구조는 아래와 같습니다. 테스트한 운영체제는 window 10 환경입니다! 도커도 window 버전을 사용했습니다. 전체적인 소스는 아래 github에서 확인할 수 있습니다. https://github.com/kimdongjang/dockerfile_nodejs_test1 GitHub - kimdongjang/dockerfile_nodejs_test1 Contribute to kimdongjang/dockerfile_nodejs_test1 development by creating an account on GitHub. github.com 1. exp..

[Dockerfile] Dockerfile이란? Dockerfile 옵션

Dockerfile은 인프라 구성을 효을적으로 관리하기 위한 파일로, 쉘 파일과 비슷한 dockerfile을 작성해서 해당 도커 이미지를 사용자의 환경에 맞춰서 운영할 수 있도록 합니다. 위 도커 파일을 build하게 되면 도커의 이미지를 생성할 수 있습니다! 웹서버를 도커에서 구동하려면 1) 특정 웹서버 이미지를 도커를 통해 다운 2) 웹서버 이미지를 컨테이너로 실행 3) 컨테이너에 웹서버에 빌드할 서버파일을 import 4) 서버를 구동 이러한 순서로 진행했는데, dockerfile을 사용하게 되면 이 순서가 엄~청 단축됩니다! 1) 서버파일 측에서 dockerfile을 작성 2) dockerfile build해서 웹서버 이미지를 생성 3) 방금 빌드한 이미지를 컨테이너로 실행하면 자동으로 서버가 구..

[Jenkins] 젠킨스와 깃허브 연동(GitHub Web Hook)

먼저 젠킨스를 설치했다는 가정 하에 글을 작성합니다. 만약 젠킨스 설치가 아직 안되신 분은 아래의 도커에 젠킨스 설치하는 방법을 보시고 그대로 다시 따라하시면 될 것 같습니다! https://narup.tistory.com/202 [Docker] 도커에 젠킨스 설치, 도커에 젠킨스 연동 도커에 빌드 관리 도구인 젠킨스를 설치(연동)해보겠습니다. 도커는 현재 윈도우에 설치한 상태로 진행하고 있습니다! 1. 젠킨스 이미지 다운로드 윈도우 power shell을 여시고 아래와 같은 명령어 narup.tistory.com 도커를 사용하지 않는다면 아래 링크를 참고해주세요 https://narup.tistory.com/259 [Jenkins] Linux EC2에서 Jenkins 설치하기(Java 11버전 설치) ..

[Docker] 도커에 젠킨스 설치, 도커에 젠킨스 연동

도커에 빌드 관리 도구인 젠킨스를 설치(연동)해보겠습니다. 도커는 현재 윈도우에 설치한 상태로 진행하고 있습니다! 1. 젠킨스 이미지 다운로드 윈도우 power shell을 여시고 아래와 같은 명령어를 입력해 젠킨스 이미지를 다운로드 해줍니다. 젠킨스는 lts 버전을 사용합니다. # docker pull jenkins/jenkins:lts 저는 여기서 편의상 포트번호를 8085번으로 지정했습니다. docker 컨테이너의 이름은 jenkins로 지정했고요! 2. 젠킨스 컨테이너 설치 및 실행 # docker run -itd -p 8085:8080 -v /jenkins:/var/jenkins_home –name jenkins -u root jenkins/jenkins:lts 이미지에서 컨테이너가 잘 실행되면..

[React] React.js 강좌 12. useRef

1. 개요 javascript를 사용할때는 특정 DOM을 선택하는 상황에서 getElementById나 querySelector같은 DOM Select 함수를 사용해서 DOM을 가져오곤 합니다. 특정 같은 부분의 DOM을요. 리엑트를 사용할때도 DOM을 직접 선택해야하는 상황이 생기는데 이럴 때 리액트에선 ref를 사용합니다. 일반적으로 애플리케이션 대부분의 컴포넌트에서 DOM을 다루는 것은 권장되지 않습니다. 왜냐하면 내부 DOM 요소에 대한 정보를 지나치게 간섭하게 되면 의존성에 대한 문제가 발생하기 때문입니다. 하지만 포커스, 선택, 애니메이션과 같은 기능을 관리하기 위해서는 DOM 요소에 접근을 해야하기 때문에 일반적으로 위와 같은 기능에서는 ref를 통해 DOM에 접근하는 것을 허용합니다. 이때..

[ECMAScript] Javascript ES6 Spread, Rest 정리

[ECMAScript] Javascript ES6 Spread, Rest 정리 ES6을 사용한 프로그램에서 … 이라는 기호를 많이 보게 될텐데, 이것은 Spread Operator와 Rest Parameter입니다. 레퍼런스에서는 상세하게 설명이 되어 있는데, 이런 연산자가 생소한 사람에게는 … 기호가 섞인 복잡한 코드를 보면 멘탈이 붕괴됩니다….(본인처럼) 확실하게 개념을 잡고 넘어가기 위해 쉽게 정리해보겠습니다! 1. Spread Spread 연산자는 iterable 객체를 함수의 인자, 또는 배열 literal의 요소로 확장합니다. 이 말은 즉슨 배열과 같은 여러 개의 데이터를 가진 데이터형이 있을텐데, [ , , , ]과 같이 여러 개의 콤마로 구분되는 저장소에 펼쳐서(Spread) 초기화를 해준..

[React] React.js 강좌 11. Context

React Context 1. 개요 리액트 앱을 개발하다보면 모든 컴포넌트(최상위 컴포넌트에서 최하위 컴포넌트)에 특정 값을 props로 넘기고 싶을 때가 있습니다. 전역(global)로 선언된 데이터가 있으면 참 편할텐데 말이죠. 이 Context는 리엑트 컴포넌트 트리 안에서 Global한 데이터를 공유할 수 있도록 고안된 방법입니다. 이러한 데이터는 보통 현재 로그인한 유저, 적용중인 테마, 선호하는 언어 등이 있을 수가 있습니다. 단계적으로 props를 전달하지 않아도 Context를 사용하면 Global한 데이터를 효율적으로 사용할 수가 있겠죠. 2. 일반적인 props의 사용 아래의 코드는 버튼 컴포넌트를 꾸미기 위해 테마 props를 명시적으로 넘겨줍니다. class App extends R..