Develop Dairy/JavaScript, React 29

nodemon package in NodeJS

nodemon은 우리가 코드를 저장할때마다 서버가 자동으로 재시작 될 수 있게 해주는 package다 프로젝트 구동에 필요한 패키지가 아니기 때문에 dependency와 별개로 설치하려한다.dependency에 써있는 것들은 프로젝트가 실행될때 필요한 패키지들이다. 설치방법은 다음과같다.그다음 package.json가서 고쳐주자 서버를 재시작해보면 2번이 되는걸 알 수 있는데 nodemon이 왜그러냐면 저장하면 재시작하고나서 Babel이 코드의 변화를 감지하고 서버를 재시작 하기 때문에--delay 2를 추가해준다.저장할 때마다 2초를 기다렸다가 서버를 시작하는데 이렇게하면 Babel이 변화할때까지 기다려 줄 수 있다. "scripts": { "start": "nodemon --exec babel-nod..

Arrow function (ES6 Extension)

훨씬 보기좋은 ES6 문법 arrow functionconst handleListening = function handleListening(req,res){ console.log(`Listening on: http://localhost:${PORT}`);} const handleHome = function handleHome(req, res){ console.log(req); res.send("Hello from home");} ↓로 바꿀 수 있다. const handleListening = (req, res) => console.log(`Listening on: http://localhost:${PORT}`); const handleHome = (req, res) => { console.log(req)..

Use Babel in nodeJS

바벨이란? 최신의 Javascript코드를 예전의 Javascript코드로 변환해준다. 아래와같이 babel 3가지항목을 인스톨 해주자npm install @babel/corenpm install @babel/nodenpm install @babel/preset-env 설치항목에 대해서 참고할 수 있는 Documents들babel/preset-env 문서stage-0 문서 설치후.babelrc를 만들어준다 .babelrc에는 node.js와 js와 관련된 필요한 것들을 집어넣을예정이고 Babel이 실행되기 전에 이 파일을 찾아보고 설정해둔 preset을 읽고 이해하게된다. 즉 preset에 따라 코드가 변환된다. 마지막으로 이렇게 바꿔주자 기본 node index.js > babel-node index...

Handling Express

Express Server를 다루기위한 기초 이해 request, response 브라우저는 GET method를 실행해 브라우저가 페이지를 읽어온다. 서버가 응답하게 어떤 사람이 URL로 접근(GET)할때 응답하게 하려고한다. 서버가 하는 일은 응답하는것인데 하나는 request object 하나는 response object이다. (나머지 하나는 callback) 위에서 res.send("You are on my profile");코드를 쓰는데. 완전한 웹사이트를 만들기위해서는 sned안의 구문대신 완전한 HTML, CSS파일을 send해줘야 한다. 서버를 생성하고 route를 생성하고 응답하고 express와 node,js로는 단20줄이면 할 수 있다는 매력이 있음을 알아두자.

Start Express Sever

나만의 서버를 가져보기! Expess Sever expressjs라는 키워드로 홈페이지를 접속이가능하다ExpressJS홈페이지 링크 빨간박스에있는 내용을 복사해서 index,js에 붙여넣자.var 변수를 const(상수=변하지않는수)로 선언해줍니다 require의 의미는 node module 을 어딘가에서 가져오는것이고express라는 이름의 폴더를 내 파일들 속에서 찾을려고한다. 만약 못찾으면 node_modules에서 express 폴더를 찾는다.express안에도 require들이 많이있으며 다음과같이 있다.위와같이 node.js는 모든게 작은 블럭단위로 구성되어있음을 알 수 있다. app.listen(4000); 실행 후 먼가 출력되는것도 없고 아주 중요하게도 멈추는 것도 없다 localhost:..

Installing Express with NPM

비주얼스튜디오코드를 사용 했으며콘솔창여는방법은 [CTRL+SHIFT+` ] 입니다 . ExpressJS는 프레임워크이며몇줄의 코드로 서버를 만들 수 있다. 예시Django는 파이선으로 된 프레임워크Rails는 Ruby로 된 프레임워크Laravel은 PHP로 된 프레임워크서버를 개발하는건 대부분의 경우 거의 동일하기 때문이다. 커넥션을 열고커넥션을 listen해주고파일을 처리하고html 을 전송해주고데이터를 저장하고Form에서 데이터 받아오고 NPM = Node Package Manager 많은사용자가 Express를 쓰는걸 아래 사이트에서 볼 수 있다.NPMJS 사이트 가기[링크]NPM은 NodeJS를 깔면 기본적으로 깔려 있다. Package Manager로 NPM을 시작하려면 npm이 정한 방식으로 ..

nodejs에서 동기와 비동기의 차이

var fs = require('fs'); //동기와 비동기의 차이 확인 //readFileSync console.log('A'); var result = fs.readFileSync('syntax/sample.txt', 'utf8'); console.log(result); console.log('C'); console.log('A'); //readFile은 sync에 비해 리턴값이 존재하지 않습니다. fs.readFile('syntax/sample.txt', 'utf8', function(err, result){ //err가 있다면 err를 인자로 제공 //2번째 파라미터는 파일의 인자를 쓰기로 약속 console.log(result); }); console.log('C'); nodejs 버전 8.11..

Javascript에서 value값을 가져오는 방법 Javascript Get element Value

document.querySelector('#night_day').value = 'night' ; ID값이 night_day 의 value값을 night로 변경 *Tip 위 코드에서 더 발전한 코드들 및 설명 === 는 1===1 을했을경우 true 트루 1===2를 했을경우 boolean 블리언 onclick 이벤트태그의 적용범위가 자기자신이므로this를 대신하여 쓸수있다. document.querySelector('body')가 반복적으로 쓰이고 있다. 변수를 이용함으로써 중복을제거해보자