KBW's cosmos

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 다음은 가장 많이 쓰는 네이티브들이다. String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() - ES6에서 추가됨 네이티브는 사실 내장 함수다. 네이티브는 생성자처럼 사용할 수 있지만 실제로 생성되는 결과물은 예상과 다르게 자신이 감싼 원시 값의 타입이 아닌 object의 하위 타입에 가깝다. var a = new String("abc"); typeof a;// "object" 예를 들어 new String("abc")은 "abc"를 감싸는 문자열 래퍼를 생성하며 원시 값..

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 들어가기 전에.. 포인터(Pointer) : Null 허용, 참조 대상에 대해 주소값을 할당 레퍼런스(Reference) : Null 허용 X, 참조 대상을 그대로 할당 즉, 포인터와 레퍼런스는 어떠한 대상을 가리킨다는 점에서는 같지만 포인터는 주소값, 레퍼런스는 값 그 자체를 할당한다는 점에서 다르다. (레퍼런스는 마치 일반변수처럼 접근이 가능하다.) 자바스크립트에서의 레퍼런스는 다른 언어의 레퍼런스/포인터와는 전혀 다른 개념으로, 또 다른 변수/레퍼런스가 아닌 오직 자신의 값만을 가리킨다. 다른 언어에서 값은 사용하는 구문에 따라 값 복사 또는 레퍼런스 복사의 형태로 할당..

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 자바스크립트의 숫자 타입은 number 뿐이다. 정수, 부동 소숫점 숫자를 아우른다. 즉 자바스크립트에서 42.0은 '정수' 42와 같다. 숫자는 10진수가 디폴트이다. 아주 크거나 작은 숫자는 지수형(Exponent Form)으로 표시한다. (toExponential() 메서드로 표현할 수 있다.) var a = 5E10; a;// 50000000000 a.toExponential();// "5e+10" 문자열로 반환 (참고 : e는 10^n을 의미한다. E10은 10^10이다.) 숫자 값은 Number 객체 래퍼로 박싱할 수 있기 때문에 Number.prototype 메서..

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 자바스크립트의 배열은 어떤 타입의 값이라도 담을 수 있는 그릇이다. 배열 크기는 미리 정하지 않고 선언할 수 있다. 배열을 사용할 때는 빈 슬롯이 있는 '구멍 난(sparse)' 배열을 조심해야 한다. var a = []; a[0] = 1; // 'a[1]' 슬롯을 건너뛰었다! a[2] = [3]; a[1];// undefined a.length;// 3 위와 같은 경우 실행은 되지만 문제가 생길 수 있다. a[1] 슬롯 값은 undefined가 될 것 같지만 명시적으로 a[1] = undefined 한 것과 똑같지는 않다. 또 앞전에서 배열은 객체의 하위타입이라고 했다. 따..

/* 이 글은 카일 심슨의 You Don't Know JS를 읽으며 배운 것들을 개인적으로 정리하고 기록하기 위한 글입니다. */ 자바스크립트에는 다음과 같은 7가지의 내장 타입이 있다. null undefined boolean number string object symbol (ES6부터 추가되었다.) 여기서 object를 제외한 타입들을 원시타입(Primitives)라고 한다. 값의 타입은 typeof 연산자로 알 수 있다. 그런데 놀라운 점은 typeof 반환 값은 항상 7가지 내장 타입과 1:1로 정확히 매칭되지는 않는다는 것이다. undefined, boolean, number, string, object는 자신의 명칭과 동일한 문자열을 반환한다. (symbol은 여기서 다루지 않겠다.) 자신의..

프로젝트 폴더 구조가 겹겹으로 되어있는 경우, 상대경로의 문제점은 위와같이 코드가 길어지고 지저분해진다는 것이다. 때문에 대부분 절대경로를 사용한다고 한다. 그리고 이미지 경로에도 마찬가지로 위와 같이 불편하고 지저분한 감이 있었다. (img태그의 src 속성에 require("경로").default를하면 엑박이 뜨지 않는다.) 이때 발견한 괜찮은 방법은 Craco라는 모듈과 craco-alias라는 플러그인을 사용해 tsconfig 옵션을 적용하는 것이다. Craco Create React App Configuration Override Create-React-App(CRA)를 쉽게 설정하기 위해 만들어졌다. craco 모듈을 설치하고 root 폴더에 craco.config.js 파일을 만들고 그곳에 ..

interface MemberInfoTextProps { isBold: boolean; fontSize: string; fontColor: string; textAlign: string; } export const InfoText = styled.p` font-weight: ${props => props.isBold ? "bold" : "normal"}; font-size: ${props => props.fontSize}; color: ${props => props.fontColor}; text-align: ${props => props.textAlign}; ` 위와 같이 interface로 props의 속성들을 정의해주고 괄호 안에 이 interface를 넣습니다. 그리고 ${}로 props를 받은 뒤..

1단계 : 구글 폰트 웹 사이트 접속하기 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 위 사이트에 접속해 원하는 폰트를 선택한다. 2단계 : 폰트 검색해서 찾기 맘에 드는 폰트를 찾아서 들어간다. 그리고 스크롤을 내려 Styles 탭에서 px을 조절하며 맘에드는 스타일을 고른다. 그리고 오른쪽에 있는 Select this style을 클릭한다. 3단계 : 폰트 스타일 복사하기 그럼 옆에 나오는 창에서 @import를 클릭한 후 아래 두 코드를 복사해둔다. 4단계 : HTML, CSS 파일에 붙여넣기 먼저 App.css 파일에..

우선 위와 같이 public 폴더안에 폴더를 만들고 이미지 파일을 넣어준다. 그리고 위와 같이 경로를 설정해주면 아주 쉽게 불러올 수 있다!

1. 실무에서 relative 속성은 특정 요소의 위치를 배치하는 것보다 absolute 속성의 기준점을 설정하는 용도로 많이 사용한다. 2. transform의 3D속성을 이용할 때 부모 태그의 perspective 속성은 원근감을 지정하는 것이다. z축으로 얼마나 떨어져서 볼 것인가를 결정하는 속성이라고 이해하면 된다. (그래서 자식 태그의 z-index를 100px로 하고 부모 태그의 perspective를 90px로 하면 자식 태그가 보이지 않게 된다. 왜냐하면 자식태그가 존재하는 곳보다 더 안쪽으로 보는 것이기 때문에) 3. box-sizing 속성을 이용하면 기존 박스의 크기를 유지하면서 안쪽 여백을 지정할 수 있다. padding 속성을 추가하면 기존의 박스 크기가 지정한 너빗값과 높잇값보다..