본문 바로가기

분류 전체보기

(24)
[JS] 징검다리 건너기 프로그래머스 징검다리 건너기 난이도 LV.2 문제 풀이 프로그래머스 입국 심사와 함께 풀면 좋을 것 같다 :) '인원'을 이분 탐색하여 풀었다. 1. 인원을 이분 탐색한다. - left : 0 - right : 200000000 ( Math.max(...stones) 를 할 수도 있지만 ! 런타임 에러가 난다 😅) 2. 해당 mid 값이 가능한지 검사한다. 검사하는 방법은 간단하다. 해당 mid의 값보다 적은 stone 값을 계산하여, 그 stone들이 연속적으로 k번 반복되는지 확인한다. k번 반복되면, 그 인원으로 건너기 불가능한 것이고 k번이 반복되는 경우가 없으면, 그 인원으로 건너기가 가능한 것이다. const available = (people, stones, max) => { let coun..
[JS] 순위 검색 프로그래머스 순위 검색 난이도 LV.2 문제 풀이 처음에는 그냥 비교 탐색으로 했다. 조건에 맞는 count 면 ++ 하여서 해당 조건에 만족하는 것을 push 시켜주었다. function solution(info, query) { var answer = []; for(let q of query){ let [lan,par,car,last]=q.split("and").map(item=>item.trim()) let [foo,sco]=last.split(" "); let count=0; for(let i of info){ let [a,b,c,d,e]=i.split(" "); if(lan==="-" || lan===a){ if(par==="-" || par===b){ if(car==="-" || car===c..
[JS] 교점에 별 만들기 프로그래머스 교점에 별 만들기 난이도 2 문제 접근 1. 교점을 찾는다. - 교점을 찾는 방법은 문제에 나와 있다. const x=(b*f-e*d)/(a*d-b*c); const y=(e*c-a*f)/(a*d-b*c); x, y 가 정수인 경우에만 판단을 해주면 되는데, Number.isInteger() 을 이용하면 정수인지 아닌지 확인이 가능하다. 2. 최소의 영역을 찾아준다. 모든 별을 포함하는 최소한의 크기를 return 해주어야하기 때문에 그릴 수 있는 영역을 최소한으로 잡아준다. (4, 1), (4, -4), (-4, -4), (-4, 1), (0, 4) 만약에 정수로 된 교점이 위와 같다고 예제를 들어본다. 그렇게 되면 x 최소=-4 , x최대=4, y 최소=-4, y 최대=4 이렇게 되고, ..
React-Table을 이용하여 자유자재 Custom 컴포넌트 만들기 사실 자유자재는 아니고.. 리액트 테이블로 여러가지는 만들어야하는 상황이 생겼었다 ! 짜여진 리액트 테이블에 커스텀을 더한 테이블 컴포넌트로 분리하고자 하니까 꽤 많은 시간이 걸렸고, 공식 문서를 많이 찾아봐야했다 .. ! ⏤ React-table v7을 이용했습니다 ⏤ 공식 독스에는 문제를 해결할 수 있는 제안이 나와있지 않아서 여기 저기 코드를 붙여보며, 해결했습니다 ! 먼저, 여러 페이지에서 사용되는 테이블을 [테이블 인터랙션/테이블] 2 개의 컴포넌트로 분리하고자 했습니다. ( 동일한 템플릿의 인터랙션을 사용한다면 인터랙션+테이블 1개의 컴포넌트로 분리해도 되지만, 동일한 테이블 디자인과 기능에 interaction 의 기능과 ui가 달라지는 경우가 있어서 2개의 컴포넌트 분리 후, 더 큰 단위(..
프로젝트에 Cypress 도입해보기 ⏤ CRA, 타입스크립트 vanillaJavascript를 이용해서 이메일와 비밀번호를 검증할 일이 있었는데, 매번 테스트케이스들을 치고 시도해보는 일이 귀찮게 느껴졌다. 그래서 해왔던 프로젝트에 Cypress를 도입해보고 싶어서 공부한다. (사실 예제에서 적용시키는 프로젝트는 개인 레주메라 cypress가 필요없지만 연습용으로 써봤다.) 🥹 다른 것보다 Cypress 공식문서를 보는 것이 좋았다. 리액트에 도입할 것이기 때문에 Cypress quickStart- React를 보고 설치해주었다. / 적용한 프로젝의 개발 환경 - CRA - Typescript Cypress 설치 및 초기 설정 yarn add cypress -D - cypress open 하는 명령어 npx cypress open 이렇게 매번 치는 것이 귀찮아서 ..
[넘블] 2022년 럽쇼츠(LuvShort) 리액트 프로젝트 회고록 럽쇼츠 프로젝트 주소 ✔️ 프론트엔드 관련 기술이 담겨있는 회고록입니다. ✔️ 프로젝트는 [크롬 개발자 도구] - [모바일] - [Samsung Galaxy S8+] 에 모바일에 최적화 되어있습니다. 프로젝트 미리 보기 자세한 동작 구현 노션 보기 👀 ⚒ Tech Stack ✔️ 프론트엔드 ReactJS Javascript Redux Styled-component ✔️ 백엔드 Spring boot 2.6.6 JPA mysql AWS EC2, RDS, S3 👩‍🎓 배운점 좋아요 toggle 여러 번 연타로 누르면 서버에 많은 요청이 갈 수 있을 것 같아서 debounce 방식을 도입했다. 쓰로틀링 대신 디바운스를 이용한 이유는 아래 이슈에 올려놨습니다. 구현은 lodash 라이브러리를 썼습니다. 확실히 s..
JS로 알고리즘하기 자바스크립트로 알고리즘 풀기 외길 인생을 즐기고 있습니다 .. ✨ 자바스크립트로 알고리즘을 풀면 가끔 너무 외로운 순간들이 있습니ㄷr .. 예를 들면 2022 카카오 테크 인턴십 - 두 큐 합 같게 만들기 파이썬 Queue 로 굴리면 정답인데, JS 배열 이용하면 광탈인 문제가 있다 class를 이용해서 직접 구현해서 풀어야 정답인 그런 문제들.. 🔕 하지만 자식같은 자바스크립트를 내칠 수 없길래 차근차근 구현을 정리해보려고 한다 🫶 Queue - 추천 문제 : 2022 카카오 테크 인턴십 - 두 큐 합 같게 만들기 push, pop은 기존 배열에서 O(1)로 가능하지만, 큐와 같은 경우에는 push 는 O(1)이지만, shift 는 O(n)이다. 배열을 사용하면 큐를 편리하게 구현할 수 있을 것 같은데..
[JS | 알고리즘] BFS 와 0-1 BFS 기본 BFS 기본 BFS는 최단 거리를 고려해줄 때 알맞는 알고리즘이다. 1 ) 로직 표에서 움직일 수 있는 동서남북이 필요하다 동서남북은 dx, dy 로 표현하게 된다. 2차원 배열 [1][1]을 기준으로 남쪽은 [1+1][1] (=[2][1]) 이 되는 셈이다. 추천 문제 | 1687 숨바꼭질 5014 스타트링크 10026 적록색약 0-1 BFS 기존에 있는 BFS 보다 시간복잡도가 낮아서 잘 활용한다면, 유용하게 쓸 수 있다. 0-1 BFS는 가중치를 고민해주는 방법이다. 가중치가 낮은 것(0) 은 가중치가 높은 것(1) 보다 비용 없이 이동할 수 있으니 먼저 고려해주는 것이다. 1 ) 로직 ( Queue) 가중치가 낮은 것은 unshift 가중치가 높은 것은 push 추천 문제 | 1261 알고스..