본문 바로가기

전체 글847

Node.js JWT API서버 만드는 방법 이전에는 주로 장고를 통해 API서버를 만들었다.그러다가 요즘 프론트엔드로 React.js에 재미를 붙였는데, 이왕 할거같은 스택으로 하자 싶어서 백엔드도 자바스크립트인 Node.js를 시작했다.기존에는 Django의 Rest framework를 사용했다면 노드에서는 express서버에 올리는 방법으로 진행한다.먼저 아래의 명령어로 필요한 모듈들을 설치한다. npm install —save body-parser express jsonwebtoken mysql2 sequelize 모듈들마다 사용 목적은 다음과 같다- body-parser : HTTP Body에서 값들을 빼올때 사용- jsonwebtoken : JWT 토큰을 위해 사용- sequelize : MySQL과 통신할 때 사용- mysql2 : s.. 2018. 6. 18.
Node.js 자동으로 재시작하는 방법(Supervisor) 나는 PHP다음으로 백엔드를 보통 Django를 썼었다.이전 포스팅에서 작성했듯이 Django의 Rest framework를 통해 API서버를 만들었었는데요즘에는 Node.js를 공부하고 있다.(React.js도 자바스크립트이기 때문에 하나의 스택으로 통일시키기 위함이다.)무튼 코드를 실행시키고 수정하는 일이 상당히 많은데 yarn과는 다르게 node로 실행하면코드가 수정되어도 재시작이 되지 않았다.그래서 Ctrl+C를 눌러서 껐다가 다시 node ~ 를 통해 실행했는데 시간이 지날수록 상당히 불편했다.자동으로 실행시켜주는 방법이 없을까 찾아보다가 supervisor라는 패키지를 발견했다.자세한 설명은 아래 주소를 참고한다. https://www.npmjs.com/package/supervisor 먼저 .. 2018. 6. 17.
Django+Nginx CORS 문제 해결 방법 기존에 만들어뒀던 학식봇 API를 사용하여 웹으로도 접근 가능하게 만들고 있었다.React.js를 사용하여 코드를 짜고 있었기 때문에 fetch()를 통해 웹에 접근해야 하는데당연하게도 CORS(Cross Origin Resource Sharing) 문제가 발생했다.CORS는 쉽게 말해서 같은 도메인으로만 접근이 가능하도록 하는 Security Policy라고 보면 된다.그래서 찾아보던 도중 fetch의 인자에 {mode: 'no-cors'} 를 같이 넘겨주면 된다고 나와있어서테스트해봤는데 뭔가 제대로 오지 않았다. (status도 false로 나옴)더 찾아보니까 Django에서 설정하면 될 것 같다.현재 내 API서버는 Django Restframework로 구성되어 있으며 Nginx를 통해 배포되고 .. 2018. 6. 5.
VSCode sFTP 연동하는 방법 그동안 만들어놓고 방치해두었던 학식봇을 한번 갈아엎는 일이 생겼다.장고를 처음 접할 때 만들었던 소스라 지저분하기도 하고 그냥 API서버 형태로 만들어두는게나중에 확장성에서도 좋다는 판단을 하여 Django의 Rest framework를 사용하여 바꿔줬다.서버에 직접 파일을 올려두고 sftp로 붙어서 작업하는 방식으로 했는데VSCode의 sFTP관련 확장 프로그램을 사용하면 로컬에서 작업하고 저장하는 즉시서버의 파일로 반영이 된다. 사실상 로컬에서 작업하고 구동하는 것과 체감상 차이가 거의 없다고 볼 수 있다.먼저 VSCode를 실행시킨다. 왼쪽에 빨간색 네모박스로 표시해놓은 아이콘을 클릭한 이후sftp를 검색하여 최상단에 있는 확장프로그램을 설치한다.그다음 F1을 누르고 sftp를 입력한다. SFTP:.. 2018. 6. 3.
React.js SASS 설치하는 방법 오늘은 CSS를 좀 더 편하게 사용할 수 있는 방법에 대해 소개하겠다.기존에 CSS를 작성할 때 코드가 길어지면 가독성이 크게 떨어지는 경험을다들 한두번쯤을 해봤을 것이다.예를 들어 아래와 같은 코드가 있다고 가정한다. (출처 : velopert님 블로그) .App { ... } .App .header { ... } .App .logo { ... } .App .intro { ... }이런 경우 SASS를 사용하면 아래와 같이 사용할 수 있다. .App {.header { ... }.logo { ... }.intro { ... }} 한눈에 봐도 코드 작성도 보다 쉽게 할 수 있고 가독성도 좋아진다.인터넷을 찾아보니 대부분의 예제들은 create-react-app이후 eject를 하여 무언가 작업을 했는데나.. 2018. 6. 2.
React Router Nginx 문제해결 방법 React.js를 이용하여 포트폴리오 사이트를 제작했다.기존에 서버를 구동시키기 위해서 yarn start 명령어를 사용했었는데 해당 명령어는개발 서버에서 사용하는 것이고 실제 서버로 배포하기 위해서는 Deploy작업을 따로 해줘야 한다.나는 기존에 사용하던 서버에 Nginx가 설치되어 있었고 해당 서버에 배포하기로 했다.yarn build를 통해 나온 결과물을 웹 서버 폴더로 옮겼더니 정상적으로 작동한다.하지만 문제점이 하나 있었는데 나는 라우팅을 위해 react-router-dom을 사용하고 있었다.써드파티 모듈이지만 정말 많은 사용자들이 사용하고 있을 정도로 유명한 라우팅 모듈이다.문제점은 /home /about 등으로 접근을 할 경우 nginx에서 해당 파일을 찾으려고 하는 것이다.이 부분은 가상.. 2018. 5. 15.

티스토리툴바