Velog Velog

요즘 styled-component로 컴포넌트의 스타일을 작성하고 있는데 종종 헷갈리던 단위를 확실히 이해하고자 작성합니다! px 우리가 흔히 사용하는 픽셀 값이다. 출력장치인 모니터에 따라 상대적인 값을 가진다. em 부모의 font-size를 기준(1)로 하는 상대적인 사이즈를 의미한다. 예를 들어, 부모의 font-size가 10px이라 했을 때 자식 태그에서 font-size를 1.5em이라고 한다면, 그 태그의 font-size는 15px이다. rem em은 상위 부모 태그의 font-size를 기준으로 삼기 때문에 태그의 깊이가 커질 수록 사이즈 변동이 있다는 문제점이 있다. 그래서 rem을 사용하는데, rem의 r은 root를 의미한다. 즉 해당 문서의 최상위 태그의 font-size를 기준..

을 읽고 작성합니다. 5장 반복문을 단순하게 만들어라 화살표 함수(arrow function)로 반복문을 단순하게 만들어라 화살표 함수는 함수가 장황해지는 문제를 해결해서 함수 작성을 간결하고 짧게 만들어준다. 또한, 필요하지 않은 정보를 최대한 걷어낸다. (function keyword, 괄호, return, 중괄호) 매개변수가 1개인 경우에는 괄호를 생략 매개변수가 없거나 2개 이상인 경우에는 괄호 필수 function greet(first, last) { return `안녕하세요, ${capitialize(first)} ${capitalize(last)}님`; } const greet = (first, last) => { return `안녕하세요, ${capitialize(first)} ${capi..

을 읽고 작성합니다. 4장 조건문을 깔끔하게 작성하라 거짓 값이 있는 조건문을 축약하라 Falsy keyword 0 숫자 -0 음수 0n BigInt "" 빈 문자열 null 아무 값도 없음 undefined 원시값 NaN 숫자가 아님 출처 MDN falsy 배열과 객체의 경우 비어있더라도 항상 값이 참이다. 객체 또는 배열이 비어있는지 확인하려면 [].length 또는 Object.keys({}).length 등으로 확인해야 한다. 거짓인지 버그없이 확인하는 방법은 두 가지가 있다. 데이터를 조작하지 않도록 함수를 수정하라 함수를 수정할 수 없다면 strict equivalency를 이용하라! 삼항 연산자로 빠르게 데이터를 확인하라 삼항 연산자를 사용해야 하는 이유? 단순하기만 한 것이 아니라 더 예측..

을 읽고 작성합니다. 3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라 객체를 이용해 정적인 키-값을 탐색해라 원칙적으로 객체는 변화가 없고 구조화된 키-값 데이터를 다루는 경우에 유용하다. .을 통해 직접 참조하거나 배열처럼 접근이 가능하다. 이처럼 객체는 단순하기 때문에 정적인 정보를 다룰 때 훌륭하다. 하지만 계속해서 갱신, 반복, 대체, 정렬해야 하는 정보에는 적절하지 않다. 이런 경우에는 맵을 사용하는 것이 낫다. 단, 기존의 객체를 조작하는 것이 아니라 각각의 함수에서 새로운 객체를 생성하면 조작없이 사용 가능하다. 중괄호에 key-value를 작성하는 것을 객체 리터럴object literal이라고 한다. 비구조화 할당(destructuring) 은 빠른 탐색이 필요할 경우 객체를 선택해..

을 읽고 작성합니다. 2장 배열로 데이터 컬렉션을 관리하라 배열로 유연한 컬렉션을 생성하라 이전 자바스크립트에서는 데이터 컬렉션을 다루는 구조로 배열과 객체 만 있었으나, 모던 자바스크립트에 Map, Set, WeakMap, WeakSet, 객체, 배열 을 사용할 수 있다. 어떠한 형태로든 조작(추가, 제거, 정렬, 필터링, 교체 등)을 해야 한다면 배열이 가장 적합한 컬렉션이다. 이터러블(iterable)이란 컬렉션의 현재 위치를 알고 있는 상태에서 컬렉션의 항목을 한 번에 하나씩 처리하는 방법을 의미한다. 배열은 이터러블(iterable)이 내장되어 있어 다양한 메소드를 활용할 수 있다. 문자열처럼 자체적으로 이터러블이 존재하거나 이터러블로 변환할 수 있는 데이터 형식이면 배열에 사용하는 모든 작업을..

을 읽고 작성합니다. 1장 변수 할당으로 의도를 표현하라 const로 변하지 않는 값을 표현하라 const는 블록의 문맥 내에서 재할당할 수 없는 변수 선언이지만 불변값이 되는 것은 아니다. 자바스크립트에서는 기본적으로 const를 이용해서 변수를 할당하는 것이 좋다. -> 디버깅이 쉬워지기 때문 const로 할당해도 값을 바꿀 수는 있다. 하지만 가능한 조작(mutation)을 피하는 것이 좋다. const discountable = []; for (let i=-; i< cart.length; i++) { if (cart[i].discountAvailable) { discountable.push(cart[i]); } } // No mutation const discountable = cart.filte..

MIME Type (Multipurpose Internet Mail Extensions) MIME type이란 클라이언트에게 전송된 문서에 대해 알려주기 위한 메커니즘이다.브라우저는 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 MIME 타입을 기반으로 결정한다. 현재 IANA 기관에서 MIME type을 표준화하여 관리한다. 구조 가장 단순한 MIME type의 구조는 type과 subtype으로 이루어져 있다. 각각은 string이며 이 둘은 슬래시(/)로 구분되고 공백문자는 존재하지 않는다. type/subtype type : 일반적인 카테고리 의미 subtype : 구체적인 카테고리 식별 parameter : 추가적인 디테일 정보를 더하고자 사용 (optional) 특징 charset 값..

회원가입/패스워드 찾기를 진행할 때 반드시 필요한 것이 인증번호다. (이메일이든 전화번호든) API를 호출하여 인증번호를 생성할 때는 인증번호의 유효기간이 존재한다. 처음에 타이머를 구현할 때는 유효기간인 3분을 초기값으로 정해놨지만 그렇게 짜면 새로고침을 할 때마다 유효기간이 3분으로 늘어난다는 버그가 있었다. 그래서 Redux와 React Hooks를 이용하여 유효기간을 display하는 컴포넌트를 작성했다. import React, { useEffect, useState } from 'react' import { useSelector } from 'react-redux' import { RootState } from '../../modules' const AuthTimer = () => { // c..