거의 다 왔다 조금만 힘내자 !! 이제는 인터넷으로 접속을 할 차례이다 ! 잘 보면, 퍼블릭 IPv4 에서 back server 인 3.37.52.147 가 있다 ! 저 아이피에 내가 백단에서 쓰고 있는 포트번호(:3000)를 붙여보자 ! 나는 : 3.37.52.147:3000 이니깐 back 서버에 접속해볼까 ? (*여기서 3065는 본인의 프로젝트 back 서버에서 돌아가는 port 를 입력해줍니다.) 결과는 무한 로딩중 ... 어디가 문제지 하고 생각해봤는데 당연한 결과다 왜 ? 접속 가능한 포트는 ssh 포트랑 , 80 , 443 포트만 접속이 가능하게끔 초창기에 설정 했기 때문에 ! 그럼 이 이슈를 또 해결해보자 바로 우분투내의 vim 에디터로 port를 변경 ! 먼저 port를 명시해준 코드 ..
이제 MySQL도 설치 했겠다. 우분투에서 npm start 날려볼까 ? 했지만 내 프로젝트에 server 폴더에는 현재 npm start 가 없는 상황 추가해주자. server 폴더 -> package.json -> script 부븐에서 "start" 추가 ( 여기서 저는 backend를 nest로 진행했기 때문에 "start":"nest start"로 입력합니다 nodejs라면 "node app" 입니다 ! ) 변경사항을 git commit & push 후 aws의 우툰투에서 git pull 받아주고 ! 다시 npm start ! 또 에러... 이유는 git에서는 .env 즉 환경설정 파일이 안 올라가기 때문에 오류가 났다 나는 .env 파일을 gitignore 추가해서 패스워드 같은 부분을 올라가지..
지난 글에서는 배포 과정을 알아봤고 이번에는 그 배포 과정에서 귀찮은 부분을 덜어낼 수 있는 녀석들을 소개 하고 우분투에 mysql 설치까지 진행해보겠습니다! | 대표적인 CI/CD TOOL 1.젠킨스 2.Travis 트래비스 3. docker 도커 대표적으로 docker를 많이 사용하는데 server 1대를 띄우면 docker에 명령어를 쭈욱 ~ 적어놓는다 ! 그러면 도커를 실행하면 순서대로 입력한 명령어를 실행하게 되면서 기존 서버와 똑같은 서버를 만들어준다 ! 얼마나 편리하냐 도커야 .. 고마워 아직 사용은 안 해봤지만 조만간 사용해줄게 | backend에 MySql 설치하기 1. "sudo apt-get install -y mysql-server" 실행 2. "sudo mysql_secure_in..
프로젝트를 진행하면서 어느정도 마무리 됐을 때, 리액프 프로젝트를 aws를 연동해서 배포하고 싶다는 생각이 문득 들었다. 그래서 무작정 시작한 아마존 웹 서비스 배포 진행! 시작해보자!! 1.aws 회원 가입 EC2생성 생성 시작 ! 저기 보이는 2번째 우분투 Server를 선택해서 사용할 것임 ! 검토 및 시작을 누르면 아래와 같이 해당 페이지로 와지는데 여기서 3번인 인스턴스 구성에 가보자 ! 여기에서 보면 세부 모니터링 활성화라는 게 있는데 체크해주자 ! 다만 조심할 점은 사용량이 많아지면 요금이 부과될 수 있다 ! 보통은 모니터링 하기 때문에 체크 하고 사용한다 해서 나도 체크 ! 다음은 6번 보안 그룹 구성 해당 단계에서는 기본으로 SSH만 등록되어 있는데 추가로 HTTP & HTTPS 를 등록..
기본적인 라우터의 동작 방식 라우터에는 가 보통 많이 사용되며 와 를 통해서 라우팅을 구현하는 방식이다. 예를 들어, 홈페이지, 영화페이지, 리뷰페이지가 있다고 하자. 각각의 URL을 / , /movies , /reviews 라고 했을 때, 다음과 같이 구현할 수 있다. import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; const Routes = () => { return ( ); }; 3가지 컴포넌트가 있다는 가정하에, 위와 같이 path 속성을 통해서 각각의 컴포넌트가 렌더링 되는 URL이 정해진다. 그러나 여기서의 문제점은, 홈페이지에 들어갔을 때 /movies 와 /reviews ..
| Generator 란 ? 제너레이터의 핵심은 동시성 프로그래밍입니다. ( 동시성이란? 동시에 여러가지 일을 처리하는 것처럼 행동하는 것입니다. 병행과 병렬을 혼동하면 안됩니다. 병렬은 실제로 동시에 여러가지 일을 처리하는 것입니다. ) 동시성의 예로, javascript 는 싱글 스레드 입니다.( 이말은 ? 한 번에 한 가지 일 밖에 못 한다는 뜻 ) 하지만 실제로 javascript는 한 번에 여러 가지 일을 처리하는 것을 우리는 알고 있습니다. ex) ajax 요청을 한다고 해서 "응답이 올 때까지 시스템은 멈추지 않는다." 결론은 javascript 는 싱글 스레드이지만, event 루프를 통해 동시성 을 지원하고 있습니다. 제너레이터는 이터레이터에 의존하는 개념으로, 이터레이터를 사용해 자신의..
reselect를 알기 전, Selector를 먼저 알아야합니다. | Selector란 ? state 에서 필요한 데이터를 가져오거나, 계산을 수행해서 원하는 형태의 데이터를 가져오는 역할을 말합니다. 왜 사용할까? selector는 Redux가 적은 양의 필요한 데이터만을 갖고 있게 data들의 연산을 도우며, state를 가져오는 컴포넌트들과 state의 구조 사이에 1개의 층(selector)를 두어 구조가 바뀌어도 연관된 모든 컴포넌트를 바꿀 필요 없이 selector 만 바꿔주면 성능이 향상되기 때문에 사용합니다. | reselect 란? selector 역할을 수행하면서 캐싱을 통해 동일한 계산을 방지해 성능을 향상시켜줍니다. 연산을 효율적으로 처리할 수 있게 도와주는 역할을 합니다. 즉, 새..
| CORS 란 ? 브라우저에서 기본적으로 API를 요청 할 때 브라우저의 현재 주소와 API의 주소의 도메인이 일치해야만 데이터를 접근 할 수 있습니다. 만약 다른 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요합니다. json-server 로 만든 서버의 경우에는 모든 도메인을 허용해주는 CORS 규칙이 적용되어있습니다. 하지만, Open API를 만드는게 아니라면 모든 도메인은 허용하면 안됩니다. webpack 개발 서버에서 제공하는 Proxy 기능을 사용하여 도메인을 사용해 봅시다. | Proxy 설정 웹팩 개발서버의 프록시를 사용하게 되면, 브라우저 API 를 요청 할 때 백엔드 Server에 직접적으로 요청을 하지 않고, 현재 개발 서버의 주소로 요청을 하게 됩니다. 그러면 ..