Web/JavaScript
-
flex && Array로 slide만들기(2)Web/JavaScript 2020. 1. 29. 04:07
☺️ 이전 글 flex && Array로 slide만들기(1) 내가 만든 슬라이드 : * .view-ver와 사진후보 array는 grid로 구분되어 있다. 사진 후보들인 .best-scene이 Array로 아래에 깔려 있고 사용자가 그 중 하나를 클릭(onclick)하면 해당 .best-scene의 background-.. humonnom.tistory.com html과 css 설정은 이전 글에서 다뤘고 이번 글에서는 js 설정만 다룬다. (1) div.viewVer의 현재 background-image를 구한다. (2) 현재 background-image 가 array에서 몇 번째 인지 확인하고 거기서 -1 해서 그 사진이 div.viewVer의 new background-image 가 되도록 한다...
-
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
-
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..
-
사진으로 슬라이드 만들기Web/JavaScript 2019. 12. 17. 22:13
사진영역을 left, right로 나누어서 각각을 클릭하면 -1, +1이 되도록 설정하면 사진이 넘어가는 효과를 줄 수 있다. 그런데 이번에 그렇게 해서 만든 웹사이트를 휴대폰으로 열어보니 휴대폰에서는 손으로 미는 식의 슬라이드가 훨씬 편하다. 손으로 미는 슬라이드를 만들어봐야겠다. ⇩ Heroku로 배포했다. https://blooming-cliffs-54117.herokuapp.com/ Hyeonjin Kim | Portfolio blooming-cliffs-54117.herokuapp.com 로딩 시간이 10초 정도 걸리고, 도메인을 정할 수 없다는 것을 빼면 간편하고 좋다. 추후에 도메인을 구매하면 연결 할 수 있는 듯하다.
-
Babel: JavaScript compilerWeb/JavaScript 2019. 11. 27. 15:58
#️⃣Modern JavaScript code를 browser-compatible JavaScript로 변환해준다. #️⃣설치하는 방법 ➡️Terminal 입력 npm install @babel/node ➡️Presets에서 원하는 stage를 고른다. stage-0: 가장 실험적인 수준 stage-3: 브라우저에게 일정 부분만 받아들여짐 env: 가장 최신 ➡️Terminal 입력 npm install @babel/preset-env ➡️.babelrc 파일 생성, 아래 코드 입력 { "presets":["@babel/preset-env"] } ➡️pakage.json의 'scripts'부분 변경 "scripts": { "start": "babel-node index.js" } ➡️Terminal 입력..