전체 글

[React/TS] 이벤트 핸들러 함수의 타입

React에서 이벤트 핸들러 함수를 선언할 때, 이벤트 타입 또는 함수 타입을 아래와 같이 선언한다. const handleClick = (event: React.MouseEvent) => { // }; const handleClick: React.MouseEventHandler = (event) => { // }; 여기서 MouseEvent는 반드시 React.MouseEvent를 사용해야 한다. JS에서 기본으로 제공되는 MouseEvent를 사용하면 React에서 사용할 때 타입 에러가 발생한다. (단, DOM 요소에 직접 addEventListener를 사용할 때에는 기본 제공되는 MouseEvent를 사용해야 한다) 제네릭에는 어떤 요소의 onClick(또는 onMouseOver, onDrag ..

[백준 1715 - Node.js] 카드 정렬하기

🔗 문제 링크 https://www.acmicpc.net/problem/1715 1715번: 카드 정렬하기 정렬된 두 묶음의 숫자 카드가 있다고 하자. 각 묶음의 카드의 수를 A, B라 하면 보통 두 묶음을 합쳐서 하나로 만드는 데에는 A+B 번의 비교를 해야 한다. 이를테면, 20장의 숫자 카드 묶음과 30장 www.acmicpc.net ✏️ 풀이 class PriorityQueue { constructor() { this.heap = []; } swap(a, b) { const temp = this.heap[a]; this.heap[a] = this.heap[b]; this.heap[b] = temp; } push(value) { const { heap } = this; heap.push(value)..

[TS] Node.js 환경에서 TypeScript 사용하기

타입스크립트로 작성된 파일을 Node.js에서 실행시키려면 ts-node를 통해 파일을 실행시켜야 한다. $ npm i ts-node $ ts-node index.ts 여기에 tsconfig에서 paths를 통해 절대경로를 설정한다면 tsconfig-paths를 추가로 설치해서 ts-node를 실행할 때 옵션을 추가해줘야 한다. $ npm i -D tsconfig-paths $ ts-node -r tsconfig-paths/register index.ts nodemon으로 타입스크립트 파일이 변경될 때마다 재시작하려면 실행 명령어를 아래와 같이 하면 된다. $ nodemon --exec ts-node -r tsconfig-paths/register index.ts 여기에 import, export를 사용..

[프로그래머스 Level 2] 짝지어 제거하기 - JavaScript

🔗 문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/12973 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ✏️ 풀이 function solution(s) { const stack = [s[0]]; for (let i = 1; i < s.length; i++) { if (s[i] === stack[stack.length - 1]) { stack.pop(); continue; } stack.push(s[i]); } return Number(!stack.length) } 스택 자료구조를 활용..

[프로그래머스 Level 2] 영어 끝말잇기 - JavaScript

🔗 문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/12981 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ✏️ 풀이 function solution(n, words) { const dict = { [words[0]]: true }; for (let i = 1; i < words.length; i++) { const curWord = words[i]; const prevWord = words[i - 1]; if (dict[curWord] || (curWord[0] !== prevWord[..

[Next.js] React Query로 SSR 구현하기

Next.js에서 getServerSideProps를 활용하여 서버에서 API호출을 한 결과값을 HTML 파일에 포함시켜서 받아올 수 있다. type Todo = { title: string; completed: boolean; }; type Props = { todos: Todo[]; }; export default function Home({ todos }: Props) { return ( {todos.map(({ title, completed }) => ( {title} {completed && 완료} ))} ); } export const getServerSideProps: GetServerSideProps = async () => { const res = await fetch('https://j..

[프로그래머스 Level 2] 이진 변환 반복하기 - JavaScript

🔗 문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/70129?language=javascript 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ✏️ 풀이 function solution(s) { let count = 0; let deletedZero = 0; let x = s; while (x !== '1') { const prevLength = x.length; const curLength = x.replaceAll('0', '').length; x = curLength.toString..

[프로그래머스 Level 2] 전력망을 둘로 나누기 - JavaScript

🔗 문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/86971 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ✏️ 풀이 function solution(n, wires) { const graph = wires.reduce((acc, [start, end]) => { if (acc[start]) { acc[start].push(end); } else { acc[start] = [end]; } if (acc[end]) { acc[end].push(start); } else { acc[end] ..

[프로그래머스 Level 2] 피로도 - JavaScript

🔗 문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/87946 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ✏️ 풀이 function solution(k, dungeons) { let maxCount = 0; const dfs = (fatigue, count, visited) => { let isEnd = true; for (let i = 0; i fatigue) { continu..

[프로그래머스 Level 2] 할인 행사 - JavaScript

🔗 문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/131127 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr ✏️ 풀이 function solution(want, number, discount) { const map = want.reduce((acc, v, i) => { acc.set(v, number[i]); return acc; }, new Map()); const check = () => { let flag = true; for (const [, count] of map) { if ..