프론트 개발자를 위한 여정

모든 영역을 안내하는 개발자

오블완 21

알고리즘 문제에서 자주 쓰이는 Math 함수 완벽 정리

🎯 1. 자주 사용되는 Math 함수와 그 이유다음은 알고리즘 문제에서 자주 등장하는 Math 함수와 많이 사용되는 이유입니다:함수사용 빈도주요 활용 이유Math.abs()★★★★★절댓값 계산: 두 값의 차이 계산, 거리 계산 문제에서 필수적으로 사용됩니다.Math.max()★★★★★최댓값 구하기: 배열 내 최대값 계산이나 여러 값 중 가장 큰 값 찾기에 사용됩니다.Math.min()★★★★★최솟값 구하기: 배열 내 최소값 계산이나 여러 값 중 가장 작은 값 찾기에 사용됩니다.Math.floor()★★★★☆내림값 계산: 정수 연산, 몫 계산, 배수 관련 문제에서 사용됩니다.Math.ceil()★★★★☆올림값 계산: 나누기 연산 후 올림값을 구하거나 필요한 최소값을 계산하는 문제에서 사용됩니다.Math...

Algorithm 2024.11.27

HTTP 통신과 웹소켓(WebSocket)의 차이 / REST API를 웹 소켓으로 구현했을 때

HTTP 통신프로토콜 특징클라이언트-서버 간 요청/응답(Request/Response) 기반.클라이언트가 요청을 보내야 서버가 응답을 반환.단방향 통신(One-way) 구조.장점REST API와 잘 어울림: HTTP 메서드(GET, POST, PUT, DELETE 등)를 활용해 명확한 리소스 제어 가능.표준화: 대부분의 브라우저와 서버에서 기본적으로 지원.캐싱 가능: HTTP 헤더를 통해 캐싱을 관리할 수 있어 성능 최적화가 용이.보안: HTTPS를 통해 SSL/TLS 암호화를 쉽게 구현.단점실시간 통신에는 비효율적: 클라이언트가 정기적으로 요청(Polling)하거나, 서버 푸시(SSE)와 같은 우회 방식이 필요.오버헤드: 요청마다 헤더와 데이터를 전송, 추가적인 트래픽 발생.웹소켓(WebSocket)프..

Frontend 2024.11.26

[프로그래머스] PCCP 기출문제 / 1번 동영상 재생기 / Lv1 / JS / 접근법, 코드, 추가테스트케이스

문제 설명당신은 동영상 재생기를 만들고 있습니다. 당신의 동영상 재생기는 10초 전으로 이동, 10초 후로 이동, 오프닝 건너뛰기 3가지 기능을 지원합니다. 각 기능이 수행하는 작업은 다음과 같습니다.10초 전으로 이동: 사용자가 "prev" 명령을 입력할 경우 동영상의 재생 위치를 현재 위치에서 10초 전으로 이동합니다. 현재 위치가 10초 미만인 경우 영상의 처음 위치로 이동합니다. 영상의 처음 위치는 0분 0초입니다.10초 후로 이동: 사용자가 "next" 명령을 입력할 경우 동영상의 재생 위치를 현재 위치에서 10초 후로 이동합니다. 동영상의 남은 시간이 10초 미만일 경우 영상의 마지막 위치로 이동합니다. 영상의 마지막 위치는 동영상의 길이와 같습니다.오프닝 건너뛰기: 현재 재생 위치가 오프닝 ..

[알고리즘] 순열과 백트래킹 비교(permutation, backtracking) / 부분 수율 / 전체 순열

permutation: 크기가 제한된 부분 순열을 구하는 함수.backtrack: 전체 원소를 포함하는 순열을 구하는 함수.동작의 범위 차이:permutation: 고정된 크기의 조합만 포함.backtrack: 배열의 모든 순열을 포함.사용 상황:permutation: 특정 크기의 부분 조합을 구해야 할 때 사용.backtrack: 전체 순열을 구하거나 탐색이 필요한 경우 사용.비교표함수시간복잡도공간복잡도목적permutationO(n²)O(n²)크기가 제한된 순열 (예: 2개)backtrackO(n * n!)O(n * n!)전체 순열 (길이 n)  순열 생성 범위:permutation은 특정 크기의 순열(여기서는 2개)을 제한적으로 생성하기 때문에, 시간복잡도와 공간복잡도가 비교적 낮습니다.backtra..

Algorithm 2024.11.24

[프로그래머스] 연습문제 / 콜라 문제 / Lv1 / JS / 탐욕알고리즘

문제 설명오래전 유행했던 콜라 문제가 있습니다. 콜라 문제의 지문은 다음과 같습니다.정답은 아무에게도 말하지 마세요.콜라 빈 병 2개를 가져다주면 콜라 1병을 주는 마트가 있다. 빈 병 20개를 가져다주면 몇 병을 받을 수 있는가?단, 보유 중인 빈 병이 2개 미만이면, 콜라를 받을 수 없다.문제를 풀던 상빈이는 콜라 문제의 완벽한 해답을 찾았습니다. 상빈이가 푼 방법은 아래 그림과 같습니다. 우선 콜라 빈 병 20병을 가져가서 10병을 받습니다. 받은 10병을 모두 마신 뒤, 가져가서 5병을 받습니다. 5병 중 4병을 모두 마신 뒤 가져가서 2병을 받고, 또 2병을 모두 마신 뒤 가져가서 1병을 받습니다. 받은 1병과 5병을 받았을 때 남은 1병을 모두 마신 뒤 가져가면 1병을 또 받을 수 있습니다. ..

[알고리즘] 경우의 수(순열 / 조합) JS

알고리즘: 경우의 수 구하기"경우의 수 구하기"는 주어진 문제에서 가능한 경우들을 계산하는 알고리즘을 의미합니다. 다양한 문제에서 "경우의 수"를 구할 때 자주 등장하는 알고리즘 방법론으로는 **순열(permutation)**과 **조합(combination)**이 있습니다. 이들을 계산하는 방법을 JavaScript 코드로 설명하고, 블로그 글에 적합하게 쉽게 설명할 수 있도록 정리해보겠습니다.1. 경우의 수 구하기 기본 개념경우의 수를 구하는 기본적인 아이디어는 순서가 중요한지 아닌지를 기준으로 두 가지로 나눠집니다.순열(permutation): 순서가 중요한 경우, 예를 들어 카드에서 카드를 뽑는 순서가 중요할 때.조합(combination): 순서가 중요하지 않은 경우, 예를 들어 친구들 중 3명..

Algorithm 2024.11.22

[프로그래머스] 연습문제 / 삼총사 / Lv1 / JS

문제 설명(Lv1 / 76% 정답률) 입출력 예 numberresult[-2, 3, 0, 2, -5]2[-3, -2, -1, 0, 1, 2, 3]5[-1, 1, -1, 1]0입출력 예 설명입출력 예 #1문제 예시와 같습니다.입출력 예 #2학생들의 정수 번호 쌍 (-3, 0, 3), (-2, 0, 2), (-1, 0, 1), (-2, -1, 3), (-3, 1, 2) 이 삼총사가 될 수 있으므로, 5를 return 합니다.입출력 예 #3삼총사가 될 수 있는 방법이 없습니다. 나의 접근 방법1. Number 배열에서 3개씩 뽑아서 조합 하는 함수 + 조합된 3개를 계산2. 조합하는 함수를 헤매다가 3중 반복문으로 해결(개선이 필요하다 생각함) => 완전 탐색(Brute Force) 방법 나의 JS 코드 / ..

[프로그래머스] 연습문제 / 크기가 작은 부분 문자열 / Lv1 / JS

문제 설명문제 설명숫자로 이루어진 문자열 t와 p가 주어질 때, t에서 p와 길이가 같은 부분문자열 중에서,이 부분문자열이 나타내는 수가 p가 나타내는 수보다 작거나 같은 것이 나오는 횟수를 return하는 함수 solution을 완성하세요.예를 들어, t="3141592"이고 p="271" 인 경우, t의 길이가 3인 부분 문자열은 314, 141, 415, 159, 592입니다. 이 문자열이 나타내는 수 중 271보다 작거나 같은 수는 141, 159 2개 입니다.제한사항1 ≤ p의 길이 ≤ 18p의 길이 ≤ t의 길이 ≤ 10,000t와 p는 숫자로만 이루어진 문자열이며, 0으로 시작하지 않습니다.tpresult"3141592""271"2"500220839878""7"8"10203""15"3나의 접..

[프로그래머스] 코딩 기초 트레이닝 / 주사위 게임 3 / Lv0 /JS

문제 설명1부터 6까지 숫자가 적힌 주사위가 네 개 있습니다. 네 주사위를 굴렸을 때 나온 숫자에 따라 다음과 같은 점수를 얻습니다.네 주사위에서 나온 숫자가 모두 p로 같다면 1111 × p점을 얻습니다.세 주사위에서 나온 숫자가 p로 같고 나머지 다른 주사위에서 나온 숫자가 q(p ≠ q)라면 (10 × p + q)2 점을 얻습니다.주사위가 두 개씩 같은 값이 나오고, 나온 숫자를 각각 p, q(p ≠ q)라고 한다면 (p + q) × |p - q|점을 얻습니다.어느 두 주사위에서 나온 숫자가 p로 같고 나머지 두 주사위에서 나온 숫자가 각각 p와 다른 q, r(q ≠ r)이라면 q × r점을 얻습니다.네 주사위에 적힌 숫자가 모두 다르다면 나온 숫자 중 가장 작은 숫자 만큼의 점수를 얻습니다.네 주..

CSS 서브그리드(Subgrid): 현대적인 레이아웃 설계의 새로운 가능성

CSS 서브그리드(Subgrid): 현대적인 레이아웃 설계의 새로운 가능성웹 개발에서 레이아웃을 구성하는 작업은 언제나 중요한 도전 과제였습니다. CSS Grid는 이러한 문제를 해결하기 위한 강력한 도구로 자리 잡았지만, Grid 내부의 하위 요소가 부모 Grid의 간격과 정렬을 따르기 어렵다는 단점이 있었습니다. 이를 해결하기 위해 등장한 기능이 바로 **서브그리드(Subgrid)**입니다. 이번 글에서는 CSS 서브그리드가 무엇인지, 어떤 문제를 해결하는지, 그리고 실제 사용 사례를 소개합니다.1. CSS 서브그리드란?CSS 서브그리드는 부모 Grid의 레이아웃 설정(행 또는 열)을 하위 요소들이 그대로 따를 수 있도록 지원하는 기능입니다. 즉, 하위 Grid 컨테이너가 독립적인 레이아웃을 갖는 대..

Frontend/CSS 2024.11.18