본문 바로가기
반응형

○ WEB157

5. [First router] const userRouter = express.Router() / export && import 이번 단계에서 할 내용 우선보기 * ES6 모듈(파일 간 코드 공유)을 사용하여 init.js에서 application(app Express Object) 호출하기 - index.js -> app.js - handleListning, listen() 삭제 (불필요한 부분) - init.js 생성 - app.js : export default app; // app.js를 누군가 파일로 import 하면 app object를 주겠다. app.use, app.get 등 설정한 것 포함 - init.js : import app from "./app" - 3분40초처럼 서버 실행 코드 작성 - package.json : "start": "nodemon --exec babel-node init.js --delay .. 2019. 10. 11.
4. middleware, morgan, helmet, body-parser 미들웨어 처리가 끝날 때까지 연결된 것 어떻게 연결됐는가 request가 어떻게 시작되는가 시작은 브라우저에서 부터, 웹사이트에 접속하려할때이다. index.js파일을 실행하면 해당 route가 존재하는지 보고 있으면 해당 콜백함수를 실행한다. 보통 유저와 마지막응답 사이에 뭔가가 존재한다. 이를 미들웨어라고 한다. express에서 모든 함수는 미들웨어가 될수있다. 예를들어, app.get("/", handleHome); 는 유저가 home('/')요청을 하면 handleHome콜백함수가 실행이 되는데 이 사이에 미들웨어 함수(betweenHome)을 만들어 넣어보면 어떻게 될까? app.get("/",betweenHome,handleHome);이면 유저가 home('/')요청을 하면 betweenHo.. 2019. 10. 9.
2. get메서드, res.send 브라우저작동방식 브라우저에 URL을 입력하면 GET 메서드가 작동하고 로그인하면 POST 메서드를 통해 브라우저가 응답한다. 아래처럼 콜백함수에 res가 없으면 localhost:3000을 입력해도 아무것도 나타나지 않고 로딩만 뜬다. const express = require('express') const app = express() const port = 4000; function handleListening(){ console.log(`Listening on : http://localhost:${port}`); } function handleHome() { console.log("Homepage"); } app.get("/",handleHome); app.listen(port, handleListe.. 2019. 10. 8.
1. express 시작하기 / .gitignore 설정방법 / 깃허브 커밋하기 npm을 설치해주자 npm init 이렇게하면 node_modules과 함께 package-lock.json, package.json이 설치된다. 그리고 npm install express 를 입력하여 익스프레스를 설치하면 package.json파일의 dependency에 express가 설치된 것을 확인할 수 있다. dependency란 이 프로젝트가 실행되려면 필요한 것을 나타냄 이제 깃헙에 올려보자 먼저 세번째 연결고리 아이콘을 클릭하면 다음과 같은 창이 나타나는데 우측 상단의 버튼을 눌러주면 검색창 같은것이 상단에 나타나면서 깃 저장소를 초기화 할 폴더를 선택할 수 있다. 이 때 현재 폴더를 선택해주어 초기화를 진행한다. 깃헙에 올리기 전, 모든 node_modules폴더 안의 파일이 들어가면 무.. 2019. 10. 8.
내부함수와 메서드의 차이 https://okky.kr/article/453415 OKKY | javascript에서 내부함수와 메서드의 차이가 뭔가요? var value 100; var myOb { value:1, func1:function(){ this.value 1; console.log( fucn1 called this.value : this.value); func2 function(){ this.value 1; console.log( okky.kr JS에서의 객체는 key(또는 property)와 값(value) 예를 들면 var obj = { key: value } 로 구분되어 있다. 메서드는 프로퍼티(key)의 값(value)이 함수(function)일때 메서드라고 한다. 메서드는 객체에 종속적인 함수를 의미한다. 여.. 2019. 9. 21.
2. JS 기본학습 9강 URL의 이해 protocol 사용자의 통신규칙 웹서버와 브라우저가 데이터를 주고받기 위한 통신규칙 host(domain) 인터넷에 접속된 각각의 컴퓨터. 특정한 인터넷에 연결된 컴퓨터 주소 port 한대의 컴퓨터안에 여러대의 서버가 있을수있다. 클라이언트가 접속했을 떄 어떤 섭와 접속할지 애매함. 이떄, *번 포트 입력은 *번포트에 연결한다는 말. *번 포트에 접속됨 웹서버는 80번포트를 씀 => http로 접속한다는 것은 웹서버에 접속한다는 것 포트번호생략하면 80번에 연결됨 path를 어떤디렉터리 파일인지를 알림 쿼리스트링은 ?로 시작하고 값과 키는 =로 구분한다. 2019. 9. 6.
3-2 setInterval(), 삼항연산자 clock.js const clockContainer = document.querySelector(".js-clock"), clockTitle = clockContainer.querySelector("h1"); // clockContainer의 자식태그인 h1태그를 탐색 function getTime() { // 현재시각얻는 함수 const date = new Date(); // 내장함수 객체 const min = date.getMinutes(); // getTime함수를 활용 const hours = date.getHours(); const seconds = date.getSeconds(); clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours} : .. 2019. 8. 13.
자바스크립트란 무엇인가? JavaScript가 뭔가요? JS란? JS는 스크립트 혹은 프로그래밍 언어. 보통 클라이언트 측에서 웹페이지를 동적으로 다룰 때 사용. 그러나 서버측에서 Node.js와 같은 패키지를 이용해여 사용되기도 한다. 표준 웹기술 레이어 케이크에서 3번째 층 HTML은 제공할 웹 컨텐츠의 구조와 의미를 문단, 제목, 표, 삽입 이미지, 동영상 드응로 정의하고 부여하는 마크업 언어 CSS는 배경색 폰트 등의 레이아웃을 지정 -> HTML컨텐츠를 꾸며주는 스타일 규칙 언어 예시 Player 1: Chris p { font-family: 'helvetica neue', helvetica, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-align:.. 2019. 8. 9.
이번 수업의 구성은 크게 4파트이다. 과정 01. JS 첫걸음 자바스크립트 첫걸음JavaScript 과정에서, JavaScript를 이용해 첫번째 경험을 쌓기 이전에 "JavaScript 는 무엇인가요?", "어떻게 생겼나요?", 그리고 "그것으로 무엇을 할 수 있죠?" 와 같은 질문에 대답 할 수 있어햐 합니다. 그 이후에, 변수, 문자열, 숫자 그리고 배열과 같은 JavaScript 의 기능에 대해 살펴봅시다. JavaScript가 뭔가요? JavaScript에 발 담그기 어떤게 잘못됐나요? JavaScript 문제해결 필요한 정보 저장하기 — 변수 JavaScript의 기본 수학 — 숫자와 연산자 텍스트 다루기 — 문자열 유용한 문자열 메서드 배열 02. JS 핵심 기본 기능 _ 조건문, 반복문, 함수, 이벤트 JavaScript bu.. 2019. 8. 9.
02. VJS 요약 (Object, function선언, return) 상수 Object만들고 해당 Object 및 Object의 특정키(gender)의 값만을 호출하기 const nicoInfe = { name : "JB", age : 35, gender : "male" } console.log(nicoInfe.gender) console.log(nicoInfe) function을 선언해서 함수 인자에 값을 넣고 console.log로 출력해보자 function hello(parameter_argument_like_variable, para_num){ console.log("Hello", parameter_argument_like_variable, "THis age is", para_num); } // console에선 쉼표와 +를 통해 str과 인자를 구분할 수 있다. .. 2019. 8. 7.
01. VJS 요약 JS의 장점 js는 다운로드할 필요없이 브라우저에 같이 구성됨 웹을 만들기위해선 반드시 필요한 것 변수 변수란 변경되거나 수정되는 것을 의미 수학을 예로든다. a의 값은 바뀔 수 있다. a = 2, a = 10, ... 내가 원하는 값으로말이지 let이란? 초기화, 생성할 떄는 let을 씀 변수의 값이 바뀌질 않길 바랄 떄 const사용 const Boolean boolean값은 텍스트가 아님 그리고 "없이 소문자로 쓸 것 const boolean = false; const boolean = true; 데이터 정렬의 2가지 방법 array / object array는 데이터를 저장하는 곳 리스트같이. 즉, 단순 리스트로 만들 때 사용하면 된다. 이렇게 단순하게 입력하지 말고, 리스트로 입력하면 한 곳에 .. 2019. 8. 5.
font-family font-family 글꼴을 지정하는 속성 2019. 7. 27.
input, button 태그의 외부, 내부링크 걸기 / href / onClick 버튼 태그에 링크거는 방법! input type = "button" / button type = "button"현재탭 새탭 예시 )외부링크 내부링크 클릭2 2019. 7. 26.
z-index 엘리먼트가 겹칠 때 어떤 엘리먼트가 위에 쌓여야 할 지, 쌓임 순서(stack order)를 정하는 것. 순서 값이 없으면 생성순서(코드상 순서) 따라 쌓임 z-index 기본 값 : auto z-index: auto | number | initial | inherit; auto : 쌓임 순서를 부모와 동일하게 설정(기본값) number : 단위 없는 숫자로 쌓임 순서를 설정( 큰 값이 가장 위쪽, 음수 허용) 단, position 값이 static이 아닌 경우 가능함 부모가 z-index 값이 있을 경우 부모 안에서만 의미있음 2019. 7. 26.
display / 요소를 숨기는법 / visibility / float / position / offset 모든 요소는 자신만의 display값이 있다. 이 값에 따라 block, inline 등의 rendering 박스 유형이 결정 display속성으로 해당 요소의 렌더링 박스 유형 변경 가능, 렌더링 여부 결정 가능 display : value; 기본 값 : 요소마다 상이함 none : 요소가 렌더링 되지 않음 (요소를 숨길 수 있음) inline : inline level 요소처럼 렌더링 block : block level 요소처럼 렌더링 inline-block : inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 * height 나 width 등과 같은 박스모델 속성을 적용할 수 있다 그외에 list-item, flex, inline-flex, table, tabl.. 2019. 7. 25.
margin&padding / height margin & padding 두 속성 모두 여백이 필요로 할 때 적용하는 속성. border의 경계가 명확하게 표시되지 않으면 어떤 속성으로 필요한 여백을 표현할지 헷갈릴 수 있다. margin과 padding의 비교 + - auto 단위 margin o o o px, % ... padding o x x px, % ... margin은 사람과 사람사이의 거리. 사람들이 서로 겹쳐있으면 음수 값이 가능 padding은 뼈와 피부 사이의 지방. 음수값은 안돼 margin과 padding은 px(고정단위), %(상대적 단위) 사용가능 다만 %는 너비값을 기준으로 값이 결정된다. width 요소의 가로 크기를 정의하는 데 사용하는 속성 width 속성은 인라인 레벨 요소를 제외한 모든 요소에 적용 기본값 : .. 2019. 7. 24.
CSS 엘리먼트 간격 동일하게 구성하기 https://nuli.navercorp.com/sharing/blog/post/1132728 영역에서 아이템 간격 같게 구성하기 (css only) 안녕하세요. UI개발실 곽석종입니다. 해당 내용은 함께 업무하고 계신 김유리님, 김태형님, 최성규님, 황준상님의 도움을 받아 작성하는 글입니다.특히 김유리님의 정리내용을 바탕으로 합니다. 모바일기기가 많아지고, 유동적인 너비의 영역에서 언제나 같은 간격을 유... nuli.navercorp.com https://codeday.me/ko/qa/20190321/44131.html CSS를 – 어떻게 서로 옆에있는 div 요소를 균등하게 배포 할? - 코드 로그 이것은 메뉴를위한 것입니다.예를 들어, div 요소에 3 개의 스팬이 있고, 모두 여백, max-wi.. 2019. 7. 24.
박스 모델 /border / padding / margin / float대용 margin병합? / table 선 없애기 박스모델 박스는 총 4가지의 세분된 영역으로 구성. 영역마다 다양한 스타일을 적용 Content 영역 : 요소의 실제 내용을 포함하는 영역. 따라서 크기는 내용의 너비 및 높이. 너비는 width가 선언하고 너비는 height가 선언. Padding 영역 : content 영역과 테두리 사이의 여백을 padding content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향 이에 따라 padding을 content의 연장으로 볼 수도 있다. Border 영역 : content 영역을 감싸는 테두리 선 Margin 영역 : border 바깥쪽의 영역 border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역 즉, 주변 요소와의 여백(간격) 지정 전체 박스 사이징의 값은 width + he.. 2019. 7. 24.
반응형

티스토리툴바