# Side Project
chrome extension으로 bitbucket stash pull-request관련 기능을 만들어보자#5
chrome extension#05 - Slack Mansion - Slack ID Token - Reviewer Setting - payload array push Reviewer - Event Binding
[2] 사전 준비(1): Youtube Data API 사용 설정
1. Youtube Data API란? 1.png Youtube의 각종 데이터를 참조하고, 또 자신의 계정이나 타인의 계정에 대하여 좋아요 누르기, 댓글 달기, 비디오 올리기 등 다양한 Youtube System과의 Interaction을 가능하게 해주는 API입니다. REST와 XML-RPC 두 가지 방식으로 운영되고 있으며, 웹페이지나 기타 다양한 ...
[1] 프로젝트 Overview
1. 프로젝트 목적 이 프로젝트는 Twitter User의 Comment를 기반으로 User Classification을 진행한 한 연구의 Replication Study를 '목표'로 합니다. '목표'라는 단어에 강조점을 둔 것은, 어디까지나 해당 프로젝트가 성공적으로 마무리될 수 있을지 의문이 들기 때문일 뿐만 아니라, 'study'라는 이름까지 붙일 정...
project 계획 : 코디 추천 서비스
목표 서비스 패션 코디 추천 서비스 기능 매일 데일리 코디를 추천해준다. 배색 조합 관련 이론을 참고해 사용자에게 상하의 배색 조합 추천 추가로 피부톤, 개인 선호, 지난 날들의 데이터 등을 고려해 종합적인 recommendation 제공 그 날의 날씨를 고려해 입을만한 옷의 종류 추천 상하의 배색 조합을 추천해 주면서 참고할 만한 관련 패션 사진들 띄...
💻 당신의 사이드 프로젝트를 위한 10가지 팁
이 글은 유튜브채널 Traversy Media의 영상 중 당신의 사이드 프로젝트를 위한 10가지 팁이라는 영상의 내용을 정리한 글입니다.
MPL 개발하면서 배운 것들
React React의 props, state 의 개념을 좀 더 확실히 이해 하게됨 React-Router로 url 별로 다른 Component 마운트 하기 React는 선언형 스타일 (결괏값에 조금 더 집중) React 가상 DOM, 실제 DOM, 이벤트 주기 React Constructor function(생성자 함수)의 역할 JavaScript 문법...
BYOM(Bring Your Own Music) 프로젝트
IMG_3940 (1).jpeg BYOM Bring Your Own Music(BYOM) 는 친구가 만든 🎉파티🎉이다. 클럽에 갔을 때 DJ가 트는 노래에 만족하지 못해서 실제로 파티에 오는 사람들이 직접 노래를 신청할 수 있으면 좋을 것 같아 만들었다고 한다. 첫 파티에서 예상 외로 많은 사람들이 함께 했고 좋은 기회로 다른 축제에 DJ로 초청되었...
🏓 socket.io와 VanilaJS를 이용한 실시간 웹 채팅 개발하기
Prerequisite Node.js socket.io v2 socket.io client v2 Express Pug 단계 Step 1. 기능 정리 Step 2. 기초 세팅 Step 3. Router 설정, Page 이동 Step 4. Controller 추가 Step 5. View 만들기 | Pug 레이아웃 적용 Step 6. Model 적용하기 |...
🏓 Step 6. Model 만들기 - Chat data MongoDB에 저장하기
db.js에서 어떤 일이 일어나고 있는 지 ? : mongodb와 연결? mongoose의 역할은 ? mongodb와 연결한 db.js를 app.js에서 import 했다. model/Chat, model/Like 에 schema를 작성했다. ChatSchema를 "Chat"으로 컴파일?하고 model은 뭐지? app.js 에서 Chat Model로 데이...
🏓 Step 6. Model 만들기 - Chat Model, Like Model , Mongoose 기초
실시간 Chat의 모델을 정하려고 한다. 몇번 써봤던 MongoDB를 사용하려고 하는데 맞는 데이터베이스인지 잘 모르겠다. 저장해야 할 것은 chat text 채팅을 보낸 username (회원 가입하고 로그인 관련) 채팅에 대한 좋아요 갯수 관련 내용 회원가입, 로그인 (User Model) Chat Model, Like Model 구현 중 잘 모르...
🏓 Step 4. Controller 추가 - Socket.io client, server 연결 문제 해결하기
socket.io 클라이언트, 서버 연결 오류를 잡아라 /socket.io/?EIO-3&trnasport 어쩌고 하는 404 오류가 뜬다. 브라우저에서 보낸 socket을 서버에서 잡지 못해서 일어나는 오류라고 하는거 같은데 어디에서 문제가 생기는지 모르겠다. 추측 app.listen, app = express(), init.js에서 app을 import...
[Todo List] 3. Todo list 수정하기
Todolist item을 수정하기 사용자는 리스트를 더블클릭해서 내용 수정하고 싶음! 아래의 과정은 더블클릭해서 해당 리스트가 input 태그로 바뀌고 input 값에 리스트의 내용이 value로 나타나기까지의 과정이다. MVC 패턴에서 Controller는 Model과 View를 조작하는 역할을 한다. 1) Controller.js | this.vi...
[Todo List] 2. Todo list에서의 MVC 아키텍쳐 역할
2. Todo list에서의 MVC 아키텍쳐 역할 > MVC 는 Model-View-Controller로 각각의 역할을 나누어 작업하고자 하는 일을 분담 시키는 것을 말한다. - Model은 어플리케이션 로직을 담당하는 부분으로 Database나 Legacy System 과의 로직을 담당하는 부분을 말하며 어플리케이션으로 부터 UI가 분리된다. View는...
[Todo List] 1. Vanila JS를 이용한 기본 Todo list 구현
React 라이브러리를 사용한 토이 프로젝트를 몇번 시도했었지만 JavaScript의 문법과 객체 지향 프로그래밍, MVC 패턴 등의 내용들을 제대로 알고 있지 못했어서 일정 수준 이상으로 구현을 할 수도 없었고 이해가 안가는 부분도 많았다. 다시 순수 JS만을 이용하여 Todolist를 만들어봄으로써 MVC 패턴은 무엇인지, JS의 prototype은 어...
🏓 socket.io와 VanilaJS를 이용한 실시간 웹 채팅 개발 계획
목표 : 가장 기본적인 웹앱, 객체 지향 코드, 서버랑 클라이언트 파일 구조 구분되게 나눠짐, 언제나 돌아가는 채팅 express 서버 기초 세팅, 라우터, 템플릿 화면 MongoDB 연결, 모델 정의 GIPHY API 로 검색, 원하는 GIF 화면에 표시 MVC 패턴으로 코드 수정하기 자바스크립트 모듈화하기 ,객체 지향 코드 MongoDB 사용, Us...