Bleeding edge

react강의를 들으면서, fecth로 얻은 json파일을 카테고리별로 저장하는 방법을 배웠었다. 문제를 간단하기위해, 받는 테스트케이스를 아래와 같이 작성하기로 하였다. const list = [ { id: "1", name: "one", category: "a" }, { id: "2", name: "twp", category: "b" }, { id: "3", name: "three", category: "a" }, ]; 위의 케이스의 경우에 케이스가 a, b 두가지가 존재한다 만일 분류를 한다면, { a: [ { id: '1', name: 'one', category: 'a' }, { id: '3', name: 'three', category: 'a' } ], b: [ { id: '2', name: ..

코딩테스트 문제를 풀다보면, new Map()이라는 생성자를 많이 사용하게된다. 문제를 풀다보면 이게 됬다 저게 안됬다 하는 경우가 상당히 많았었는데 오늘 문제를 풀면서 알게된 것이 있었다. map에는 저장하는 방법이 두가지가 있다. 1. set을 이용한 저장 방법 map.set(1,1) 2. map의 keyd에 저장하는 방법 map[2] = 2 위의 두가지 방법은 console로 표시를한다면, Map(1) { 1 => 1, '2': 2 } 이렇게 나온다. map으로써 저장된 1과, object로 저장된 2. 1로 저장한 방법같은 경우에는, 숫자로 저장되었고 2로 저장한방법은 문자열로 저장이 되었다. 두 저장방법에 따라서 또 사용할 수 있는 것도 다르다. 만일 1번방법으로 저장한 경우에는 Array.fr..

Vue.js 맛보기 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수 있다. {{message}} //message output 이 위에 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다 {{count.text}} 메시지 뒤집기 Show 가 flase이고, showifelse가 ture인 경우 show false, showifelse flase {{message}} v-bind 속성은 디렉티브라고 입니다. v- 접두어가 붙은것은 DOM에 특수한 반응형 동작을 합니다. v-if는 해당 selector가 표시 될 지 말지 여부를 정할 수 있습니다.(v-if-else, v-else와 같이 사용 가능하다) v-for는 countdown에 있는 component만큼 반복합니..

리액트? CBD(Component Based Development) 요즘 웹이 다른 프로그램처럼 기능이 많아지면서, 구현해야하는 기능이 많아졌다. 이로 인해서 Javascript가 복잡해지면서 하나의 script.js에 모든 코드를 넣기가 어려워졌다. 이로 인해서 어떤 script 코드가 어떤 element를 제어하는지 파악하기 힘들어지고, 가독성이 떨어졌으며, 변수 선언 시 겹치지 않도록 신경을 써줘야하는 불편함이 생겼다. 해결책 : 여러개의 css와 js 파일로 분리를 하였다. 1) 어떤 element 2)그 element를 꾸미기 위한 style 3) 그 element 동작에 대한 script 1), 2), 3)을 묶음을 Component라고 한다. 리액트의 특징? 프론트엔드에서 하는 제어의 대부분..

필요성이 생긴 이유 오늘 자바스크립트 문제풀이를 하면서 다시금 Big O 의 중요성에대해서 느꼈다. 우선 오늘 문제풀이를 할 때 처음에는 Array를 통해서 접근하다가. Map으로 접근을 하였다. 우선 왜 Map을 사용하였는가? 라고 하기에 앞서 Array와 Object의 worst Big O를 비교하겠다 우선 Array Worst Big O 접근 O(1) index 0에 삽입 O(n) index 마지막에 삽입 O(1) 검색 O(n) 삭제 O(n) Object Worst Big O 삽입 O(1) 제거 O(1) 탐색(value를 이용한) O(n) 접근(key를 이용한) O(1) 여기서 보면 value를 이용하여 탐색을 하면 시간이 O(n)만큼 걸리는 걸 볼 수 있다. 따라서, value로 접근하는 것을 줄..

dp나 bfs, dfs를 풀다보면 자주 보던 에러였다. cs를 공부하기전까지는, 이게 뭔 읽을수없데! (리터럴로 항상 잘못읽었다) 라고 생각했었는데, 지금와서 보니(최근에 코테를 보며 해결하면서 익히게 됬다). iterable에러를 내가 보통 낸경우는 for of를 사용할때 많이 발생했다. 이 에러는 왜 나타나는 걸까? 최근에 에러가 발생한 이유는, dp문제를 풀이를 할때 for(let x of list) 에서 list가 array가 아닌 undefined인 경우였다. dp나 bfs, dfs에서 에러를 자주 보던 이유는, 이 두 케이스에서 list를 j in i 즉, 2차원으로 사용할 때, 범위를 잘못 설정해서 list에 대한 범위를 넣는 경우에 이 에러가 나타난 것이다. 이문제를 해결하는 방법은 두가지..

음.. 사실 git 카테고리를 할까 하다가 아직 메인 언어가 javascript이다보니, javascript에 넣어두고 추후 git에 대한걸 더 추가할 때 옮길 예정이다. 깃 컨벤션을 검색했을때, 서로 다른 내용이 나오는 케이스가 너무 많다보니까, 이게 맞나.. 이건틀린건가 의심이 많이갔었는데, 그냥 형식이 여러가지 인거군..이라고 생각하고 여러 컨벤션글을 (무려 2일간!) 찾아봤다. https://youngest-programming.tistory.com/550 [Git] Git Commit Message Convention 정리 Git Commit Message Convention 에 대해 기록하는 포스팅을 하고자 한다. 사실 깃 메시지 컨벤션은 협업 시 일관성을 위해 필요하지만 회사마다 스타일이 다..

코딩테스트 카테고리에 넣을까 고민하다가.. 자바스크립트 쪽의 분류에 넣는게 더 나은거 같아서 자바스크립트 카테고리에 넣었다. 사실 내가 지금까지 사용하던 sort는 1. 숫자도 문자로 취급하는 기본 sort let arr = ["a", "z", "c"] let answer = arr.sort() 2. 숫자의 대소 비교 sort let arr = [1, 2, 3, 4] let answer = arr.sort((a-b) => a-b) 3. 집합의 기준을 가지고 sort let arr = [["sample0", 2], ["sample1", 1]] let answer = arr.sort((a,b)=> a[1] - b[1]) 이렇게 세가지였다. 근데 요즘 프로그래머스 문제 2단계를 풀다보면 sort를 두단계로 하..

2차원 array를 만드는 방법은 여러개가 있다. for문을 쓰는 방법도 있고, const arr= new Array(n).fill().map(_ => []); new 연산자를 이용하는 방법이 있다. 그리고.. const arr = Array.from({length : n}, () => []) 빈칸이 n개인 object를 만들고 이를 Array시키는 방법이다. fill도 좋지만 이것도 상당히 좋아보여서 메모합니다