본문 바로가기

javascript

(15)
[99클럽] 코딩테스트 스터디, 6일차 TIL - 비기너 1. 문제풀이1) 문제, 전주 듣고 노래 맞히기 (백준, 31562)윤수와 정환은 「전주 듣고 노래 맞히기」라는 게임을 할 예정이다. 「전주 듣고 노래 맞히기」는 주어진 노래의 전주를 듣고 먼저 제목을 맞히는 사람이 점수를 얻어 최종적으로 점수가 더 많은 사람이 이기는 게임이다. 절대 음감을 가진 윤수는 노래의 첫 네 음만 듣고도 어떤 노래든 바로 맞힐 수 있다. 따라서, 정환은 윤수를 이기기 위해 첫 세 음만으로 노래를 맞히게 해주는 프로그램을 만들려고 한다. 우선 정환이 알고 있는 노래 제목, 음이름 등을 데이터로 만든 뒤 프로그램을 구현하기 시작했다. 예를 들어, 다음은 TwinkleStar(반짝반짝 작은 별)의 악보 중 일부이다. 위 악보를 박자와 관계없이 음이름으로 표현하면 CCGGAAG가 된다..
[Algorithm] 재귀함수 개념과 동작방식 1. 재귀함수 재귀함수는 자기 자신을 호출하는 함수를 말한다. 반복문을 조금 더 간결한 코드로 풀어낼 때 사용한다. 스스로를 호출하는 함수이기 때문에 반드시 종료조건을 써줘야 하며, 무한루프 되지 않도록 주의해야 한다. 1) 재귀함수 구현(자바스크립트) 자연수 N이 입력되면 재귀함수를 이용하여 1부터 N까지 출력하는 프로그램을 작성하세요. function solution(n){ function DFS(L){ if(L === 0) return; else { DFS(L-1); conosle.log(L); } } } //1, 2, 3 자바스크립트에서 재귀함수를 구현하는 방법은 간단하다. 자기 자신을 호출하는 함수를 사용하면 된다. 위 예시를 살펴보면 DFS 함수 내에서 스스로를 호출한 것을 확인할 수 있다. ..
[Javascript] 배열 추가, 삭제, 수정 메서드 splice 코딩테스트를 준비하다 보니 메서드에 대해서 제대로 알고 있지 못하다는 생각이 들었다. 해당 메서드가 기존 배열을 수정하는지 안 하는지, 어떤 것을 리턴하는지 등을 정확하게 알고 있어야 코드를 클린 하게 짤 수 있을 거 같다. 따라서 앞으로 코테 문제에 사용했던 메서드들을 정리하려 한다. 첫 스타트는 splice! 1. splice array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) splice는 배열의 기존 요소를 삭제 또는 교체 하거나 새 요소를 추가해서 배열의 내용을 변경하는 메서드이다. splice를 통해 배열을 수정하면, 기존 배열도 같이 변경된다. 1) start 배열 변경의 시작 인덱스를 입력한다. 입력된 인덱스부터 배열이 변경된다. 음수..
[인프런 코딩테스트] 마구간 정하기, 결정 알고리즘 (feat. 이분탐색 응용, javascript) 1. 문제 N개의 마구간이 수직선상에 있습니다. 각 마구간은 x1, x2, x3, ......, xN의 좌표를 가지며, 마 구간간에 좌표가 중복되는 일은 없습니다. 현수는 C마리의 말을 가지고 있는데, 이 말들은 서로 가까이 있는 것을 좋아하지 않습니다. 각 마구간에는 한 마리의 말만 넣을 수 있고, 가장 가까운 두 말의 거리가 최대가 되게 말을 마구간에 배치하고 싶습니다. C마리의 말을 N개의 마구간에 배치했을 때 가장 가까운 두 말의 거리가 최대가 되는 그 최대 값을 출력하는 프로그램을 작성하세요. 첫 줄에 자연수 N(3
[Web] 웹 브라우저 렌더링(Rendering)이란? next.js를 공부하다가 웹 브라우저 렌더링 방식에 대해 제대로 이해할 필요가 있음을 느꼈다. 따라서 렌더링이 무엇인지부터 차근차근 블로그에 정리해보려 한다. 1. 렌더링(Rendering) 렌더링은 웹사이트가 그려지는 과정을 의미한다. 웹 브라우저에는 자바스크립트 코드를 읽어와 기능을 작동시키는 자바스크립트 엔진과 사용자가 볼 화면을 그려내는 렌더링 엔진, 두 가지가 들어가 있다. 렌더링 엔진은 HTML, CSS, Javascript 세 가지 언어를 통해 웹사이트의 소스코드를 읽어와 실시간으로 화면을 그려낸다. 모든 웹 브라우저에는 렌더링 엔진을 가지고 있으며, 우리가 가장 많이 사용하고 있는 크롬이나 엣지는 크롬의 Blink(블링크) 렌더링 엔진을 사용하고 있다. 2. 렌더링(Rendering) 순..
[Algorithm] 이진탐색 알고리즘 (Binary Search Algorithm) 1. 이진탐색(Binary Search) 이분탐색이라고도 불리는 이진탐색 알고리즘은, 정렬된 배열 내에서 대상 값의 위치를 찾는 검색 알고리즘이다. 대상 값을 배열의 중간 요소와 비교한 후, 동일하지 않으면 절반을 제거하고 이를 성공할 때까지 반복한다. 정렬된 배열을 앞에서부터 하나하나 순차적으로 탐색하는 것을 순차탐색이라 하는데, 이러한 순차탐색보다 좀 더 빠르게 위치를 찾을 수 있다. 이진탐색의 시간복잡도는 O(log(n))이다. (순차탐색의 시간복잡도는 O(n)) 2. 이진탐색 구현 function solution(target, arr) { let answer; arr.sort((a, b) => a - b); //인덱스번호 let lt = 0, rt = arr.length - 1; while (lt..
[Algorithm] 삽입정렬 알고리즘 (Insertion Sort Algorithm) 1. 삽입정렬 (Insertion Sort) 삽입정렬은 배열의 모든 요소를 앞에서부터 차례로 비교하여 자신의 위치를 찾아 삽입하며 정렬하는 알고리즘이다. 앞에 있는 요소들과 비교해야 하기 때문에 두 번째 인덱스부터 시작한다. 평균적으로 O(n^2)의 시간복잡도를 갖는다. 2. 삽입정렬 구현 function solution(arr) { let answer = arr; for (let i = 1; i = 0; j--) { if (arr[j] > tmp) arr[j + 1] = arr[j]; else break; } arr[j + 1] = tmp; } return answer; } let arr = [..
[Algorithm] 선택정렬 알고리즘(Selection Sort Algorithm) 1. 선택정렬 선택정렬은 정렬 알고리즘 중 하나로, 내부 비교 정렬이다. 가장 앞의 값을 기준으로 배열 내에서 최소값을 찾고, 해당 값을 가장 앞의 값과 교환한다. 이를 반복하면서 배열을 정렬하는게 선택정렬이다. O(n^2)의 시간복잡도를 갖기 때문에 성능이 떨어지지만 메모리가 절약된다는 장점이 있다. 또한 데이터가 중복된 경우에도 위치가 바뀔 수 있는 Unstable 정렬이다. 따라서 데이터가 큰 경우보다, 메모리가 제한되는 경우에 사용하는 것이 좋다. 2. 선택정렬 구현 function solution(arr) { let answer = arr; for (let i = 0; i < arr.length; i++) { let idx = i; for (let j = i + 1; j < arr.length;..