행복한 백수 개발자 행복한 백수 개발자

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 Component는 React.Component를 기본으로 상속받는 Class Component를 만들어 많이 사용해왔었다. 이러한 Class Component는 몇가지의 단점들이 존재하였다. 코드가 복잡하고 길다. 기본적으로 constructor에서 super에 props를 전달해주는 번거로움이 있다. 이와 함께 this와 binding에 대한 기본 javascript의 지식이 더 필요한 경우들이 있다. 또한, 장점이자 단점으로 상속받는 Component에 내포된 Life Cycle method가 다양하게 있어 다양하게 활용할 수 있으나, 이에 대한 이해가 필요하고 꽤나 무겁다고 느낄 수 있다. 상태관리 로직의 재사용이 힘들다. state관련 처리 로직이 필요한 경우 여러 Life Cy..

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..

Symbol 이란? 심볼은 변경 불가능한 원시 타입의 값이며, 다른 값과 중복되지 않는 고유한 값이다. 심볼 값은 충돌 위험이 없는 오브젝트의 유일한 프로퍼티 키를 만들기 위해서 사용할 수 있다. 하위호환성을 유지하면서 표준을 확장한다든지, 고유한 상수값을 만드는 데 사용할 수 있다. Symbol() 함수는 심볼(symbol) 형식의 값을 반환하는데, 아로부터 반환되는 모든 심볼 값은 고유하다. Symbol 함수 - Symbol() - Symbol.for() - Symbol.keyFor() Symbol은 2가지의 방법으로 만들 수 있다. const mySymbol1 = Symbol('mySymbol'); const mySymbol2 = Symbol.for('mySymbol'); 단순 Symbol()은 고..

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); // ..

오늘은 웹개발을 할때 활용할 수 있는 다양한 도형을 손쉽게 만드는 방법에 대해 이야기하려한다. 단순히 삼각형 정도는 width, height를 없앤 후 border만 사용하면 그나마 손쉽게 삼각형을 만들 수 있다. 나중에 한번 다뤄보겠다. 궁금하다면 여기를 참고해보자 그러나 삼각형, 사각형까지는 큰 문제없이 만들 수 있지만 그 이상의 n각형의 도형이나, 다양한 모양들을 만드는 것은 쉽지 않을 것이다. 뭐... 다양한 트릭을 사용하면 못할 건 없지만... 하나의 예로 육각형 모양을 그리기 위해 직사각형 3개를 겹치는 것과 같이 말이다. 눈에 보이게 만들어보면 대충 이런 느낌이다. 그런데 이런 방식이 아니라 실제 각 Element를 오려내듯 도형을 만들어 낼 수 있다. 대충 느껴질 수 있게 본다면 위와 같을..

오늘은 다양한 이미지들을 가져다 활용할 수 있는 사이트를 소개하려고한다. 블로그를 쓰던지, 유튜브 영상을 제작하던지, PPT발표, 프로젝트 개발 등 다양한 상황에서 이런 저런 이미지들을 활용하고 싶을 때가 많을 것이다. 그러나 단순히 구글링해서 이미지를 가져오기에는 저작권의 문제가 있을 수 있다. 불과 몇 년까지만 해도 크게 이슈가 되지는 않았으나, 점차 저작권에 대해 인식이 변화하면서 단순히 이것 저것 가져다 쓰면 안된다는 것을 많은 사람들이 잘 알 것이라 생각한다. 그래서 이에 대한 큰 고민 없이 다양한 이미지들을 활용할 수 있는 사이트 Unsplash를 소개한다. 간단한 검색을 통해 다양한 이미지들을 손쉽게 구할 수 있다. 이러한 다양한 사진들은 약 20만명의 작가들이 무료로 공유해주고 있다. 그래..

CSS Transform - translate 알아보기 오늘은 CSS Transform의 속성 중 하나인 translate에 대해 알아보자. 기본적으로 translate는 위치를 이동하는 것이라고 생각하면 된다. translate는 아래와 같이 총 4가지의 종류로 사용할 수 있다. 한번 이 translate가 어떻게 적용되는지 간단하게 알아보자. 우리가 보는 웹 페이지는 기본적이로 2d이지만 원근법을 바탕으로 3d의 효과를 줄 수 있다. 아래처럼 3차원의 기본 개념을 바탕으로 translate를 통해 좌표를 이동한다고 생각하면된다. translate(x, y) .element { transform: translate(50px, 30px); } 기본적으로 설정 된 현재 위치로 부터 x, y축으로 특정 거리..