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

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

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

db.js에서 어떤 일이 일어나고 있는 지 ? : mongodb와 연결? mongoose의 역할은 ? - mongodb와 연결한 db.js를 app.js에서 import 했다. - model/Chat, model/Like 에 schema를 작성했다. 하니 Chat 모델의 chats document들을 가져와서 chats로 전달해 주었다. 위의 X 와 ...

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

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

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

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

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

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