엘리스 AI트랙 4기/프로젝트 36

Sequelize에서 where문에 연산자(Operator) 사용하기

[01 Operators란? ] 일단 DB에서 연산자(Operators)란 간단하게 특정 작업을 하기 위한 기호 또는 문자이다. 연산자의 종류로는 비교 연산자, 논리 연산자, 그리고 DBMS에서만 사용하는 기타 연산자들이 존재한다. 비교 연산자 : =, !=, >, < 등 좌우값을 비교하는 연산자 논리 연산자 : or, and 등 참(true), 거짓(false)을 가지고 비교하는 연산자 기타 연산자 : in, not in, between 등 저번 프로젝트에서는 MongoDB를 사용해서 Mongoose를 사용할 때도 이러한 연산자를 사용했는데 그 때는 아래와 같이 $ 표기를 이용해 연산자를 사용할 수 있었다. MySQL의 Sequelize에서도 그렇게 사용한 예제를 확인하고 비슷하게 $ 표기를 사용하려고..

[TypeScript Express] Sequelize 외래키로 참조 테이블 데이터 검색하기

관련글 1 : https://s0n9h2.tistory.com/109 [TypeScript Express] Sequelize로 MySQL 모델 Association 관계 설정하기 관련글 1 : [Typescript Express] Sequelize로 MySQL 연결하기 [Typescript Express] Sequelize로 MySQL 연결하기 [01 Typescript란? ] TypeScript는 JavaScript 기반의 언어이다. JavaScript는 클라이언트.. s0n9h2.tistory.com [01 들어가기에 앞서 ] 저번 포스팅에서 1:1, 1:N, 1:M 관계 설정에 대해 다뤘는데, 이렇게 설정해 둔 외래키로 어떻게 참조 테이블을 검색할 수 있을지 작성해보겠다. 처음 나와 팀원은 당연히(..

[TypeScript Express] Sequelize로 MySQL 모델 Association 관계 설정하기

관련글 1 : [Typescript Express] Sequelize로 MySQL 연결하기 [Typescript Express] Sequelize로 MySQL 연결하기 [01 Typescript란? ] TypeScript는 JavaScript 기반의 언어이다. JavaScript는 클라이언트 측 스크립팅 언어지만 TypeScript는 객체 지향 컴파일 언어이다. TypeScript는 JavaScript의 상위 집합으로 JavaScrip.. s0n9h2.tistory.com 관련글 2 : [TypeScript Express] Sequelize로 MySQL 기본 모델 생성하기 [TypeScript Express] Sequelize로 MySQL 기본 모델 생성하기 관련글 : [Typescript Express..

[TypeScript Express] Sequelize로 MySQL 기본 모델 생성하기

관련글 : [Typescript Express] Sequelize로 MySQL 연결하기 [Typescript Express] Sequelize로 MySQL 연결하기 [01 Typescript란? ] TypeScript는 JavaScript 기반의 언어이다. JavaScript는 클라이언트 측 스크립팅 언어지만 TypeScript는 객체 지향 컴파일 언어이다. TypeScript는 JavaScript의 상위 집합으로 JavaScrip.. s0n9h2.tistory.com [01 model 생성하기 ] MongoDB와의 차이점은 일단 schema 폴더를 사용하지 않고 model을 정의하는 파일에서 생성도 같이하는게 더 편하다는 것이었다. 그런데 이제 이게... 진짜 처음에 감도 못잡아서 많이 헤멘 부분인데 ..

[TypeScript Express] 라우터, 컨트롤러, 미들웨어 분리

[01 계층 분리의 필요성 ] 사실 1, 2차 프로젝트 때는 Controller 없이 3계층 구조로 크게는 Router / Service / DB로 나뉘고, route 방식으로는 Router와 Middleware만 사용했는데 이번 프로젝트에서 같은 백엔드 팀원의 제안으로 Router와 Middleware를 나누게 되었다. 일단 모든 코드를 나누지 않으면 어떤 엔드포인트로 접근했을 때 어떤 동작을 하게 되는지 한 눈에 볼 수 있어 유용할 수 있다. 그런데 조금만 기능이 복잡해지면 이런 방법으로 라우팅을 관리하는 것은 좋지 않다. 예를 들어 입력값을 검증하고 사용자가 로그인 한 뒤 기능을 수행하는 로직이 모두 Router 파일에 있으면 코드의 재생산성과 유지보수성이 현저히 떨어진다. 따라서 백엔드에서 정확한..

[Typescript Express] 로그인 로직에 JWT Token Middleware 적용하기

[01 JWT Token이란? ] 인증받은 사용자에게 토큰을 발급해주고, 서버에 요청을 할 때 HTTP 헤더에 토큰을 함께 보내 인증받은 사용자(유효성 검사)인지 확인한다. JWT는 JSON Web Token의 약자로 전자 서명 된 URL-safe (URL로 이용할 수있는 문자 만 구성된)의 JSON이다. JWT는 헤더(header), 페이로드(payload), 서명(signature) 세 가지로 나눠져 있으며, 아래와 같은 형태로 구성되어 있다. eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJ..

[Typescript Express] Sequelize로 MySQL 연결하기

[01 Typescript란? ] TypeScript는 JavaScript 기반의 언어이다. JavaScript는 클라이언트 측 스크립팅 언어지만 TypeScript는 객체 지향 컴파일 언어이다. TypeScript는 JavaScript의 상위 집합으로 JavaScript의 모든 기능이 있다. 클래스 기반이므로 객체 지향 프로그래밍 언어로 상속, 캡슐화 및 생성자를 지원할 수 있다. TypeScript는 그 자체로 실행이 안 되고 Javascript로 컴파일러를 사용하여 ts(TypeScript)파일을 js(JavaScript) 파일로 변환한다. 그래서 얼핏 보면 그렇게까지? 성능 더 떨어지는거 아니야? 할 수 있는데 현업에서는 엄청 많은 양의 코드를 다루다 보니 타입 미지정으로 인한 이슈가 크기 때문에..

Oracle Cloud 인스턴스에 MySQL 서버 구축_3탄

2탄에서 이어지는 내용입니다. [04 방화벽 설정 ] (1) Oracle Cloud Service 외부에서 접근시 먼저 인터넷/모뎀에서 접속을 허용해주기 위해 Oracle Cloud 인스턴스의 인바운드 규칙을 설정한다. Oracle 홈페이지에 들어가서 네트워킹 - 가상 클라우드 네트워크를 클릭한다. 해당하는 VCN을 클릭한다. MySQL의 기본 포트번호는 3306이다. 그대로 사용할 것이기 때문에 3306에 대한 모든 IP(외부)의 접속을 허용한다. (2) ufw / iptables 위 설정만 하면 외부 접속에 실패할 것이다. 이번에는 운영체제의 방화벽에서 인바운드 규칙을 설정해줘야 한다. ubuntu에는 두 가지 방화벽이 있다. 가장 많이 사용하는 것은 iptables이지만 iptables의 작업을 간..

Oracle Cloud 인스턴스에 MySQL 서버 구축_2탄

1탄에서 이어지는 내용입니다. (4) SSH 접속 이제 생성한 인스턴스에 SSH로 접속하여 MySQL을 설치하고 여러 설정들을 해주면 된다. 먼저 이전에 설정한 인스턴스의 예약된 공용 IP를 확인한다. 윈도우의 경우 PowerShell이나 CMD로 접속해도 되지만 여러모로 불편하기 때문에 나는 MobaXTerm을 사용해서 SSH에 접속할 것이다. 프로그램을 실행시키고 Session - SSH를 클릭한다. host와 username, private key 파일을 선택하고 OK를 누른다. username은 OS마다 기본 계정이 다를텐데 일단 우분투는 ubuntu이다. private key는 인스턴스를 생성할 때 저장했던 개인키 파일이다. 다 정확하게 넣었다면 문제 없이 연결이 될 것이다. [03 MySQL ..

Oracle Cloud 인스턴스에 MySQL 서버 구축_1탄

[01 클라우드 프리티어 비교 ] 클라우드에 대한 개념은 저번에 AWS의 EC2에 배포하며 공부했다. 그런데 이런 클라우드 서비스는 AWS에만 있는 것이 아니다. 클라우드 회사에서는 여러가지 유형으로 맛보기 서비스 형태인 프리티어 서비스를 제공하고 있는데 크게 상시 무료와 기간제 무료 그리고 크레딧 제공 형태로 구분된다. 그 중 우리 팀은 당연히(?) 1년 무료와 상시 무료 중 선택할 생각이었고 이 블로그에 잘 나와있어서 참고했다. 결론은 평생 무료 프리티어 사용이 가능한 Oracle을 선택!!! 구체적으로는 RDS와 같은 Oracle Cloud Database는 프리티어의 경우 20기가까지밖에 사용하지 못하길래 그냥 Compute Engine(HDD지만 100기가 제공)에 DB전용 서버를 구축하는 것으..

Gitlab과 Discord Webhook 연동하기

[01 Webhook이란? ] Webhook은 하나의 앱/웹이 다른 어플리케이션으로 관련 이벤트 정보를 실시간으로 제공하기 위한 방법이라고 할 수 있다. Web Callback 또는 HTTP PUSH API로도 불린다. 원론적으로, Webhook이란 웹페이지 또는 웹앱에서 발생하는 특정 행동(이벤트)들을 커스텀 Callback으로 변환해주는 방법이다. 일반 API 요청으로 특정 앱의 데이터 및 이벤트의 실시간 상태를 알기 위해서는 짧은 주기로 반복해서 조회 API 요청을 보내 Data의 변경이나, 이벤트 발생 여부를 알아야 한다. 그러나 우리가 필요한 데이터를 가지고 있는 앱이 Webhook 서비스를 제공할 경우, Webhook 설정에 우리 서비스의 요청 Url을 등록해 놓은 뒤에, Webhook 서비스..

KakaoMap API로 "현위치 주변" 장소 검색 목록 보여주기_2탄

1탄에서 이어지는 내용입니다. [04 사용자의 현재 위치 정보 사용하기] (1) 현재 위치 가져오기 이 기능을 추가하면서 가장 애를 먹었던 부분이다. 현재 위치 정보를 가져오는 코드는 금방 찾았는데 아무리 구글링을 해도 이걸 기반으로 검색 기능을 구현한 블로그가 없었기 때문...ㅎ 블로그에 의존하던 내 실력의 한계를 느꼈다. 일단 웹에서 내 위치를 가져오는 기능은 Geolocation API를 사용하면 된다. 구글링해서 얻은 코드에 Promise 객체를 return 하도록 함수를 수정하고 KakaoMap에서 사용하는 위치 정보 객체로 변경해서 응답값에 넣어주었다. const getCurrentCoordinate = async () => { console.log("getCurrentCoordinate 함수..

KakaoMap API로 "현위치 주변" 장소 검색 목록 보여주기_1탄

01. KakaoMap API 사용 배경 포스팅 순서가 좀 바꼈지만 2차 프로젝트에 이용한 마지막 외부 API인 카카오맵 적용 과정을 기록하려 한다. 프로젝트를 진행하며 마이 페이지에 내 위치 주변 PC방 목록을 보여주고 싶었다. 따라서 "PC방"라는 키워드로 검색한 장소 목록을 출력하려고 하는데, 우리나라 지도가 필요하기 때문에 정확도를 위해 네이버 맵과 카카오 맵 중 API 설명이 보기 편한 카카오 맵 API를 선택했다. 결론적으로 말하면 원하던 기능 구현에는 성공했지만, 생각보다 시간이 오래걸렸고(중간에 다른거 하며 이틀동안 시도) 시행착오를 많이 겪었다. 그리고 결정적으로 배포 이후에는 제대로 동작하지 않았다. 이유는 보안 환경이 아니었기 때문인데 뒤에서 자세히 설명하겠다. 02. KakaoMap..

AWS EC2에 프로젝트 배포하기_2탄

1탄에서 이어지는 내용입니다. (4) pm2 설정하기 pm2는 Node.js 프로세스 관리자이다. BackEnd 서버를 무중단 배포하기 위해 이 pm2 모듈을 사용할 것이다. 먼저 pm2를 Global로 설치한다. pm2를 사용하기 전에 npm start 를 통해 문제없이 서버가 시작되는지 확인한다. 나는 또 여기서 자꾸 아래와 같은 오류가 떴는데 nodejs의 버전 문제였다. (참고) 그래서 다음과 같이 버전을 업그레이드 해줬다. nodejs -v / node -v - 현재 버전 확인 sudo npm cache clean --force sudo npm install -g n sudo n stable - n 플러그인을 이용해 버전 업그레이드 nodejs -v / node -v - 업그레이드 된 버전 확인..

AWS EC2에 프로젝트 배포하기_1탄

[01 AWS EC2란? ] EC2는 간단하게 AWS에서 제공하는 클라우드 컴퓨팅 서비스다. 쉽게 말해, 아마존으로 부터 한 대의 컴퓨터를 임대하는 것이다. 프로젝트가 끝나고 나서는 엘리스가 제공하는 VM을 더이상 사용하지 못하기 때문에 배포 서버를 옮겨야 하는데, AWS와 Heroku를 고민했었다. 구글링으로 서치해 비교해본 결과 Heroku는 배포가 쉬운 대신 느리고, AWS에 비해 인스턴스 제어(로드 밸런싱, 방화벽 설정 등)가 제한적인 것 같았다. 그리고 어쨌든 AWS를 훨씬 더 많이 쓰니까, 이번 기회에 공부해서 배포해 보기로 했다. 결론적으로는 6시간만에 배포에 성공했고, 나중에 다른 프로젝트를 배포하게 될 때를 대비해서 시행착오를 겪은 과정과 해결 과정을 남기려고 한다. [02 EC2 사용 ..

Youtube search API 사용해서 검색 목록 이용하기

[01 Youtube API ] (1) 사용하게 된 배경 프로젝트를 진행하며 메인 페이지에 게임 관련 유튜브 동영상을 보여주고 싶었다. 따라서 "게임 리뷰"라는 키워드로 검색한 동영상 목록을 출력하려고 하는데, 당연히 블로그 검색부터 했다. 대부분의 블로그는 Channels, Playlists, Videos 메소드를 사용했는데 나는 검색 기능만 필요하기 때문에 Search 메소드를 사용할 것이다. 그런데 Search 메소드 사용한 블로그대로 다 해봤는데도 안돼고 감이 안잡혀서... 공식 문서를 확인했다. 사실 그래도 모르겠어서 보류하고 뉴스 크롤링 기능부터 구현했는데 여기서 request 라이브러리를 사용한 걸로 감이 와서 해결할 수 있었다! (2) Youtube API 요청시 주의할 점 Youtube ..

express 웹서비스 프로젝트에 뉴스 크롤링 추가하기_2탄

1탄에서 이어지는 내용입니다. (2) 개발자도구에서 추출할 elements 확인하기 크롬(이나 혹은 다른 브라우저 대부분)에서 F12를 누르면 개발자모드가 활성화되고 그 중 Elements 탭에서 페이지를 구성하는 요소들을 확인할 수 있다는 사실은 이 글을 보고 있는 대부분이 알 것이다. 많은 요소들 중 필요한 데이터만을 추출하기 위해 Elements 탭 왼쪽의 선택 도구를 클릭하고 원하는 영역을 확인한다. 나는 각 뉴스(사진에서 li 태그)들의 기사 제목, 썸네일, 링크가 필요했다. 영역을 확인했으면 구분 가능한 id에서부터 시작해서 내가 필요한 태그까지 안쪽으로 타고타고 들어간다. 무슨 말이냐면 사진의 저 영역은 content라는 id 아래의 news-list라는 div 아래의 div 태그 아래의 u..