니꼬쌤의 무료 익스텐션 TOP 10개 추천한다 에서 추천하는 익스텐션 링크를 모아둔 글입니다.

ColorZilla

동일한 색상 코드 추출하는 도구. 클론 코딩 시 유용.

Momentum

새탭 오픈 시 배경 그림 및 시간, 간단한 todo 작성할 수 있는 익스텐션.

CSSViewer

원하는 요소의 css를 볼 수 있음

JSONViewer

json을 보기 편하게 보여주는 뷰어. REST API 사용 시 유용.

React Developer Tools

react를 사용하는 웹사이트에서 어떻게 마운트되고 state, props값 등을 볼 수 있음. 리액트 개발자 필수 도구 ⭐️

WhatFont

웹사이트에서 사용하는 폰트를 찾아서 알려줌

Page Ruler Redux

웹사이트에서 줄자 사용 가능

BuiltWith Technology Profiler

웹사이트가 어떤 스택, 플러그인등을 사용하는지 알려줌

Altair GraphQL Client

GraphQL 개발 시 테스트로 많은 쿼리를 보내야 하거나 할 때 유용.

Apollo Client Devtools

어플 데이터의 state 알려줌. 캐쉬, 쿼리, 뮤테이션의 정보 확인 가능. graph.apollo 개발자라면 설치 필수⭐️

크롬 웹 스토어 바로가기 👉

엘리님의 웹사이트, 모바일 앱 디자인 무료 툴 5가지 | 사이드 프로젝트 꿀템 🍯🐝를 정리한 글입니다 :)

❶ 색상 팔레트 - Color Space

사이트 바로가기 👉

색상 컬러 팔레트를 쉽게 만들 수 있는 사이트. 웹사이트의 주요 키 컬러를 입력하면, 컬러 팔레트 추천해줌 👍

❷ 그레디언트 - CSS Gradient

사이트 바로가기 👉

원하는 그레디언트를 시각적으로 쉽게 만들고 해당 그레디언트의 코드를 가져올 수 있음

❸ 꼬불 꼬불 선나누기 - Shape Divider

사이트 바로가기 👉

비스듬하거나, 꼬불꼬불한 divider svg를 만들어주는 사이트. 원하는 모양 만든 후 svg를 감싼 html과 css로 복사하거나 svg로 다운로드 가능.

❹ 다양한 SVG -Haikei

사이트 바로가기 👉

추상적인 모양의 svg, png 다운로드 가능. 컬러, 방향, 사이즈, shape등 변경 가능.

❺ 이쁜 배경 이미지 - Cool Backgrounds

사이트 바로가기 👉

다양한 모양의 background 이미지 다운로드 가능.

니콜라스쌤의 CSS의 미래를 알려드림. feat. 구글 I/O을 보고 정리한 글입니다.

color-mix

브라우저에서 색상 혼합 기능.

브랜드 색상으로부터 색상을 도출하는데 유용.

accent-color

html요소의 색상 변경.

color-contrast

브라우저가 생각하는 대비되는 색상 골라줌.

.box{
    background-color: red;
    color: color-constrast(red);
}

기본은 검은색, 흰색중 선택.

원하는 컬러 리스트 중 브라우저가 선택 할 수 있음

color: color-constrast(blue vs pink, yellow, green);

-> 배경색상은 blue, pink, yellow, green중 blue와 가장 대비되는 색상 선택

inert

페이지 섹션을 고정. (html 속성) inert 속성을 가진 html 요소는 클릭, 포커스 등을 수신하지 않고 멈춤.

사용 예시 )

• 유저가 한번 클릭한 버튼 얼리고 싶을 때
• 양식 전송 후 유저가 다른 곳 클릭하지 않도록 유도 할 때

<form inert>
  <input type="..."/>
  <button> save </button>
</form>

:has()

부모 요소에 특정 자식이 있는지 여부에 따라 부모 요소 스타일 적용. ex)

현재(2022.05) 사파리에서만 사용 가능

Viewport Units

• lvh : 가장 큰 viewport 높이 (네비게이션 없는 화면 크기)
• svh : 가장 작은 viewport 높이 (네비게이션이 있는 화면 크기)
• dvh : 동적 viewport 높이 (네비게이션 표시 여부에 따라 달라짐)

@nest

부모 루틴 안에 자식 루틴 넣어서 짜기

@scope

스타일 범위를 지정하거나 자신만의 버블로 분리 가능

@container

전체 페이지의 넓이 혹은 부모 요소에 대응 ex)

header{
    container-name : header-container;
}


@container header-container(min-width: 600px){
    nav {
        display: flex;
    }
}

-> header-container의 최소 너비가 600px 일때 네비게이션의 display 속성은 flex임.

@custom-media

미디어 쿼리 변수를 만들어 재사용 가능

다크모드, 라이트모드, 가로모드, 세로모드등에 대한 변수 만들고

미디어 쿼리에서 재사용

현재 브라우저에 따라 지원하는 기능도 있지만 아직 지원하지 않는 기능들도 있으니 알아만 두는 걸로...⭐️

엘리님의 "도커 한방에 정리 🐳 (모든 개발자들이 배워보고 싶어 하는 툴!) + 실습"을 보고 일부 내용을 정리한 내용입니다

도커란? 🐳

어플리케이션을 패키징 할 수 있는 툴. 어플리케이션을 구동하는데 필요한 모든 것을 도커 컨테이너 안에 담아놨다.

도커 컨테이너 사용 시 장점👍

• 어플리케이션을 구동하기 위한 런타임 환경에 필요한 모든것들을 어떤 pc에서도 언제든지 동일하게 구동 가능
• 다른 pc에서 버전으로 인한 문제 발생 x
• 다른 pc 환경 설정 및 변경에 대한 번거로움 줄여줌

VM과 도커의 차이🔍

VM

• 무거운 운영체제 포함
• 시작하는 데 오래걸림
• 컴퓨터, 운영체제, infrastructure 리소스를 많이 잡아먹을 수 있음

👉 차이점

• vm은 운영체제 포함
• 도커 컨테이너는 운영체제 미포함

컨테이너 구동시 컨테이너 엔진 필요 컨테이너 엔진이 host os에 접근해서 필요한 것들을 처리 컨테이너 엔진 중 가장 많이 사용되는게 "도커"

도커의 3대 구성요소! (순서)

도커의 큰그림 : 컨테이너를 만들고, 구동하고 배포한다

1️⃣ dockerfile

컨테이너를 어떻게 만들어야 되는지에 대한 설명서

구성 요소

• copy files : 어플리케이션을 구동하기 위해 꼭 필요한 파일 종류
• install dependencies : 필요한 라이브러리, 프레임워크등 외부 디펜던시 명시
• set environment variables : 환경 변수 설정
• run setup scripts: 구동하는 스크립트

2️⃣ image

실행되고 있는 어플리케이션의 상태를 스냅샷해서 만들어 둔것.

3️⃣ container

캡쳐해둔 이미지를 고립된 환경에서 개별적인 파일 시스템 안에서 실행 할 수 있는것. 컨테이너 안에서 어플리케이션이 동작한다.

도커 이미지 배포하는 과정 🔄

깃, 깃허브와 비슷한 관계

컨테이너 레지스트리(이미지를 공유할 수 있는)

public

• dockerhub
• red hat quary.io
• github packages

private

• aws
• google cloud
• microsoft azure

🐳 정리 🐳

• 로컬 머신에 도커 설치
• 서버에 도커설치

1. 어플리케이션을 구동하는데 필요한 도커파일 작성
2. 이미지 만들기
3. 컨테이너 레지스트리에 push
4. server에 pull
5. 컨테이너 실행

구현 중 페이지에서 모달 컴포넌트 닫기 버튼 클릭시 모달이 닫히면서 스크롤이 상단으로 올라가버리는 버그 발생.

항상 발생하는것이 아닌 간헐적으로 발생함. 주로 처음 사이트 접속 후 실행하면 발생하며, 이후 잘 발생안함.

try1

window.history.scrollRestoration = 'manual' 을 사용

//스크롤 복원 비활성화
if (history.scrollRestoration) {
  window.history.scrollRestoration = 'manual';
}

https://blog.coderifleman.com/2016/11/28/scroll-restoration-property-of-history

🔍 History.ScrollRestoration?

기록 탐색 시 사용할 스크롤 위치 복원 기능의 기본값을 웹에 지정.

1. auto : 사용자의 스크롤 위치 장소로 복원
2. manual : 스크롤 복원x. 사용자가 직접 스크롤 해야됨.

MDN-ScrollRestoration

→ 적용전보다는 빈도가 줄어든 느낌이나, 가끔씩 계속 발생함.

try2

router.push의 scroll 옵션 사용

router.push 사용시 scroll: false를 설정해서 스크롤 막을 수 있음.

router.push('/url', undefined, { scroll: false });

https://stackoverflow.com/questions/65902664/next-js-router-push-without-scrolling-to-the-top

→ 근데 이러면 history에 계속 쌓임

try3

router.beforePopState() 를 사용

 router.beforePopState((state) => {
    state.options.scroll = false
    return true
  })

https://nextjs.org/docs/api-reference/next/router#routerbeforepopstate https://developer.mozilla.org/en-US/docs/web/api/window/popstate_event

→ 이후 발생안함.

드림코딩 by 엘리님의 "구글링 잘하는법 꿀팁 🍯 (코딩의 시작과 끝은 뭐다? 탁월한 개발자 되는 방법)"을 보고 정리한 글입니다. 영상 보시는걸 추천합니다!👍

키워드 선별하기

관련된 예제나 구현코드등을 보고 싶을 때 -> 명확한 키워드로 검색하는것이 좋음

ex) drag and drop 구현시

위에보단 아래처럼 검색하는게 더 좋다.

검색 방법 1	검색 방법 2

exact match

에러 메세지 검색 등 정확한 검색어 매칭 시 사용하면 좋음

구글은 단어 하나라도 포함되어있는 기사나 블로그 보여주므로

에러 메세지 전체가 포함된 검색 결과를 얻고 싶을 때 ""붙여서 검색.

ex) docker "mysql exited with code 137" -> mysql exited with code 137 전부가 포함된 내용만 검색됨

exact match 전	exact match 후

-exclude

특정 키워드 검색 결과에서 제외시키는 기능. 제외할 키워드 앞에 - 붙여서 검색.

ex) store javascript date object in mysql -php -> php 제외되고 검색됨.

site:url

특정 url에서 검색하고 싶을 때 site:url 검색어 로 검색

ex)stack overflow에서 만 검색하고 싶을 때

기간 설정

특정 기간 전/후로 올라온 내용만 보고 싶을 때

• before:date : date 날짜 전에 올라온 내용만 검색
• after:date : date 날짜 이후 올라온 내용만 검색

ex) site:stackoverflow.com CSS center a div vertically after:2020 -> 2020년 이후 데이터만 나옴

키워드에 포함 안시키고 검색 후 tools > Any time 날짜 범위 조정 가능

How to search on Google

• 타입검사 항상 만족
• 의도치 않은 사이드 이펙트 발생할 수 있음 (의도치 않은 형 변환이나 전혀 예상하지 못한 의도되지 않은 타입의 값이 대입되는 등)

ex)

let a: any;
a = 123; // a에 숫자 할당

let str: string = a; // string = any 이므로 에러 발생하지 않음.

a = {}; //na에 object 할당
const b = a-1 // 에러 발생하지 않음

unknown

• unknown 타입엔 모든 자료 다 집어넣을 수 있음
• 자료집어넣어도 타입은 그대로 unknown이다.
• 모든 타입의 공통적인 연산밖에 할 수 없음

let a: unknown;
a = 123;

let str: string = a; // 🚨Error. 타입이 지정된 변수에 할당 못함
const b = a-1; // 🚨Error. - 는 number에 대한 연산이므로 안됨.

// 할당하기 위해서는 아래와 같이 타입을 명시필요.
let str2: string = (a as string);

any와 unknown 차이🤔? any는 의도치 않은 사이드 이펙트 발생할 수 있으나 unknown은 최소의 공통적인 연산만 가능하므로 any 보다 unknown이 좀더 안전한 편

never

• 모든 타입의 하위 타입
• never 타입에는 할당 못함.

//1. 함수 반환값 never로 사용하는 경우 : 타입 추론 예외 제거
function throwError(errorMsg: string): never { 
  throw new Error(errorMsg); 
} 



//2. 특정 타입 값을 할당 받지 못하게 할때 : T가 string이면 never를 반환해서 NonString 타입을 사용하는 변수에 string타입이 올 경우 문제를 발생시킴
type NonString<T> = T extends string ? never : T;

const a: NonString<number> = 1 //ok
const b: NonString<boolean> = true // ok
const c: NonString<string> = '1' //🚨Error.

[타입스크립트] any, unknown 그리고 never 의 차이점 TypeScript의 unknown, any 그리고 never

typeof A → A(변수/함수등)의 type을 반환

let str = "hello"
let str2: typeof str = "hi" 
// === let str2: string ="hi"

keyof 연산자

keyof A → A의 모든 프로퍼티의 키값을 union 형태로 반환

interface Todo {
    id: number
    text: string
}

type Keys = keyof Todo
// === type Keys = 'id' | 'text'

let a: Keys = 'id'
a = 'text'
a = 'ids' // 🚨ERROR!
a = 'id' | 'text' // 🚨ERROR!

Mapped Type (in 연산자)

기존 타입을 새로운 타입으로 변환

type Test = 'A' | 'B' | 'C'
type MappedTest = {
    [key in Test] : number;
}
const data:MappedTest = { A:1, B:2, C:3 }
const data1:MappedTest = { A:1, B:2 } // 🚨ERROR!

https://itchallenger.tistory.com/170 https://medium.com/harrythegreat/typescript-유틸리티-클래스-파헤치기-7ae8a786fb20

코딩앙마😈 님의 6.제네릭 을 보고 정리한 내용입니다.

Generic🤔?

선언 시 타입 매개변수로 작성하고, 생성 시점에 타입 결정. 함수, 클래스, 인터페이스에서 사용 가능

함수에서 제네릭

// 배열의 사이즈 구하는 함수 정의 시 배열값들의 타입을 다양하게 받고 싶을 경우
function getSize(x : (number| string )[]) : number{
  return x.length;
}
getSize([1,2,3]) // 3
getSize(['a','b']) // 2
getSize([true, false, true]) //🚨ERROR! (boolean 타입 없음)

// -> union type으로 작성하기엔 예외사항 생길때마다 추가해줘야함.
// -> Generic으로 설정하여 생성 시점에 타입 결정

function getSize<T>(x : T[]) : number{
  return x.length;
}
// ** T: 타입 파라미터로, 특정 타입 전달받아 함수에서 사용 가능.
// 커스텀 타입도 설정 가능.

getSize([1,2,3]) // 3
getSize(['a','b']) // 2
getSize([true, false, true]) // 3

인터페이스 제네릭

interface Mobile<T>{
   name: string;
   price : number;
   option: T;
}

// 생성 시점에 타입 파라미터 
type Option = {color: string, coupon: boolean}
//커스텀 옵션도 가능
const m1: Mobile<Option> = {
    name : 's21',
      price: 1000,
      option :{ color: 'red', coupon: false}
}

const m2: Mobile<string> = {
    name : 's20',
      price: 900,
      option :'good'
}

generic 에 extends 사용하기

interface User{
    name: string
      age: number
}

interface Car{
      name: string
      color: string
}
interface Book {
    price: number
}

const user:User ={name : 'a', age: 10}
const car:Car = {name: 'bmw', color: 'red'}
const book:Book = {price:3000}

function showName<T>(data :T) : string{ 
  return data.name;   // 🚨ERROR! T에 name이 있다고 장담할 수 없음
}
showName(user);
showName(car); 


// showName에서 에러가 발생하지 않도록 T를 extends해줌
function showName<T extends {name:string}>(data :T) : string{ 
  return data.name; // 🙆‍♀️
}

니꼬샘의 개발자 99%가 모르는 신박한 HTML 태그 5개! 강의를 보고 정리한 내용입니다. 강의보러가기👉

1. progress & meter

progress

    <progress value="50" max="100"></progress>

meter

<meter value="10" min="0" max="100" low="20" high="65" optimum="15"></meter>

meter와 progress 차이 ✨ meter는 속성에 따라 값이 높고 낮을때 색상을 다르게 설정하여 작업의 진행 상태를 표현할 수 있지만, progress는 값의 상태만 전달.

2. detail & summary

유저의 클릭으로 정보를 보여주고 숨기는 패턴 적용 가능

<details>
    <summary>클릭 전 볼 수 있는 영역</summary>
    <span>클릭 후에만 표시되는 영역</span>
</details>

css로 유저의 클릭 여부에 따라 스타일 변경 할 때 🔖

      details[open]{
        background-color: #cdedfd;
    }
      

3. 달력, 날짜 선택기

input 태그의 type으로 설정 가능. 브라우저마다 UI 다름.

<input type="date"/>
<input type="week"/>
<input type="month"/>
<input type="time"/>

type=date 일때 : type=week 일때 : type=month 일때 : type=time 일때 :

4. picture

유저의 장치나 환경에 따라 각기 다른 버전의 이미지 표시하거나 브라우저가 이미지 포맷 지원하지 않을 때 다른 포맷 제공할 수 있음. picture태그는 img태그, source 태그와 함께 사용됨.

장점 💡 환경에 맞는 이미지를 다운로드 해서 보여줄 수 있으므로, 페이지 로딩 속도를 높일 수 있음.

<picture>
    <source srcset="src/01.jpeg" media="(min-width:1200px)"/>
    <source srcset="src/02.jpeg" media="(min-width:900px)"/>
    <source srcset="src/03.jpeg" media="(min-width:500px)"/>
    <img src="src/04.jpeg" />
</picture>

• media 사이즈에서 각 해당 이미지 보여줌
• img태그는 default 이미지. 브라우저가 picture, source태그 미지원시 사용.

5. datalist

javascript 없이 auto complete(자동완성)🔥 사용 가능. 입력에 따른 필터 기능 제공.

주의사항 input의 list와 datalist의 id는 동일해야됨

<label for="movie">What is your favourite movie?</label>
<input type="text" list="movie-options"/>

<datalist id="movie-options">
  <option value="Dune"/>
  <option value="Dark waters"/>
  <option value="The Artist"/>
  <option value="The Avengers"/>
  <option value="Iron Man"/>
  <option value="Iron Man II"/>
  <option value="Matrix"/>
</datalist>

드림코딩 by 엘리님의 코딩의 시작과 끝, 디버깅 | 실력있는 개발자의 필수 무기 🐛🐞 강의를 보고 간략하게 정리한 내용입니다. 강의 보시는걸 추천합니다.👍 강의 보러 가기 👉

디버깅이란?

현재 상황에서 예상 상황 or 원하는 상황으로의 차이를 좁혀가는 것. *디버깅에서 가장 중요한것 : 문제를 정의하는 것💥 *

VS code 디버거 사용법

• 확인하고 싶은 지점에 break point 설정

메뉴

• VARIABLES : 변수 값 확인 가능. 지역, 전역변수로 분리되어있다. _(더블클릭하여 변수값 수정 가능)_
• WATCH : 확인하고 싶은 변수 혹은 코드를 추가하여 값을 확인할 수 있다._ (+ 아이콘 선택해서 추가)_
• *CALL STACK *: 함수가 어떤 순서로 실행되는지 확인 가능
• LOADED SCRIPTS: 함께 로딩 된 모든 스크립트에 대해 확인 가능
• BREAKPOINTS : 선택한 break point 확인 및 활성화/비활성화 가능

액션

1. continue : 다음 break point로 실행
2. step over : 현 지점에서 한줄씩 실행. (함수 실행 시 함수 안의 동작 확인하지 않음)
3. step into : 정의한 함수 안의 동작 실행 시
4. step out: 함수 바깥으로 이동 시
5. restart: 재시작
6. stop : 디버거 중지

꿀팁

특정 조건에 만족할 때만 break point 실행하는 방법

break point 마우스 우클릭 > Edit break point... > 조건 입력

조건뿐 아니라, 로그도 확인할 수 있음. Edit break point 실행시 Expression, Hit count, Log Message 중 원하는 조건 선택하여 적용하면됨.

함수 표현식

var a = function(){
    //...
}
//화살표 함수로도 표현 가능
var a = () => {
    //...
}

• 해당 라인에 도달할 때만 정의됨.
• 함수 선언과 다르게 호이스팅 되지 않음.

함수 선언

function a() {
    //...
}

• 함수 선언은 그 선언을 둘러싼 함수의 최상부나 저역 범위로 끌어올려짐(호이스팅).

함수 표현식과 함수 선언 차이

• 함수 표현식은 호이스팅되지 않고 함수 선언은 호이스팅 된다.

// TypeError: a is not a function
a();

var a = function(){
    console.log('aaa');
}
![](https://images.velog.io/images/jiseon-han/post/c1c3c3a3-849e-48c1-899e-0b7e44dbe53c/image.png)
//outputs: bbb
b();

function b() {
    console.log('bbb');
}

🔖 참고 MDN 함수 표현식 MDN 함수 선언

엘리님의 "콘솔 로그 제대로 쓰고 있을까? 🤔" 강의 내용을 정리한 페이지입니다. 강의 보러 가기🔖

log level

console.log('log')

• 가로 안의 값을 출력할 때 사용
• 개발단계에서 주로 사용된다.
• 배포 시 왠만하면 삭제

console.info('info')

• 특정 정보 출력 시 사용
• 배포 시 왠만하면 삭제(정말 필요한 정보는 남겨둘 수 있음)

console.wran('wran')

• 경보 단계에서 사용

console.error('error')

• 예상하지 못한 에러, 시스템 에러 등을 출력 시 사용

[브라우저에서 실행 결과]

log level로 구분해서 사용하는 이유💡 log, info의 경우 배포 시 출력하지 않거나, 로그 파일로 남겨두지 않는등 설정할 수 있고, wraning, error의 경우에만 어떤 특별한 동작을 하도록 만들 수 있기 때문에 레벨에 따라 정확한 함수 사용하는것이 좋음.

유용한 console 함수

assert

특별한 조건이 거짓일 때만 출력할 수 있도록 하는 함수

console.assert(2===3, 'not same!');
console.assert(2===2, 'same!');

//result
> Assertion failed: not same!

pring object

object에 대해 가독성 있게 출력하는 방법 3가지

const dog = {type: '🐶', name : '츄츄', owner :{name : 'ellie'}};

console.log(dog);
console.table(dog);
console.dir(dog, {colors: false, depth: 0});

• table로 출력시 가독성 있게 출력 가능
• dir 출력 시 깊이 있게 중첩된 오브젝트 표현 상세 조절 시 사용 가능 (옵션값으로 데이터 보여줄 지 여부 줄 수 있음)

❓ 크롬 브라우저-버전 96.0.4664.110(공식 빌드) (arm64)-로 실행 시 dir의 옵션값 동작이 다름

measuring time

내가 작성한 코드를 실행하는데 얼마나 시간이 걸렸는지 측정할 때 사용

console.time('for loop');
for(let i = 0; i <10 ; i++) {
  i++;
}
console.timeEnd('for loop');

counting

특정한 함수가 몇번 실행되었는지 알고 싶을 때

//🙅‍♀️ : 특정 변수 만들어야됨
let count = 0;
function a(){ count++;}
a();
a();
a();
console.log(`함수는 ${count}번 실행됨`);

// 🙆‍♀️
function a(){ 
    console.count('a function')
}
a();
a();
console.countReset('a function'); // count 초기화
a();

trace

해당 함수가 어디서 호출되었는지 알 수 있음. 이벤트 리스너, 비동기적 수행된 함수등에서 어디에서 누가 호출했는지 알고싶을 때 유용

function f1() {
    f2();
}
function f2() {
    f3();
}
function f3() {
      console.trace();
    console.log('hi :)');
}

f1();

ex)

<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <script src="index.js"></script>
</head>
<body>
  ...
</body>
</html>

장점) 웹사이트가 완벽한 형태로 보여짐. 단점) script 파일이 dom을 조작한다면 문제가 발생할 수 있다.

why🤔? html 파싱중 script태그 만날경우 파싱을 멈추고 script의 다운 및 실행 후 html 파싱을 이어서 진행하므로 존재하지 않는 DOM요소에 접근하게 될 수 있음.

또한, script 파일이 크고 무거울 경우 파일을 다운로드 및 실행하는 HTML 파싱을 하단 만 상태를 보여주고 있으므로 ux에 안좋다.

2. <body/> 태그에 위치한다.

ex)

<!DOCTYPE html>
<html lang="en">
<head>
  ...
</head>
<body>
  ...
  <script src="index.js"></script>
</body>
</html>

장점) HTML 파싱 중단으로 인해 발생되는 문제는 해결. 단점) 사용자가 의미있는 컨텐츠를 보기 위해 js가 필수라면 HTML이 먼저 보여지는게 의미가 없어짐.

3. <head/> 위치하지만 async 옵션 추가한다.

ex)

<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <script async src="index.js"></script>
</head>
<body>
  ...
</body>
</html>

async : script다운시에는 파싱하고 실행할 때만 html 파싱 잠시 중단.

장점) fetching(다운로드)시에도 병렬적으로 HTML paisng 되므로 1보단 속도 단축 단점) 결국 파싱 중 멈추긴하므로 dom조작 시 문제 발생할 수 있음. script 파일이 여러개일 경우 순서 상관없이 빨리 받는 파일 실행하므로 순서 영향 있는 경우 문제 발생

4. <head/> 위치하지만 defer 옵션 추가한다.

ex)

<!DOCTYPE html>
<html lang="en">
<head>
  ...
  <script defer src="index.js"></script>
</head>
<body>
  ...
</body>
</html>

defer : script다운은 HTML 파싱중에 받고, 실행은 HTML파싱 끝나고 함.

장점) 다운로드와 파싱이 병렬적이므로 속도는 body태그에 넣은것보다 빠르며, html 파싱 완료 후 실행되므로 dom 조작 시에 문제 발생 안함.

참고 🔖

[HTML] script 태그는 어디에 위치 해야 할까? JS 삽입 위치에 대한 차이(head or body)

현재 setting.json 👇

setting.json 파일 여는 방법 (mac os 기준) command + , → Settings 파일의 우측 상단 아이콘 클릭!

vscode 우측 하단 Spaces를 4 -> 2로 변경.

변경 전 spaces:4	변경 후 space:2

-> indent-rainbow 익스텐션은 제대로 보이나, 저장시 정렬 및 포맷 변경은 안되고 있음.

indent-rainbow : 탭 영역 4가지 색으로 구분해주는 익스텐션. 추천합니다👍

다른 익스텐션 문제인가..? -> 익스텐션 충돌일 수 있을거 같아서 vscode restart and update!

-> 자동 정렬되어 저장되었으나 다시 수정하면 자동 정렬 안됨....;;;

🔔 알림을 확인하자....!

configure 설정 후 setting.json 확인 설마 defaultFormatter....? DefaultFormatter가 None이네.......

DefaultFormatter를 Prettier로 변경 setting.json 👇

** 자동 정렬 잘됨...! 💥**

참고 spaces 변경 방법 Default Formatter Prettier로 변경하는 방법

상위 스코프의 식별자를 참조하고, 중첩 함수가 외부함수의 생명주기보다 오래 살아남는 경우, 중첩함수를 클로저라고 한다.

💡 스코프? 정의된 변수를 사용할 수 있는 범위. 자바스크립트는 함수 스코프이다. 즉, 함수 안에 정의된 변수는 함수 안에서만 유효하고, 함수 외부에서는 유효하지 않음.

// 클로저 예시
function outer() { //외부 함수
    const a = 1;
    const b = 2;

    return function inner() { //중첩 함수. 클로저
        console.log(a); //외부함수(상위 스코프)의 식별자 참조
    }
}

const bar = outer();
bar();

아래의 경우 inner 함수는 클로저가 아니다

// 상위 스코프의 어떤 식별자도 참조하지 않음
function outer() { //외부 함수
    const a = 1;
    const b = 2;

    return function inner() { //중첩 함수.
        const c = 3;
        console.log(c);
    }
}

const bar = outer();
bar();

// 상위 스코프의 식별자 참조하지만, 중첩함수가 반환되지 않음
// (외부 함수의 생명주기가 중첩함수보다 길 경우)
function outer() { //외부 함수
    const a = 1;
    const b = 2;

    function inner() { //중첩 함수. 클로저였지만 outer보다 먼저 소멸
        console.log(a); 
    }
    inner();
}
outer();

자바스크립트-기술면접-클로저-정리 자바스크립트 클로저? 간단히 핵심만 파악하기

니꼬쌤의 ES Modules 강의 내용을 정리한 페이지입니다. 영상이 7분 안되니 강의 보시는 걸 추천해요.🧚‍♀️ 니콜라스쌤의 유튜브 강의👍

Named Exports

• 많은 것들을 export / import 하고 싶을 때 사용

ex)

// math.js
export const plus = (a,b) => a+b;
export const minus = (a,b) => a-b;
export const divide = (a,b) => a/b;


// main.js
import { plus } from './math';

주의사항🔥 import 시 사용하는 이름은 반드시 export된 이름과 같아야 한다.

위의 예시에서 plus 대신 add로 import하여 사용할 수 없음.

// main.js
import { add } from './math'; // 🙅‍♀️

만약 plus를 add로 이름을 바꾸고 싶다면 as를 사용해서 바꾸면 사용 가능.

import {plus as add} from './math'; // 🙆‍♀️

add(2,2);

Default Exports

각 파일마다 단 한개만 존재. -> import 하기 더 간단함.

// db.js
const connectToDB = () => {/*magic*/};
export default connectToDB;

//main.js
import connect from './db';

→ 한개의 파일에서 모든걸 export 하고 모든걸 import 하게 할 수 있음.

// math.js
const plus = (a,b) => a+b;
const minus = (a,b) => a-b;
const divide = (a,b) => a/b;
export default {plus, minus, divide};

// main.js
import math from './math';

math.plus(2,2);

named export와 달리 원하는 이름으로 변경 가능

ex)

import myMath from './math';

myMath.plus(2,2);

✍️named exports와 default exports가 섞여있는 경우

//db.js
const connectToDB = () => {/*magic*/};
export const getUrl = () => {/*magic*/};
export default connectToDB;

//main.js
import connect, {getUrl} from './db';

Star Import (*)

• 모든 exported된 내용을 import 하고 싶을 때

  // math.js
  export const plus = (a,b) => a+b;
  export const minus = (a,b) => a-b;
  export const divide = (a,b) => a/b;
  
  

// main.js import * as myMath from './math'; myMath.plus(2,2); myMath.minus(2,2);

#### 🔥 로딩을 빠르게 하는 방법
1. **필요한 것만 import** 하기
→ 예제의 math.js 사용 시 named export로 사용하는게 나음.
2. **Dynamic Import** 사용하기


**🤔 Dynamic Import?**


import 방식은 파일의 위에서부터 모든걸 import 함.
유저가 사용하든 안하든 웹사이트의 모든 코드를 몽땅 다운로드 하므로 로딩 느려짐.
→ Dynamic Import를 사용하여 실제 유저가 사용할 모듈만 import하기

ex) 
```js
async function doMath() {
    const math = await import('./math');
    math.plus(2,2);
}

btn.addEventListener('click', doMath);

→ 유저가 버튼 클릭할때마다 모듈 로딩.

윈도우의 powershell의 설정을 oh-my-zsh 설정과 비슷하게 보이도록 oh my posh 설정하는 방법

참고 링크

https://docs.microsoft.com/ko-kr/windows/terminal/tutorials/powerline-setup https://daddyprogrammer.org/post/14536/windows-powershell-oh-my-posh/

#. 윈도우 ctrl, window, alt 기능 순서 변경하기

맥 키보드 순서와 동일하도록 windows - alt - ctrl (mac에서는 control-option-command) 레지스트리 파일 만들어서 실행하면됨

[HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Keyboard Layout] “Scancode Map”=hex:00,00,00,00,\
00,00,00,00,\
04,00,00,00,\
38,00,5b,e0,\
1d,00,38,00,\
5b,e0,1d,00,\
00,00,00,00

참고링크

http://hopark.kr/change-scancode-map/

ex) 날짜를 2019.12.30로 선택할 경우 2020년 1주로 표현되길 원하나, 2019년 1주로 보임.

-> antd의 WeeklyPicker 확인 시 년도 정상적으로 보임. 라이브러리 확인 결과 gggg-wo로 처리하고 있음.

ant design WeekPicker component

#. gggg와 yyyy의 차이는?

gggg는 week year로 yyyy wo 형식으로 사용 시 주차랑 상관 없이 해당 날짜의 년도를 그대로 가져옴. 그래서 2019.12.30 선택시

• yyyy-wo : 2019-1주차
• gggg-wo : 2020-1주차

로 표현됨.

moment string-format

서버에서 처리하는 주차 계산방식과 moment에서 처리되는 주차 계산방식이 다른 현상 발생

ex) 2020.12.30일에 대해

• 서버 : 2020년 53주차
• moment : 2021년 1주차

년도 변경 시 주차 계산방식이 다르므로, moment.updateLocale 을 사용하여 주차 계산 방식 변경

• 서버의 주차 계산 방식

  주의 시작 요일은 일요일, YYYY년 1주차는 1월 3일을 포함해야됨

• moment week 설정 변경

moment.updateLocale('ko', {
    week:{
        dow : 0, // 한 주의 시작 요일은 일요일(0)
        doy: 4 //  연도의 첫 주는 1월 3일을 포함해야 될 경우. (계산 식: 7+dow-3)
    }
})

https://momentjs.com/docs/#/customization/dow-doy/

error An unexpected error occurred: "https://...: ESOCKETTIMEDOUT".

npm(yarn) install --network-timeout 1000000 설정 후 다시 시도

...unexpected end of file... 에러 발생.

캐시 삭제 후 시간을 6000000로 바꿔서 다시 실행 -> 설치 완료

#.cache 삭제 방법

npm

npm cache verify or npm cache clean --force

yarn

yarn cache clean

#. 참고

https://velog.io/@kmp1007s/yarn%EC%9C%BC%EB%A1%9C-expo-cli-%EC%84%A4%EC%B9%98-%EC%8B%9C-%EB%B0%9C%EC%83%9D%ED%95%98%EB%8A%94-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0 https://stackoverflow.com/questions/52135815/yarn-is-having-troubles-with-the-network-connection

https://icerabbit.tistory.com/78 https://stackoverflow.com/questions/55157862/npm-cache-clean-v-s-npm-cache-verify