깃허브에서 프론트엔드 빌드 프로젝트 clone 프론트엔드 프로젝트를 빌드한 파일을 깃허브에 올린 후 클론하자. # 디렉토리 만들기 mkdir fe # 디렉토리 이동하기 cd fe # 프로젝트 clone git clone https://github.com/ejzl521/Board-FE-Build nginx 설정하기 설치 가능한 패키지 업데이트 sudo apt-get update nginx 설치 sudo apt-get install nginx nginx 설정을 하기 위해 아래 명령어를 입력해서 수정 모드로 들어가자. sudo vi /etc/nginx/sites-enabled/default listen 80 80번 포트로 들어오는 요청을 받는다는 의미. 생략하면 알아서 80번으로 요청한다. -> http 기본..

nodeJS, yarn, git, npm 설치하기 서버를 실행하기 위해 필요한 요소들을 우선 먼저 설치해야 한다. sudo apt-get update #nodeJS 설치하기 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash . ~/.nvm/nvm.sh nvm install --lts sudo apt-get install nodejs # npm 설치하기 sudo apt install npm #yarn 설치하기 curl -o- -L https://yarnpkg.com/install.sh | bash source ~/.bashrc #git sudo apt-get install git 백엔드 프로젝트(express) 실..

Docker 설치하기 1. apt 패키지 업데이트하기 이거 안하면 안됨! sudo apt-get update 2. 기존에 도커가 있으면 아래 명령어로 삭제하자! sudo apt-get remove docker docker-engine docker.io 3. 도커 설치하기 sudo apt install docker.io mariaDB 설치하기 1. 파일 권한 변경 /var/run/docker.sock 파일의 권한을 666으로 변경하여 그룹 내 다른 사용자도 접근 가능하게 변경 sudo chmod 666 /var/run/docker.sock 2. mariaDB 설치하기 docker pull mariadb:latest 3. mariaDB 컨테이너 생성 로컬에서 백엔드 개발(express+typeORM)을 할 ..

EC2 인스턴스 생성하기 https://ap-northeast-2.console.aws.amazon.com/ec2/v2/home?region=ap-northeast-2 우선 위 링크에 들어가서 로그인을 하자. 로그인을 한 후에 아래처럼 오른쪽 상단위가 서울로 되어있는지 꼭 확인하자. 컴퓨터 한대 한대를 인스턴스라고 부른다. 인스턴스를 구매하는 것이다. 오른쪽 상단 위의 인스턴스 시작 클릭. 단계 1 3번째 항목인 Ubuntu Server 18.04 LTS 선택. 리눅스 기반이고 보편적이고 오픈소스에다가 무료. 단계 2 t2 micro 선택! 단계 3 PASS 단계 4 GIB가 8로 되어있을 것이지만 30으로 수정하자! 단계 5 EC2 콘솔에 보여질 이름을 부여하는 단계라 생각하자. 키 값에 Name을 적..

What to do? 서버에서 이미지를 불러와서 img 태그 안에 넣어서 보여주는 것과 별개로 서버에서 이미지의 blob 데이터를 가져와서 자바스크립트의 file 객체로 변환하고 싶은 경우가 있을 것이다. 아래와 같은 엔티티와 api가 있고 이미지가 하나 등록되어 있다고 가정하자. 엔티티에서 data는 이미지를 blob 형식으로 변환해서 저장한 값이다. import {Column, Entity, ManyToOne, PrimaryGeneratedColumn} from "typeorm"; import {Question} from "./Question"; @Entity() export class Image { @PrimaryGeneratedColumn() id: number; @Column({length: 1..

What to do? 페이지에서 클라이언트가 로컬 컴퓨터로 이미지를 업로드하고 서버에 전송하기 전에 미리 사용자가 업로드할 이미지를 보여주고 싶을 경우가 있을 것이다. 아래처럼 input 태그에 type을 file로 주고 accept라는 키워드를 사용해서 이미지 형식의 파일만 받게 태그를 변경하면 이미지 업로더를 구현할 수 있다. 클라이언트로 부터 받은 이미지 파일은 state에 저장하고 삭제 버튼을 클릭하면 state를 초기화 시키자. 클라이언트가 이미지를 업로드하기 전에는 디폴트 이미지를 보여주고 클라이언트가 이미지를 업로드하면 해당 이미지를 보여주도록 하자. 클라이언트가 업로드 버튼을 클릭하면 서버에 이미지가 등록되고 이를 postman에서 미리 구현한 api로 확인할 수 있다! 여기를 클릭해서 D..