끄적

2022.04.25

Math

Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장(자바스크립트에 이미 들어가있는)객체

Math.abs()

//absolute. 주어진 값의 절대값을 반환
console.log('abs:', Math.abs(-7)) //abs:7

Math.min()

//가장 작은값을 출력해줌
console.log('min:', Math.min(5, 12)) //min:5

Math.max()

//가장 큰값을 출력해줌
console.log('max:', Math.max(5, 12)) //max:12

Math.ceil()

//올림처리한 값을 출력
console.log('ceil:', Math.ceil(3.14)) //ceil:4

Math.floor()

//내림처리한 값을 출력
console.log('floor:', Math.floor(3.14)) //floor:3

Math.round()

//반올림한 값을 출력
console.log('round:', Math.round(3.14)) //round:3

Math.random()

//랜덤한 숫자를 출력
console.log('random:', Math.random())

const pi = 3.14159265
console.log(pi)

const str = pi.toFixed(2) //toFixed는 인수로 소수점 몇번째까지. 문자값으로 변환해줌
console.log(str) //3.14
console.log(typeof(str)) //string

//parseInt, parseFloat는 전역(전체의영역)함수
//setTimeout, setInterval, clearTimeout, clearInterval
const integer = parseInt(str) //3 parse(분석하다)int(정수)
const float = parseFloat(str) //3.14 부동소수점 실수로 파싱후 반환
console.log(integer)
console.log(float)
console.log(typeof integer, typeof float)

2022.04.22

JavaScript 화살표함수와 this

화살표 함수

일반함수
const hello = function () {}
화살표함수
const hello() = {} => {}
// 화살표함수 is 익명함수
// 함수표현식(어딘가할당하고있기때문에)이기때문에 호이스팅 발생 안해요

화살표 함수가 왜 나왔을까??

1. 간소화가능 (패턴3가지)

   1. return키워드로 먼저시작할때 중괄호와 return 생략가능
      반환할데이터 어떤것이든 쓸 수 있다(원시형, 참조형)

      const hello = () => {  
       return 'Hello'
      }
      
      const hello = () => 'Hello'
      console.log(hello())

      단, 객체타입은 const hello = () => {}
      객체리터럴 중괄호와 기존 코드블록과 겹치기 때문에 소괄호로 감싸준다

      const hello = () => ({})  
      console.log(hello()) //undefined
      
      function hello(a, b) {
      return {
         a: a,
         b: b
         //key:a와 value:a에 사용된 변수이름이 같으면
         a,
         b
         }
      }
      
      function hello(a, b) {
      return {a, b} 
      }
      
      const hello = (a, b) => ({a, b})

   2. const hello = () => {
       console.log('Hello')
      }
      //콘솔이라는 객체안에 로그라는 함수가 있는데 
      //콘솔이라는 객체를 통해 실행되는 함수를 '메소드'라부름
      const hello = () => console.log('Hello')
      hello()

   3. //매개변수가 하나일때 소괄호를 생략할 수 있다(두개이상일때는 소괄호 필수)
      function hello(hi) {
      return `Hello ${hi)`
      }
      const hello = (hi) => `Hello ${hi}`
      
      const hello = hi => `Hello ${hi}`

2. this
   가장큰이유! 바로 this 때문에

   console.log(this) //Window ......
   윈도우객체는 전역개체(Global 어디서든지 접근가능한)이자 최상위 객체

   var sunny = 'SUNNY' // console창에 sunny쳐야 나옴
   전역변수

   런타임 runtime 브라우저가 동작하는. 실제로 뭔가 돌아가고있는환경
   스코프(scope): 유효하게 동작하는범위

일반 또는 화살표 함수에서 정의가 다르다

const user = {
  name: 'Sunny',
  age: 92,
  email: 'ababab@gmail.com',
  phone: '01011112222',
  // 객체데이터에 property(속성)=key+value
  //메소드 속성에 함수가 있어? 그러면 메소드라불러요
  getName: function () {
    return [user.name, user.age]
}

console.log(user.getName()) // ['Sunny', 92]

객체이름을 직접참조를 하면은 객체이름이 바뀔때마다
문제가 생기가 되기때문에 유연한 `this`로바꿔준다
const user = {
  name: 'Sunny',
  age: 92,
  getName: function () {
    return [this.name, this.age]
}

• 일반 함수에서 this키워드는 호출되는 위치에서 정의됨

//일반함수 this는 호출할때 적용된다
const jessi = {
  name: 'Jessi',
  age: 35
}
console.log(user.getName.call(jessi))

const userA = {
  name: 'A',
  age: 92,
  getAge: function () {
    return this.age
  }
}

const userB = {
  name: 'B',
  age: 83,
  getAge: function () {
    return this.age
  }
}

console.log(userA.getAge) //92
console.log(userB.getAge) //83
//call, apply = 호출용
//call은 앞에기능을 빌려줘, 특정객체가 가지고있지 않은 기능을 빌려서 씀
console.log(userB.getAge.call(userA)) //92
console.log(userB.getAge.apply(userA)) //92

• 화살표 함수에서 this키워드는 자신이 선언된 함수(렉시컬) 범위에서 정의된다
  콜백에서 this를 쓴다면 화살표 함수를

const userA = {
  isValid: true,
  age: 92,
  getAge: function () {
    setTimeout(function () {
      console.log(this.age)
    }, 1000)
  }
}
userA.getAge() // undefined seTimeout안에서 호출됐기때문에

const userA = {
  isValid: true,
  age: 92,
  getAge: function () {
    setTimeout( () => {
      console.log(this.age)
    }, 1000)
  }
}
userA.getAge() // 92

끄적...

함수
function hello() {
//무언가를 호출할때는 항상 흔적을 남긴다
//hello()를 호출할건데 return키워드가 없으면 undefined 나온다
//'hello'라는 문자데이터을 반환할건데 호출할곳에 흔적데이터로 남게된다
//이제 데이터로 출력만 하면 된다!
}
hello()`

2022.04.22

String(문자)

String 전역(: 자바스크립트 전체에서 쓸 수 있는)객체는 문자열의 생성자
new String ()
문자데이터를 만들때 리터럴방식 ('', "", ``)사용

properties

• String legnth

  //변수str 문자데이터의 글자가 총 몇개에요?
  //length는 프로토타입으로 사용 가능하기때문에 변수에 담지 않아도 사용됨
  const str = 'abcdefg'
  console.log(str.length) //7
  console.log('a bcdefg'.length) //8 --> 공백도 문자취급

Methods

• String.prototype.indexOf()
  프로토타입에 의해 지정된 메소드는 메모리에 딱 한번만 만들어지고
  new라는 생성자 함수에서 인스턴스로 언제든지 활용할 수 있음

  // 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스(숫자'0'부터)를 반환합니다. 
  // 일치하는 값이 없으면 -1을 반환 
  const paragraph = 'Laughter is the best medicine. No news is good news' 
  const search = 'is' 
  const indexOfFisrt = paragraph.indexOf(search); 
  console.log(indexOfFisrt) //9`

  // new String() 생성자 함수대신에 ''(리터럴)방식에 직접적으로 indexOf()라는 메소드를 쓸 수 있음
  const hello = 'Hello World'.indexOf('l')
  console.log(hello) // 2

  //Boolean 데이터로 출력하고 싶다면
  const hello = 'Hello World'
  // 비교연산자를 통해 '일치하는 값이 없으면 -1을 반환'하는 속성을 이용하면 된다
  console.log(hello.indexOf('Hello') !== -1) //true

• String.prototype.split()
  문자열을 분할해주는 메서드

  const str = 'Hello World'
  const arr = str.split(' ')
  console.log(arr) //['Hello', 'World']
  
  const users = 'sunny, jeesie, amy'
  console.log( users.split(', ')) //['sunny', 'jeesie', 'amy']

• toLowerCase, toUpperCase
  소문자, 대문자

  const str = "HELLO"
  console.log (str.toLowerCase()) //hello

• String.prototype.slice()
  문자열의 일부를 추출하면서 새로운 문자열을 반환
  시작하는 index부터 종료점 index전까지 추출됨

  const hello = 'Hello World' 
  console.log(hello.slice(6 , 11)) //World

• Stirng.prototype.replace()
  replace는 두개의 인수를 받음
  해당 문자데이터에서 첫번째 인수에 있는 문자를 찾아서 두번째 인수에 있는 문자로 바꿔주세용

  const hello = 'Hello World' 
  console.log(hello.replace('Hello', 'Honey')) //Honey World

  String.prototype.match()
  특정한 문자데이터에서 정규표현식을 통해서
  특정한 문자를 일치시켜 배열데이터 내부에서 추출시켜서 사용가능

  // 이메일주소의 아이디만 추출하고 싶을때 
  // (/.+(?=@)/) 정규표현식RegExp 
  const email = 'email@gmail.com' 
  console.log(email.match(/.+(?=@)/)) 
  //['email', index: 0, input: 'email@gmail.com', groups: undefined] 
  // 그 다음 배열의 첫번째 부분만 추출하면 되기때문에 
  console.log(email.match(/.+(?=@)/)[0]) //email

• String.prototype.trim()
  문자의 앞뒤로 연결된 공백문자를 제거해줌

  const hello = ' Hello World ' 
  console.log(hello.trim()) //Hello World

• String.prototpye.includes()
  들어있냐 여부에 따라 true, false반환

  const hello = ' Hello World ' 
  console.log(hello.includes('o')) //true

2022.04.20

코드 블록

크드블록{...}안에서 선언한 변수는 블록 안에서만 사용 가능

{
 //지역 변수
  const hello = 'Hello'
  console.log(hello) // Hello
}
console.log(hello) //ReferenceError: hello is not defined

특정 작업을 한데 묶어두는 용도로 활용가능. 블록 안엔 작업 수행에만 필요한 변수가 들어감

{
  const hello = 'Hello'
  console.log(hello) // Hello
}
{
  const hello = 'Hello Hi'
  console.log(hello) // Hello Hi
}
// 블록이 없고 동일한 변수 이름을 가지상태로 선언시 에러발생
  const hello = 'Hello'
  console.log(hello) // 

  const hello = 'Hello Hi'
  console.log(hello) // Identifier 'hello' has already been declared

중첩(nested) 함수

함수 내부에서 선언한 함수

function sum() {
  let count = 1;

  return function () {
    return count++;
  }
}
let result = sum()

console.log( result() ); // 1
console.log( result() ); // 2
console.log( result() ); // 3

▲위의 count가 증가되는 이유 ▼

클로저

클로저는 외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수
자바스크림트의 함수는 숨김 프로퍼티인 [[Environment]]를 이용해 자신이 어디서 만들어졌는지 기억함
함수 본문에선 [[Environment]]를 사용해 외부 변수에 접근함

렉시컬 환경(Lexical Environmnet)

1. 변수
   자바스크립트에는 실행 중인 함수, 코드 블록,
   스크립트 전체는 렉시컬환경이라불리는 내부 숨김 연관 객체(internal hidden associated object)를 갖는다
   1. 환경 레코드(Environment Record)- 모든 지역 변수를 프로퍼티로 저장하고 있는 객체
   2. 외부 렉시컬 환경(Outer Lexical Environment)에 대한 참조- 외부 코드와 연관됨
   3. 변수는 특수 내부객체인 환경 레코드의 프로퍼티일 뿐.즉, '변수를 가져오거나 변경하는 것'은 '환경 레코드를 가져오거나 변경하는 것'과 같음
      스크립트가 시작되면 스크립트 내에서 선언한 변수전체가 렉시컬 환경에 올라옴
      이때의 변수 상태는 특수 내부 상태(specail internal state)인 uninitialized
2. 렉시컬환경은 두 부분으로 구성
   렉시컬환경은 이론상의 객체로 코드를 사용해 직접 렉시컬 환경을 얻거나 조작하는 것은 불가능
3. 함수 선언문(function declaration)
   함수 선언문으로 선언한 함수는 일반 변수와는 달리 바로 초기화된다
   함수 선언문으로 선언한 함수는 렉시컬 환경이 만들어지는 즉시 사용 가능
4. 내부와 외부 렉시컬 환경
   코드에서 변수에 접근할 때, 먼저 내부 렉시컬 환경검색 후 원하는 변수를 찾지 못하면 내부 렉시컬 환경이 참조하는 외부 렉시컬 환경으로 확장된다
   이 과정은 검색 범위가 전역 렉시컬 환경으로 확장될 때까지 반복
   전역 레시컬 환경에 도달할때까지 변수를 찾지 못하면 엄격 모드(strict mode)에선 에러가 발생함
   비 엄격 모드에선 정의되지 않은 변수에 값을 할당하려고 하면 에러가 발생하는 대신 새로운 전역 변수가 만들어지는데, 이는 하위 호완성을 위해 남아있는 기능
5. 함수를 반환하는 함수
   모든 함수는 함수가 생성된 곳의 렉시컬 환경을 기억함
   함수는 [[Environment]]라 불리는 숨김 프로퍼티를 갖는데, 여기에 함수가 만들어진 곳의 렉시컬 환경에 대한 참조가 저장됨
   [[Environment]]는 함수가 생성될 때 딱 한번 값이 세팅되고 영원히 변하지 않음
   변숫값 갱신은 변수가 저장된 렉시컬 환경에서 이루어짐

가비지 컬렉션

함수 호출이 끝나면 함수에 대응하는 렉시컬 환경이 메모리에서 제거된다. 함수와 관련된 변수들도 이때 모두 사라짐
자바스크립트에서 모든 객체는 도달 가능한 상태일 때만 메모리에 유지
함수 호출이 끝났지만 렉시컬 환경에 메모리가 유지되는 이유
호출이 끝난 뒤에도 여전히 도달가능한 중첩 함수가 있을 수 있는데. 이떄는 중첩함수의 [[Environment]] 프로퍼티에 외부 함수 렉시컬 환경에 대한 정보가 저장되 도달 가능한 상태가 됨

2022.04.20

JS 타입 (자료형 Data Type)

원시형과 참조형
데이터의 불변성으로 구분
원시형이 할당될 때에는 변수에 값(value) 자체가 담긴다
참조형이 할당될 때는 보관함의 주소(reference)가 담긴다

원시자료형(Primitive data type)

• 문자(String)
• 숫자(Number)
• 불린(Boolean)
• 심볼(Symbol)
• null
• undefined
• Bigint

참조자료형(Reference data type)

• 객체(object)
• 배열(array)
• 함수(function)

문자(String)

'Hello'
"Hello"
`Hello` //보간법. 어떤 데이터를 중간에 끼워넣을때 ${}
const abc = 'ABC'
console.log(`Hello ${abc}`) // Hello ABC

const abc = 'ABC'
변수=그릇. 특정한 메모리를 참조하는 이름. 메모리주소

숫자(Number)

NaN(Not a Number): 수치 연산을 해서 정상적인 값을 얻지 못할 때 출력되는 값

const a = 1
const b = undefined
console.log(a * b) //NaN 
console.log(typeof(a * b)) //number

불린(Boolean)

true
false

null

값은 있지만 없다고 명시적으로 써주는것
null로(값이)할당된 상태. 즉 자료형이 정해진(defined)상태
존재하지 않는, 비어 있는, 알 수 없는 값을 _명시적_으로 나타냄

undefined

암시적으로 아무것도 없을 의미
어떠한 값으로도 할당되지 않아 자료형이 정해지지(undefined)않은 상태
값이 할당되지 않은 상태를 _암시적_으로 나타냄

null == undefined가 ture로 나오는 이유

자바스크립트 ==(동등연산자)의 자동 형변환 기능때문에
자바스크립트 ===(일치연산자)를 사용하면 결과가 다르게 나오는걸 확인가능. 일치연산자는 메모리주소로 비교함

console.log(null == undefined) // true
console.log(null === undefined) // false
console.log(1 == '1') // true
console.log(1 === '1') // false

심볼(Symbol)

유일한 식별자(ID) 데이터 이름을 만들때 사용

const a = Symbol('Hello') // 설명
const b = Symbol('Hello') // 설명
console.log(a == b) //false
// 객체 리터럴 {} 을 사용해 객체를 만든 경우, 대괄호를 사용해 심볼형 키를 만들어야 함
const user = {
    name: 'Sunny',
      [a]: 123
}

BigInt

제약 없이 정수를 다룰 수 있게 해주는 정수

console.log(123n) // 뒤에 n
console.log(1n + 2n) // 3n

console.log(Number(1n + 2n)) //3

배열

대괄호[]안에 자료형들이 들어갈 수 있음

const a = [1, '2', 3, {}, () => {}]
배열은 0부터 시작. index번호라 부르며 index번호로 조회하는걸 indexing(인덱싱)이라 부름
console.log(a[3]) // {}
// 리터럴 방식: 기호를 통해서(배열, 객체, 문자)데이터를 생성하는 것
const a = new Array ('apple', 'banana', 'cherry' )
const a = ['apple', 'banana', 'cherry' ]

객체(Object)

// key: Value
const obj = {
  a: 'Apple',
  b: 'banana',
  'casdfsad@#$%#$ASDasdf': 'cherry',
  b: 'berry'
}
console.log(obj['casdfsad@#$%#$ASDasdf']); //cherry
console.log(obj.a) //점 표기법 Apple
console.log(obj['a']) //괄호(bracket) 표기법 Apple
//value에는 다양한 데이터들이 들어갈 수 있다
//키가 중복되면 마지막에 써있는 키만 적용된다

코드의 변수나 함수등에 언더바(_) 사용하는 이유?

스코프 구분에 따른 표시(숨기는 용도로 많이씀).
해당 콘텍스트에 선언하여 사용되는 고유의 스코프영역에서만 사용할 것임을 직관적으로 알림

함수(Function)

함수도 하나의 데이터다
명령을 감싸는 역할을 하며 입구를 만들고 출구로 반환(return)을 할 수 있음
함수의 선언과 표현

함수 선언(호이스팅가능). 기명함수
function ab() {
}
함수 표현(호이스팅불가능). 어딘가에 할당하고 있다. 익명함수
const ab = function () {
}

Truthy & Falsy

Trutyh: true 같은
Falsy: false 같은

// Falsy
if (false)       
if (null)
if (undefined)
if (0)
if (-0)
if (NaN)
if ('')
if (0n)

자료형 확인

• typeof 데이터
• 데이터.constructor
• Object.prototype.toString.call(데이터)

변수

const, let, var
데이터를 담아놓는 하나의 그릇. 즉, 메모리에 있는 주소를 들고 있는
const와 let중 어떤걸 쓸지 고민될 떄 우선 const를 쓰고 재할당이 필요할 때 let쓰기

1. const(상수: 변하지 않는값 constant)
   • 유효범위: 블록 레벨
   • 재할당: 불가능
   • 중복 선언: 불가능
   • 호이스팅(Hoisting): 불가능
   • 전역 등록: 불가능
2. let(변수: variable. 변하는 값)
   • 유효범위: 블록 레벨
   • 재할당: 가능
   • 중복 선언: 불가능
   • 호이스팅(Hoisting): 불가능
   • 전역 등록: 불가능
3. var(쓰지 마세요 추억으로 사라질 거에요)
   • 유효범위: 함수 레벨
   • 재할당: 가능
   • 중복 선언: 가능
   • 호이스팅(Hoisting): 가능
   • 전역 등록: 가능

• 유효범위(scope)
  블록스코프: 중괄호 {}로 감싸진 범위
  함수스코프: 블록 스코프 중 함수 function(){}범위를 갖는 스코프
• 재할당
• 중복선언(똑같은 변수이름이 두개이상일때)
• 호이스팅(Hoisting)
  JS는 위에서 부터 아래로 읽어내려가는 형식인데 밑에있는걸 위로 끌어올려서 선언시키는것
  즉, 선언부를 유효한범위의 최상위로 끌어올리는 현상
• 전역(Global)선언시 전역 객체(window)의 속성으로 등록

22.04.20

export(내보내기)

함수, 객체 원시 값을 내보낼 때 사용.
HTML안에 작성한 script에서는 사용할 수 없음
use strict의 존재 유무와 상관없이 무조건 엄격 모드

// 배열
export let fruits = ['apple','banana', 'orange']
// 상수
export const year = 2022

// 선언부와 export가 떨어져 있어도 내보내기 가능
export{fruits, year}
// fruits를 hi로 year을 hello로 이름을 바꿔서 가져오고 싶을때
export {fruits as hi, year as hello}

export default: 해당 모듈엔 개체가 하나만 있다는 사실을 명확히 나타냄

// getRandom.js
export default function random () {
  return Math.floor( Math.random() * 10 )
}

import(가져오기)

export로 내보낸 값을 가져올때 사용. 무언갈 가져오고 싶다면 import {...} 안에 적어주면 됨

// main.js파일에 가져오고싶을때
import {fruits. year} from './main.js';
// fruits를 hi로 year을 hello로 이름을 바꿔서 가져오고 싶을때
import {fruits as hi, year as hello} from './main.js';

// export default로 가져오기
// getRandom.js에서 main.js로
import random from './getRandom'

2022.04.15

Node.js

Chrome V8 JavaScript 엔진(자바스크립트를 해석하고 동작시키는)으로 빌드된 JavaScript런타임(프로그래밍 언어가 동작하는 환경)
즉 자바스크립트라는 프로그래밍언어가 동작하는 컴퓨터 환경

Node.js 사용해야하는 이유

• 컴퓨터를 제어하는것을 배움
• 웹페이지를 제작할때 가볍게 도움을 받을 수 있음
• HTML, CSS, JS만 가지고 페이지를 구현하는건 비효율적
• Node.js를 통해 여러가지 모듈을 설치해 도움을 받아가며 개발

Node.js설치

https://nodejs.org/ko/ 접속해서 다운받기

왼쪽 짝수버전

• LTS(Long Term Supported): 장기적으로 안정되고 신뢰도가 높은 지원이 보장되는 버전

오른쪽 홀수버전

• 최신(업데이트가 자주일어날 수 있음)

설치 후 터미널에

node --version 를 쳐보면 설치된 버전을 알 수 있음
node를 설치하면 npm도 같이 설치됨!!

NVM(Node Version Manager)

노드 버전관리 도구
협업을 할때나 다양한 프로젝트를 진행시 해당 프로젝트에 최적화된 Node버전을 사용할 수 있게 됨

NVM 설치

버전 설치 방법

nvm install 16.14.2 설치 후
nvm ls 로 확인
//다른버전 설치를 원할시 같은방식으로
nvm install <다른버전>

//버전 변경을 원할시
nvm use <원하는버전>
//버전 삭제하고싶을때
nvm uninstall <삭제할버전>  

NPM(Node Package Manager)

전 세계의 개발자들이 만든 다양한 기능(패키지, 모듈)들을 관리
npm안에 다양한 패키지들이 들어있고 원하는 기능을 npm install로 설치해서 사용할 수 있음
패키지: 프로젝트에 설치해서 웹사이트를 동작시킴( ex)lodash, swiper, gsap ...)

npm으로 trade off발생

• 학습 난도 증가
• 구성이 복잡
• 관리 효율 증가
• 손쉬운 기능 고도화

NPM 설치

npm init -y
package.json 이 생성된다 
package.json 을 클릭해서 보면 정보확인가능하며 "main": "index.js", 생략가능

parcel-bundler 설치

npm install parcel-bundler -D
//원하는 파슬번들러 설치하고싶을때
npm install parcel-bundler@원하는버전 -D
설치를 하면 node_modules, package-lock.json 이 생김
파슬 번들러를 사용하기 위한 패키지들이 다 설치된것
node_modules -> parcel-bundler -> package.json -> dependencies부분에 사용할 수 있는 패키지들이 나와있음 
밖에 깔려있는package.json을 확인해 보면 devDependencies부분에 parcel-bundler가 깔려있는걸 확일할 수 있음

package.json: 직접적으로 관리하는 파일
package-lock.json: 자동으로 관리되는 파일

1. Lodash 설치

npm install lodash
//lodash패키지 최신버전정보 확인
npm info lodash

2. node_modules 삭제했을 경우

언제든지 다시 살려낼 수 있음!
npm install 또는 npm i
한번 지웠더라도 깔았었던 내역이 남아있으면 다시 설치가됨

3. npm install -D, npm install 의 차이

npm install -D <패키지이름>

• -D는 --save Dev의 약어
• 개발용 의존성 패키지 설치.
• 내가 설치한 패키지들이 개발할때만 필요. 웹브라우저에서는 직접적으로 동작 안함

npm install <패키지이름>

• 일반 의존성 설치
• 프로젝트 웹브라우저에서도 동작할 수 있음

4. package.json에 들어가

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

개발용 의존성 패키지로 parcel을 설치후
터미널에

npm run dev(scripts에 쓴 이름)

scripts 에 build라는 이름을 써서 추가해주면 실제 사용자가 보는 환경을 출력해줌

"scripts": {
    "build": "parcel bulid index.html"
  },

터미널에

npm run build(scripts에 쓴 이름)

dist 폴더가 생성됨

• 코드 난독화: 개발자가 보는게 아닌 웹브라우저에서 동작시키는 용도이기때문에 보기힘들게 되있음
• 번들(bundle): 우리가 프로젝트 개발에 사용한 여러 모듈(패키지)을 하나로 묶어내는 작업
• //ctrl + c는 개발환경 종료

유의적 버전(Semantic Versioning, Semver)

의미가 유
Semantic versioning 2.0.0
Major: 기존버전과 호환이 되지 않음. 즉, 1.2.7, 2.0.0 앞에가 다르면 안됨
Minor: 새로운 기능 추가. 기존버전과는 호환이 됨
Patch: 버그 및 오타. 사소한정도. 기존버전과 호환
버전앞에 ^(캐럿)기호가 major 버전안에 붙어있으면 가장 최신 버전으로 업데이트 가능하다는 것
항상 버전관리를 해줘야함

업데이트 ^(캐럿)기호 의미

package.json에 써있는 버전이 최신게 아닐 가능성도 있으니
modul -> lodash -> package.json -> "version” 부분 확인해줄것
npm install lodash@버전이름
package.json에 vsersion이 바껴있는걸 확인 할 수 있음
npm update lodash
하면 버전이 업데이트 되는데 그 이유는 lodash앞에 ^캐럿기호가 붙어있기때문에 가능 major버전은 제외하고 가능

npm 관리

cache, modul 삭제 후 
npm i
npm run 으로 cache랑 dist 다시 불러올 수 있음
git init을 해주기 전에 따로 버전관리를해줄때 
.gitignore에 
.cache/ 
dist/
node_modules/
파일 제외시키자
git init을 하면 U표시가 뜨면 gitignore된것

2022.04.15

img 아래쪽에 여백이 있는 이유

• img는 inline요소. 글자를 취급하는 요소
• baseline이라는 기준선이 존재하게 됨
• 또한 inline요소는 margin, padding의 top, bottom 여백 값을 제대로 줄 수 없다

  해결방법

  display: block;
  vertical-align: bottom;

position

position: absolute, position:fixed

• display: block;의 값을 갖고 있기때문에 해당css영역에 display: block;이 있으면 생략가능
• viewport에 영향을 받아 width: auto; 가로너비가 줄어들려고 시도하기 때문에 width: 100%로 줄것

정렬방법

수직정렬

1. 부모요소에 position: relative;를 주고 정렬을 시도하려는 영역에 position: absolute;
2. 기준을 잡아줘야 하기 때문에 top: 0;, bottom: 0;으로 수직정렬
3. margin: auto; 해주면 수직정렬완성(실제 이미지 크기아 같은 사이즈로 정확한 height값을 줘야함)

수평정렬

1. 부모요소에 position: relative;를 주고 정렬을 시도하려는 영역에 position: absolute;
2. 기준을 잡아줘야 하기 때문에 left: 0;, right: 0;으로 수직정렬
3. margin: auto; 해주면 수직정렬완성(실제 이미지 크기아 같은 사이즈로 정확한 width값을 줘야함)

가운데정렬은 left, right, top, bottom값을 모두 0으로 주면 가능

<body>
  <div class="header">
    <div class="logo"></div>
  </div>
</body>

.header {
  background-color: pink;
  width: 600px;
  height: 600px;
  position: relative;
}

.header .logo {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 50%;
  height: 50%;
  background-color: tomato;
}

CSS 메뉴 구분선

• 가상요소 ::before, ::after사용
• content: ""; 를 꼭 넣어줘야함
• ::before, ::after은 inline요소

  <body>
  <ul class="menu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  </body>

  .menu  {
  display: flex;
  list-style: none;
  }
  .menu li {
    padding: 0 20px;
    position: relative;
  }
  .menu li::before {
  content: "";
  width: 1px;
  height: 15px;
  background-color: black;
  top:0;
  bottom:0;
  left:0;
  position: absolute;
  margin: auto;
  }
  .menu li:first-child::before {
  display:none;
  }

CSS calc()

• calc() 함수는 매개변수로 표현식 하나를 받고, 표현식의 겨로가가 최종값이 됨
• 표현식은 단순 계산식은 무엇이든 가능
• 표준 연산자 우선순위를 따름
• +(덧셈), -(뺄셈)연사자는 좌우에 공백이 있어야함
• *(곱셈), /(나눗셈)은 좌우 공백 필요없음

FHD = 1920 x 1080

비율 16 : 9 = 100% : 56.25%