Project Log Express 라우터에 async/await 프론트에서 유튜브 비디오 아이디가 넘어오면 백에서 진행되는 단계는 다음과 같다. 1. 비디오 아이디로 API 요청 후 댓글 가져오기 2. 특수문자, ㅠㅠ, ㅋㅋ, ㅎㅎ와 같은 한글, 숫자, 한글 이외의 언어 공백으로 변환 3. 문장에서 단어만 추출하기 4. 최다빈도 단어 추출하기 이 네 가지 단계를 각 함수로 분리하고, 순서대로 진행할 수 있도록 async/await 구문을 이용해 프라미스를 return 하도록 만들어 주었다. 그리고 라우터에 요청이 들어오면 저 네가지 함수를 다시 await을 사용해서 순서대로 진행되게 만들어줘야 한다. 그러기 위해서는 라우터 함수에 async를 다는 게 필요했는데, 예를 들면 아래와 같이 단순 무식하게 router함수에 달아보았더니 모양새가 뭔가 안 익숙하기도 하고 이.. 더보기 Google Cloud Platform - App Engine으로 배포하기? [2] 정말 한 틱만 건드려주면 될 것 같아서 또 포기 못하고 찾기 시작했다. 문제가 됐던 라이브러리(라이브러리 자체 문제X) 깃허브 저장소에 동일한 내용의 이슈가 올라와있었다. 이분은 heroku로 배포를 하셨는데 heroku도 gcp 앱 엔진과 마찬가지로 bash로 추가 설치하는 것이 불가능하셨다고 한다. 그래서 아래와 같이 npm script를 추가하셔서 실행시켰는데 다행히도 관련한 코드 디렉토리가 생겨났다고... 나도 postinstall은 아니지만 install 스크립트를 사용해서 했었는데 안됐었다. 하지만 혹시나 싶어서 postinstall로 수정후 다시 한 번 배포 진행했으나 동일한 오류로 실패했다. {"postinstall": "node_modules/mecab-ya/bin/install-meca.. 더보기 Google Cloud Platform - App Engine으로 배포하기? GCP App Engine이라는 서비스를 이용하면 아주 간편하게 서버를 배포할 수 있다고 해서 사용하기로 했다. 지난번 API 사용할 때 무료 평가판을 1년 동안 사용할 수 있게 되어서, 사용할 수 있을 때 알차게 사용하고 싶기도 하고 한번 써보고 싶었다. 이제 배포만하면 끝이다! 하고 패기롭게 시작했다가 고통받고 있다. 일단, 배포 과정은 소스를 스토리지에 올리면 package.json을 기준으로 의존하고 있는 package를 다운로드하여 배포하는 식으로 이루어진다. 그런데 문제는, 내가 사용하고 있는 형태소 분석 라이브러리인 mecab-ya라이브러리는 npm install을 통해 다운로드한 후, 다시 bash script를 이용해서 필요한 모듈과 파일들을 다시 다운로드하여줘야 한다. 그런데 gcp는 .. 더보기 삽질의 날 - redux-thunk, async/await, 유튜브 댓글 API 와 오늘 진짜 삽질의 날이라고 불러도 과장이 아닐 정도로 연속으로 다른 삽질만 하루 종일 했다. redux-thunk 먼저 프론트는 거의 다 완성돼서 백으로 API요청만 보낼 수 있도록 하면 돼서 redux-thunk를 사용해서 비동기 요청을 처리하도록 했다. 백에서 API요청을 받는 것 까지는 확인 했는데, 요청의 loading/success/error 상태가 전혀 처리되지 않는 것이다. 즉, promise로 형태로 작동하지 않고 요청한 순수 액션에 대한 처리만 작동하고, 심지어 redux-logger도 작동하지 않았다. 아니 대체 왜지? 하면서 미들웨어 잘못 넣었나 하면서 몇 번 바꾸고 이상한 곳만 수정하면서 한두 시간 삽질하다가 이번에도 갓갓 stackoverflow를 뒤적거려보니 비슷한 이유로 l.. 더보기 CommentTeller 프로젝트 소개글 🤖 Comment Teller 유튜브 비디오의 댓글 중 가장 많이 나온 단어들을 워드클라우드로 보여줍니다! 비디오 주소는 예시와 동일하게 작성해주셔야 검색할 수 있습니다. 한글 이외의 언어는 처리하지 않습니다.(이모티콘, 숫자, 특수문자 ㅠㅠ, ㅋㅋ, ㅎㅎ 등 포함) 댓글에서 추출된 명사 중 최다 빈도의 단어 100개만 워드 클라우드로 생성됩니다. 기술 스택 Client JS React React-redux Redux-thunk SCSS Server Node.js Express mecab-ya / mecab ko(형태소분석 라이브러리) Youtube API 더보기 프로젝트 후기라고 쓰고 그냥 주저리라고 읽는다. 👉 https://anyweatherplaylist.netlify.com ✨ 동기 루미 서울만 만들다가 너무 지겹기도하고 혼자만들기엔 너무 큰 프로젝트를 시작한 것 같아 도저히 끝날 기미가 안보여서 리프레시 할겸 평소에 만들어 볼까 했던 웹사이트를 만들기로 했다. 기본 컨셉은 사용자의 위치를 가져와서 날짜/온도를 찾은 다음에, 이에 맞는 플레이리스트를 재생시켜주는 웹사이트이다. 평소에 날씨에 따라 기분이 쉽게 좌우되는 편이라, 날씨마다 듣는 플레이리스트가 있는데 좋은 건 나누는 마음(?)으로 프로젝트를 시작하게 되었다. 백엔드는 전혀 만들 필요가 없고, 필요한 정보는 API로 받아오면 되기 때문에 오직 프론트만 신경쓰면 돼서 시작할 때 마음이 한결 가볍고 편했다. 만약에 백엔드도 만들었다면, 내 플레이리.. 더보기 AnyWeatherPlaylist 프로젝트 소개글 ⛅ AnyWeatherPlaylist wherever you are, this playlist would be perfect for today's weather! 당신이 어느곳에 있든, 오늘의 날씨에 맞는 soundcloud playlist를 재생시켜줍니다! 본 프로젝트는 사용자의 위치에 따라 날씨 / 온도 가져와 이에 알맞는 soundcloud playlist를 재생시켜 줍니다. 플레이리스트는 개발자의 지극히 개인적인 취향으로 구성되어있으며, 개발자가 날씨에 따라 자주듣는 플레이리스트로 구성되었습니다. 🌓 보통의 날: https://soundcloud.com/hyein-ju-65785883/sets/meh-day . ☀️ 해가 쨍쨍한 날: https://soundcloud.com/hyein-ju-657.. 더보기 RESTful API를 구현하고자 하는 노오력 REST란 Representational State Transfer의 약자로, 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 구체적으로 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)를 명시하고 HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다. 나도 이에 맞춰서 RESTful API를 구현하려고 하다보니 애매한 경우가 발생했다. 자원기준으로 URI를 표현하려다보니 자원보다는 액션에 가까운 URI는 어떻게 표현해야하나 라는 고민이 들었다. 예를 들면, 로그인, 회원가입, 로그아웃 같은 경우 아래와 같이 구성했다. .. 더보기 [front-end] 비동기 요청 처리하기 - redux-promise-middleware redux-thunk를 쓰다가 더 편하게 쓰기 위해 redux-promise-middleware를 추가해서 사용하기로 하였다. 기존의 suffix를 더 간단하게 LOADING, SUCCESS, FAILURE로 변경해서 쓰려고 하니 middleware is not a function 이라는 error가 계속 떴다. 혹시나 싶어서 store에 걸려있는 middleware들을 한개씩 지워가며 어디에서 발생하는 것인지 테스트해보았다. (...) import { createLogger } from 'redux-logger'; import { default as ReduxThunk } from 'redux-thunk'; import promiseMiddleware from 'redux-promise-middlewa.. 더보기 [back-end] Node.js - express로 구조잡기 백엔드는 Node.js로 구성하기로 하고, 프레임워크는 express를 사용하기로 하였다. express-generator를 이용해서 간단하게 구성할 수도 있지만 공부할겸해서 express만 이용해서 하나씩 채워나가는 방식으로 구성하였다. DB는 몽고를 쓸까 MySQL을 쓸까 고민했었는데, 이전에 잠깐 궁금해서 몽고를 써봤을때 RDB에 비해 편하긴하지만 결국에는 RDB처럼 쓰기 위해 뭔가 추가적인 작업을 더 해주는 것이 그냥 애초에 RDB를 쓰는 게 낫겠다 라고 생각했었다. 그리고 유저와 유저가 올린 글, 유저가 좋아요를 누른 글 등의 어쨌든간에 데이터를 JOIN해서 사용할 경우도 많을 것 같아 MySQL을 사용하기로 하였다. DB 작업 시 직접 쿼리문을 만들어서 사용해도 되지만, JS로 편하게 작업하기.. 더보기 이전 1 2 3 다음