simkkong

Currying 커링은 function(a, b, c)처럼 단일 호출로 처리하는 함수를, function(a)(b)(c) 와 같이 각각 단일 인수(argument)로 함수를 호출하여 변환하는 것이다. 첫 번째 인자로 새 함수를 반환하고, 두번쨰 인수가 새로운 함수를 또 반환하며.. 반복해서 모든 인자가 완료될 때까지 실행한다. 커링은 함수를 더 작은 단위로 쪼갤 수 있으며, 순수함수로 사용이 가능해진다. 이로인해 가독성과 유지보수가 용이해지는 효과가 생긴다. 아래와 같이 add 함수를 addCurry 로 커링할 수 있다. // Noncurried version const add = (a, b, c) => { return a + b + c; }; console.log(add(2, 3, 5)); // 10 ..

React, Vue 등을 사용할 때, 원하는 상태인 state or data 값을 하위 컴포넌트(자식 컴포넌트)에게 넘겨주는 작업이 종종 발생한다. 이럴 때 prop drilling 이라는 용어가 나오게된다. 하위 컴포넌트가 매우 깊게 중첩될 경우에는, prop 값을 하위 컴포넌트의 하위 컴포넌트에게 넘겨주면서 관리하기가 어려워진다. 이러한 관리를 수월하게 할 수 있는 방법에 대해 설명하고자 한다. Prop Drilling Prop Drilling은 위의 설명처럼, state or data를 여러 하위 컴포넌트를 통과해 특정 하위 컴포넌트에게 전달하는 비공식 용어. 문제점은 넘겨주는 대부분의 하위 컴포넌트에 넘겨준 prop 값이 불필요한 값이란 것이다. 대략 3개의 하위 컴포넌트를 거치는 정도이면, 괜찮..

this 는 현재 객체를 가리킨다. 정확히는 메서드를 호출할 때 사용된 객체를 의미한다. 즉 아래와 같이 animal 객체 안에서 run 메서드가 실행이 되면 run을 실행한 animal 객체를 가리키며, 전역에서 호출하게 되면, 글로벌한 window 객체를 가리킨다. let animal = { name: '코끼리', run() { console.log(this.name); } } animal.run() // '코끼리' (this == animal) //or class animal { constructor() { this.name = '코끼리'; } run() { console.log(this.name); } } const elephant = new animal() elephant.run() // '코끼..

vw 는 view width 의 약어고, vh는 view height 의 약어다. 화면에 출력되는 전체 가로 세로 크기(비율)을 vw, vh라고 부른다. width를 50vw 라고 지정하면, 화면단의 가로가 50%로 지정된다. vh도 마찬가지다. 반응형처럼, 브라우저 크기를 조절하면, 조절되는 크기만큼 화면 비율을 따라 크기가 조절된다. 패스트캠퍼스 올인원 패키지 글 정리.

em은 %와 다르게, 자기 자신의 폰트사이즈에 영향을 받는다. 위의 container에서는 font-size가 10px로 지정이 되어있다. 폰트 사이즈가 정해진 상태에서 width를 60em으로 지정을 하면, 10 X 60 = 600 이라는 width값을 갖게 된다. 만약 아래와같이, container를 상속받는 parent의 font-size를 2em으로 변경하면 어떻게 될까? (힌트: 자식 요소들은 부모의 값을 다 상속받는다.) 아래와 같이, 폰트 사이즈를 크게 늘린 요소들은 가로 크기가 커진 것을 확인가능하다. parent가 상속받은 font-size 10px 에 2em 을 곱하게되니, font-size는 20px이 된거고 parent의 30em은 30 X 20 이 되기에 60 이라는 가로 사이즈를..

px 은 픽셀의 단위로 크기를 지정하는 걸 뜻한다. (해상도에 따른 상대단위, 고정값) 그러나 %는 가로 세로크기에 퍼센테이지만큼 크기를 지정한다. 부모 요소의 가로 세로 크기를 기준으로 퍼센테이지를 갖는다. 아래와 같이각 태그들에 테두리를 검정색으로 보여주고 있다. container 가 제일 부모이며, 그 다음은 parent. child 순이다. %가 부모 요소에 영향을 받는걸 확인할 수 있다. 패스트캠퍼스 올인원 패키지 글 정리.

HTML 에서 span 태그는 인라인의 효과를 갖기에, span 태그 안의 value 값 만큼만 크기를 갖게 되어있다. 블록형태와는 반대인 타입이 인라인인데, 만약 CSS에서 span 태그에dispaly: block을 준다면 어떻게 될까? 아래는 원래의 span 태그의 가로 값을 보여주는 이미지. 아래와 같이 CSS 코드를 넣어준다면? body { margin: 0; padding: 0; } span { background: red; width: 120px; height: 80px; display: block; } 아래와 같이 기본 값인 인라인 요소를 강제로 블록 요소로 변경했기에 가로 세로 크기도 지정이 되는 것이다. 패스트캠퍼스 올인원 패키지 글 정리.

인프런의 함수형 프로그래밍과 JavaScript ES6+ 인강의 정리하는 시간을 갖도록 하겠다. 먼저 map함수는, 배열인 값에 쓰일 수 있는 함수다. 아래와 같이 배열에 map함수를 적용하여 사용할 수 있다. // 어레이는 map 함수가 잘 동작. [1,2,3].map(a => a +1); map은 ES6문법이 생기게 되면서 좀 더 복잡한 구조를 갖게 되었다. (함수형 자바스크립트, 이터러블:이터레이터) 그러나 document.querySelectorAll처럼, 어레이가 아닌 이터러블 프로토콜을 따르는 구조는 어떨까? map함수를 찾을 수 없다고 undefined가 나타나게 된다. //잘못된 예시. log(document.querySelectorAll('*').map); //undefined 그렇다면 ..