spring boot로 Java를 시작해보겠습니다. 에디터는 vscode를 사용하였습니다. 폴더명은 crud로 하여 프로젝트를 생성했습니다. 스프링 부트를 사용하기 위한 vscode extensions을 설치합니다. 저는 요정도로 설치하도록 하겠습니다. 스프링 부트 확장팩은 crud 작성에 필요한 @RequiestMapping 기능을 제공합니다. ctrl + shift + p 를 눌러 Command palette를 엽니다. 'Spring initalizr: Create a Maven Project' 를 선택합니다. 버전을 선택합니다. (아무옵션도 붙지 않는 버전을 선택해야 합니다.) 저는 안정된 버전중에 제일 최신버전인 2.5.3 선택하겠습니다. 언어는 당연히 Java겠죠 그룹아이디를 지정합니다. dai..
Nginx&Docker 콜라보레이션으로 로드밸런싱을 해보겠습니다. 프로젝트를 생성하고 index.js에 아래와 같은 내용을 작성했습니다. Dockerfile을 생성한 후 명령어를 이용하여 docker image를 추가합니다. 저는 hjng1이라는 이름의 이미지를 생성했습니다. 포트 번호 6000과 6001번으로 Nginx 로드밸런싱을 해보겠습니다. 도커 포트는 6000과 6001으로 하고 앱포트는 8081로 하여 도커 컨테이너를 생성했습니다. 컨테이너 이름은 각각 retry1과 retry2로 생성해주었습니다. 서버가 에러없이 잘 켜지는것을 확인했으면, Nginx설정을 해줍니다. nginx.conf 파일에서 upstream node_server를 아래와 같이 작성해줍니다. upstream node_serv..
자신의 프로젝트를 도커 컴포즈를 이용하여 AWS 환경에 배포해봅시다. 1.프로젝트 세팅 우선 각각 클라이언트와 서버에 도커 파일을 생성해줍니다. 루트에 docker-compose.yml 파일을 생성하여 도커 컴포즈 컨테이너를 만들기 위한 세팅을 합니다. 도커 파일 생성방법은 공식문서를 참고했습니다. https://docs.docker.com/get-started/08_using_compose/ git에 프로젝트를 push 합니다. 2. aws 세팅 AWS에서 데이터베이스는 RDS를 이용하여 연결하고, EC2 인스턴스를 생성해서 ppk키를 만들어옵니다. 제 블로그에도 자세한 방법이 포스팅되어 있습니다. https://daily-coding-diary.tistory.com/5 1.aws EC2 인스턴스 생성..
목표 : RabbitMQ를 이용하여, 데이터를 임시로 저장하고 확인해봅시다. RabbitMQ는 디비 또는 데이터 처리에 문제가 생겼을때 데이터를 임시로 처리해줄때 많이 사용합니다. 예를 들면, 채팅방에 한명은 실시간 접속 상태지만 한명은 접속 상태가 아닐때, 중간에 들어오면 채팅 내용이 보여야하는데 데이터가 느리게 들어오면 실시간 통신에 문제가 됩니다. 그래서 실시간 채팅은 항시, RabbitMQ 혹은 Redis 처럼 캐싱기능이 있는 저장소에 담을 필요가 있습니다. 우선적으로 RabbitMQ 서버를 설치하여, 실행시켜야합니다. https://www.rabbitmq.com/#getstarted 완료되었으면 디렉토리를 생성하여 기본 노드 서버를 세팅합시다. app.js const express = requi..
타입스크립트 맛보기 연습을 해보겠습니다! 우선 프로젝트 폴더하나 생성하고, package.json을 작성해볼까요 package.json { "name": "TypeScript", "version": "0.0.1", "main": "app.ts" } 타입스크립트로 만들 프로젝트니 main은 당연히 js가 아니라 ts파일이겠죠 app.ts를 파일을 생성하세요. 미리 필요한 내용을 작성해두겠습니다. import express from 'express'; import cors from 'cors'; const app = express(); app.use(cors()); app.use(express.json()); app.use(express.urlencoded({ extended: false })) app.li..
aws 인스턴스에 연결시켰던 putty를 킵니다. (인스턴스가 없다면 https://daily-coding-diary.tistory.com/5 이 페이지를 참고하여 생성하세요.) 이제 깃에 올려두었던 내 프로젝트를 clone해서 받아올겁니다~! git clone [나의 깃 프로젝트 Url] 을 합니다. 프로젝트는 복사되었지만 모듈은 따로 설치해주야겠죠? 제 프로젝트는 node를 기반으로 진행한 프로젝트이기 때문에 node도 설치해주어야 합니다. $ sudo apt update 우선 우분투를 업그레이드 해줍니다. $ sudo apt install nodejs nodejs를 다운받습니다. 중간에 yes, no 나오면 y눌러서 마저 다운받으세요. $ nodejs -v 버전을 확인해서 잘 설치됐는지 확인합니다...
시퀄라이즈를 쓰는 이유는 자바스크립트 구문을 알아서 SQL로 바꿔주기 때문입니다. 따라서 SQL 언어를 직접 사용하지 않아도 자바스크립트만으로 MySQL을 조작할 수 있습니다. 시퀄라이즈를 사용해봅시다. 시퀄라이즈를 이용하면 js로 테이블을 만들 수 있습니다. 프로젝트와 함께 테이블 정보를 저장할 수 있어서 유용하겠죠. 그리고 시퀄라이즈 구문이 sql구문보다 사용하기가 간단해서 편리합니다. 시퀄라이즈를 사용하려면 설치해야겠죠. 서버에 시퀄라이즈를 설치합니다. $ npm i sequelize 설치가 완료되었으면, MyTodoList에 model 폴더를 생성합니다. 1. index.js 작성 시퀄라이즈를 사용하기 위해 index.js 파일을 만들어서 import 시킵니다. const fs = require(..
우선 브라우저에서 기본적으로 적용시키는 css를 리셋시키고 직접 작업을 하기 위해 index.css에서 초기화를 시켜줍니다. (정석이 아닌 제 커스텀이니 여러분이 원하는 항목은 스스로 수정해서 커스텀하시기 바랍니다.) @charset "utf-8"; /* Webfont Setting : 1. font-family: 'Roboto', sans-serif; 2. font-family: 'Nanum Gothic', sans-serif; 3. font-family: 'Open Sans', sans-serif; 4. font-family: 'Lato', sans-serif; 5. font-family: 'Noto Sans KR', sans-serif; 6. font-family: 'Teko', sans-serif..
마지막에 css를 제공할 예정이니, 각 태그들의 클래스명은 되도록 똑같이 따라하시길 바랍니다. 1. 설치하기 리액트를 만들기 위해 터미널에서 + 버튼을 눌러 새 터미널을 만듭니다. 경로가 MyTodoList에 있는지 잘 확인한 후, 아래 내용을 입력해서 리액트를 설치합니다. $ npx create-react-app client cd client npm start 경로를 클라이언트로 바꾸고 리액트를 실행시켜봅시다. 이 화면이 나온다면 성공입니다. 우선 서버와 클라이언트를 연결해줘야 합니다. 기존의 package.json이 아닌 클라이언트 안에 있는 package.json에 접근해서, "proxy": "http://localhost:8080" 이 항목을 추가합니다. 2. 파일 수정 및 정리 client>sr..
로컬환경에 있는 서버를 aws서버에 연동시켜보도록 하겠습니다. 기본적으로 RDS(데이터베이스)세팅과 Git연동까지 진행했다는 전제하에 진행하겠습니다. https://ap-northeast-2.console.aws.amazon.com/console/home?nc2=h_ct&src=header-signin®ion=ap-northeast-2 https://ap-northeast-2.console.aws.amazon.com/console/home?nc2=h_ct&src=header-signin®ion=ap-northeast-2 ap-northeast-2.console.aws.amazon.com aws 관리 콘솔에 접속하신 후, EC2를 클릭합니다. EC2카테고리에서 인스턴스를 클릭 후 , 인스턴스 시작을 ..
우선 연습하다 발생한 log들을 저장하기 위해 morgan 모듈을 설치하여 app,js에 이와같이 선언해주었습니다. const logger = require('morgan') app.use(logger('dev')); artillery 모듈은 가상으로 사용자 수를 지정하여 서버에 과부하가 걸리는지 테스트합니다. artillery 모듈을 설치하고 cpu-test.yaml 파일을 생성하여 이와 같이 작성했습니다. config: target: "http://localhost:8080" # host phases: - duration: 30 # 해당 초만큼 실행 arrivalRate: 3000 # 가상 사용자 수 scenarios: - flow: - get: url: "/user" # setParam에서 넣은 I..
"Representational State Transfer” 의 약자 REST 는 네트워크 아키텍처 원리의 모음이다. 여기서 '네트워크 아키텍처 원리'란 자원을 정의하고 자원에 대한 주소를 지정하는 방법 전반을 일컫는다. 간단한 의미로는, 웹 상의 자료를 HTTP 위에서 SOAP이나 쿠키를 통한 세션 트랙킹 같은 별도의 전송 계층 없이 전송하기 위한 아주 간단한 인터페이스를 말한다. 출처: 위키백과 1. Postman을 사용하여 통신 확인 app.js에 작성해두었던 //익스프레스가 지원해주는 restAPI app.get('/', function (req, res) { res.send('Hello World') }) 이 부분도 rest api에 해당하는 영역입니다. 여기서 app은 express모듈을 사용..
Node.js와 React를 이용하여 나만의 Todolist를 만들어봅시다. Todolist를 이용하면 기본적인 데이터 처리 기능 CRUD(create, read, update, delete)를 구현할 수 있으므로 모든 API 시작과 끝을 맛볼 수 있게 됩니다. 학습목록 NodeJS MySQL Express Sequelize React 1. 환경세팅 에디터는 vscode를 이용하도록 하겠습니다. 없으신 분들은 설치하시면 됩니다. 제가 사용하는 vscode extension에 관한 정보는 추후에 업데이트 하도록 하겠습니다. node와 mySQL도 자신의 환경에 맞게 설치합니다. 2. 원하는 위치에 MyTodolist폴더를 생성합니다. 저는 onedrive때문에 바탕화면이 아닌, user 디렉토리 안에 my..
