★ main.css에 있는 style태그들은 가시성 때문에 사용함을 미리 작성합니다.

1. @media

반응형 레이아웃(웹사이트)를 만들 때 사용하는 문법이다.

• @media 타입 and (기능)
  @media (기능)
  @media (기능) and (기능)

• 타입은 여러가지가 있으며 기본 값 : all , 적지 않아도 된다.
  이외 여러가지 값 : screen, print, tv ...

+) 추가 개념
@charset "" : 인코딩
@import url('') : import를 사용해서 url연결
@keyframes : 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정하는 문법

1. 일반적인 @media를 이용한 예시

1, 2, 3번을 하나씩 주석해 보면서 실행해 보자.

<!--index.html-->
<div class="group">
    <div class="box"></div>
</div>

.box {
  width: 100px;
  height: 100px;
  background-color: orange;
} 
  /* 1. 600 이하이거나 800 이상일 때 적용, or을 하려면 not을 사용해야한다 */
  @media not all and (max-width: 600px) and (min-width: 800px) { 

  /* 2. 세로너비가 더 길 때 */
  /* @media (orientation: portrait) { */
  
  /* 3. 가로 너비가 더 길 때 */
  /* @media (orientation: landscape) { */


	.box {
    width: 300px;
    background-color: royalblue;
  }
} 

2. 변수를 이용한 예시

변수를 선언하고 그 변수를 var로 호출해야 한다.

<!--index.html-->
<div class="group1">
    <div class="box"></div>
  	</div>
  	<div class="group2">
  	<div class="box"></div>
</div>

/* +) 추가 내용 => html === :root(가상클래스선택자) */
/* :root { */

.group1  {
  /* 1. 일반적인 호출
  group1 영역에서만 선언된 변수 이므로 아래처럼 사용을 해도 group1의 box에서만 적용 됨 */
  --primary: orange;
  
  /* 2. 스코프에 따라 색이 적용되는 예시 */
  --danger: green;
}

.box {
  width: 100px;
  height: 200px;
  /* 1. 일반적인 호출 */
  /* background-color: var(--primary); */
  
  /* 2. 스코프에 따라 색이 적용되는 예시 */
  background-color: var(--danger, red);
  margin: 20px;
  border: 4px solid;
}

3. link태그 안에 media를 사용한 예시

index.html에서 link 태그로 css 파일을 연결할 때 아래와 같이 태그 안에 media를 선언하여 적용할 수 있다.

<!--index.html-->
<link rel="stylesheet" href="./main-sm.css" media="(max-width: 600px)">
<!--body-->
<div class="group">
    <div class="box"></div>
</div>

  .box {
    width: 300px;
    height: 300px;
    background-color: royalblue;
  }

2. Node.js

Node.js는 Chrom V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(프로그래밍 언어가 동작하는 환경).

설치 방법

node.js.org 페이지에 가서 설치보다는 node version manager를 이용하여 다운받고 버전을 관리하는 것을 권장한다.

https://github.com/coreybutler/nvm-windows에 들어가서
Downloads Now를 클릭하여 Release 페이지로 이동한다.
아래로 내려가서 nvm-setup.zip을 다운받고 압축을 풀어 설치를 하면되는데 ★이때 관리자권한으로 설치한다.
설치를 하고 vscode를 실행하여 터미널을 열어 $nvm --version을 입력하면 현재 버전을 확인할 수 있다.

이후 nvm을 사용하여 원하는 버전을 설치하고 관리하면 된다.

$nvm ls : nvm을 통해서 설치된 node.js의 목록
$nvm install 14.16.0 : 14.16.0 버전의 node.js를 설치한다.
$nvm uninstall 14.16.0 : 14.16.0 버전의 node.js를 제거한다.
$nvm use 14.16.0 : 14.16.0 버전의 node.js를 사용한다.
$node --version : 현재 사용하고 있는 node.js의 버전

3. npm

NPM(Node Package Manager)은 전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리.

$npm init -y : package.json 파일을 생성한다.
이렇게 생성할 파일로 패키지관리를 직접한다.
$npm install parcel-bundler -D : node_modules폴더와 package-lock.json을 설치한다. package-lock.json은 자동관리된다.
$npm install lodash : lodash설치
이렇게 설치를 한 뒤 node_modules파일을 제거를 해도 한번 설치를 한 pakage는 내역이 남게 되고 $npm install를 입력하면 이 내역들을 확인하고 다시 깔리게 된다.

• 개발용 의존성 패키지 설치 (-D, --save-dev) : $npm install -D XXX
  내가 설치한 특정한 패키지들이 개발할 때만 필요해서 설치한다.
  -D : 내부 devDependencies에 설치
• 일반 의존성 설치 : $npm install XXX
  웹 브라우저에서 동작할 때 필요하다는 것을 젅제하고 설치한다.

4. 개발 서버 실행과 빌드

1. 개발 서버 실행

index.html과 main.js를 만들고 난 뒤 package.json의 scripts부분을 아래와 같이 수정해 준다.

"scipts": {
	"dev" : "parcel index.html"
},

이후 터미널을 열어 $npm run dev를 입력하면 Server running at http://localhost:1234가 나오는데 이를 눌러보면 우리의 프로젝트가 열리게 된다.

2. lodash 사용

main.js에서 다음 코드를 추가해 준다.

import _ from 'lodash';

이는 lodash를 가지고 오는 내용을 작성했으면
node_modules -> lodash -> package.json에 명시가 되어져있는 main옵션에
lodash.js를 실제로 가지고 와서 우리의 main.js에서 활용이 된다라는 것을 의미한다.

import _ from 'lodash';

console.log("hello world");
console.log(_.camelCase("hello world"));

3. build

"scipts": {
	"dev" : "parcel index.html"
	"build": "parcel build index.html"
},

build를 추가함으로서 사용자들이 보는 용도의 결과물이 출력된다.

이후 $npm run build으로 실행시키게 되면 dist라는 폴더가 생성되고, 확인해보면 여러 js파일들이 만들어진 것을 확인할 수 있다.

index.html을 열어보면 코드가 붙어있는 형태로 바뀌어 있다.(난독화)
즉, dist폴더 안에 있는 내용들은 개발자가 보는 용도가 아니므로 용량감소를 위해 압축버전으로 만들어준 것이고 이 역할을 parcel-bundler이라는 패키지가 해준다.

번들(Bundle) : 우리가 프로젝트 개발에 사용한 여러 모듈(패키지)을 하나로 묶어내는 작업이다.

• 난독화 : 작성된 코드를 읽기 어렵게 만드는 작업을 말하며 빌드된 결과(제품)는 브라우저에서 해석되는 용도로, 용량을 축소하고 읽기 어렵게 만드는 등의 최적화를 거치는 것이 좋다.

★ git에 위의 내용들을 push할 때, 파일과 용량이 많아 업로드하는데 시간이 오래 걸리므로
.gitignore에 node_modules/, dist/, .cache/ 를 추가하고 push를 하자.
package.json과 package-lock.json에 버전이 명시가 되어있어 언제든지 npm i 또는 npm install로 node_modules를 깔 수 있다.

5. 유의적 버전

유의적 버전(Semantic Versioning, SemVer) : ^ Major . Minor . Patch
ex) ^12.14.1

• Major : 기존 버전과 호환되지 않는 새로운 버전
• Minor : 기존 버전과 호환되는 새로운 기능이 추가된 버전
• Patch : 기존 버전과 호환되는 버그 및 오타 등이 수정된 버전
• ^ : Major 버전 안에서 가장 최신 버전으로 업데이트 가능