[TIL] 2023.05.20 Typescript

기본 타입 지정 let project: { member: string[]; days: number; started: boolean } = { member: ['kim', 'park'], days: 30, started: true, }; Union type let age: string | number = 'kim'; let name: (string | number) = 100;. let array: (number | string)[] = [1,'2',3] let object: {data : (number | string) } = { data : '123' } let 학교: { score: (number | boolean)[]; teacher: string; friend: string | string[]; ..

• format_list_bulleted JavaScript
• · 2023. 5. 20.
• textsms

[TIL] 2023.05.19 react-phone-input-2로 국가 번호 입력 dropdown 구현하기

해외 전화번호를 입력할 때 국가 코드를 dropdown 형태로 선택할 수 있게 구현하고 싶었다. 검색 결과 react-phone-input-2라는 리액트를 위한 라이브러리가 있어서 공식문서도 잘 정리되어 있고 UI도 프로젝트와 잘 어울려서 사용하기로 결정했다. import PhoneInput from 'react-phone-input-2'; import 'react-phone-input-2/lib/style.css'; npm 설치 후 PhoneInput 컴포넌트를 import 해서 사용하면 된다. 드롭다운에 특정 국가들만 상단에 고정해서 보여주는 기능도 preferredCountries라는 옵션을 이용해서 매우 간단하게 구현할 수 있어 마음에 들었다. enableSearch 옵션을 true로 설정하면 드..

• format_list_bulleted JavaScript
• · 2023. 5. 19.
• textsms

[TIL] 2023.05.19 Next.js 13버전에 Recoil 적용하기

Root Layout에 바로 RecoilRoot를 넣으려고 했더니 에러가 발생했다. TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. RecoilRoot를 사용하려면 서버 컴포넌트를 클라이언트 컴포넌트로 변경해야 하는 거 같다. 하지만 Root Layout 파일을 클라이언트로 변경하면 모든 컴포넌트가 클라이언트 컴포넌트로 변경되는 결과가 생길 거 같아서 recoil 파일을 따로 빼서 적용하기로 했다. 'use client' import { ReactNode } from 'react' import { RecoilRoot } from 're..

• format_list_bulleted JavaScript
• · 2023. 5. 19.
• textsms

[TIL] 2023.05.17 Programmers_수열과 구간 쿼리 2

수열과 구간 쿼리 2 문제 설명 정수 배열 arr와 2차원 정수 배열 queries이 주어집니다. queries의 원소는 각각 하나의 query를 나타내며, [s, e, k] 꼴입니다. 각 query마다 순서대로 s ≤ i ≤ e인 모든 i에 대해 k보다 크면서 가장 작은 arr[i]를 찾습니다. 각 쿼리의 순서에 맞게 답을 저장한 배열을 반환하는 solution 함수를 완성해 주세요. 단, 특정 쿼리의 답이 존재하지 않으면 -1을 저장합니다. 입출력 예 arr queries result [0, 1, 2, 4, 3] [[0, 4, 2],[0, 3, 2],[0, 2, 2]] [3, 4, -1] 입출력 예 #1 첫 번째 쿼리의 범위에는 0, 1, 2, 4, 3이 있으며 이 중 2보다 크면서 가장 작은 값은 ..

• format_list_bulleted 알고리즘/Programmers
• · 2023. 5. 17.
• textsms

[TIL] 2023.05.16 Prisma 초기 세팅 및 Create 구현

Today I Learned Prisma & PostgreSQL 초기 세팅 Prisma로 Create 하기 Prisma 초기 세팅 Prisma schema Model 생성하기 [TIL] 2023.05.23 Prisma schema Model 생성 Prisma schema The Prisma schema file is the main configuration file for your Prisma setup. It is typically called schema.prisma and consists of the following parts: Data sources: Specify the details of the data sources Prisma should connect to (e.g. a Post div..

• format_list_bulleted JavaScript
• · 2023. 5. 16.
• textsms

[TIL] 2023.05.15 Programmers_배열 만들기2

배열 만들기2 문제 설명 정수 l과 r이 주어졌을 때, l 이상 r이하의 정수 중에서 숫자 "0"과 "5"로만 이루어진 모든 정수를 오름차순으로 저장한 배열을 return 하는 solution 함수를 완성해 주세요. 만약 그러한 정수가 없다면, -1이 담긴 배열을 return 합니다. 입출력 예 l r result 5 555 [5, 50, 55, 500, 505, 550, 555] 10 20 [-1] 입출력 예 #1 5 이상 555 이하의 0과 5로만 이루어진 정수는 작은 수부터 5, 50, 55, 500, 505, 550, 555가 있습니다. 따라서 [5, 50, 55, 500, 505, 550, 555]를 return 합니다. 입출력 예 #2 10 이상 20 이하이면서 0과 5로만 이루어진 정수는 없..

• format_list_bulleted 알고리즘/Programmers
• · 2023. 5. 15.
• textsms

[TIL] 2023.05.14 Programmers_문자열 여러 번 뒤집기

문자열 여러 번 뒤집기 문제 설명 문자열 my_string과 이차원 정수 배열 queries가 매개변수로 주어집니다. queries의 원소는 [s, e] 형태로, my_string의 인덱스 s부터 인덱스 e까지를 뒤집으라는 의미입니다. my_string에 queries의 명령을 순서대로 처리한 후의 문자열을 return 하는 solution 함수를 작성해 주세요. 입출력 예 my_string queries result "rermgorpsam" [[2, 3], [0, 7], [5, 9], [6, 10]] "programmers" 나의 1차 풀이 function solution(my_string, queries) { let answer = my_string; for (const [a, b] of querie..

• format_list_bulleted 알고리즘/Programmers
• · 2023. 5. 14.
• textsms

[TIL] 2023.05.13 Programmers_마지막 두 원소

마지막 두 원소 문제 설명 정수 리스트 num_list가 주어질 때, 마지막 원소가 그전 원소보다 크면 마지막 원소에서 그전 원소를 뺀 값을 마지막 원소가 그전 원소보다 크지 않다면 마지막 원소를 두 배한 값을 추가하여 return 하도록 solution 함수를 완성해 주세요. 입출력 예 num_list result [2, 1, 6] [2, 1, 6, 5] [5, 2, 1, 7, 5] [5, 2, 1, 7, 5, 10] 입출력 예 #1 마지막 원소인 6이 그전 원소인 1보다 크기 때문에 6 - 1인 5를 추가해 return 합니다. 입출력 예 #2 마지막 원소인 5가 그전 원소인 7보다 크지 않기 때문에 5의 두 배인 10을 추가해 return 합니다. 나의 풀이 function solution(num_..

• format_list_bulleted 알고리즘/Programmers
• · 2023. 5. 13.
• textsms

[TIL] 2023.05.12 Programmers_코드 처리하기

코드 처리하기 문제 설명 문자열 code가 주어집니다. code를 앞에서부터 읽으면서 만약 문자가 "1"이면 mode를 바꿉니다. mode에 따라 code를 읽어가면서 문자열 ret을 만들어냅니다. mode는 0과 1이 있으며, idx를 0부터code의 길이 - 1까지 1씩 키워나가면서 code[idx]의 값에 따라 다음과 같이 행동합니다. mode가 0일 때 code[idx]가 "1"이 아니면 idx가 짝수일 때만 ret의 code[idx]를 추가합니다. code[idx]가 "1"이면 mode를 0에서 1로 바꿉니다. mode가 1일 때 code[idx]가 "1"이 아니면 idx가 홀수일 때만 ret의 맨 뒤에 code[idx]를 추가합니다. code[idx]가 "1"이면 mode를 1에서 0으로 바꿉..

• format_list_bulleted 알고리즘/Programmers
• · 2023. 5. 13.
• textsms

[TIL] 2023.05.11 Programmers_부분 문자열 이어 붙여 문자열 만들기

부분 문자열 이어 붙여 문자열 만들기 문제 설명 길이가 같은 문자열 배열 my_strings와 이차원 정수 배열 parts가 매개변수로 주어집니다. parts[i]는 [s, e] 형태로, my_string[i]의 인덱스 s부터 인덱스 e까지의 부분 문자열을 의미합니다. 각 my_strings의 원소의 parts에 해당하는 부분 문자열을 순서대로 이어 붙인 문자열을 return 하는 solution 함수를 작성해 주세요. 입출력 예 my_strings parts result ["progressive", "hamburger", "hammer", "ahocorasick"] [[0, 4], [1, 2], [3, 5], [7, 7]] "programmers" 입출력 예 #1 i my_strings[i] parts..

• format_list_bulleted 알고리즘/Programmers
• · 2023. 5. 11.
• textsms