전체 글

[백준 7569 - Node.js] 토마토

문제 링크 https://www.acmicpc.net/problem/7569 7569번: 토마토 첫 줄에는 상자의 크기를 나타내는 두 정수 M,N과 쌓아올려지는 상자의 수를 나타내는 H가 주어진다. M은 상자의 가로 칸의 수, N은 상자의 세로 칸의 수를 나타낸다. 단, 2 ≤ M ≤ 100, 2 ≤ N ≤ 100, www.acmicpc.net 풀이 const input = require('fs').readFileSync('/dev/stdin').toString().trim().split('\n'); const [M, N, H] = input[0].split(' ').map(v => +v); const boxes = input.slice(1).reduce((acc, v, i) => { acc[Math.f..

[프로그래머스 DFS/BFS] 타겟 넘버 - JavaScript

문제 링크 https://programmers.co.kr/learn/courses/30/lessons/43165 코딩테스트 연습 - 타겟 넘버 n개의 음이 아닌 정수들이 있습니다. 이 정수들을 순서를 바꾸지 않고 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 programmers.co.kr 풀이 function solution(numbers, target) { const dfs = (index, sum) => { if (index === numbers.length) { if (sum === target) { return 1; } return 0; } else { const plus = dfs(index + 1, s..

[백준 2468 - Node.js] 안전 영역

문제 링크 https://www.acmicpc.net/problem/2468 2468번: 안전 영역 재난방재청에서는 많은 비가 내리는 장마철에 대비해서 다음과 같은 일을 계획하고 있다. 먼저 어떤 지역의 높이 정보를 파악한다. 그 다음에 그 지역에 많은 비가 내렸을 때 물에 잠기지 않는 www.acmicpc.net 풀이 const input = require('fs').readFileSync('/dev/stdin').toString().trim().split('\n'); const N = +input[0]; const areas = input.slice(1).map(v => v.split(' ').map(v => +v)); const offsetX = [0, 0, -1, 1]; const offsetY ..

[프로그래머스 Level 2] 거리두기 확인하기 - JavaScript

문제 링크 https://programmers.co.kr/learn/courses/30/lessons/81302 코딩테스트 연습 - 거리두기 확인하기 [["POOOP", "OXXOX", "OPXPX", "OOXOX", "POXXP"], ["POOPX", "OXPXP", "PXXXO", "OXXXO", "OOOPP"], ["PXOPX", "OXOXP", "OXPOX", "OXXOP", "PXPOX"], ["OOOXX", "XOOOX", "OOOXX", "OXOOX", "OOOOO"], ["PXPXP", "XPXPX", "PXPXP", "XPXPX", "PXPXP"]] [1, 0, 1, 1, 1] programmers.co.kr 풀이 function solution(places) { const result ..

[프로그래머스 Level 2] 게임 맵 최단거리 - JavaScript

문제 링크 https://programmers.co.kr/learn/courses/30/lessons/1844 코딩테스트 연습 - 게임 맵 최단거리 [[1,0,1,1,1],[1,0,1,0,1],[1,0,1,1,1],[1,1,1,0,1],[0,0,0,0,1]] 11 [[1,0,1,1,1],[1,0,1,0,1],[1,0,1,1,1],[1,1,1,0,0],[0,0,0,0,1]] -1 programmers.co.kr 풀이 function solution(maps) { const xLength = maps.length; const yLength = maps[0].length; const dx = [0, 0, -1, 1]; const dy = [-1, 1, 0, 0]; const bfs = () => { const..

[프로그래머스 Level 1] [1차] 비밀지도 - JavaScript

문제 링크 https://programmers.co.kr/learn/courses/30/lessons/17681 코딩테스트 연습 - [1차] 비밀지도 비밀지도 네오는 평소 프로도가 비상금을 숨겨놓는 장소를 알려줄 비밀지도를 손에 넣었다. 그런데 이 비밀지도는 숫자로 암호화되어 있어 위치를 확인하기 위해서는 암호를 해독해야 한다. 다 programmers.co.kr 풀이 function solution(n, arr1, arr2) { return [...Array(n)].map((_, i) => [...(arr1[i] | arr2[i]) .toString(2) .padStart(n, ' ')] .map(v => +v ? '#' : ' ') .join('') ); } 비트마스킹을 이용하여 겹쳐진 두 지도를 논..

[프로그래머스 Level 1] 신규 아이디 추천 - JavaScript

문제 링크 https://programmers.co.kr/learn/courses/30/lessons/72410 코딩테스트 연습 - 신규 아이디 추천 카카오에 입사한 신입 개발자 네오는 "카카오계정개발팀"에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. "네오"에게 주어진 첫 업무는 새로 programmers.co.kr 풀이 function solution(new_id) { let rec_id = new_id rec_id = rec_id .toLowerCase() .replace(/[^a-z0-9-_.]/g, '') .replace(/\.+/g, '.') .replace(/^\.|\.$/g, '') .replace(/^$/, 'a') .slice(0, 15) ..

[styled-components] 폰트 깜빡임(FOUT) 해결하기

styled-components를 사용할 때, 리렌더링이 일어날 때 글자 폰트가 기본 폰트에서 적용된 폰트로 변경되는 과정이 그대로 보이는 경우가 있다. 이러한 현상을 FOUT(Flash Of Unstyled Font)라고 부른다. FOUT이 발생하면 폰트가 변경되는 과정에서 레이아웃이 살짝 어긋나면서 화면이 깜빡이는 것처럼 보이게 되는데, 이는 UX에 좋지 않은 영향을 준다. 이는 styled-components가 새로운 스타일이 렌더될 때마다 태그를 변경하면서 매번 폰트를 재요청하기 때문에 발생하는 문제다. 보통 styled-components를 사용한다면 createGlobalStyle로 글로벌 스타일을 관리할텐데, 만약 여기에서 font-face로 폰트를 설정했다면 이러한 문제가 발생한다. 이는 ..

[Webpack] webpack-dev-server가 두 번 실행되는 이유

개발 환경에서 webpack-dev-server를 사용할 때 아래와 같이 두 번 실행되는 경우가 있다. 이 경우 코드도 모두 두 번씩 실행된다. 이유는 빌드 전의 index.html에서 태그로 js 파일을 불러오고 있기 때문이다. 어차피 빌드를 하면 번들링된 js파일을 index.html 내부에 태그로 불러온다. 만약 빌드 전의 index.html에서 태그로 js파일을 불러오고 있다면, HtmlWebpackPlugin이 모든 자바스크립트를 태그 아래로 주입한다. 만약 태그가 꼭 필요하다면, 아래와 같이 HtmlWebpakcPlugin 설정의 inject 속성을 변경하여 해결할 수도 있다. // webpack.config.js ... plugins: [ new HtmlWebpackPlugin({ templ..

[JavaScript] Array.prototype.splice 직접 구현하기

📝 Array.prototype.splice 명세 array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) 매개변수 1. start 배열 변경을 시작할 인덱스 - 정수 문자열은 정수로 변환 - 정수, 정수 문자열 외 다른 입력은 모두 0으로 간주 - 음의 정수(-n)는 배열의 마지막 요소부터 n번째 인덱스(array.length - n)로 변환 2. deleteCount 배열에서 제거할 요소의 수 - 자연수 문자열은 정수로 변환 - 자연수, 자연수 문자열 외 다른 입력은 모두 0으로 간주 3. item1, item2, ... 배열에 추가할 요소 반환값 제거한 요소를 담은 배열 기타 - Array.prototoype.splice는 원본 배열의 요소를 변경시..