Web
-
flex && Array로 slide만들기(1)Web/JavaScript 2020. 1. 29. 03:18
(1) 내가 만든 사진 슬라이드 사용자가 작은 사진들 중에 하나를 선택하면, 그 이미지가 큰 화면(div)의 배경화면으로 채택되어 사용자가 사진을 크게 볼 수 있는 작동방식이다. ⇩ 추가 설명 더보기 * 작은 사진들( .best-scene)이 Array로 아래에 깔려 있다. * .view-ver와 작은 사진 array는 grid로 구분되어 있는 상태 *사용자가 작은 사진 중 하나를 클릭(onclick)하면 작은 사진의 background-image가 .veiw-ver의 background-image가 되어 사용자가 사진을 크게 볼 수 있는 구조. (2) 계획 사용자가 큰 사진(viewVer)의 왼쪽의 50% 너비 영역을 누르면 현재 선택된 사진의 왼쪽 사진을, 오른쪽을 누르면 현재 선택된 사진의 오른쪽 ..
-
Miranda Card Game: 완성Web/JavaScript 2020. 1. 26. 17:12
Javascript 연습 겸 해서 미란다 팬사이트를 만들었다. Home, Game, Music, Best Scene 이렇게 네 가지 페이지가 있는데 🏁먼저 게임 시작할 때 카드 뒷면에 뭐가 있는지 보여준다. 🏁뒤집고 있는 모습 🏁끝나면 몇 초 걸렸는지 알려주고 한 번더 할꺼냐고 묻는 창이 뜬다. ⇩ 배포 완료된 사이트 https://sheltered-taiga-41228.herokuapp.com/ Wheres Miranda? | Where's Miranda sheltered-taiga-41228.herokuapp.com 🕹github: https://github.com/humonnom/wheres-miranda.git
-
"NPM error" after installing "yarn"Web/nodeJS 2020. 1. 19. 00:17
I've been used the "npm" only, but I heard the "yarn" is more convenient. So I installed "yarn", to try it in my new node project. "yarn" was 👍, but suddenly "npm" didn't work. zsh gave me an error "zsh: command not found: npm" To solve this problem, I start googgling based on the error message. I found few solutions like "Change the zsh setting," "Change the PATH," and so on. But those didn’t w..
-
Socket.ioWeb/nodeJS 2020. 1. 7. 19:21
✍︎ Install ➜ npm i socket.io ✍︎ Import (Entry file) import socketIO from "socket.io"; ✍︎ Back end Js file & Front end Js file 모두 html/pug에 연결되어 있어야 한다. Socket은 페이지가 없고 연결만 있다. 이벤트를 가지고 있는데 이벤트는 어떤 것이든 될 수 있다. 서버, 클라이언트와 유저는 서로 이벤트를 보내고 받을 수 있다. 양방향통신 Socket은 항상 Server의 움직임을 듣고 있다. Server가 꺼지면 계속해서 연결을 시도한다. 실시간통신 Socket have IDs. User마다 ID를 부여하여 구분한다. 백엔드에서 ("hello")이벤트를 emit(발생)시키고, 프론트엔드에서 그 내..
-
Realtime Drawing Game 만들기 - Guess my mindWeb/nodeJS 2020. 1. 7. 18:58
(1) forder >node_moduels >src >static index.js >views server.js //Entry file home.pug .babelrc .gitignore package.json README.md (2) 초기 설정 Wetube clone coding 할 때랑 거의 같다. middleware(morgan) 까지 다 똑같이 설정했다. https://humonnom.tistory.com/35 Nomad coders - wetube clone coding humonnom.tistory.com (3) Server(server.js) import express from "express"; const PORT = 4000; const app = express(); app.get("/..
-
ESLIntWeb/JavaScript 2020. 1. 7. 18:41
✍︎설치 ➜ npm install eslint-plugin-prettier -D ➜ npm install eslint-config-prettier -D ➜ npm install prettier -D ➜ npm i eslint-config-airbnb-base -D ✍︎ .eslintrc.js 생성, 작성 module.exports = { rules: { "no-console": "off" }, env: { browser: true, es6: true, node: true }, extends: ["airbnb-base", "plugin:prettier/recommended"], globals: { Atomics: "readonly", SharedArrayBuffer: "readonly" }, parserO..
-
Nomad coders - wetube clone codingWeb/JavaScript 2020. 1. 7. 17:09
(1) 프로젝트 생성 ⚑ brew로 node upgrade ⚑ iterm으로 프로젝트 생성 ⚑ express.js 프로젝트 시작하기 Express JS : Web framework for Node.js https://humonnom.tistory.com/30 iterm으로 프로젝트 생성 humonnom.tistory.com (2) git에 올리기 https://humonnom.tistory.com/31 내 프로젝트 git에 올리기(use terminal) humonnom.tistory.com (3) Express JS(Routing) https://humonnom.tistory.com/32 Express JS(Routing) humonnom.tistory.com (4) Babel install https..
-
Nodemon 설치Web/nodeJS 2020. 1. 7. 16:44
✍︎ Nodemon: 저장할 때마다 서버를 재시작해준다. ✍︎ 개발자에게 필요한 프로그램 (for developer) -D를 붙여서 설치한다. ➜ npm install nodemon -D ✍︎ package.json 수정 (scripts) "scripts": { "start": "nodemon --exec babel-node app.js" } *--exec: "실행하라"는 뜻, 검색어를 제한하기 위해서 쓴다. 발견된 경로 이름에 일종의 조치를 취함. *app.js: entry file *--delay 2: 2초 기다렸다가 restart한다.