cotnmin

어느 날 시간이 좀 나서 큰 프로젝트를 만들기는 애매하고 간단하게 뭘 만들어볼까? 하다 만든 오델로입니다! 오델로는 간단한 게임으로 내 돌로 상대 돌을 감싸면 상대 돌이 뒤집는 방식으로 간단하게 플레이할 수 있습니다.좀 더 자세한 룰은 아래와 같습니다.상대 돌을 자신의 돌로 감싸면 뒤집을 수 있습니다.상대 돌을 감싸 뒤집을 수 있는 곳에만 둘 수 있습니다.만약 상대 돌을 뒤집을 수 있는 위치가 없다면 패스할 수 있습니다.둘 다 둘 곳이 없어 연속으로 패스를 하면 게임은 종료됩니다.게임 당 패스는 두번까지만 가능하고 세 번째 패스와 동시에 게임은 종료됩니다.보드를 모두 채우면 게임이 끝납니다.게임 종료 후 더 많은 돌을 가지고 있는 사람이 승리합니다.화면은 간단하면서 직관적으로 만들었습니다.제일 중요한 보..

프론트엔드에서도 입력자의 값을 검증하거나 API를 통해 가져온 값을 분석 또는 재구성해서 사용하고 싶을 때 정규표현식을 이용할 수 있다. 정규표현식(Regular Expression)이란? 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다. 프로그래밍을 하는 과정에서 문자열을 검증하거나 문자열 일부를 추출하고 싶을 때 많이 사용한다. Javascript에서 정규식 사용하기 일단 Javascript에서는 정규식 리터럴이나 RegExp 객체를 이용해 정규표현식을 선언할 수 있다. 생성된 정규식은 문자열이 아닌 정규식 객체이다. const regexp1 = /a\d{1,}/i; const regexp2 = new RegExp(/a\d{1,}/, 'i'); const regexp3 = ne..

Javascript의 Class 문법은 기본적으로 Private 메서드나 변수를 제공하지 않는다. _(underscore) 등으로 이름을 시작하는 경우 명시적으로만 프라이빗하게 선언하려고 만들었다는 걸 알릴 수 있다. (다만 사용자가 해당 메서드나 변수에 직접적으로 접근이 가능하다.) 하지만 Javascript의 스코프 범위를 이용해 클로저(Closure)를 만들어 Private 한 메서드와 변수를 가질 수 있는 Class를 생성할 수 있다. 1. Closure(클로저)란? Closure는 함수가 일급객체 취급받는 언어에서 선언 후 반환하게 되면 스코프가 닫히게 되어 접근할 수 없는데, 함수 스코프 내부에 영향을 줄 수 있는 함수를 반환해 해당 함수를 호출할 때만 스코프에 영향을 줄 수 있는 방식이다. ..

Throttling과 Debouncing는 불필요한 연산을 줄이는 방법으로 이벤트나 비동기 요청을 할 때 주로 사용한다. 예를 들어 DOM를 크게 변경하는 이벤트가 scroll이나 resize 이벤트 같은 곳에 묶여있을 경우, 수많은 함수가 호출되고 키보드 입력을 받는 경우 엔터없이 자동완성을 한다고 했을 때 한 글자 한 글자 입력 시마다 요청을 보내게 될 것이다. 즉, 함수의 호출 비용(시간이나 컴퓨팅 성능이 될 수도 있고, api같은 경우 이용료나 트래픽 비용이 될 수 있다.)이 큰 경우 비용 절감을 위해 성능을 조절하는 기법이다. 둘의 차이점은 아래와 같다. Throttling: 함수 호출 후 정해진 시간동안 같은 함수 호출 X Debouncing: 지연 호출되는 함수를 호출 시 이전 호출은 취소하..

Javascript에서 순회를 사용할 때 주로 forEach를 사용합니다. 하지만 forEach는 반복도중 중단을 할 수 없다는 단점이 있습니다. 이를 for 문을 이용해 해결할 수 있지만 좀 더 깔끔하고 명확하게 쓸 수 있는 몇 가지 메서드를 알아보겠습니다 1. Array.prototype.some()과 Array.prototype.every() some과 every는 각 배열을 순회하며 주어진 조건의 반환값에 참이 존재하는지, 모든 값이 참인지 알려주는 메서드입니다. some은 참을 만나면 순회를 중단하고 참을 반환하며 순회를 마칠 때까지 참이 나오지 않으면 거짓을 반환합니다. every는 거짓을 만나면 순회를 중단하고 거짓을 반환하며 순회를 마칠 때까지 거짓이 나오지 않으면 참을 반환합니다. con..

1. _로 숫자 구분하기 (numeric separator) 가끔 큰 단위의 숫자를 적는 경우 한눈에 들어오지 않는 경우가 많은데, 이때 언더바(_)를 이용해 숫자를 쉽게 구분해 줄 수 있습니다. let num1 = 1000000; let num2 = 1_000_000; let num3 = 100_0000; // num1 == num2 == num3 언더바를 입력하는 위치는 꼭 3자리씩 끊어서 표시할 필요는 없습니다. 다만, 아래처럼 두 개를 이어서 나타내지는 못합니다. let num_err = 100__000; // Uncaught SyntaxError: Only one underscore is allowed as numeric separator 2. n진법 let num1 = 11; // 10진법: ..

Web API Javascript IntersectionObserver 사용해 보기 여러 Web API 중 변경사항을 감지하는 Observer들이 존재합니다. 이 중 매우 유용하게 쓰일 수 있는 IntersectionObserver, MutationObserver 등이 있는데 이 중에서 IntersectionObserver를 사용해보고자 합니다. IntersectionObserver 란? IntersectionObserver는 Web API 중 하나로 Viewport나 정해진 영역과 다른 영역이 겹치는지, 얼마나 겹치는지 감지하는데 이용하는 API입니다. 대부분 Modern browser에서 간단하게 사용가능합니다. 해당 API의 존재를 알기 전에는 주로 addEventListener('scroll', ..

HTML Object overflow 감지 HTML 내 요소에서 자식요소가 부모요소보다 클 때 css 상에서 overflow 속성을 정의해 처리를 할 수 있습니다. 하지만 이를 javascript에서 동적으로 처리를 하고 싶다면 다른 방법을 이용해야 합니다. 이때 2가지 방법을 이용할 수 있습니다. 1. scrollWidth 이용 위 이미지를 참고하면 clientWidth와 scrollWidth를 비교하여 scrollWidth가 clientWidth보다 크다면 overflow가 발생했음을 알 수 있습니다. 아래의 예제를 따라 해보면 문제없이 결과를 얻을 수 있습니다. Lorem ipsum dolor sit amet consectetur adipiscing elit, sed do eiusmod tempor..