FrontEnd
[JS] 스타 수열
스타수열을 만들기 위해서는 교집합이 될 숫자가 필요하다. 이 숫자를 star라고 생각해보자. 어떻게 보면 해당 문제는 이 star가 가장 많은 배열의 길이를 반환하는 문제라고 생각할 수 있다. 따라서 cnt배열을 하나 둔 후, 가장 많이 나온 숫자순으로 스타수열을 만들어서 만약 스타수열이라면 그 길이를 반환하면 된다. 이 과정을 일반 배열로 한다면 최대값을 찾을 때마다 n의 시간복잡도가 들어가므로 최대 힙을 활용하여 해결하였다. 1. cnt배열을 활용해서 a배열에서 나온 숫자들을 센다. 단, 연속해서 나온 부분은 빼준다. 2. cnt배열의 값들을 최대 힙에 하나씩 넣어준다. 3. 최대 힙을 하나씩 pop해나간다. 이때 star와 cnt에 담겨있는 숫자가 실제 스타수열을 만들었을때의 길이와 같다면 프로그램..
![[React] DeepDive 모던 리액트 (1) 리액트의 역사](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc2jFtn%2FbtsBUdbAukV%2F4M3aWy2Ko4GIew9KDq4BYk%2Fimg.png)
[React] DeepDive 모던 리액트 (1) 리액트의 역사
감명있게 읽었던 JavaScript DeepDive의 리액트 버전 책이 나와서 바로 구매해보았다. 마찬가지로 책을 읽으면서 정리해보려고 한다. 사실 리액트를 깊게 공부해야한다 생각은 했지만 정말 리액트란 라이브러리의 원리에 대해 깊게 파거나 리액트에 존재하는 여러 유용한 훅에 대해 공부할 필요성을 느껴서 구매해보기도 했다. 책은 900페이지가 넘어갈정도로 두껍지만 그만큼 배워갈 부분도 많을 것 같아 기대된다. Why React? 리액트는 2011년 페이스북에서 선보인 10년이 넘은 라이브러리이다. 심지어 리액트가 전자정부 표준 프레임워크의 프런트 엔드 개발도구로도 채택되었다. 그만큼 리액트라는 라이브러리의 안정성또한 보장되었음을 알 수 있다. jQuery또한 2018년도 리액트에 밀리기 시작하였으며 당분..
[JS] 합승 택시 요금
택시요금을 계산하는 다익스트라를 활용하는 문제이다. https://school.programmers.co.kr/learn/courses/30/lessons/72413 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 다익스트라 알고리즘을 활용하여 A를 넣으면 A에서 다른 곳으로 갈 수 있는 최소 거리를 얻어낼 수 있다. 만약 다익스트라에 4번 노드를 넣은 결과가 [1,2,3,4,0,6,7] 이 나왔다면 4번에서 5번으로 갈수 있는 최소거리는 6인 셈이다. 문제에서 제공한 그래프는 단방향이 아니라 양방향이다. 익스트라의 결과는 A -> 다른노드 로가는 최소거리..
![[StoryBook] 스토리북 적용하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlwKbA%2FbtsBQxVogQQ%2FWkyyivtXkAp5vM10ZElIO1%2Fimg.png)
[StoryBook] 스토리북 적용하기
스토리북이란 컴포넌트의 다양한 경우를 정리할 수 있게 도와주는 시각화 도구이다. 컴포넌트들을 시각적으로 볼 수 있게 해주는것은 물론 각 컴포넌트를 문서화 해주는 역할까지 가지고 있다. 따라서 디자이너와 협업을 할때 보다 쉬운 피드백이 가능하며 개발자와의 협업에서도 매우 뛰어난 효율을 보여줄 수 있다. 또한 storybook과 jest를 활용하여 컴포넌트를 불러온 후 테스트코드를 작성하는 것도 가능하다. https://storybook.js.org/tutorials/intro-to-storybook/react/ko/get-started/ Storybook Tutorials Learn how to develop UIs with components and design systems. Our in-depth f..
[JS] 광고 삽입
누적합을 활용하면 해결할 수 있는 문제이다. 만약 10칸의 크기가 있는 배열에서 4~7까지 1씩 더해준다고 생각해보자. 0001111000 { const [h,m,s] = str.split(":").map(v => +v) return h * 3600 + m * 60 + s } const fillZero = (num) => { return String(num).padStart(2,'0') } const secondsToStr = (seconds) => { const h = ~~(seconds/3600) const m = ~~(seconds%3600/60) const s =seconds%60 return `${fillZero(h)}:${fillZero(m)}:${fillZero(s)}` } const tim..
![[JS] 카드 짝 맞추기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqPJ7L%2FbtsBGjixSLD%2FrMOR0HTojT7KKkpzTRo62k%2Fimg.png)
[JS] 카드 짝 맞추기
https://school.programmers.co.kr/learn/courses/30/lessons/72415 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 자체는 모든 경우의수를 탐색해보는 완전탐색 문제이다. 1. 현재 보드에서 열어볼 카드를 선택한다. 2. 카드의 짝을 찾는다. 3. 다시 열어볼 카드를 선택한다. 반복.. 조금 생각할 부분은 일반적인 이동 외에 ctrl 이동이 있다는 점이다. 따라서 4방향으로 탐색하는것 이외에도 ctrl이동까지 생각을 해줘야 한다. 필자는 문제를 해결하기 위해서 크게 두가지 함수를 이용했다. 1. before..