back server에서 npm install pm2를 설치한 것 처럼 기존 프로젝트 front 경로도 pm2를 설치 후 pull해주자 ! | 알고 가야하는 점 ! 첫 번째, 지금 프로젝트는 nextjs 로 진행했기 때문에 getServerSideProps와 같은 backend에서 먼저 data를 받아와야 하는 함수가 들어있다 따라서 backend 가 무조건 켜져있어야지만 front를 켤 때 오류를 방지할 수 있다 ! 두 번째, 현재 나는 saga 로 상태관리를 하고 있는데, saga 폴더의 index.js에서 나는 axios의 defaults 값으로 baseURL을 지금까지는 axios.defaults.baseURL = 'localhost:3001'; 이렇게 적어주고 사용해왔었다. 하지만 지금 우리가 ..
자 이제 서버 실행도 시켰고 ! 중요한 건 쉘에서 서비스를 중지시키면 홈페이지도 중지가 되버린다.. 이랬던게 이렇게 꺼져버린다. 이게 참 애매한게 그렇다고 해서 항상 백앤드창을 계속 접속할 수 없는 노릇인데.. 이 현상이 노드가 foreground process 로 돌아가서 생기는 문제인데 이러면 shell을 종료했을 때 foreground process도 같이 종료된다. node app 으로 실행하면 foreground process가 된다는 것. foreground process란 ? -> 터미널을 끄면 같이 꺼지는 것 (node app) background process -> 터미널을 꺼도 안 꺼지는 것 오늘은 이걸 해결해보자 먼저 다시 백앤드 서버 실행 엥 ? 오류다 뭐지 ? 이 원인은 우분투(u..
거의 다 왔다 조금만 힘내자 !! 이제는 인터넷으로 접속을 할 차례이다 ! 잘 보면, 퍼블릭 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 를 등록..
리액트와 next를 사용하여 SSR 적용 중 className 오류가 났다. 원인은 nextjs 사용시 css 마찬가지로 SSR 렌더링도 먹여줘야 하는것이었다. "styled components는 따로 SSR 세팅(_document.js)을 안 하면 서버사이드 렌더링이 안 되므로 동적으로 스타일 태그를 생성하기 때문입니다. 기본적으로 next의 pages는 서버사이드 렌더링이 된다. getServerSideProps는 추가적으로 데이터까지 가져오는 것이고, ssr을 제외한 상황에서는 모두 styled-components가 동작한다" 그럼 SSR을 적용해 보자! 주의할 점은 getInitialProps는 주로 사용 안 하고 Document에서만 사용한다는 점 꼭 이억하자. _document.js 기본 형태..
클로저는 자바스크립트의 고유 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍언어에서 사용되는 중요한 특성이다. MDN에서는 "클러저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다"라고 설명한다. 자바스크립트는 렉시컬 스코프를 따르는 프로그래밍 언어이다. const x =1; function outerFunction(){ const x =10; function innerFunction(){ console.log(x) //10 } }→ innerFunction에서 outerFunction에 있는 x에 접근이 가능하다. 중첩함수 inner의 상위스코프는 외부함수 outerFunction이기 때문이다. 다음은 inner에서 outer 변수에 접근이 불가능하다. const x =1; funct..