dhddl_dev

express에서 middleware란 처리가 끝날 때까지 연결되어있는 어떻게 연결이 시작되느냐 아래코드상에서 설명을 해준다 import express from "express";const app = express(); const PORT = 4000; const handleListening = (req, res) => console.log(`Listening on: http://localhost:${PORT}`); const handleHome = (req, res) => { console.log(req); res.send("Hello from home");} const handleProfile = (req, res) => res.send("You are on my profile @@"); app.ge..

Active File In StatusBar현재 작업중인 파일의 전체 경로를 아래 상태줄에 표시 (설치시 VSCode 재접속 필요) Auto Rename Tag 짝태그를 수정 Bracket Pair Colorizer괄호마다 색상 다르게 표시 Color Highlight색상코드를 바로 보여줌 hightlight-selections-vscode같은 단어 선택시 직관적으로 보여줌 ESLintEMCAScript Linter우리의코드들을보고 잔소리를 해주는것npm install -g eslint 로 글로벌설치eslint --init 명령어로 시작해서 아래것들 선택 Git HistoryGit 히스토리를 보기좋게 보여준다 Settings SyncVS설정 동기화 도구Gitgub에서 프로필클릭 > Settings > D..

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

훨씬 보기좋은 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)..

바벨이란? 최신의 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...

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줄이면 할 수 있다는 매력이 있음을 알아두자.

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

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

노드JS설치 사이트다음다음다음windows키-cmd입력 후 엔터명령프롬프트에서 node -v를 해보면 자신의버전을 확인할 수있다.

조건 index.html 파일이 있어야함 깃허브의 이름이 github pages여야함. 만드는방법은 상단 탭 branch - new branch - ph-pages로 만드는것. Create branch를 누르고 gh-pages 클릭 후 publish를 합시다.(Fetch origin되잇는부분을 누르라는 것) 이후 깃허브ID.gitub.io/프로젝트이름 으로 접속이가능하다 ex)dhddldid.github.io/kakao-clone 맨처음보이는 페이지가 index 페이지 ph-pages의 수정을 원한다면 matser 브랜치에서 수정후 commit 을 한뒤 pbulish 를하고 ph-pages 브랜치에서 Branch탭에서 Update from master 후 publish 를 하면됩니다!