#25 비동기 코드에는 콜백 대신 async 함수 사용하기
·
✏️ Study/🧽 JS & TS
이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅콜백함수보다 프로미스를 사용하는게 좋다 (코드 간결성뿐만 아니라 타입 추론에도 도움을 준다) ✅프로미스를 생성하는 것보다 async/await을 사용하는게 좋다 - 간결하고 직관적인 코드를 작성할 수 있고, 의도치 않은 에러를 제거할 수 있다 ✅어떤 함수가 프로미스를 반환한다면 async로 선언해주는 것이 좋다 📍Promise.race를 사용하여 프로미스에 시간제한 추가하는 패턴 서버에 요청을 보내고 마냥 기다릴 수 없는 경우, Promise.race에 fetch와 타임아웃을 같이 넣는다 - 이를 통해 fetch에 시간 제한을 만들 수 있다 // 특정 시간 후에 reject되는 프로미스 반환 // 무조건 reject되므로 반환 타입이 nev..
[RTK Query] createApi
·
✏️ Study/상태 관리
📍React-specific entry point import 방식의 장점 패키지 이름 뒤에 react를 뒤에 붙이면 endpoints에 해당하는 hooks를 자동 생성해줌 import { createApi } from '@reduxjs/toolkit/query' /* React-specific entry point that automatically generates hooks corresponding to the defined endpoints */ import { createApi } from '@reduxjs/toolkit/query/react' 📍reducerPath root state 객체에서 하나의 큰 프로퍼티 단위 - 예) albums, users 등 HTTP request를 다루는 많은 s..
[Python] 백준 2346 < 풍선 터뜨리기 >
·
✏️ Study/🐍 Python
📍문제 링크https://www.acmicpc.net/problem/2346 2346번: 풍선 터뜨리기1번부터 N번까지 N개의 풍선이 원형으로 놓여 있고. i번 풍선의 오른쪽에는 i+1번 풍선이 있고, 왼쪽에는 i-1번 풍선이 있다. 단, 1번 풍선의 왼쪽에 N번 풍선이 있고, N번 풍선의 오른쪽에 1번 풍선www.acmicpc.net 📍알고리즘 분류- 자료구조- 덱 📍문제 풀이- 1부터 N까지의 원형 리스트가 있고, 각 원소는 -N 부터 N 중 0을 제외한 정수를 값으로 갖는다1부터 시작하여 각 정수만큼 왼쪽, 오른쪽으로 이동하며 터지는 풍선의 번호를 순서대로 출력한다 📍코드from collections import dequeN = int(input())# list로는 바로 생성 불가d = de..
[CSS Battle] 1-9. Tesseract
·
✏️ Study/🖼️ HTML & CSS
📍타겟 이미지 - 마블의 그 테서랙트인듯.. 📍문제 풀이 레이어를 어떻게 쌓으면 좋을까? (맨 위) - 원 - 민트 45도 회전 사각형 - 블랙 45도 회전 사각형 - 민트 바 (맨 아래) flex로 간단히 해결 가능 클래스를 활용해서 중복된 스타일을 하나로 묶어준다 (테일윈드 처럼) 📍코드 📍결과 100% match
백준 9935 < 문자열 폭발 > JavaScript
·
✏️ Study/⚙️ 알고리즘 & 자료구조
📍문제 링크 https://www.acmicpc.net/problem/9935 9935번: 문자열 폭발 첫째 줄에 문자열이 주어진다. 문자열의 길이는 1보다 크거나 같고, 1,000,000보다 작거나 같다. 둘째 줄에 폭발 문자열이 주어진다. 길이는 1보다 크거나 같고, 36보다 작거나 같다. 두 문자열은 모 www.acmicpc.net 📍알고리즘 분류 - 자료구조 - 문자열 - 스택 📍문제 풀이 전체 문자열에서 특정 문자열(폭탄)을 제거하는데, 제거한 후에 폭탄이 남아있으면 없어질 때까지 계속 제거해야 한다 - replace 함수를 반복하면 간단히 해결될 것 같지만.. 시간초과가 발생한다 - 문자열 입력값의 길이가 100만이기 때문에, 전체 문자열을 반복해서 탐색하는 O(N^2) 복잡도로는 해결이 불가..
#24 일관성 있는 별칭 사용하기
·
✏️ Study/🧽 JS & TS
이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅별칭(alias)은 type narrowing을 방해한다 ✅변수에 별칭을 사용할 때는 일관되게 사용해야 한다 (런타임에서는 문제가 없어도 타입 범위가 달라질 수 있음) 📍별칭 (alias) 을 수정하면 원본 객체도 수정된다 - 객체의 프로퍼티를 별칭으로 지정 후 수정해보기 const borough = {name: 'Brooklyn', location: [40.688, -73.979]}; // 별칭(alias) 생성 const loc = borough.location; // 별칭의 값을 변경하면 원본도 바뀜 loc[0] = 0; console.log(loc); // [0, -73.979] console.log(borough); /* { "na..
백준 2638 < 치즈 > JavaScript
·
✏️ Study/⚙️ 알고리즘 & 자료구조
📍문제 링크 https://www.acmicpc.net/problem/2638 2638번: 치즈 첫째 줄에는 모눈종이의 크기를 나타내는 두 개의 정수 N, M (5 ≤ N, M ≤ 100)이 주어진다. 그 다음 N개의 줄에는 모눈종이 위의 격자에 치즈가 있는 부분은 1로 표시되고, 치즈가 없는 부분은 0으로 www.acmicpc.net 📍알고리즘 분류 - 구현 - 그래프 이론 - 그래프 탐색 - 너비 우선 탐색 - 시뮬레이션 - 깊이 우선 탐색 📍문제 풀이 1과 0으로 이루어진 n * m 보드가 주어진다. - 두 면이 0과 접한 1은 1턴 이후에 0으로 변하는데, 모든 1이 0으로 변하는데 몇 턴이 걸리는지 구하라 📍1트 : 완전탐색 -> 내부 공간 고려 못해 실패 1. 전체 보드 total 구하기 - ..
#23 한꺼번에 객체 생성하기
·
✏️ Study/🧽 JS & TS
이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리 📍요약 ✅객체의 프로퍼티를 제각각 추가하지 말고 한번에 객체를 만들어야 한다 ✅안전한 타입으로 프로퍼티를 추가하려면 스프레드 연산자를 활용한다 📍객체를 만들때 프로퍼티를 나중에 추가하면 안된다 한번 정해진 타입은 잘 변경되지 않는다 - 따라서 객체를 만들고 프로퍼티를 나중에 추가하면 타입이 변경됨 ⭐모든 프로퍼티를 갖춰 한 번에 객체를 생성해야 함- 예시 const pt = {}; // 타입이 {} -> 아무 프로퍼티도 존재 X pt.x = 3; // ~ Property 'x' does not exist on type '{}' pt.y = 4; // ~ Property 'y' does not exist on type '{}' // 인터페이스를 미리 ..