thumbnail

MPL 개발하면서 배운 것들

React - React의 props, state 의 개념을 좀 더 확실히 이해 하게됨 - React-Router로 url 별로 다른 Component 마운트 하기 - React는 선언형 스타일 (결괏값에 조금 더 집중) - React 가상 DOM, 실제 DOM, 이...

2019년 4월 30일2개의 댓글

BYOM(Bring Your Own Music) 프로젝트

IMG_3940 (1).jpeg BYOM Bring Your Own Music(BYOM) 는 친구가 만든 🎉파티🎉이다. 클럽에 갔을 때 DJ가 트는 노래에 만족하지 못해서 실제로 파티에 오는 사람들이 직접 노래를 신청할 수 있으면 좋을 것 같아 만들었다고 한다...

2019년 4월 12일1개의 댓글

🏓 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. Con...

2019년 4월 4일0개의 댓글

🏓 Step 6. Model 만들기 - Chat data MongoDB에 저장하기

db.js에서 어떤 일이 일어나고 있는 지 ? : mongodb와 연결? mongoose의 역할은 ? - mongodb와 연결한 db.js를 app.js에서 import 했다. - model/Chat, model/Like 에 schema를 작성했다. 하니 Chat...

2019년 4월 2일0개의 댓글

🏓 Step 6. Model 만들기 - Chat Model, Like Model , Mongoose 기초

실시간 Chat의 모델을 정하려고 한다. 몇번 써봤던 MongoDB를 사용하려고 하는데 맞는 데이터베이스인지 잘 모르겠다. 저장해야 할 것은 - chat text - 채팅을 보낸 username (회원 가입하고 로그인 관련) - 채팅에 대한 좋아요 갯수 관련...

2019년 3월 28일0개의 댓글

🏓 Step 4. Controller 추가 - Socket.io client, server 연결 문제 해결하기

socket.io 클라이언트, 서버 연결 오류를 잡아라 /socket.io/?EIO-3&trnasport 어쩌고 하는 404 오류가 뜬다. 브라우저에서 보낸 socket을 서버에서 잡지 못해서 일어나는 오류라고 하는거 같은데 어디에서 문제가 생기는지 모르겠다. 추...

2019년 3월 26일0개의 댓글

[Todo List] 3. Todo list 수정하기

Todolist item을 수정하기 사용자는 리스트를 더블클릭해서 내용 수정하고 싶음! 아래의 과정은 더블클릭해서 해당 리스트가 input 태그로 바뀌고 input 값에 리스트의 내용이 value로 나타나기까지의 과정이다. MVC 패턴에서 Controller는 M...

2019년 2월 15일0개의 댓글

[Todo List] 2. Todo list에서의 MVC 아키텍쳐 역할

2. Todo list에서의 MVC 아키텍쳐 역할 MVC 는 Model-View-Controller로 각각의 역할을 나누어 작업하고자 하는 일을 분담 시키는 것을 말한다. - Model은 어플리케이션 로직을 담당하는 부분으로 Database나 Legacy Syste...

2019년 2월 3일0개의 댓글

[Todo List] 1. Vanila JS를 이용한 기본 Todo list 구현

React 라이브러리를 사용한 토이 프로젝트를 몇번 시도했었지만 JavaScript의 문법과 객체 지향 프로그래밍, MVC 패턴 등의 내용들을 제대로 알고 있지 못했어서 일정 수준 이상으로 구현을 할 수도 없었고 이해가 안가는 부분도 많았다. 다시 순수 JS만을 이...

2019년 2월 2일0개의 댓글

🏓 socket.io와 VanilaJS를 이용한 실시간 웹 채팅 개발 계획

목표 : 가장 기본적인 웹앱, 객체 지향 코드, 서버랑 클라이언트 파일 구조 구분되게 나눠짐, 언제나 돌아가는 채팅 1. express 서버 기초 세팅, 라우터, 템플릿 화면 2. MongoDB 연결, 모델 정의 GIPHY API 로 검색, 원하는 GIF 화면에...

2019년 1월 22일0개의 댓글