백수의 개발
-
useState와 useEffect백수의 개발/리액트 2021. 8. 26. 00:02
React Component에 Function Componennt가 도입되면서 state관리와 Life Cycle을 관리하기 위하 useState와 useEffect라는 Hook이 등장했다. useState useState는 상태를 관리하기 위한 Hook이다. React에서는 props와 state의 변경에 따라 컴포넌트들이 rerendering이 되기 때문에 각 컴포넌트 내부에서 바로 반영되어야하는 변경사항들을 관리해줄 수 있다. 아래와 같이 useState의 인자로 초기값을 넣어주고(useState(0)), 실제 값이 바인딩 되는 값을 첫번째 변수([count])에 그리고 값을 수정할 함수를 두번째 변수([setCount])에 정의해준다. const Counter = (() => { const [co..
-
왜 React Hooks인가?백수의 개발/리액트 2021. 8. 25. 00:07
기존 React Component는 React.Component를 기본으로 상속받는 Class Component를 만들어 많이 사용해왔었다. 이러한 Class Component는 몇가지의 단점들이 존재하였다. 코드가 복잡하고 길다. 기본적으로 constructor에서 super에 props를 전달해주는 번거로움이 있다. 이와 함께 this와 binding에 대한 기본 javascript의 지식이 더 필요한 경우들이 있다. 또한, 장점이자 단점으로 상속받는 Component에 내포된 Life Cycle method가 다양하게 있어 다양하게 활용할 수 있으나, 이에 대한 이해가 필요하고 꽤나 무겁다고 느낄 수 있다. 상태관리 로직의 재사용이 힘들다. state관련 처리 로직이 필요한 경우 여러 Life Cy..
-
[JS] Iterable/Iterator 프로토콜백수의 개발/웹 2021. 8. 19. 00:42
Iterator Protocol Array, Map, Set와 같은 컬렉션 내 각 항목 처리는 매우 흔한 연산이다. iterator protocol을 통해 이러한 컬렉션을 더 잘 사용할 수 있다. iterator는 두 개의 속성( value, done)을 반환하는 next() 메소드 사용하여 객체의 iterator protocol을 구현한다. 실제 구현되어있는 iterator를 실행해보자. const arr = ['a', 'b', 'c', 'd', 'e']; const iter = arr[Symbol.iterator](); console.log(iter.next()) // { value: "a", done: false } console.log(iter.next()) // { value: "b", done..
-
Javascript Symbol 이란?백수의 개발/웹 2021. 8. 18. 02:23
Symbol 이란? 심볼은 변경 불가능한 원시 타입의 값이며, 다른 값과 중복되지 않는 고유한 값이다. 심볼 값은 충돌 위험이 없는 오브젝트의 유일한 프로퍼티 키를 만들기 위해서 사용할 수 있다. 하위호환성을 유지하면서 표준을 확장한다든지, 고유한 상수값을 만드는 데 사용할 수 있다. Symbol() 함수는 심볼(symbol) 형식의 값을 반환하는데, 아로부터 반환되는 모든 심볼 값은 고유하다. Symbol 함수 - Symbol() - Symbol.for() - Symbol.keyFor() Symbol은 2가지의 방법으로 만들 수 있다. const mySymbol1 = Symbol('mySymbol'); const mySymbol2 = Symbol.for('mySymbol'); 단순 Symbol()은 고..
-
var, let, const의 특징과 차이점백수의 개발/웹 2021. 8. 11. 00:31
JS에서는 변수를 선언하는 방식으로 var, let, const가 있다. 이 세가지의 변수 선언 방법의 특징과 차이를 한번 알아보자. 1. var var는 함수 레벨 스코프(function-level-scope)이고. var로 선언한 경우 호이스팅(hoisting)으로 인해 함수 내부라면 어디서든 접근이 된다. function fn() { console.log(varValue); // undefined var varValue = 100; console.log(varValue); // 100 } // hoising function fn() { var varValue; console.log(varValue); // undefined varValue = 100; console.log(varValue); // ..
-
CSS로 다양한 도형 만들기 - Clippy백수의 개발/웹 2020. 8. 20. 00:47
오늘은 웹개발을 할때 활용할 수 있는 다양한 도형을 손쉽게 만드는 방법에 대해 이야기하려한다. 단순히 삼각형 정도는 width, height를 없앤 후 border만 사용하면 그나마 손쉽게 삼각형을 만들 수 있다. 나중에 한번 다뤄보겠다. 궁금하다면 여기를 참고해보자 그러나 삼각형, 사각형까지는 큰 문제없이 만들 수 있지만 그 이상의 n각형의 도형이나, 다양한 모양들을 만드는 것은 쉽지 않을 것이다. 뭐... 다양한 트릭을 사용하면 못할 건 없지만... 하나의 예로 육각형 모양을 그리기 위해 직사각형 3개를 겹치는 것과 같이 말이다. 눈에 보이게 만들어보면 대충 이런 느낌이다. 그런데 이런 방식이 아니라 실제 각 Element를 오려내듯 도형을 만들어 낼 수 있다. 대충 느껴질 수 있게 본다면 위와 같을..
-
CSS Transform 알아보기(2) - translate백수의 개발/웹 2020. 4. 7. 19:04
CSS Transform - translate 알아보기 오늘은 CSS Transform의 속성 중 하나인 translate에 대해 알아보자. 기본적으로 translate는 위치를 이동하는 것이라고 생각하면 된다. translate는 아래와 같이 총 4가지의 종류로 사용할 수 있다. 한번 이 translate가 어떻게 적용되는지 간단하게 알아보자. 우리가 보는 웹 페이지는 기본적이로 2d이지만 원근법을 바탕으로 3d의 효과를 줄 수 있다. 아래처럼 3차원의 기본 개념을 바탕으로 translate를 통해 좌표를 이동한다고 생각하면된다. translate(x, y) .element { transform: translate(50px, 30px); } 기본적으로 설정 된 현재 위치로 부터 x, y축으로 특정 거리..
-
CSS Transform 알아보기(1) - 기본개념백수의 개발/웹 2020. 4. 6. 19:01
CSS Transform 개념 알아보기 웹 페이지를 보다보면 마우스를 올리거나, 클릭하거나, 스크롤을 움직이다 보면 페이지 내 요소들이 스르륵~ 샤라락~ 휘리릭~ 하는 모습들을 볼 수 있다. 그런 효과들의 대다수에는 transform 속성이 숨어있다.(모든 것이 그렇지는 않지만... transform + transition를 활용한다.) 그렇다면 오늘 CSS의 속성 중 하나인 Transform에 대해 알아보자. Transform은 말 그대로 변환이다. 우리는 특정 도형(엘리먼트)를 원하는 모양으로 변형시키기 이 transform을 사용한다. 이 transform을 통해 위와 같은 직사각형 도형의 위치를 이동시키거나, 회전시키거나, 비틀거나, 원근법 등 다양한 효과를 줄 수 있다. transform은 크게..