이전에 혼자 진행했던 프로젝트를 깃에 올릴 때, 클라이언트 디렉토리와 서버 디렉토리를 하나의 레포지토리에 모아서 올렸다. 나중에 코드를 수정하고 업데이트해야 하거나 보기에 조금 불편했던 경험이 있었다. 클라이언트와 서버 디렉토리를 각각의 레포지토리로 분리를 해서 따로 저장하기로 했다. 임의로 이름을 지어서 쓰자면, project ├── client ├── server 로 된 레포지토리를 각각 project-client ├── .... project-server ├── .... 두 개의 별도의 레포지토리로 분리를 할 예정. 1. 각각의 레포지토리를 생성한다. 나의 경우엔 topster-frontend, topster-backend 두 개를 만들어주었다. 2. git subtree split 분리할 프로젝트..
분류 전체보기
Node.js Express 서버를 AWS EC2 상에 배포를 해보자. EC2에 git, npm, node.js 설치 등의 사전 세팅은 생략하고 넘어간다. Node.js 파일들과 패키지를 모두 내려받은 후에 파일을 실행시키는 것으로 서버를 돌릴 수는 있다. node index.js 클라이언트에서 내 서버의 api로 요청을 보냈더니, 리액트 프론트가 배포된 url에는 HTTPS 보안이 되어 있지만, 요청을 보내는 내 서버의 url은 그렇지 않다. 반드시 HTTPS 걸린 주소로 요청을 보내야 한다. [Nginx] 도메인 연결, HTTPS 적용 (Let's Encrypt) 참고1 1. 도메인 연결 이전에 가비아에서 구매를 해놓고 안쓰는 도메인이 있어서, 그 도메인에 내 IP를 연결했다. 10분 정도 기다리면 ..
AWS EC2 상에 Nginx로 리액트 프로젝트를 배포했던 경험 정리를 위한 글. 이전에 서브 도메인에 SSL 인증까지 마쳤다. 그걸 그대로 사용할 예정이다. [Nginx] 서브 도메인 설정, HTTPS 적용 참고1 참고2 'dev.9yujin.shop' 그리고 'prod.9yujin.shop' 이렇게 두 개의 서브 도메인을 만들어보자. 1. 가비아 DNS 레코드 수정 가비아에서 먼저 CNAME으로 서버 도메인을 등록해준다. dev와 prod 두개를 생성. 9yujin.tistory.com React 파일 빌드, 서버 업로드 yarn 패키지 매니저를 쓰고 있었다. 프로젝트 파일을 빌드해준다. yarn build 파일질라를 이용해 EC2에 빌드한 파일을 업로드했다. 경로는 /home/ubuntu/test/..
🚨 야매주의 Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 세종대왕님 만세. 한글로 된 문서가 새삼 반갑다. 문서에선 카카오 로그인이 진행되는 과정을 이렇게 표현하고 있다. 프론트에서 카카오 서버로 로그인을 요청하면 인가 코드가 발급된다. 그 인가 코드로 카카오 서버에 다시 요청해서 토큰을 받아와 사용한다. 먼저 Kakao Developers 에서 애플리케이션을 생성한다. 카카오 로그인 동의 항목, 도메인, 리다이렉트 URI 등을 설정하고 앱 키를 확인한다. 1트 노드 서버에서는 REST API를, 리액트 프론트에서는 자바스크립트 SDK를 사용..
[211011] 10월에 처음으로 무언가를 만들어보면서 간략하게 적었던 기록들이다. 티스토리 블로그를 개설하면서 그대로 옮긴 글. 이때도 열심히 좀 쓸걸 그랬다. 이미지 업로드 SNS 피드처럼 업로드한 이미지들을 볼 수 있도록 했다. 이미지를 서버쪽에 저장하려고 했지만 어디다 저장할지가 고민. 개인적인 공부를 위해 하는 프로젝트라, 아마존s3 같은 스토리지 서비스를 쓰기엔 굳이 라는 느낌이 들었다. 서버의 로컬 디렉토리에 파일을 저장하기로 했다. @app.route('/api/upload', methods=['POST']) def post_topster(): now = datetime.now() now2 = now.strftime("%D_%H%M_%S") date = now2.replace('/', '-..
[211011] 10월에 처음으로 무언가를 만들어보면서 간략하게 적었던 기록들이다. 티스토리 블로그를 개설하면서 그대로 옮긴 글. 이때도 열심히 좀 쓸걸 그랬다. 코드를 디자인한 방법이 정석적인 방법인지는 모르겠지만 어찌 됐든 돌아가기는 한다. 만들어진 탑스터를 이미지로 변환해서 파일로 다운받을 수 있고, 서버에 업로드해서 볼 수 있다. sns 피드처럼 만들고 싶어서 회원가입과 로그인도 간단히 구현했다. 회원가입 입력한 정보를 그냥 json 형식으로 보냈다. 이미 있는 id면 그냥 리턴하고 새 id인 경우에 회원가입을 진행한다. bcrypt 라이브러리를 이용해서 암호화를 해서 db에 저장한다. 자꾸 오류가 나는데 바이너리 형식으로 나오나해서 str으로 디코딩해서 보내니까 오류는 안난다. @app.rout..
[211011] 10월에 처음으로 무언가를 만들어보면서 간략하게 적었던 기록들이다. 티스토리 블로그를 개설하면서 그대로 옮긴 글. 이때도 열심히 좀 쓸걸 그랬다. 배경 색상 / 행과 열의 수 / 앨범 간 간격과 테두리의 두께 를 정할 수 있다. context api를 이용해 상태를 관리하고 있다. 음악 API 앨범아트 이미지를 가져오는데는 last.fm의 api를 사용했다. 유튜브에서 크롤링해와서 만든 데이터들이라고 한다. 검색한 결과들이 두 줄로 가로로 보여진다. 드래그앤 드랍으로 탑스터에 옮겨 배치할 수 있다. last.fm api에서 불러온 앨범아트 이미지들이 실제와 다르거나 없는 것들이 꽤 있었다. 현재는 Spotify api로 바꾸었다. Spotipy 라는 파이썬 라이브러리를 이용해서 백엔드에서..
참고1 참고2 RDS는 EC2와 함께 사용하며 아마존에서 제공하는 기능을 편하게 이용할 수 있게 해주는 DB전용 서버이다. 1. RDS 생성 1) RDS 인스턴스를 생성하고 MySQL, 프리 티어를 선택한다. 2) 마스터 사용자 이름과 새 VPC 보안 그룹, 초기 데이터베이스 이름 등을 지정해준다. 3) 퍼블릭 액세스를 '예'로 설정한다. 설정을 모두 완료하고 '생성 중' 상태로 몇분 기다리면 RDS 생성이 완료된다. 2. EC2에서 RDS 접근 1) 인바운드 규칙을 수정한다. 사용하는 EC2 보안그룹의 그룹ID를 복사해서 넣는다. 처음엔 현재 접속한 IP만 열려있다. 2) EC2에서 다음의 명령어를 실행하여 RDS 인스턴스에 접근한다. sudo mysql -u [사용자 이름] -p -h [RDS인스턴스..
