본문 바로가기

Project

Side Project 2018. 10. 16. [PROJECT] jQuery-UI를 이용한 Trello clone project (4) Trello 웹 스크립트 작성 [PROJECT] jQuery-UI를 이용한 Trello clone project (4) Trello 웹 스크립트 작성 jQuery-UI를 이용한 Trello clone project (4) - 웹 스크립트 작성 지난 시간에 스타일을 입혀서 UI 작업을 마무리 했다. 이번 시간에는 수정이나 추가등에 필요한 스크립트를 작성해 보자. 스크립트 작성 지난 시간에 기능을 명세했던 사진이 있었다. 순서대로 기능을 구현해 보자 project name 관련 스크립트 우선 프로젝트 네임을 더블 클릭 하면 수정할 수 있는 폼이 나온다. 그리고 수정을 다하고 enter 를 누르면 프로젝트 네임이 변경 된다. $(document).ready(function () { var pjTitle = $("#title"); var p..
Side Project 2018. 10. 16. [PROJECT] jQuery-UI를 이용한 Trello clone project (3) Trello 웹 스타일 입히기 [PROJECT] jQuery-UI를 이용한 Trello clone project (3) Trello 웹 스타일 입히기 jQuery-UI를 이용한 Trello clone project (3) - 웹 스타일 입히기 지난 시간에 Trello 클론 프로젝트의 html 업을 작성해 보았다. 오늘은 퍼블리싱의 꽃인 스타일 입히기를 해보자. Style 입히기 이번에는 scss 를 사용한다. 하지만 내가 scss 를 잘 모르고 사용한 것을 프로젝트를 완성한 다음에야 깨달았다. 그래서 물론 사용은 해보겠지만 이번 프로젝트와 같이 사용하는 것은 추천하지 않는다. 다음 프로젝트에서는 좀더 체계적으로 사용하는 모습을 보여주겠다. 자 그럼 스타일을 입혀보자. 저번 첫 차시에서 sass --watch scss/style.scs..
Side Project 2018. 10. 11. [PROJECT] jQuery-UI를 이용한 Trello clone project (2) - 웹 마크업 작성 [PROJECT] jQuery-UI를 이용한 Trello clone project (2) Trello 웹 퍼블리싱 jQuery-UI를 이용한 Trello clone project (2) - 웹 마크업 작성 지난 시간에 설계와 기획을 했다. 오늘은 지난번에 나온 디자인을 가지고 마크업을 작성해보자. mark up 작성 정말 심플하게 갈 것 이다. 기존 Trello 는 수정같은 것을 할때는 수정 버튼을 누르고 카드의 상세 보기 모달을 띄우는 일과 같은 복잡한 동작은 모두 없애고 jQuery UI 를 이용해 아주 간단하게 작성해보겠다. 아래 그림은 기능을 명세한 것이다. 전체 코드 PAPICO Trello Project test list test test1 test2 test3 + Add another car..
Side Project 2018. 10. 8. [PROJECT] jQuery-UI를 이용한 Trello clone project (1) - 설계 및 기획 [PROJECT] jQuery-UI를 이용한 Trello clone project (1) 설계 및 기획 jQuery-UI를 이용한 Trello clone project (1) - 설계 및 기획 jQuery-UI 를 이용하여 Trello를 만들어 보자. 기본적으로 준비해야 할 것 jQuery-UI 선행 학습 이번에 사용할 옵션들을 지난 시간에 정리해 두었다. https://pa-pico.tistory.com/12 프로젝트 셋팅 clone_trello |- index.html |- css ||- style.css | |- scss ||- style.scss | |- js |- jquery-ui.min.js |- jquery-3.3.1.min.js |- script.js scss 사용 설치 방법은 다른 블로그..
Side Project 2018. 9. 28. [PROJECT] Socket.io 를 이용한 채팅 어플리케이션 (9) - 마무리 [PROJECT] Socket.io 채팅 애플리케이션 (9) - 마무리 Socket.io 채팅 애플리케이션 (9) - 마무리 지난 시간에 지난 시간까지 채팅 어플리케이션을 구현해 보았다. 이번 시간에는 앞으로 개선할 점을 생각해보자. 끝 (개선할 점) 나의 첫 블로그 포스팅이 끝났다. 앞으로도 내가 한 토이플젝을 많이 올리고 싶다. 개선할 점 Datebase 연결 새로고침했을 때 나가짐 (세션 구현) 채팅 기록 (db 연결하면 해결 가능) 채팅방 만들기 (이것 또한 db 로 해결 가능) 앞으로 개선해야 할 점은 여러분의 몫이다. 만약 지금까진 했던 코드들을 잘 이해했다면 구현할 수 있을 것이다. 더 개선해야 할 점이 있다면 댓글로 적어주세요...... 다음 시간에 이번 차시가 마지막.
Side Project 2018. 9. 28. [PROJECT] Socket.io 를 이용한 채팅 애플리케이션 (8) - 채팅 기능 구현 (들어갔으니 채팅을 치자 - 클라이언트) [PROJECT] Socket.io 채팅 어플리케이션 (8) - 채팅 기능 구현 (채팅치기 - 클라이언트) Socket.io 채팅 애플리케이션 (8) - 채팅 기능 구현 (들어갔으니 채팅을 치자 - 클라이언트) 지난 시간에 지난 시간에는 채팅을 치는 서버측 코드를 작성해 보았다. 이번 차시에서는 채팅방에 들어갔으니 채팅을 치자의 클라이언트 코드를 작성해보자. 클라이언트측 구현 지난 시간에 채팅을 치는 플로우를 기억해보자. (c) chatForm 으로 입력받은 값을 서버로 보낸다. send message 이벤트 발생 (s) send message 이벤트 발생 시 이벤트를 발생시킨 소켓의 socket.id와 roomId 를 가져와 new message 이벤트 발생 (c) new message 이벤트 발생 시..
Side Project 2018. 9. 28. [PROJECT] Socket.io 를 이용한 채팅 애플리케이션 (7) - 채팅 기능 구현 (들어갔으니 채팅을 치자 - 서버) [PROJECT] Socket.io 채팅 어플리케이션 (7) - 채팅 기능 구현 (채팅치기 - 서버) Socket.io 채팅 애플리케이션 (7) - 채팅 기능 구현 (들어갔으니 채팅을 치자 - 서버) 지난 시간에 지난 시간에는 채팅방 접속 관련 서버 / 클라이언트 기능을 구현했다. 채팅방에 들어가보자 (server / client) 들어갔으니 채팅을 치자 (server / client) 거의 다했으니 마무리를 하자 그러면 이번 차시에서는 채팅방에 들어갔으니 채팅을 치자. 서버측 구현 이번에도 클라이언트와 서버의 플로우를 나누어 생각해보겠다 (c) chatForm 으로 입력받은 값을 서버로 보낸다. send message 이벤트 발생 (s) send message 이벤트 발생 시 이벤트를 발생시킨 소켓의 ..
Side Project 2018. 9. 28. [PROJECT] Socket.io 를 이용한 채팅 애플리케이션 (6) - 채팅 기능 구현 (채팅방에 들어가보자 - 클라이언트) [PROJECT] Socket.io 채팅 애플리케이션 (6) - 채팅 기능 구현 (채팅방에 들어가기 - 클라이언트) Socket.io 채팅 애플리케이션 (6) - 채팅 기능 구현 (채팅방에 들어가보자 - 클라이언트) 지난 시간에 지난 시간에는 채팅방에 들어가는 기능중에서 서버측 코드를 작성해 보았다. 이번 차시에서는 클라이언트 측에서 채팅방에 들어가보자. 클라이언트측 구현 지난 시간에 채팅방에 들어가는 플로우를 기억해보자. (c) 채팅방 목록중에 아무거나 클릭하면 join room 이벤트 발생 (s) join room 이벤트 발생시 기존에 있던 방에서 나가고 새로운 방에 입장 socket.join() (s) 이제 방에 새로운 멤버가 들어왔으니 member list 업데이트 이벤트 발생 userlist (..

티스토리툴바