개발일기

0. php-fpm이란? 먼저, CGI ( Common Gateway Interface )는 웹서버와 외부 프로토콜을 연결시켜주는 표준 프로토콜이다. 이 CGI는 각각의 요청별로 프로세스를 생성한다. 요청이 들어올 때 마다 프로세스의 생성과 삭제를 반복하다보면 자연스럽게 속도는 느려진게 된다. 이러한 CGI의 단점을 개선하고자 FastCGI가 등장하였다. 새로이 등장한 FastCGI는 요청이 들어올 때 마다 프로세스를 생성하는 것이 아닌, 이미 기존에 만들어진 프로세스를 바탕으로 새로운 요청들을 처리해 나간다. 프로세스의 생성과 삭제를 통해 발생하는 부하를 줄이기 위한 FastCGI를 활용하기 위해 사용되어지는 것이 php-fpm이다. php가 FastCGI 모드에서 동작하여 처리될 수 있도록 해준다. ..

1. Nginx란? 가볍고 높은 성능을 가진 웹 서버 (Web Server) 이다. HTTP Server로 활용되며 정적 파일들을 처리하기 위해 사용된다. Reverse Proxy Server로 활용된다. 80번 포트로 들어오는 내용을 3000, 4000, 9000 등의 다른 포트로 분산 시켜줄 수 있다. 비동기 이벤트 구조를 기반으로 동작한다. 2. Nginx와 Apache의 차이점은?? 가장 큰 차이점은 두 서버의 동작 방식이다. Nginx는 Event-Driven 방식으로 작동하고, Apache는 쓰레드 / 프로세스 기반으로 작동한다. Event-Driven : 서버로 들어오는 여러 개의 커넥션을 Event-Handler를 통해 비동기방식으로 처리를 하게 한다. 이러한 방식으로 인해 적은 메모리로 ..

1. package.json 파일 생성 npm init -y yarn init -y 2. 타입스크립트 설치 npm install -D typescript yarn add -D typescript 3. tsconfig.json 파일 생성 tsc --init tsconfig.json 파일이 생성되면 컴파일 옵션에 포함되어져 있는 옵션들에 대한 주석이 달려있는 파일이 생성된다. 4. tsconfig의 주요 속성 { "compilerOptions": { "outDir": "./build/", "sourceMap": true, "noImplicitAny": true, "module": "commonjs", "target": "es5", "jsx": "react", }, "exclude": ["node_module..

1. package.json 생성 npm init -y yarn init -y 2. 리액트관련 라이브러리 추가 npm install -D react react-dom yarn add -D react react-dom 3. 웹팩관련 라이브러리 추가 npm install -D webpack webpack-cli webpack-dev-server html-webpack-plugin yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin 4. 바벨관련 라이브러리 추가 npm install -D @babel/cli @babel/core @babel/preset-env @babel/preset-react yarn add -D @babel/cli..

1. package.json 생성 npm init -y yarn init -y 2. babel 관련 패키지 설치 npm install @babel/cli @babel/core @babel/preset-env @babel/cli : cli ( Command Line Interface ) 바벨을 커맨드 인터페이스에서 바벨을 실행할 수 있도록 해주는 패키지 @babel/core : 바벨을 실행하기 위해 필수적으로 설치되어야 하는 패키지 @babel/preset-env : 자바스크립트 파일에 작성된 es6, es7, es8, es9 등등의 문법을 es5 문법으로 변환시켜준다. 이로인해 es6 이상의 문법을 지원하지 않는 브라우저에서도 자바스크립트가 정상적으로 작동할 수 있게 된다. @babel/preset-en..

webpack.config.js 파일의 내용 const path = require("path"); const HtmlWebPackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/", output: { path: path.resolve(__dirname, "build"), filename: "webpack_build.js", }, resolve: { modules: [path.join(__dirname, "src"), "node_modules"], alias: { react: path.join(__dirname, "node_modules", "react"), }, }, module: { rules: [ { test: /\...

1. 웹팩이란? 웹 어플리케이션을 구성하는데 HTML, Javascript, CSS 등의 다양한 자원이 활용된다. 웹 어플리케이션을 구성하다보면 이러한 자원들의 갯수가 많아질 것이다. HTML파일이 10개, Javascript파일이 20개, CSS파일이 15개 등으로 구성이 될 것이다. 이러한 각각의 파일들을 하나의 파일로 병합 및 압축해주는 것을 도와주는 도구가 바로 웹팩이다. 웹팩을 통해 병합 및 압이 완료되면 프로젝트를 구성하는 파일은 HTML 1개, Javascript 1개, CSS 1개로 간단하게 구성되도록 도와준다. 1-1. 모듈들을 모아주는 웹팩을 사용하는 이유는? 가장 큰 이유로는 웹 어플리케이션의 로딩속도 개선이다. 하나의 페이지에 연결된 자바스크립트 파일이 많다면 모든 자바스크립트 파일..

{ "compilerOptions": { "target": "es5", "module": "commonjs", "sourceMap": true, "outDir": "dist", "downlevelIteration": true, "strict": true, "noImplicitAny": false, "moduleResolution": "node", "baseUrl": ".", "paths": { "*": ["node_modules/*"] }, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true } } // tsconfig.json tsconfig.json에서 jsx라는 항목을 빼먹었기 때문에 발생하는 ..