얼음저장소

너비(width, height) 박스모델에서 사용 auto (기본값) : 브라우저가 자동으로 너비를 계산 단위 : px, em, vw 등 단위로 지정 Inline 요소 (span ...) 포함된 콘텐츠 크기만큼 자동으로 줄어듬 (auto) width, height 를 지정할 수 없음 Block 요소 (div ...) 가로 : 부모요소의 크기만큼 자동으로 늘어남 세로 : 포함한 콘텐츠 크기만큼 자동으로 줄어듬 max-width, max-height 요소가 커질 수 있는 최대 가로/세로 너비 none : 최대 너비 제한 없음 (기본값) 단위 : px, em, vw 등 단위로 지정 auto : 여기선 크게 중요하게 쓰이지 않음 min-width, min-height 요소가 작아질 수 있는 최소 가로/세로 너비..

https://ko.parceljs.org/ 0. Bundler 란? 프로젝트를 진행하다보면 여러가지 패키지를 설치하게 되는데 이런 패키지들은 개발할때만 사용되고 최종적으로 컴파일 후에는 html, css, javascript 파일만 남아야 한다. 때문에 이런 패키지들을 html, css, javascript 로 변환시켜 주는것이 번들러의 역할이다. 번들러가 모든 패키지들을 변환시킬 수 있는 것은 아니다. 예로 SCSS 를 설치하면 SASS 로 변환을 하는데 따로 설치할 필요는 없고 SCSS 를 설치할 때 같이 설치된다. 그리고 번들러는 이 설치된 SASS 를 통하여 변환을 시켜주는 역할을 하는 것이다. 그 중 Parcel 은 구성 없는 단순한 자동 번들링이 지원되어 소/중형 프로젝트에 적합한 번들러이다..

부모 요소의 스타일이 자식요소에도 적용이 된다 모두 적용되는 것은 아니고 대부분 글자/문자 관련 속성들이 적용된다 (font-style, font-weight, ...) 강제 상속 부모요소가 있고, 자식요소가 있을때 수정이 필요한 경우 자식요소의 값을 고치지 못하는 경우가 생길 수 있다. 상속이 자동으로 안되는 부분들을 강제로 상속시킬 수 있 이때 속성값을 inherit 으로 지정하면 부모 요소의 값을 따라간다. 선택자 우선순위 점수가 높은 선언이 유리함 (명시도, 중요도) 점수가 같으면 가장 마지막에 해석된 선언이 우선됨 not 은 점수계산 하지 않음 ID 선택자 : 100점 Class 선택자 : 10점 태그 선택자 : 1점 전체 선택자 : 0점 인라인 선언 : 1000점 !important : 999..

스타일 선언 방식 인라인 방식 (너무 우선순위가 높아서 권장하지않음) 링크(병렬로 연결) : link css 내장 : \@import : 직렬로 연결, 링크방식의 css 파일 내에서 \@import url("주소"); 하는 것 ⇒ 직렬연결은 병렬에 비해 로딩이 오래걸린다 CSS 선택자 기본 ⇒ * : 전체 선택자, 모든 요소를 선택 ⇒ (태그) : 태그 선택자, 태그이름을 명시하면 선택(ex, div, li ...) ⇒ .(클래스) : 클래스 선택자, 클래스속성값 요소를 선택 ⇒ #(아이디) : 아이디 선택자, 아이디 속성값 요소를 선택 복합 ⇒ ABCXYZ : 일치 선택자, 선택자 ABC, XYZ 를 동시에 만족하는 요소 선택 (태그선택자를 먼저 써야 구분자로 구분가능) ⇒ ABC>XYZ : 자식 선택..

일반함수의 형태 const normal = function () { console.log('hello world'); } 화살표함수의 형태 const arrow = () => console.log('hello world'); 일반 함수와 화살표 함수의 차이 1.형태가 다르다. 보이는 것과 같이 화살표 함수는 =>와 같은 화살표가 붙어 함수를 시작한다. 또한 화살표 함수는 return 값이 한줄로 표현이 되는 경우에는 중괄호 {} 를 제외하고 작성이 가능하다. const returnArr = () => [1, 2, 3]; const returnObj = () => ({name: 'som'}); // 객체를 리턴할 경우에는 소괄호로 감싼다. 2.this 의 정의가 다르다. 일반(normal)함수의 경우에는 ..

자바스크립트에서는 typeof 를 사용하면 타입을 알 수 있지만 몇몇의 경우에는 Object라고만 나오고 정확한 데이터 타입이 무엇인지 알기 어렵다. console.log(typeof 'hello world!'); // string console.log(typeof 123); // number console.log(typeof true); // boolean console.log(typeof undefined); // undefined console.log(typeof null); // object console.log(typeof {}); // object console.log(typeof []); // object 조금 더 정확한 타입을 알고싶다면 typeof 대신에 다른 함수를 따로 ..

socket.IO 란? Socket.IO는 웹소켓 프로토콜을 지원하는 실시간 웹 애플리케이션(채팅, 메세지, 등)을 위한 JavaScript 라이브러리이다. 웹 클라이언트와 서버간에 실시간 양방향 통신이 가능하다. 브라우저에서 실행되는 클라이언트 측 라이브러리와 Node.js 용 서버 측 라이브러리의 두 부분으로 구성된다. (위키백과) socket.io는 웹소켓을 이용하여 비동기 이벤트 방식으로 클라이언트에 실시간으로 데이터를 전송한다. 사전에 참고할 사이트 https://socket.io/get-started/chat 이 사이트에 나온 튜토리얼대로 따라 기본적인 socket.IO의 틀을 만들어 놓자. 다 따라하고 난 뒤에는 위와 같은 파일들이 생성되고, 각각의 코드들은 이렇게 작성되어 있어야 한다. 1..

SemVer Sementic Versioning 버전마다 의미를 부여하여 나타내는 약속된 규칙같은 것. Major.Minor.Patch E.g 12.14.1 1. Major.Minor.Patch 기존 버전과 호환되지 않는 새로운 버전 2. Major.Minor.Patch 기존 버전과 호횐되는 새로운 기능이 추가된 버전 3. Major.Minor.Patch 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전 4. ^Major. Minor.Patch (캐럿기호가 붙어있는 것) Major 버전 안에서 가장 최신 버전으로 업데이트 가능함을 의미 package.json 에서 확인해보기 npm info 모듈 위 명령어를 통하여 해당 모듈의 정보를 알 수 있다. npm update 모듈 해당 모듈을 최신 버전으로 ..

3. index.html 만들기 vscode 내에서 느낌표(!)를 입력하면 자동으로 연결되는 스니펫을 이용한다. 를 에 추가한다. 4. main.js 만들기 console.log('hello world'); 테스트용 콘솔로그를 작성한다. 5. package.json 내의 scripts 수정하기 기존에 작성되어있는 명령어는 사용하지 않으니 삭제해도 된다. 그리고 아래와 같이 추가한다 "scripts": { "dev": "parcel index.html", "build": "parcel build index.html" }, parcel parcel 자체는 일반 터미널에서 입력하면 명령어를 찾을 수 없다. 하지만 이렇게 스크립트 내에 작성하면 설치된 모듈에서 찾아 이 프로젝트에서만 실행되는 명령..

👉npm NPM(Node Package Manager)은 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리하는 툴 npm 모듈/패키지 설치 npm install XXX 위와 같은 명령어로 설치 가능하다. 👉npm 시작하기 1. npm init -y package.json 파일이 만들어진다. 1-1. package.json { "name": "npm_test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", } name : 프..