본문 바로가기
반응형

분류 전체보기706

[프로그래머스] 후보키(LV.2) by javascript - 2019 KAKAO BLIND RECRUITMENT 원래 알고리즘 문제풀이 관련하여 게시글을 작성할 생각은 없었는데, 그래도 블로그의 개인적인 이유가 나의 성장과정을 보고 싶기 때문이니 이것도 정리하면 좋겠다 싶었다. 후보키 문제를 기준으로 지금까지 해결한 문제와 앞으로 해결할 문제들의 일부분을 계속해서 올릴 생각이다. ▷ 문제 : 2019 KAKAO BLIND RECRUITMENT - 후보키 LV.2 코딩테스트 연습 - 후보키 [["100","ryan","music","2"],["200","apeach","math","2"],["300","tube","computer","3"],["400","con","computer","4"],["500","muzi","music","3"],["600","apeach","music","2"]] 2 programmers.. 2022. 3. 9.
[알고리즘] 소수 판별하기 - 여러가지 방법의 소수 판별법 by javascript 앞서 "[알고리즘] 소수 찾기 - 에라토스테네스의 체 by javascript" 라는 제목의 소수 찾기 알고리즘을 정리하였는데, 지금 까지 소수 찾기 및 소수 판별에 있어 전부 에라토스테네스의 체 코드를 사용하여 리스트를 뽑고 그 안에 포함되어있는 지를 체크해왔다. 하지만 역시 자바스크립트는 자바스크립트... RangeError: invalid array length 에러가 발생하면 그 방식을 사용할 수 없었다. (당연하게도 소수 찾는 방식으로 사용한걸 단순히 하나의 숫자에 대한 소수 판별에, 사용하는 데에는 제약사항이 있을 수 있다는 걸 간과했다.) 그래서 이제 소수 판별하는 여러가지 방법에 대해 알아보고자 한다. 1. 단순하게 모든 수를 판별하기 const isPrime = (num) => { if(.. 2022. 3. 8.
[알고리즘] 조합, 순열, 중복순열 - 경우의 수 찾기 by javascript (ft. 모든 경우의 수) (이 글로 이해가 안된다면 정말 자세한 내용과 설명은 본문 하단에 링크를 달아뒀으니 해당 블로그 가서 보면 된다. 정말 정리를 잘해놨다.) 완전 탐색 알고리즘의 방식인 조합, 순열, 중복순열 알고리즘에 대해 알아보자. 왜 이 3가지 알고리즘을 동시에 다루냐면 알고리즘 구조가 비슷하기 때문이다. 전체적으로 아래와 같은 형식을 지닌다. 1. 선택하려는 개수를 확인한다. (ex 배열에서 2개의 값으로 이루어진 조합 혹은 순열) 2. 배열의 길이만큼 반복한다. 3. 배열에서 하나의 수를 선택한다. (기준 값) 4. 기준 값을 제외한 나머지 배열을 가지고 다시 1번부터 시작한다. (재귀) 위 방식을 통해 계속해서 재귀를 통해 반복하다보면 순열, 중복순열, 조합을 구할 수 있다. 각 조합, 순열, 중복순열 별 달라.. 2022. 3. 5.
[알고리즘] 소수 찾기 - 에라토스테네스의 체 by javascript 소수를 찾는 수많은 방법중에서 가장 많이 사용된다는 "에라토스테네스의 체" 라는 소수 찾기 알고리즘에 대해 알아보자. 우선 소수란 무엇일까? 소수란 간단하게 1과 그 수 자신 이외의 자연수로는 나눌 수 없는 자연수로 정의할 수 있다. 그럼 에라토스테네스의 체란 무엇일까? 고대 그리스 수학자 에라토스테네스가 발견했다는 소수를 찾는 방법인데, 그림과 설명을 통해 자세히 접해보자. 알고리즘 1) 2부터 소수를 구하고자 하는 구간의 모든 수를 나열한다. (그림에서 회색 사격형으로 두른 수들이 해당한다.) 2) 2는 소수이므로 오른쪽에 2를 쓴다. 3) 자기 자신을 제외한 2의 배수를 모두 지운다. 4) 남아있는 수 가운데 3은 소수이므로 오른쪽에 쓴다. 5) 자기 자신을 제외한 3의 배수를 모두 지운다. 6) .. 2022. 3. 5.
[JavaScript] arr.fill() - 배열을 특정 값으로 채우기 (ft. 특정 인덱스 지정) 배열을 특정 값으로 채우는 Array.prototype.fill() 메서드에 대해 알아보자.이 메서드는 배열의 시작 인덱스부터 끝 인덱스의 이전까지 정적인 값 하나로 채우는데, 매개변수를 통해 시작 인덱스와 끝 인덱스를 지정할 수 있다. ▷ 구문arr.fill(value[, start[, end]])value : 배열을 채울 특정 값start : 시작 인덱스이며, 생략 시 기본 값은 0end : 끝 인덱스이며, 생략 시 기본 값은 배열의 길이(this.length)이다.▷ 예제 1) Array.prototype.fill() 기본 사용법// [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]const arr1 = Array(10).fill(0);arr1.fill(1, 2, 6); // [0, 0, 1,.. 2022. 3. 4.
[JavaScript] element.closest() - 특정 엘리먼트를 기준으로 부모요소, 상위요소 중 일치하는 요소 찾기 특정 element를 기준으로 상위요소 중 일치하는 요소를 찾게 도와주는 closest() 메서드에 대해 알아보자. closest() 메서드는 기준 element에서부터 부모 요소 단위로 출발하여 각 요소가 지정한 선택자에 만족할 때까지 탐색한다. 그 중 가장 가깝게 조건에 만족하는 부모 요소가 반환되며, 조건에 만족한 요소가 없으면 null값을 반환한다. ▷ 구문 let closestElement = targetElement.closest(selectors); selectors : 하나 이상의 선택자를 포함한 DOM 요소 문자열이다. ▷ 예제 1) closest 사용법 Here is div-01 Here is div-02 Here is div-03 span?span! let el = document.g.. 2022. 3. 2.
[VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(4) - 웹팩과 바벨 동시 사용 시 트랜스파일링 변환 오류 이전 글 [VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(3) - 바벨 기본 설정 에서 바벨 설정 후 웹팩 빌드를 하였는데, 이상하게 IE에서 오류가 발생해 작동을 안하는 현상이 발생하였다. 화살표 함수가 그대로 존재하기 때문에 에러가 발생한것인데, babel 설정에 target을 줘도 문제가 해결되지않았다. 도대체 왜 이런것일까...? 이것때문에 몇시간을 소비했는지 모르겠다. 찾아보니까 웹팩에 문제가 있었더라 Webpack v5 부터 트랜스파일을 기본적으로 es6로 한다고 한다. 버전이 올라가면서 변경될것인지 아니면 계속 이상태로 갈것인지는 알 수 없으나, 일단 변경을 해주는게 맞다 싶다. 그래서 webpack.config.js 파일에서 target 설정을 줄 수 있는데, https:.. 2022. 3. 2.
[VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(3) - 바벨 기본 설정 바벨을 설정하기에 앞서 바벨에 대해서 알아두면 좋은데, 쉽게 말하면 최신 사양의 자바스크립트 코드 (ES6+)를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 변환(트랜스파일링) 시켜주는 녀석이라고 할 수 있다. 실제로 공식 웹사이트에서도 다음과 같이 설명하고 있다. Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you: 이제 바벨 설정을 하나씩 해보도록 하자. 1.. 2022. 3. 2.
[VSCode] 웹팩(webpack)과 바벨(babel) 설정하기(2) - 웹팩 기본 loader 설정하기 VSCode에서 웹팩(Webpack)을 설정하게되면 webpack.config.js 웹팩 설정파일을 사용하게 된다. 이 webpack.config.js 파일에서 loader를 설정하는 방법에 대해 알아보자. loader를 설정하기에 앞서 loader 설정을 왜 해주는지에 대해 설명하자면, js끼리만 import해서 사용한다면 웹팩을 빌드하면 상관 없지만 여기에 css 같은것들이 들어가면 오류가 발생하기 때문이다. 웹팩은 자바스크립트 뿐만 아니라, 이 loader를 통해 css나 이미지, 웹폰트, vueJS 등 다양한 종류의 파일을 함께 번들링할 수 있는데, 사용법만 알면 그 외에는 동일하게 처리하면 되기 때문에 가장 흔하게 사용되는 css관련한 loader에 대해서만 정리하고자 한다. 1. CSS 로더를.. 2022. 3. 1.
반응형
TOP

티스토리툴바