2105 TIL

May 1st 2021 by jyoon

210531 - MON

Node.nextSibling

querySelector in js

var el = document.querySelector("div.user-panel:not(.main) input[name='login']");

outerHTML, innherHTML, innerTEXT

transfer Elements dom to string (Elements.outerHTML)

drag and drop

abbreviation - 줄임말

  • stand for

210528 - FRI

activeElement

  • el을 editable을 만들었을때 바로 cursor가 가지 않아 바로 cursor가 active하게 하는 방법은 "focus()"를 사용한다.
  elements.setAttribute("contentEditable", true);
  elements.focus()

computable

<div class="element" style="font-size: 2em; color: red;">Red hot chili pepper!</div>

const element = document.querySelector('.element')

const fontSize = element.style.fontSize
console.log(fontSize) // 2em

const color = element.style.color
console.log(color) // red
  • Getting styles from pseudo elements
<div class="element"> This is my element </div>

.element { background-color: red }
.element::before { content: "Before pseudo element"; }

const element = document.querySelector('.element')
pseudoElementStyle = getComputedStyle(element, '::before')

console.log(pseudoElementStyle.content) // Before pseudo element

editable

Bubbling and capturing

Bubbling and capturing

Destructuring ev.preventDefault()

210520 - THU

[web browser]웹 브라우저의 HTML 문서 렌더링 과정

  1. 불러오기(Loading)

    • 불러오기는 HTTP 모듈 또는 파일시스템으로 전달 받은 리소스 스트림(Resource Stream)을 읽는 과정으로 로더(Loader)가 이 역할을 맡고 있다.
    • 로더는 단순히 읽는 것이 아니라, 이미 데이터를 읽었는지도 확인하고, 팝업창을 열지 말지, 또는 파일을 다운로드 받을 지를 결정한다.

  2. 파싱(Parsing)

    • 파싱은 DOM(Document Object Model) 트리를 만드는 과정이다.
    • 웹 엔진이 가지고 있는 HTML/XML 파서가 문서를 파싱해서 DOM Tree를 만든다.
    • DOM Tree : 내용을 저장하는 트리로 javascript에서 접근하는 DOM객체를 쓸 때 이용됨.

  3. 렌더링 트리 만들기(Rendering Tree)

    • 렌더링 트리 : DOM Tree와는 별도로 그리기 위한 트리가 만들어져야 하는데, 그것이 렌더링 트리다.
    • 그릴 때 필요없는 head, title, body 태그등이 없음
    • display:none; 처럼 DOM에는 있지만 화면에서는 걸러내야할 것들이 걸러내진 트리)

  4. CSS 결정

    • CSS는 선택자에 따라서 적용되는 태그가 다르기 때문에
    • 모든 CSS 스타일을 분석해 태그에 스타일 규칙이 적용되게 결정한다.

  5. 레이아웃(Layout)

    • 렌더링 트리에서 위치나 크기를 가지고 있지 않기 때문에 객체들에게 위치와 크기를 정해주는 과정을 레이아웃이라고 한다.
  6. 그리기(Painting)
  7. 렌더링 트리를 탐색하면서 페이지를 그려나간다.

210519 - WED

[CSS] [RESPONSIVE-DESIGN] sass로 반응형 만드는 방법

  • 방법 1
@media screen and (max-width: 769px) {}

  • 방법 2

    1. mixin으로 mobile-style, pc-style 설정
    2. .selector에 mixin으로 선언한 mobile, pc style을 @include하고 styling한다.
// media query
@mixin mobile-style {
  @media (max-width: 767px) {
    @content;
  }
}

@mixin pc-style {
  @media (min-width: 768px) {
    @content;
  }
}

.selector {
  @include mobile-style {
    display: flex;
    flex-direction: column;
  }
  @include pc-style {
    display: flex;
    flex-direction: row;
  }
}

[CSS] [MACHANISM] custom checkbox(기본 HTML 체크박스 대신 이미지 활용)

  • input type checkbox를 display: none으로 해주고

  • input tag 다음에 작성한 label tag에 background로 보여주고 싶은 checkbox 이미지를 보여준다.

    • background로 추가한 checkbox가 보여지도록 padding-left를 적당하게 설정

[CSS] [RESPONSIVE-DESIGN] 반응형

  width: 100%;
  max-width: 500px;

[CSS] flex이용한 layout 설정

  • display: flex;
  • justify-content: flex-end;

[CSS] 단어 사이 pipeline 설정

  • 마지막 단어 after는 제외
&:not(:last-child)::after{
  content: "";
  background: gray;
  height: 10px;
  width: 1px;
  margin: 0 10px;
}

[CSS] flex이용한 layout 설정

  • 세로 정렬
  • display: flex;
  • flex-direction: column;
  • justify-content: space-between;

[CSS] flex이용한 layout 설정

  • 가로정렬, items 양옆 위치
  • display: flex;
  • justify-content: space-between;

[CSS] @mixin&@include

[CSS] map-get, map-has-key

[CSS] 1vh = 1% of viewport height

[CSS] display: none

  • 공간차지 않음

[CSS] [FLEX-ORDER] flex로 적용된 item 순서 변경

  • 마지막에 있는것을 첫번째로 이동하고 싶을 때
  • 그리고 변경하고 싶은 item만 적용하고 싶을 때
  • 음수를 붙여서 첫번째로 이동 시킬 수 있다.

[CSS] [MECHANISM] tooltip에 사용되는 이음 삼각형

  1. width, height: 0px이면 border-width값이 border 한면의 굵기가 된다.
  2. border-color: up-color, right-color, bottom-color, left-color
  3. 1번대로 하고 2번을 오른쪽색을 지정하면 왼쪽이 뾰족하고 오른쪽이 평평한 삼각형이 된다 (◀️)
  4. absolute가 부모의 relative 영역 밖으로 넘어가려면 -(음수) 값을 입력하면 된다.

[CSS] tooltip 위치

  • 부모의 position relative 설정

  • 자식(item-tooltip의 position: absolute, left, top, 설정으로 원하는 위치로 이동 시킬 수 있다.

    • &.typetop, typeleft, type_bottom에 left, top중 기본 값을 사용하려면 auto로 설정해주면된다.

[CSS] position: absolute를 사용하는 el이 transform: translate를 사용하는 이유

  • 자식 el의 중앙이 부모 el의 중앙으로 배치할때 top, bottom, right, left를 50%로 설정하는데 이때 자식 el이 부모 el의 중앙으로 오지 않는다.

    • 자식 el의 모서리 부분이 중심이 부모의 50%로 이동하기 때문이다.

  • 그래서 자식 el의 50% 만큼 이동 시켜줘야 한다.

    • 이걸 stransform: translate(X, Y)로 이동 시킬 수 있다.

[CSS] @media

  • 문법

    @media not|only mediatype and (mediafeature and|or|not mediafeature) {
  CSS-zCode;
}
    • mediatype: print, screen, speech
    • mediafeature: max-width, min-width
  • @media

[CSS] @keyframs 사용한 animation

  • @keyframes Rule

    animation: slideDown 0.8s;
animation-delay: 2s;
animation-fill-mode: forwards;

@keyframes slideDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(30px);
  }
}

[CSS]outline define

  • An outline is a line drawn outside the element's border. outline: none;

[CSS]Pseudo-class를 통해서 마지막 요소 제외 selector

  &:not(:last-child) {
  }

[CSS]전체 화면 채우는 방법(background-overlay)

  position: fiexd;
  width: 100%; 
  height: 100%;
  background-color: rgba(0, 0, 0, 0.08);
  z-index: 999;

210518 - TUE

[CSS] :not & :nth-fo-type & after

  • &:not(:nth-of-type(4)):after{ }

[CSS] display: inline-block, block 차이

  • display: inline-block; // content 만큼 차지
  • display: block; // 한줄 차지

[CSS] >, + selector 비교

  • 요약

    • "+"는 바로 인접한 el
    • ">" 이 기호를 사용한 parent하위의 오른쪽에 있는 selector 모든 el

  • definition

    • element>element div > p Selects all

      elements where the parent is a

      element
    • element+element div + p Selects the first

      element that is placed immediately after

      elements

[CSS] Selector(가상 엘리먼ㅌ, 가상클래스, ^, $=, *)

  • 가상 엘리먼트(Pseudo-Elements)

  • 가상 클래스(Pseudo-Class)

  • ^, *, $=

    • ^: 시작
    • *: 포함
    • $=: 끝나는 단어

[CSS] flex

210517 - MON

[CSS] rem

  • root font-size와 비교해서 px단위를 반환한다.
  • html{ font-size: 16px }
    => width: 160px
  • default html은 font-size는 16px 입니다.

[CSS]transform-origin

  • The transformation origin is the point around which a transformation is applied.
  • transform-origin

210513 - THU

[CSS] Pseudo-classes vs CSS Pseudo-elements

  • Pseudo-classes

    • el에 추가하지 않아도 되며 기존 selector에 매칭된 el기반으로 선택된 el
    • el의 상태를 selector해서 (예를 들어 hover, active, focus와) styling 할 수 있다.
    • :으로 시작

  • CSS Pseudo-elements

    • document에 명시적으로 정의되지 않은 문서의 요소의 스타일을 지정하는 방법
    • ::으로 시작

[CSS] tag attribute regular expression 처럼 쓸 수 있는 기호

  • ^: tag attribute value의 시작값 matching
  • =$: tag attribute value의 마지막값 matching
  • *: tag attribute value의 포함 matching
[attribute^=value] 
- a[href^="https"] Selects every <a> element whose href attribute value begins with "https"

[attribute$=value] 
- a[href$=".pdf"] Selects every <a> element whose href attribute value ends with ".pdf"

[attribute*=value] 
- a[href*="w3schools"] Selects every <a> element whose href attribute value contains the substring "w3schools"

[CSS] ::before, ::after

210512 - WED

[devOps] export vs code extension list

code --list-extensions

[CSS]Visibility vs Display

  • CSS Visibility vs Display

  • visibility: hidden;

    • el를 숨기고 공간을 차지하고 있는다.
    • 하위 el을 visibility가 visible일때 보인다.

  • Display: none;

    • el를 숨기고, el 공간을 차지 않지 않는다.

210506 - TUE

[DEVOPS] vscode-markdown

  • Markdown All in One

    • TOC
    • add/update section number(heading에 number 붙이기)
    • print current document to HTML

210505 - WED

[React] event 등록시 anonymous function으로 등록하는 이유?

  // code 1
  <FormControl value={this.state.password} onChange={this.handleChange} />

  // code 2
  <FormControl value={this.state.password} onChange={(e) => this.handleChange(e)} />
  • react는 state변경시 re-render이 일어나는데 함수를 넘겨 버리면 함수의 메모리 reference를 넘기기 때문에 하나의 함수를 가리킨다.
  • 하지만 익명 함수 형태로 넘기게 되면 re-render될때 각 component는 새로운 함수를 생성/ 다른 메모리에 있는 함수를 가리키기 때문에 익명함수로 설정한다.
  • Passing an arrow function vs passing the function

[React] event 등록시 arrow function으로 등록하는 이유(regular function이 아닌)?

  • 실행컨텍스트가 다르다.

[JS] regular, arrow function 차이

  • regular function

    • 자바스크립트의 경우 함수 호출 방식에 의해 this에 바인딩할 어떤 객체가 동적으로 결정된다.
    • 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고,
    • 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

  • arrow function

    • 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
    • 동적으로 결정되는 일반 함수와는 달리 화살표 함수의 this 언제나 상위 스코프의 this를 가리킨다.
    • 이를 Lexical this라 한다. 화살표 함수는 앞서 살펴본 Solution 3의 Syntactic sugar이다.
    • 화살표 함수의 this 바인딩 객체 결정 방식은 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프와 유사하다.
  • es6 arrow function

[JS] lexical scope & Dynamic scope

  • 렉시컬 스코프

  • code

    • foo(), bar() 모두 1을 출력
    • 콘솔을 찍을 bar 함수는 호출되는 시점에 상위 스코프다 달라서 10, 1이 찍힌다고 생각 할 수 있다. (Dynamic scope-동적스코프)
    • 하지만! JS는 scope가 결저오딜때 lexical scope를 따르기 때문에 bar 일반함수는 전역에 선언 되어 있기 때문에 bar의 상위 스코프는 전역 스코프이고 위예제는 전역 변수의 x의 값 1을 두번 출력한다.
      var x = 1;

  function foo() {
    var x = 10;
    bar();
  }

  function bar() {
    console.log(x);
  }

  foo(); // 1
  bar(); // 1

  • 설명

    • 위 예제의 실행 결과는 함수 bar의 상위 스코프가 무엇인지에 따라 결정된다. 두가지 패턴을 예측할 수 있는데 첫번째는 함수를 어디서 호출하였는지에 따라 상위 스코프를 결정하는 것이고 두번째는 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정하는 것이다. 첫번째 방식으로 함수의 상위 스코프를 결정한다면 함수 bar의 상위 스코프는 함수 foo와 전역일 것이고, 두번째 방식으로 함수의 스코프를 결정한다면 함수 bar의 스코프는 전역일 것이다.
    • 프로그래밍 언어는 이 두가지 방식 중 하나의 방식으로 함수의 상위 스코프를 결정한다. 첫번째 방식을 동적 스코프(Dynamic scope)라 하고, 두번째 방식을 렉시컬 스코프(Lexical scope) 또는 정적 스코프(Static scope)라 한다. 자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다.
    • 렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다. 자바스크립트는 렉시컬 스코프를 따르므로 함수를 선언한 시점에 상위 스코프가 결정된다. 함수를 어디에서 호출하였는지는 스코프 결정에 아무런 의미를 주지 않는다. 위 예제의 함수 bar는 전역에 선언되었다. 따라서 함수 bar의 상위 스코프는 전역 스코프이고 위 예제는 전역 변수 x의 값 1을 두번 출력한다.

210504 - TUE

[JS]Async/await Error handling

[DEV]duck Typing

[JS]for of, for in

  • for...of

    • creates a loop iterating over iterable objects,
    • including: built-in String, Array, array-like objects (e.g., arguments or NodeList), TypedArray, Map, Set, and user-defined iterables.

  • for...in

    • dictionary object
    • The for...in statement iterates over all enumerable properties of an object that are keyed by strings (ignoring ones keyed by Symbols),
    • including inherited enumerable properties.

[JS]FormData

[JS]Custom events

[CSS]CSS로 loader 만들기

[CSS]CSS font 속성으로 text 없애는 방법

[CSS]CSS - Flex, Grid 1분코딩

[CSS]CSS 단위

210503 - MON

[JS]Axios intercepter

210501 - SAT

[CSS]transfrom: translateX() 에 대해서 생각해보자

  • transform: translateX(-10%); <- 왼쪽으로 #scroll-bar el이 이동해 오른쪽 background-color가 비어 있다.
  • transform: translateX(10%); <- 오른쪽으로 #scroll-bar el이 이동해 왼쪽 background-color가 비어 있다.

[CSS]modal position position: modal의 position은 absolute? fixed?

  • absolute하면 스크롤 이동시 modal 창이 사라진다.
  • fixed하면 스크롤 이동시 화면에 고정되어 있다.

[JS]arrow function as the callback for an event listenenr in JavaScript?

  • event Objet.currentTarget

  • regular function

    const toggleElements = document.querySelectorAll('.toggle');
toggleElements.forEach(el => {
  el.addEventListener('click', function() {
    this.classList.toggle('active');
  });
});

  • arrow function

    • event Objet.currentTarget
    const toggleElements = document.querySelectorAll('.toggle');
toggleElements.forEach(el => {
  el.addEventListener('click', (e) => {
    e.currentTarget.classList.toggle('active'); // works correctly
  });
});

toy project

  • 뽀모도로
  • 캘린더

  • new year's resolution

    • view type(title, keyword, content)
    • 한줄 일기
    • TIL

[JS]Symbol

  • JS INFO - Symbol

    • 자바스크립트는 객체 프로퍼티 키로 오직 문자형과 심볼형만을 허용합니다. 숫자형, 불린형 모두 불가능하고 오직 문자형과 심볼형만 가능하죠.
    • '심볼(symbol)'은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용합니다.
    • 심볼을 이용하면 ‘숨김(hidden)’ 프로퍼티를 만들 수 있습니다. 숨김 프로퍼티는 외부 코드에서 접근이 불가능하고 값도 덮어쓸 수 없는 프로퍼티입니다.
    • [todo] 실전 활용 예제 확인하기

[JS]Async/Await

  • Async/await - JS

    • await
    • point1. Await: js는 promise가 settle 상태, 결과를 return 할때 까지 기다린다.
    • point2. 일반 function은 기다리지 않는다.

    • point3. top-level code에서는 동작 하지 않는다.

      • 대처 방법: IIFE

    • point4. class에서 "then" 함수명으로 작성하면 built-in 함수의 "resolve, reject" arguments를 제공한다.

      • 이 아이디어는 third-party object에서 promise를 제공하지 않는 상황에서 제공된다.
    • point5. Class안에서는 async를 함수 앞에 async를 작성
jyoon

풀 스택 개발자를 지향하며 정진 하고 있는 5년차 개발자 윤재윤입니다.

TABLE OF CONTENTS
Recet Posts

Code Blog

Follow us on social media