Web
-
Babel installWeb/ES6 2020. 1. 7. 16:37
✍︎ Babel은 모던한 Java Script를 computer가 알아들을 수 있는 old version으로 변환시켜준다. ✍︎ Terminal ➜ npm install @babel/node ➜ npm install @babel/preset-env ➜ npm install @babel/core ✍︎ .babelrc 파일 생성, 다운받은 버전을 써줘야한다. { "presets": ["@babel/preset-env"] } ✍︎ package.json edit 스크립트에 babel을 추가해준다. babel이 코드를 변환하고 나면 node.js가 app.js를 실행시킨다. "scripts": { "start": "babel-node app.js" } ✍︎ app.js 수정(ES6문법 사용가능) 이제 const..
-
Express JS(Routing)Web/Express 2020. 1. 5. 18:40
✍︎ app.js에 작성(routing) express routing에서 복사 붙여넣기(var를 const로 바꿨다. app.listen도 추가해준다.) const express = require("express"); const app = express(); app.listen(4000); npm start하면 보이는 것: Cannot GET / ✍︎ app.js 수정(Edit) const express = require("express"); const app = express(); const PORT = 4000; const handleListening = () => { console.log(`🐬 Listening on: http://localhost:${PORT}`); }; app.listen(POR..
-
iterm으로 프로젝트 생성Web/nodeJS 2020. 1. 5. 17:55
1. 먼저 document에 으로 폴더를 하나 만든다. 2. iterm ➜ brew install (home brew 설치, 설치 되어있으면 다음으로) ➜ node -v (node version확인) ➜ brew upgrade node (최신버전 업그레이드) ➜ node.js 설치 ➜ mkdir wetube-ver2.0 make directory + ➜ cd wetube-ver2.0 cd + (해당 디렉토리로 이동) ➜ code . (VSC로 이동) 3. VSC ➜ npm init (package.json 생성) ➜ npm i express (node-modules 생성) ✍︎ package.json "scripts": { "start": "node app.js" }, ✍︎ app.js 생성 const ..
-
사진으로 슬라이드 만들기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초 정도 걸리고, 도메인을 정할 수 없다는 것을 빼면 간편하고 좋다. 추후에 도메인을 구매하면 연결 할 수 있는 듯하다.
-
Error in webpackWeb/webpack 2019. 12. 9. 22:58
I had a problem with webpack. I successfully translated scss into css, it works. But there was tiny problem with file's name. I expect.. ➜ wetube/static/styles.css ➜ wetube/static/main.js But I got.. ➜ wetube/static/main.css ➜ wetube/static/main.js So I googled this problem, I changed some part of webpack.config.js. ➜Before: plugins: [ new MiniCssExtractPlugin({ moduleFilename: ({ name }) => `${..
-
Express Middleware: Morgan, Helmet, Body parser, Cookie parser...Web/Express 2019. 11. 27. 16:58
app.get("/", between, handlehome) : 누군가 home("/")으로 접속하면, "between"이라는 과정을 거쳐서 "handlehome" 함수를 실행해라. ✍︎ Middleware : 요청오브젝트 req 와 응답오브젝트 res 중간에 낀 함수 Express는 미들웨어 웹 프레임워크, 양파같이 수 많은 middleware로 이루어졌다고 생각하면 쉽다. -미들웨어로 파일을 가로챌 수도 있고 회원가입 여부 확인, 연결 종료 등 많은 기능 있음. ➜ Morgan: Logging에 도움을 주는 Middleware ➜ Logging : 무슨일이 어디서 일어났는지를 기록하는 것. ➜ Helmet: node.js의 보안에 도움을 주는 Middleware ➜ Body parser: 요청의 본문..
-
nodemonWeb/nodeJS 2019. 11. 27. 16:24
#️⃣node.js 소스 수정시 자동으로 서버 재시작해줌. #️⃣설치 ➡️Terminal 입력 npm install nodemon -D -D (for the dev.) : 프로젝트에 필요한 프로그램이 아니라 개발자에게 필요한 프로그램이므로 package.json 파일에서 'dependencies'가 아니라 'devDependencies'파일에 들어가도록 하는 것. ➡️package.json 수정 "scripts": { "start": "nodemon --exec babel-node index.js --delay 2" }, --exec : 찾은 파일들을 대상으로 뒤에 나오는 명령어를 실행하라는 의미. --delay 2 : 2초 기다렸다가 sever재시작 출처: https://webdir.tistory.co..