HOME
[Algorithm] 이진 탐색 및 변형 알고리즘 Binary Search Algorithm
[Algorithm] 이진 탐색 및 변형 알고리즘 Binary Search Algorithm
2024.06.02이진 탐색 알고리즘은 정렬된 배열에서 특정 값을 효율적으로 찾기 위한 알고리즘이다. 이진 탐색은 값의 크기에 따라 탐색 범위를 절반으로 줄여가며 원하는 값을 찾아내는 방식으로 작동하기 때문에 시간 복잡도는 $O(\log n)$으로 효율적이다. 예를 들어 1024개 요소를 가진 배열에서 원하는 값을 찾을 때 최대 10번의 비교만 필요하다. 하지만 데이터가 자주 변경된다면 매번 정렬을 해줘야 하기 때문에 효율성이 떨어질 수 있다. 데이터 삽입/삭제가 빈번한 경우엔 해시 테이블 같은 자료구조를 사용하는게 더 나을 수 있다. 💡 이진 탐색은 이분 탐색이라고도 불린다. 이진 탐색 기본중앙값 계산배열의 중간 인덱스를 계산한다 mid = Math.floor((left + right) / 2)중앙값과 찾고자 하는 ..
[Network] 엣지 플랫폼 아키텍처 Edge Platform Architecture
[Network] 엣지 플랫폼 아키텍처 Edge Platform Architecture
2024.06.02서버-클라이언트 구조서버-클라이언트 구조는 가장 전통적인 아키텍처 중 하나로, 중앙 서버가 모든 클라이언트의 요청을 처리하는 개념이다. 즉, 모든 클라이언트 요청은 중앙 서버로 전송된다. 서버 - 클라이언트 구조는 간단하고 구현하기 쉬운 장점이 있지만, 중앙 서버가 단일 의존 지점이라는 단점이 있다. 접속량이 많을 경우 성능 문제가 발생할 수 있으며, 서비스가 중단될 수도 있다. 또한, 중앙 서버의 물리적 위치가 고정되어 있어 사용자의 액세스 속도가 지리적 위치에 직접적인 영향을 받는다. 동일 조건에서 서버에 가까울수록 액세스 속도가 빨라지고, 서버에서 멀어질수록 액세스 속도가 느려진다. CDN의 출현중앙 서버의 부담을 줄이고, 사용자와의 지리적 거리를 단축하기 위해 CDN 아키텍처가 등장했다. CDN..
[HTML/CSS] 원하는 위치에 노드 삽입하기 — insertAdjacentHTML
[HTML/CSS] 원하는 위치에 노드 삽입하기 — insertAdjacentHTML
2024.06.02insertAdjacentHTML vs innerHTMLelement.insertAdjacentHTML(position, htmlString) element.insertAdjacentHTML() 메서드는 인자로 전달한 문자열(htmlString)을 HTML로 파싱해서 지정된 위치(position)에 삽입하는 메서드다. 사용자 입력을 받지 않는 곳에 사용하면 createElement() 메서드를 사용하는 것 보다 간편하게 요소를 삽입할 수 있다. 사용자 입력을 받아서 처리할 때는 XSS 공격을 방지하기 위해 별도의 sanitizing이 필요하다. 비슷한 메서드로 element.innerHTML()이 있지만 삽입 위치를 지정할 수 없고, 기존 요소를 덮어쓰기 때문에 전체 요소를 다시 파싱해야 하는 단점이 있..
[Next.js] App Router / 서버 컴포넌트 주요 내용 정리
[Next.js] App Router / 서버 컴포넌트 주요 내용 정리
2024.06.01App Router vs Page Router기능앱 라우터페이지 라우터라우팅 타입서버 중심클라이언트 사이드서버 컴포넌트 지원OX복잡도더 복잡함더 간단함성능더 좋음더 나쁨유연성더 유연함덜 유연함파일 기반 라우팅중첩 폴더를 사용해 라우트 정의파일이 직접 라우트를 나타냄컴포넌트 기본적으로 서버 컴포넌트기본적으로 클라이언트 컴포넌트데이터 페칭fetch 함수 사용getServerSideProps, getStaticProps, getInitialProps 사용레이아웃레이아웃 중첩 / 동적 레이아웃정적 레이아웃동적 라우트지원하지만 문법 다름Link 컴포넌트로 지원우선순위페이지 라우터보다 우선앱 라우트가 없을 경우 대체 서버 컴포넌트Next.js 버전 13~부터 제공하는 App Router를 사용하면 서버 컴포넌트가 ..
[Algorithm] 미니맥스 / 알파-베타 가지치기 알고리즘 톺아보기
[Algorithm] 미니맥스 / 알파-베타 가지치기 알고리즘 톺아보기
2024.06.01미니맥스 알고리즘개념💡 제로섬 게임은 한 플레이어가 이득을 얻으면 다른 플레이어는 그만큼 손해를 보는 게임을 가리킨다. 미니맥스 알고리즘은 틱택토, 체스처럼 2명이 참여하는 제로섬 게임에서 가장 널리 사용하는 알고리즘으로, 모든 플레이어가 최선의 수를 둔다고 가정하고 가능한 모든 수를 고려하여 승리할 수 있는 전략을 도출할 때 사용한다. X 플레이어는 승리하기 위해 최대 점수를 얻으려 하고, O 플레이어는 패배하지 않기 위해 최소 점수를 얻으려 하는 상황에서 최적의 해를 찾는 방법이다. 현재 X 플레이어 차례이고, X 플레이어가 선택할 수 있는 곳은 1, 4, 5번 인덱스(Zero-Based)라고 가정해 본다. X가 이기면 +100점, O가 이기면 -100점을 획득한다. 보드의 모든 수를 뒀지만 무승..
[React] 틱택토(Tic-Tac-Toe) 게임 주요 로직 톺아보기
[React] 틱택토(Tic-Tac-Toe) 게임 주요 로직 톺아보기
2024.05.30틱택토 소개틱택토는 2명의 플레이어가 자신의 기호(X, O) 3개를 가로, 세로, 대각선으로 연속해서 놓이도록 하는 보드 게임이다. 게임은 주로 3x3 격자 보드에서 진행된다. 플레이어는 번갈아가면서 자신의 기호를 놓고, 한 칸엔 한 개의 기호만 놓을 수 있다. 모든 칸에 기호를 놓았지만 어느 한쪽도 연속적인 세 개의 기호를 배열하지 못하면 게임은 무승부로 끝난다(무승부가 많은 게임). 승리 조건 체크틱택토는 행렬로 이뤄진 2차원 보드에서 진행하지만, 1차원 배열로 관리하면 각 칸을 단일 인덱스로 접근할 수 있기 때문에 데이터를 더 수월하게 관리할 수 있다. 게임 로직을 구현할 때도 인덱스 계산을 단순화시켜 코드의 복잡성을 줄이는 데 도움이 된다. 또한, 1차원 배열은 그리드 스타일을 이용해 2차원 보..
포르노그래피(음란물)가 미국 기업과 가정에 미치는 영향
포르노그래피(음란물)가 미국 기업과 가정에 미치는 영향
2024.05.30포르노그래피로 인한 업무 손실2010년 2월 닐슨(Nielsen) 연구에 따르면, 업무용 컴퓨터로 포르노 사이트에 접속한 비율 28%업무용 컴퓨터로 포르노 사이트를 방문한 평균 시간 약 13분매월 평균 직원 1명이 이러한 사이트에서 보내는 시간 약 1시간 38분닐슨이 인용한 평균 시간만큼 3,700만 명의 직원이 포르노를 시청한다면, 기업의 연간 생산성 손실액은 169억 달러 미국의 인터넷 포르노그래피 통계매 초 (Every Second)28,258명의 사용자가 인터넷에서 포르노 콘텐츠 시청3,075.64 달러를 포르노 콘텐츠에 지출372명이 검색 엔진에 '성인' 단어 입력 매 일 (Every Day)37개의 포르노 영상 제작25억 통의 포르노 콘텐츠가 포함된 이메일 송수신6,800만 건의 포르노 검색..
[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진수 숫자를 합친 표기법을 사용한다. 예를들어 알..
[TS] 타입스크립트 클래스(class) 문법, 추상 클래스와 메서드
[TS] 타입스크립트 클래스(class) 문법, 추상 클래스와 메서드
2024.05.29클래스 정의자바스크립트에선 생성자 내부에서 프로퍼티를 선언하고 초기화한다. 클래스 필드를 사용하는 경우를 제외하곤 클래스 바디에 프로퍼티를 따로 선언할 필요가 없다. 반면 타입스크립트에선 먼저 클래스 바디에 프로퍼티를 미리 선언하고 타입을 지정해야 한다. 클래스 바디에 프로퍼티를 선언하지 않으면 에러가 발생한다.class User { name: string; // 프로퍼티 선언 및 타입 지정 constructor(name: string) { this.name = name; // 프로퍼티 초기화 }}const user = new User('John');console.log(user); // { name: 'John' } 타입스크립트에선 public, protected, private 접근 제한자..
[DevTools] 웹에서 VSCode 사용하기 - github.dev / github1s
[DevTools] 웹에서 VSCode 사용하기 - github.dev / github1s
2024.05.29웹에서 레포지토리를 살펴보다가 코드를 좀 더 편하게 들여다보고 싶을 때 github1s 서비스를 이용해서 웹 기반 VSCode 환경으로 볼 수 있다. github1s를 사용하려면 github 도메인 뒤에 1s를 붙여서 github1s.com/... 주소로 이동해야 한다. 보통은 주소를 변경해주는 자바스크립트 코드를 즐겨찾기에 추가해 두고 사용한다.javascript: window.location.href = window.location.href.replace(/github(1s)?.com/, function(match, p1) { return p1 ? 'github.com' : 'github1s.com' }) 그러다 우연히 Github에서 공식으로 제공하는 github.dev라는 서비스를 발견했다. gi..