전체 글 68

node.js 개요, nvm 설치

node.js node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임 (프로그래밍 언어가 동작하는 환경) node.js 버전 짝수 버전 - 안정적으로 신뢰도가 높은 버전 홀수 버전 - 가장 최신 버전 nvm Node Version Manager node.js 의 여러 버전을 쉽고 빠르게 설치, 변경할 수 있다. 설치 NVM GitHub curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash 위의 커맨드로 설치 가능 nvm --versi..

웹공부 2021.10.13

프로토타입 - 상속

https://ko.javascript.info/prototype-inheritance 프로토타입 (prototype) 자바스크립트의 객체는 명세서에서 명명한 [[prototype]] 이라는 숨김 프로퍼티를 갖는다. 이 숨김 프로퍼티 값은 null 이거나 다른 객체에 대한 참조가 되는데, 다른 객체를 참조하는 경우 참조 대상을 '프로토타입(prototype)'이라 부른다. 프로토타입 설정 let animal = { eats: true }; let rabbit = { jumps: true }; rabbit.__proto__ = animal;이런식으로 개발자가 직접 값을 설정할 수 있다. ❗️ __proto__는 [[Prototype]]용 getter·setter입니다. __proto__는 [..

웹공부/JS 2021.10.13

객체 프로퍼티 - 프로퍼티 getter, setter

https://ko.javascript.info/property-accessors 프로퍼티 getter 와 setter 객체의 프로퍼티는 두 종류로 나뉜다. 데이터 프로퍼티(data property) : 지금까지 사용한 모든 프로퍼티는 데이터 프로퍼티이다. 데이터 프로퍼티 조작 장법에 대해선 모두 알고 있을 것이다. 접근자 프로퍼티(accessor property) : 새로운 종류의 프로퍼티. 접근자 프로퍼티의 본질은 함수인데, 이 함수는 값을 획득(get)하고 설정(set)하는 역할을 담당한다. 외부 코드에서는 함수가 아닌 일반적인 프로퍼티처럼 보인다. getter 와 setter let user = { name: "John", surname: "Smith", get fullName() { return..

웹공부/JS 2021.10.10

객체 프로퍼티 설정 - 프로퍼티 플래그와 설명자

https://ko.javascript.info/property-descriptors 객체 프로퍼티 객체에서 프로퍼티란 한 객체 내에 '키:값' 으로 구성되어 있는 것을 말한다. let user = { name: 'John', age: 30 }; '콜론(:)' 을 기준으로 왼쪽에는 키, 오른쪽에는 값이 위치한다. 프로퍼티 키는 프로퍼티'이름' 혹은 '식별자'라고 부른다. -> 첫번째 프로퍼티 - "name"(이름)과 "John"(값) -> 두번째 프로퍼티 - "age"(이름)과 30(값) 프로퍼티 플래그 객체 프로퍼티는 값(value)과 함께 플래그(flag)라 불리는 특별한 속성 세 가지를 갖는다. writable - true 이면 값을 수정할 수 있다. 그렇지 않으면 읽기만 가능. enumerable..

웹공부/JS 2021.10.10

express js - 라우팅 (작성중)

라우팅 라우팅은 어플리케이션 엔드포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말한다. -> 라우팅에 대한 소개 링크 라우트의 예 var express = require('express'); var app = express(); // respond with "hello world" when a GET request is made to the homepage app.get('/', function(req, res) { res.send('hello world'); });라우트 메소드 라우트 메소드는 HTTP 메소드 중 하나로부터 파생되며, express 클래스의 인스턴스에 연결된다. -> 앱의 루트에 대한 GET 및 POST 메소드에 대..

웹공부 2021.10.05

CSS - 태그 종류

태그 설명 div 블록 요소, 별다른 의미 없음 h1 (1~6) 인라인 요소, 제목을 의미하는 요소 p 블록 요소, paragraph (문장)을 의미하는 요소 img 인라인 요소, 이미지를 삽입 / 필수요소 : src , alt ul 블록 요소, Unordered List 순서가 필요없는 목록의 집합 (ol도 있지만 잘 사용안함) li 블록 요소, List Item 목록 내 각 항목 a 인라인 요소, anchor 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 span 인라인 요소, 특별한 의미 없음 br 인라인 요소, 줄바꿈 input 인라인 이면서 블록 요소 : 인라인-블록 요소, 수평으로 쌓이지만 가로,세로 여백 지정 가능 속성 type : 인풋받을 형식 지정 (text, checkbox, ..

웹공부/CSS 2021.09.28

CSS - 인라인(inline)요소와 블록(block)요소

인라인 요소 span : 대표적인 인라인 태그, 수평적으로 쌓임 aaabbb 이렇게 쓰면 띄어쓰기없음 aaa bbb 이렇게 쓰면 띄어쓰기 있음 (엔터쳐도 띄어쓰기로 출력) 콘텐츠(글자) 크기만큼 자동으로 가로 세로가 조절됨 css width height 를 조정해주어도 반응 없음 (가로세로 사이즈 지정할 수 없다) css margin 은 위,아래는 정상적으로 적용안되고 왼쪽, 오른쪽은 적용됨 padding은 은 위,아래는 정상적으로 적용안되고 왼쪽, 오른쪽은 적용됨 인라인요소는 내부에 블록요소를 사용할 수 없다 → 인라인 내 인라인은 가능 블록 요소 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도 요소가 수직으로 쌓임 가로는 부모요소의 크기만큼 자동으로 늘어남, 세로는 콘텐츠 크기만큼 가로, 세로 사..

웹공부/CSS 2021.09.28

CSS - float 기반 레이아웃

- float 속성 : 좌우로 배치할때 float : left; margin으로 위치조정 rignt 도 상관없음 float 속성값 none : 띄우지 않음 (기본값) left : 왼쪽에 띄움 right : 오른쪽 initial : 기본값으로 설정함 inherit : 부모 요소로부터 상속함 float를 이용할때 생기는 이슈 부모역할 부분이 자식이 float설정이 되었을때 자식으로 인식못하는 경우가 있어서 위치가 제각각이 됨→overflow:hidden; →이것들로 해결 →overflow:auto; 겹치는 박스가 float를 무시할때가 있음→ clear : both; (양쪽 다 맞추기) → clear : left; (위의 속성에 맞춰야 함) 예시코드 HTML first second third CSS .wra..

웹공부/CSS 2021.09.28

CSS 의 구성

CSS의 구성 1. 기본 구성 span { color : red; } span: selector(선택자) color: property red: value 2. style을 HTML페이지에 적용하는 방법 inline > internal > external 의 우선순위 순서로 적용 inline HTML태그 안에다가 적용다른 CSS파일에 적용한 것 보다 가장 먼저 적용 HELLO World! internal style 태그로 지정구조와 스타일이 섞이게 되므로 유지보수의 어려움별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없음 HELLO World ! external 외부파일(.css)로 지정 3. 상속 상위에 설정된 스타일을 하위에서도 사용 bo..

웹공부/CSS 2021.09.28