월드스토리의 코딩 나라

body-parser 데이터를 쉽게 처리할 수 있도록 도와주는 라이브러리Post로 정보를 전송할 때 요청의 body(req.body)로 받을 수 있게 도와 줌설정하지 않으면 undefined로 데이터 값을 읽을 수 없음.express 4.x 부터 body-parser가 내장되어 있어 설치 필요 없음extended: true => express에 기본 내장된 querystring 모듈 사용하지만, 멀티파트 데이터인 이미지, 동영상, 파일을 다른 방식으로 처리해야 한다. multerconst multer = require('multer'); // multer 모듈을 불러옴(npm install multer 먼저 실행)const upload = multer({dest: 'upload/',});app.post(..

Axios 요청 방법axios({url : '통신하고자 하는 함수',method: '통신하고자 하는 방식',data: {json 형태의 보내고자 하는 데이터 }}); url서버 주소를 의미함즉, 내가 데이터를 보내고자 하는 서버단 주소method데이터를 보내는 요청 방식으로 get, post, patch, put, delete가 있음data/params{ key: value, key: value } 형태로 데이터를 보낼 때 사용Request의 body로 데이터를 보냄단, Get에선 paramsGet엣넌 url에 ?를 이용해서 해당 데이터를 붙여서 보내도 동작함  Axios 문법 –응답 response.data서버가 제공한 응답(데이터)response.status서버 응답의 HTTP 상태 코드 성공이면 2..

1. Ajax Asynchronous JavaScript And XML자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고 받는 비동기 HTTP 통신JQuery를 이용해 쉽게 구현이 가능하며, Error, Success, Complete의 상태를 통해 실행 흐름을 조절함Jquery를 사용해야만!! 간편하고 호환성이 보장된다. ( xml 사용은 복잡 )Promise 기반이 아니다. 2. AxiosNode.js와 브라우저를 위한 Promise API를 활용비동기 HTTP 통신이 가능, return이 Promise 객체로 온다.Promise 기반으로 만들어졌으며, 브라우저 호환성이 뛰어나다.하지만 모듈 설치 or 호출을 해줘야 사용이 가능하다. 3. Fetch• JavaScript 내장 라이브러리이므로 ..

템플릿 엔진• 문법과 설정에 따라 파일을 html 형식으로 변환시키는 모듈 ejs란?• Embedded Javascript 의 약자로, 자바스크립트가 내장되어 있는 html 파일확장자는 .ejs ejs 템플릿을 사용하는 방법  대표적인 EJS 문법 무조건 자바스크립트 코드가 들어가야 하고, 줄바꿈을 할 경우에는 새로운 를 이용해야 한다.넘겨 받은 변수 값을 템플릿에 출력할 때 사용다른 view 파일(즉, 다른 ejs) 미들웨어요청이 들어옴에 따라 응답까지의 중간 과정을 함수로 분리한 것서버와 클라이언트를 이어주는 중간 작업use() 를 이용해 등록할 수 있다 미들웨어 -static이미지, css 파일 및 Javascript 파일(front)과 같은 정적 파일 제공Express 에 있는 static 메소..

http 모듈웹 서버를 구동하기 위한 node.js 내장 웹 모듈server 객체, request 객체, response 객체를 사용한다server : 웹 서버를 생성할 때 사용하는 객체request : 응답 메세지를 작성할 떄 첫번째 매개 변수로 전달되며, 프론트엔드로 부터 정보를 받아드림response : 응답 메세지를 작성할 때 두번째 매개 변수로 전달되며, 백엔드에서 프론트엔드로 정보를 보냄 http 모듈 서버 만들기const http = require('http');const server = http.createServer( function(req, res) { res.writeHead(200); //응답헤더 res.write("Hello!"); //응답 본문 작성 res.end("E..

모듈이란?1. 특정한 기능을 하는 함수나 변수들의 집합2. 재사용 가능한 코드 조각을 말함3. node js에선 여러개의 모듈이 하나의 큰 프로젝트를 이룸 모듈의 장점코드 추상화복잡한 시스템이나 객체를 단순화하여 핵심적인 부분에 집중하는 프로그래밍 원칙코드 캡슐화코드의 무분별한 변경을 막기 위해 모듈 내부에 코드를 숨김코드의 재사용같은 기능으로 동작하는 버튼일 경우, 동일한 코드를 여러개 쓸 필요 없이 호출해서 쓸 수 있다.의존성 관리프로젝트 간 의존성 충돌이 발생했을 때, 빠르게 원인을 찾아 수정할 수 있다. 모듈을 호출하는 방법   const { } 로 가져올 때는 구조분해해 가져오기에 이름이 동일해야 한다.하나만 내보낸 모듈은 다른 이름이어도 불러올 수 있다.  ※ 이미지 출저 : KDT 국비교육 ..

DOM(Document Object Model) • HTML 문서 요소의 집합!• HTML 문서는 각각의 node 와 object 의 집합으로 문서를 표현• 따라서 각각 node 또는 object 에 접근하여 문서 구조 / 스타일 / 내용 등을 변경 할 수 있도록 하는 것 Document웹 페이지에 존재하는 HTML 요소에 접근하여 행동을 하고자 할 때 사용하는 객체 Document 요소 선택하는 법 태그 용어의미• document.getElementById(아이디 속성값)태그의 Id 속성값이 특정값인 녀석을 가져온다.• document.getElementsByClassName(클래스 속성값)태그의 클래스 속성값이 특정값인 태그를 선택한다.• document.getElementsByTagName(태그 이..

반응형1. 동일한 웹페이지를 보여주나 디바이스의 크기에 따라 레이아웃을 다르게 보여줌2. 모바일로 웹 사이트를 접속하는 경우가 많으므로 반응형은 매우 중요한 기술임 적응형사용자가 모바일 환경인지, PC 환경인지에 따라 다른 웹 페이지를 보여줌.  Viewport 반응형 웹을 디자인하기 위하여 기준으로 삼는 지표를 의미함기기마다 화면 사이즈가 다르기에 기기에 맞춰서 디자인하기 위한 크기 요소디바이스 화면 크기를 고려하여 사용자에게 최적화된 웹페이지를 제공함 @media(미디어 쿼리)   용어 정리의미코드 상의 예시미디어 유형All(전부)/print(인쇄)/Screen(전부)screen크기 규칙min(최소 뷰포트 넓이)max(최대 뷰포트 넓이)지정 기준을 결정min-width, min-heightBreakp..

transform 특정 상황에서만 태그의 상태를 바꾸고 싶을 때 사용하는 CSS 2D 변환 함수CSS 용어용어의 의미 translate(x,y) x축(옆)으로 x만큼, y축(아래)으로 y만큼 이동 translateX(x), translateY(y) 특정 축으로 변수 만큼 이동 scaleX(x), scaleY(y) 특정 축으로 변수 만큼 키움 scale(x,y) x축(width)으로 얼마, y축(height)만큼 크기를 키움 skew(x,y)x축으로 얼마, y축으로 얼마 만큼 기울임skewX, skewY특정 축으로 얼마만큼 기울임matrix(n, n, n, n, n,n)2차원 변환효과rolate(degree)태그를  degree만큼 시계 방향으로 회전3D 변환 함수CSS 용어용어의 의미tran..

요소의 배치 CSS 용어용어의 의미상태position: relative;요소 자신을 기준으로 배치position: absolute;위치 상 부모 요소를 기준으로 배치(부모 요소는 relative인 요소, 둘다 static이라면 메인 페이지를 반영)display 속성이 block으로 변경됨position: fixed;뷰포트를 기준으로 배치display 속성이 block으로 변경됨z-index요소의 배치 순서를 결정auto : default(부모 요소와 동일한 쌓임)숫자 : 숫자가 높을 수록 위에 쌓임 배경 이미지 CSS 용어의미사용법background-color태그의 색상을 지정함default : transparent(투명함)색상값을 넣으면 된다.linear-gradient() : 여러개의 색깔을 그라이데..