자바스크립트
[React] 틱택토(Tic-Tac-Toe) 게임 주요 로직 톺아보기
[React] 틱택토(Tic-Tac-Toe) 게임 주요 로직 톺아보기
2024.05.30틱택토 소개틱택토는 2명의 플레이어가 자신의 기호(X, O) 3개를 가로, 세로, 대각선으로 연속해서 놓이도록 하는 보드 게임이다. 게임은 주로 3x3 격자 보드에서 진행된다. 플레이어는 번갈아가면서 자신의 기호를 놓고, 한 칸엔 한 개의 기호만 놓을 수 있다. 모든 칸에 기호를 놓았지만 어느 한쪽도 연속적인 세 개의 기호를 배열하지 못하면 게임은 무승부로 끝난다(무승부가 많은 게임). 승리 조건 체크틱택토는 행렬로 이뤄진 2차원 보드에서 진행하지만, 1차원 배열로 관리하면 각 칸을 단일 인덱스로 접근할 수 있기 때문에 데이터를 더 수월하게 관리할 수 있다. 게임 로직을 구현할 때도 인덱스 계산을 단순화시켜 코드의 복잡성을 줄이는 데 도움이 된다. 또한, 1차원 배열은 그리드 스타일을 이용해 2차원 보..
[JS] Array.fill() 메서드 사용 시 주의할 점
[JS] Array.fill() 메서드 사용 시 주의할 점
2024.05.30Array.fill() 메서드는 이름 그대로 첫 번째 인자에 주어진 값으로 배열의 모든 요소를 채우는 메서드다. 주로 Array() 생성자와 함께 사용하여, 초기값이 할당된 배열을 생성할 때 유용하게 쓰인다.Array.fill(value, start?, end?)// length가 2인 빈 배열 생성 후 null로 채움const filledArray = Array(2).fill(null);console.log(filledArray); // [null, null]const numbers = [1, 2, 3, 4];// 2~3번 인덱스를 null로 채움 (start 포함, end 미포함)numbers.fill(null, 2, 4);console.log(numbers); // [1, 2, null, null]..
[JS] Bitwise 비트 연산자 톺아보기 (feat. 비트마스크)
[JS] Bitwise 비트 연산자 톺아보기 (feat. 비트마스크)
2024.05.29비트 연산자는 정수의 이진 표현, 즉 비트(0과 1) 단위로 계산하는 연산자다. 주로 성능 최적화, 메모리 절약, 알고리즘 구현 등에서 사용한다. 자바스크립트는 64비트 부동소수점 형식으로 숫자를 저장하지만, 비트 연산을 수행할 땐 내부적으로 피연산자를 32비트 정수로 변환한다. 이는 비트 연산이 정수에만 적용되기 때문. 변환 과정에서 소수부는 버려지고 32비트 정수만 연산에 사용된다. 2의 보수 표현법2의 보수 표현법은 비트를 이용해 음수를 나타내는 표준 방식으로, 정수의 이진 표현에서 모든 비트를 반전시킨 후(1의 보수) 1을 더하는 방식으로 계산한다. 즉, 1의 보수에 1을 더하면 2의 보수가 된다. 이때 최상위 비트(Most Significant Bit; 부호 비트; 가장 왼쪽에 있는 비트)가 ..
[JS] 유니코드와 유니코드 프로퍼티
[JS] 유니코드와 유니코드 프로퍼티
2024.05.29유니코드💡 자바스크립트는 모든 문자열을 UTF-16으로 인코딩한다. UTF-16은 기본적으로 2바이트(16비트)로 인코딩하지만, 2바이트로 표현할 수 없는 이모지, 특수 기호 같은 문자는 서로게이트 페어를 통해 4바이트를 사용한다. 이를 보충 문자라고 부른다. 서로게이트 페어는 U+10000(65536) 이상의 코드 포인트를 표현하기 위해 두 개의 2바이트 코드 조합으로 보충 문자를 표현하는 방식이다. 자바스크립트는 유니코드를 사용해서 문자열을 인코딩한다. 유니코드는 전 세계의 다양한 문자와 기호를 표현할 수 있도록 설계된 국제 표준이다. 유니코드에서 각 문자는 고유한 코드 포인트(해당 문자열을 대표하는 숫자)를 가진다. 코드 포인트는 U+ 접두사와 16진수 숫자를 합친 표기법을 사용한다. 예를들어 알..
[JS] 바닐라 자바스크립트로 마리오 러너 게임 구현하기
[JS] 바닐라 자바스크립트로 마리오 러너 게임 구현하기
2024.05.29러너 게임(달리기 게임)은 플레이어가 자동으로 전진하면서 장애물을 회피하고, 점수를 획득하는 게임 유형이다. 간단한 러너 게임은 캔버스 없이 JavaScript, HTML, CSS 만으로도 구현할 수 있다. 러너 게임 구현은 크게 ①이동(전진), ②점프, ③장애물 배치, ④장애물 충돌 감지로 나눌 수 있다. 슈퍼 마리오는 플레이어가 캐릭터를 직접 조종하는 플랫포머 장르에 속하지만 친숙한 마리오 캐릭터와 구조물을 이용해서 러너 게임으로 만들어보자. 싱글톤 DOM 관리더보기// dom-manager.jsclass DomManager { static instance = null; constructor() { // 생성자 함수는 기본적으로 새로 생성된 인스턴스(this)를 반환하지만 명시적으로 반환 ..
[HTML] select, option 태그 주요 속성과 특징
[HTML] select, option 태그 주요 속성과 특징
2024.05.29Option 생성자 함수 | MDN💡 HTML 옵션 태그의 selected 어트리뷰트와 자바스크립트로 접근하는 option.selected 속성(프로퍼티)은 서로 독립적인 기능을 가진다. 옵션 태그의 selected 어트리뷰트는 초기 선택 상태를 나타내고, option.selected 속성은 현재 선택 상태를 반영하고 제어하는데 사용한다.// Option 생성자를 사용하면 document.createElement() 보다 더 간결하게 작성할 수 있다new Option(text?, value?, defaultSelected?, selected?) ◼︎ text : 옵션 요소에 표시할 텍스트 | 기본값 "" 빈 문자열text에 지정한 값은 option.textContent로 설정된다.◼︎ value : 옵..
[Algorithm] 순열 / 조합 개념과 알고리즘 구현
[Algorithm] 순열 / 조합 개념과 알고리즘 구현
2024.05.28순열 Permutation개념순열은 서로 다른 n개 요소 중에서 r개를 선택하여 순서대로 나열하는 방법을 의미한다. 순열에선 순서가 결과에 영향을 미치기 때문에 순서가 중요하다. 동일한 요소를 서로 다른 순서로 나열하면, 각각을 별개의 순열로 간주한다. 예를 들어 A, B, C에서 A, B 두 요소를 선택하는 경우 AB와 BA는 서로 다른 순열이다. A 선택, 남은 글자 B, CB 선택, 남은 글자 C (2자리 순열이므로 무시) → ABC 선택, 남은 글자 B (2자리 순열이므로 무시) → ACB 선택, 남은 글자 A, CA 선택, 남은 글자 C (2자리 순열이므로 무시) → BAC 선택, 남은 글자 A (2자리 순열이므로 무시) → BCC 선택, 남은 글자 A, BA 선택, 남은 글자 B (2자리 순열..
[React] 리액트에서 setTimeout 더 편하게 쓰기
[React] 리액트에서 setTimeout 더 편하게 쓰기
2024.05.28React에서 setTimeout 같은 타이머 API를 사용할 때 컴포넌트의 생명주기를 고려하지 않으면 메모리 누수나 예기치 않은 예외가 발생할 수 있다. 예를 들어 타이머를 설정한 후 컴포넌트가 언마운트돼도 타이머는 여전히 실행되고, 이후 타이머 콜백에서 언마운트된 컴포넌트의 상태를 업데이트하려고 하면 에러가 발생할 수 있다. 위 같은 상황을 방지하기 위해 useEffect의 클린업 함수에 타이머 해제 로직을 추가한다. 하지만 한 컴포넌트에서 여러 타이머를 관리해야 한다면 메모리 누수 뿐만 아니라 타이머를 관리하기 위한 로직 때문에 컴포넌트의 복잡성이 높아질 수 있다. 만약 별도의 커스텀 훅에서 타이머를 관리하고, 커스텀 훅이 언마운트 될 때 모든 타이머를 자동으로 해제한다면 해당 훅을 사용하는 곳에선..
[React] 크롬 확장 프로그램 개발 배경 지식 및 튜토리얼
[React] 크롬 확장 프로그램 개발 배경 지식 및 튜토리얼
2024.05.28크롬 확장기능 주요 기능사용자 인터페이스 사용자화 : 브라우저 툴바에 버튼 추가, 사용자 정의 팝업/오버레이 생성 등콘텐츠 스크립트 : 웹페이지에 직접 스크립트를 삽입하여 DOM 조작 가능백그라운드 스크립트 : 브라우저를 사용하는 동안 지속적으로 실행돼서 필요한 기능 제공API 접근 : 북마크/탭/윈도우 관리, 히스토리 조작 등 브라우저의 다양한 영역 접근 가능🔍 탭 이동, capture, zoom 등 다양한 방식으로 제어 가능메시징 시스템 : 확장 기능의 다른 컴포넌트 혹은 웹페이지와 메시지 교환 가능웹 요청 조작 : 네트워크 요청 가로채기, 광고 차단, 프라이버시 보호, 웹 트래픽 관리 등🔍 chrome.webRequest API로 http 요청을 가로채거나 request header 수정 가능사..
[Algorithm] 자바스크립트 Map으로 구현하는 LRU Cache 알고리즘
[Algorithm] 자바스크립트 Map으로 구현하는 LRU Cache 알고리즘
2024.05.28LRU 캐시 특징캐시(Cache)는 데이터나 연산 결과를 일시적으로 저장하는 것을 가리킨다. 자주 사용하는 데이터나 연산 결과를 메모리 영역에 보관해서 동일한 정보를 요청받았을 때 더 빠른 속도로 제공할 수 있다. LRU 캐시는 대표적인 캐시 알고리즘 중 하나로 제한된 저장 공간을 관리하기 위해 가장 오래전에 사용한 데이터를 제거하는 알고리즘이다. LRU는 Least Recently Used의 약자로 사용한지 가장 오래된 정도로 해석할 수 있다. LRU 캐시에선 조회/쓰기시 해당 값을 가장 최근에 사용한 것으로 처리하는게 핵심이다. 자바스크립트 Map 등을 이용해서 구현할 땐 값이 뒤에 위치할 수록 가장 최근에 사용한 것으로 표시한다. 조회 : 캐시에 값이 존재하면 해당 값을 캐시 마지막(최신)으로 이동..
[Algorithm] 최소 힙(Heap)으로 우선순위 큐 구현하기
[Algorithm] 최소 힙(Heap)으로 우선순위 큐 구현하기
2024.05.28힙의 특징최단 경로를 찾을 때 널리 사용하는 다익스트라 알고리즘은, 탐색 큐의 자료구조가 전체 성능에 결정적인 영향을 미친다. 때문에 추가/삭제를 빠르게 수행할 수 있는 우선순위 큐를 주로 사용한다. 우선순위 큐는 일반 큐와 비슷하지만, 각 요소가 우선순위를 가지고 있으며, 우선순위가 높은 요소가 먼저 출력된다는 점이 다르다. 우선순위 큐는 크게 배열, 연결리스트, 힙 이렇게 세 가지 방법으로 구현할 수 있다. 그중 완전 이진 트리 구조를 갖는 힙으로 구현하면 추가/제거의 효율성이 크게 향상된다. 구현 방법삽입삭제순서 없는 배열O(1)O(n)순서 없는 연결리스트O(1)O(n)정렬된 배열O(n)O(1)정렬된 연결리스트O(n)O(1)힙O(log n)O(log n) 이진 트리는 각 부모 노드가 왼쪽/오른쪽 최..
[Algorithm] 유클리드 알고리즘 / 소인수분해로 최소공배수 최대공약수 계산하기
[Algorithm] 유클리드 알고리즘 / 소인수분해로 최소공배수 최대공약수 계산하기
2024.05.26N개의 최소공배수프로그래머스 레벨 2의 12953번 문제는 N개의 최소공배수를 구하는 문제다. 최소공배수는 입력된 두 수의 배수 중 공통이 되는 가장 작은 숫자를 의미한다. 예를들어 2와 7의 최소공배수는 14가 된다. 주어진 배열(arr)에서 가장 큰 수의 배수를 나머지 요소와 나눴을 때 모두 0이 되는 수를 찾는 방법으로 풀었지만, 매번 큰 수를 제외한 배열의 모든 숫자를 하나씩 나눠봐야 하기 때문에 효율적이지 않다. 배열 정렬을 제외하고 배열 길이가 n, while문의 반복 횟수가 x이라고 했을 때 시간복잡도는 $O(n \cdot x)$가 된다.function solution(arr) { const sortedArray = arr.sort((a, b) => b - a); const [bigges..