📍tsconfig.json 생성 tsc --init 📍tsconfig.json 구조 - compilerOptions 필드와 include 필드는 대등한 위치 { "compilerOptions": {}, "include": {} } 📍declaration files - 정의 파일은 자바스크리브 코드의 모양을 타입스크립트에게 설명해주는 파일이다 - .js 로 작성된 모듈을 .ts 에서 import해서 사용할 때 정의 파일이 없으면 에러가 발생 - .d.ts 로 끝나는 정의 파일이 필요 📍package.js - 간단한 모듈을 만든다 - 일반적인 모듈처럼 자바스크립트로 만들어야 한다 export function init(config) { return true; } export const exit = (code)..

📍문제 링크 https://www.acmicpc.net/problem/20291 20291번: 파일 정리 친구로부터 노트북을 중고로 산 스브러스는 노트북을 켜자마자 경악할 수밖에 없었다. 바탕화면에 온갖 파일들이 정리도 안 된 채 가득했기 때문이다. 그리고 화면의 구석에서 친구의 메시지를 www.acmicpc.net 📍알고리즘 분류 - 자료구조 - 문자열 - 정렬 - 해시를 사용한 집합과 맵 - 파싱 📍문제 풀이 - 파일 명에서 확장자를 골라 몇개가 있는지 갯수와 함께 출력 📍의사 코드 1. 주어진 데이터를 순회하며 . 으로 split 2. 해시 맵에 확장자가 있으면 +1, 없으면 1 3. 마지막에 완성된 객체를 순회하며 형식에 맞게 출 📍코드 (JavaScript) const [in1, ...in2] ..

📍문제 링크 https://www.acmicpc.net/problem/15686 15686번: 치킨 배달 크기가 N×N인 도시가 있다. 도시는 1×1크기의 칸으로 나누어져 있다. 도시의 각 칸은 빈 칸, 치킨집, 집 중 하나이다. 도시의 칸은 (r, c)와 같은 형태로 나타내고, r행 c열 또는 위에서부터 r번째 칸 www.acmicpc.net 📍알고리즘 분류 - 구현 - 브루트포스 - 백트래킹 📍문제 풀이 - N * N 크기의 좌표 평면에서 2인 좌표가 최소 M개, 최대 N * N - 1 개, 1 도 몇 개 주어진다. - 1인 좌표를 모두 순회하면서 2인 좌표까지의 맨해튼 거리의 총 합이 최소가 되는 것을 도출하면 된다. - 2인 좌표값이 있는 배열을 백트래킹해나가야 하고, 순서는 상관없다 (조합) -..

📍문제 링크 https://www.acmicpc.net/problem/6603 6603번: 로또 입력은 여러 개의 테스트 케이스로 이루어져 있다. 각 테스트 케이스는 한 줄로 이루어져 있다. 첫 번째 수는 k (6 < k < 13)이고, 다음 k개 수는 집합 S에 포함되는 수이다. S의 원소는 오름차순으로 www.acmicpc.net 📍알고리즘 분류 - 수학 - 조합론 - 백트래킹 - 재귀 📍문제 풀이 - 주어진 수들의 집합에서 6개를 뽑는 경우의 수를 구하자 (조합) - 백트래킹으로 조합을 구현할 수 있다 - 테스트 케이스 그룹마다 줄바꿈으로 구분해줘야 한다 📍코드 (JavaScript) const input = require('fs') .readFileSync('/dev/stdin') .toStrin..

내가 쓰려고 만든 ESLint & Prettier 사용법 (for React & TypeScript) ESLint 1. package.json 확인 - eslint 관련 패키지가 설치되어 있는지 확인 - CRA의 경우 eslint config도 내장되어 있음 - Vite의 경우 내장 X (230824 현재는 내장되어 있음) 2. (없는 경우)패키지 설치 및 CLI 설정 실행 npm i -D eslint npm init @eslint/config // 또는 yarn create @eslint/config CLI 방식으로 설정하는 이유 - React나 TS를 사용할 때 필요한 플러그인도 함께 다 설치해줌 3. 순서대로 아래처럼 입력 4. rule 추가 (널리 쓰이는 rule) "@typescript-esli..

📍문제 링크 https://www.acmicpc.net/problem/16165 16165번: 걸그룹 마스터 준석이 정우는 소문난 걸그룹 덕후이다. 정우의 친구 준석이도 걸그룹을 좋아하지만 이름을 잘 외우지 못한다는 문제가 있었다. 정우는 친구를 위해 걸그룹 개인과 팀의 이름을 검색하여 외우게 하는 www.acmicpc.net 📍알고리즘 분류 - 자료구조 - 해시를 사용한 집합과 맵 (해시 맵 또는 해시 테이블) 📍문제 풀이 - 주어지는 인풋 값을 어떤 형태로 저장할까? 고민이 필요 - 팀 멤버가 주어지면 그룹 이름을 출력해야 하고, 그룹 이름이 주어지면, 팀 전체 멤버를 출력해야 한다. - { 그룹 이름: [ 팀 멤버1, ... ] } 형태의 해시 맵으로 저장하면 좋을 것 같다. 📍코드 (JavaScr..

1. 쓰임새- useState의 대체 함수- reducer 로직과 initial state를 받아 현재 state와 dispatch를 반환- dispatch 함수가 action을 전달하면, reducer 로직에 따라 state가 변경됨 // reducer 함수(state, action) => newState;// useReducerconst [state, dispatch] = useReducer(reducer, initialArg, init);// 구체적으로 아래처럼 쓴다const [state, dispatch] = useReducer( reducer, {count: initialCount}); 2. useState 대신 useReducer를 쓰기 좋은 경우- 많은 분기를 사용하는 등 복잡한 로직을 ..

Create-React-App 보다 훨씬 빠르게 React 개발 환경 구축 TypeScript도 지원 1. 설치 npm create vite@latest 2. CLI 에서 프로젝트명, 프레임워크, 타입스크립트 사용 여부 지정 3. 프로젝트 생성 npm i npm run dev 그 밖에 - tsconfig.json도 그대로 써도 될만큼 잘 되어 있음 - 환경 변수를 새롭게 제공 import.meta.env.~ 이렇게~