백수의 개발/웹
-
[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은 크게..
-
Request요청 시 공백이 포함된 URL에 유의하라백수의 개발/웹 2020. 3. 18. 20:24
Request요청 시 공백이 포함된 URL에 유의하라 프론트와 백앤드 사이에 데이터를 주고 받기 위해 Rest API를 많이 사용한다. 이를 위해 특정 URL를 통해 요청(Request)를 하게 된다. 이때 사용되는 URL은 ASCII 문자 집합으로 이루어져 인터넷을 통해서만 보낼 수 있다. 그러나 URL에 있는 ASCII로 대체할 수 없는 문자들이 있을 수 있다. 이러한 경우 URL Encoding을 통해 %와 16진수의 조합으로 ASCII로 대체할 수 있도록 변환한다. [ URL Encoding ] 문제점 아래와 같은 url이 있다고 생각해보자. http://www.example.com/?value=">" 이러한 경우 URL Encoding을 통해 적절히 Encoding되어 아래와 같은 URL로 변환..
-
[ JavaScript ] 타입/클래스 비교 연산 Typeof/Instanceof백수의 개발/웹 2020. 3. 17. 21:30
타입/클래스 비교 연산 Typeof/Instanceof Java와 같이 객체를 다루는 컴파일언어 조차도 타입 안정성에 있어서 완전히 자유롭지 않을 것이다. 그러나 컴파일러 조차 없는 Javascript ES6에서 클래스가 도입되었고 타입에 관한 문제가 더 많이 생길 수 있을 것이다. 이를 위해 TypeScript를 통해 조금은 더 타입 안정성을 가질 수 있더라도 여전히 이를 완전히 극복할 수는 없을 것이다. 이를 위해 우리는 타입/클래스 비교 연산을 확실하게 알고, 적용할 수 있어야 할 것이다. 오늘은 typeof와 instanceof를 통해 타입/클래스 비교를 어떻게 할 수 있을지 다루어 보겠다. Typeof typeof는 함수가 아닌 연산자이다. 즉, 괄호를 사용하지 않고 !value, ~value와..