본문 바로가기

전체 글283

[TIL] 2023.06.27 'StaticImageData' 형식은 'string' 형식에 할당할 수 없습니다 '{ img: StaticImageData; category: string; title: string; }' 형식은 'CardType' 형식에 할당할 수 없습니다. 'img' 속성의 형식이 호환되지 않습니다. 'StaticImageData' 형식은 'string' 형식에 할당할 수 없습니다.ts(2322) import 한 jpg 파일의 타입을 지정하는 과정에서 상단의 error가 발생했다. type CardType = { img: string; category: string; title: string; }; type CardProps = { CardInfo: CardType; }; 전달받은 props의 `type` 구조는 다음과 같다. CardType의 `img: string`에서 error가 발생한 것.. 2023. 6. 27.
[TIL] 2023.06.22 Programmers_A 강조하기 A 강조하기 문제 설명 문자열 myString이 주어집니다. myString에서 알파벳 "a"가 등장하면 전부 "A"로 변환하고, "A"가 아닌 모든 대문자 알파벳은 소문자 알파벳으로 변환하여 return 하는 solution 함수를 완성하세요. 입출력 예 myString result "abstract algebra" "AbstrAct AlgebrA" "PrOgRaMmErS" "progrAmmers" 입출력 예 #1 0번, 5번, 9번, 15번 인덱스의 "a"는 소문자이므로 전부 대문자로 고쳐줍니다. 다른 문자들은 전부 "a"가 아닌 소문자이므로 바꾸지 않습니다. 따라서 "AbstrAct AlgebrA"를 return 합니다. 입출력 예 #2 0번, 2번, 4번, 6번, 8번, 10번 인덱스의 문자들은 .. 2023. 6. 22.
스파르타코딩클럽 내일배움캠프 4기 React 트랙 수료 후기 내일배움캠프 4기 React 트랙을 수료한 지 3개월 정도 지난 시점에서 캠프에 참여하며 느꼈던 부분을 후기글로 작성해보려 한다. 나도 코딩 국비지원 고민하면서 후기글 검색을 엄청 했었기 때문에 같은 고민을 가지고 계신 분들에게 조금이라도 참고할 수 있는 정보가 되면 좋겠다! 1. 내일배움캠프를 참여하기 전 백그라운드 일단 나는 비전공자, 노베이스 상태로 내일배움캠프에 참여했다. 대학교를 졸업하고 전공을 살리고 싶지는 않고, 내가 하고 싶은 게 뭘까 고민하다가 코딩에 관심을 가지게 되었다. 뉴스에서 개발자가 연봉도 많이 받을 수 있는 굉장히 유망한 직업으로 소개하길래 개발자는 어떤 일을 하는 걸까 궁금함에서 시작해서 관심을 가지게 되었던 거 같다. 2. 개발자가 되기로 결심한 이유 코딩에 관심을 가진 후.. 2023. 6. 19.
[React] 토스페이먼츠 API로 Paypal 연동 해외결제 구현하기 6월 1일에 출시된 따끈따끈한 토스페이먼츠 Paypal 연동 해외결제 API. React와 Next.js로 Paypal 해외결제를 구현한 과정을 기록으로 남겨보려 한다. 참고로 이번 프로젝트는 결제 수단이 Paypal 해외결제 한 가지였기 때문에 결제위젯을 사용하지 않고 예약 페이지 내의 결제 버튼을 클릭했을 때 바로 Paypal 결제 페이지로 연결되도록 구현했다. 1. npm 패키지 설치 npm install @tosspayments/payment-sdk npm install nanoid `script` 태그에 결제위젯 SDK 파일을 추가하는 방법이 아닌 npm 패키지로 설치하는 방법을 선택했다. nanoid는 결제 요청 시 `orderId`를 랜덤으로 생성하기 위해 설치한다. 2. API 키 준비 /.. 2023. 6. 14.
[TIL] 2023.06.13 Programmers_수열과 구간 쿼리 1 수열과 구간 쿼리 1 문제 설명 정수 배열 arr와 2차원 정수 배열 queries이 주어집니다. queries의 원소는 각각 하나의 query를 나타내며, [s, e] 꼴입니다. 각 query마다 순서대로 s ≤ i ≤ e인 모든 i에 대해 arr[i]에 1을 더합니다. 위 규칙에 따라 queries를 처리한 이후의 arr를 return 하는 solution 함수를 완성해 주세요. 입출력 예 arr queries result [0, 1, 2, 3, 4] [[0, 1],[1, 2],[2, 3]] [1, 3, 4, 4, 4] 입출력 예 #1 각 쿼리에 따라 arr가 다음과 같이 변합니다. i queries[i] arr - - [0, 1, 2, 3, 4] 0 [0,1] [1, 2, 2, 3, 4] 1 [1,.. 2023. 6. 13.
[Next.js] Next.js 13에서 SSG, SSR, ISR 적용하기_fetch() API NEXT.JS 13 버전에서는 `getStaticProps`, `getServerSideProps` 함수를 더 이상 사용하지 않는다는 소식을 보고 그럼 SSR과 SSG는 어떻게 적용할 수 있는 걸까 궁금해서 찾아봤다. 일단 NEXT 13부터 모든 컴포넌트가 기본적으로 서버 컴포넌트로 동작하게 되었으며 SSR, SSG, ISR을 적용하기 위해서 `getStaticProps`, `getServerSideProps` 등의 함수가 아닌 `fetch` API를 사용한다. Data Fetching // This request should be cached until manually invalidated. // Similar to `getStaticProps`. // `force-cache` is the defaul.. 2023. 6. 10.
[TIL] 2023.06.10 Programmers_왼쪽 오른쪽 왼쪽 오른쪽 문제 설명 문자열 리스트 str_list에는 "u", "d", "l", "r" 네 개의 문자열이 여러 개 저장되어 있습니다. str_list에서 "l"과 "r" 중 먼저 나오는 문자열이 "l"이라면 해당 문자열을 기준으로 왼쪽에 있는 문자열들을 순서대로 담은 리스트를, 먼저 나오는 문자열이 "r"이라면 해당 문자열을 기준으로 오른쪽에 있는 문자열들을 순서대로 담은 리스트를 return 하도록 solution 함수를 완성해 주세요. "l"이나 "r"이 없다면 빈 리스트를 return 합니다. 입출력 예 str_list result ["u", "u", "l", "r"] ["u", "u"] ["l"] [] 입출력 예 #1 "r"보다 "l"이 먼저 나왔기 때문에 "l"의 왼쪽에 있는 문자열들을 담은.. 2023. 6. 10.
[TIL] 2023.06.07 word-break로 문자열 줄바꿈하기 table body에 띄어쓰기 없이 영어로 텍스트를 입력했을 때 줄 바꿈이 되지 않고 테이블 레이아웃이 깨지면서 가로 스크롤이 생기는 문제가 발생했다. 테스트 삼아 일반적인 영어 텍스트를 작성했을 때는 아무 문제없는 것을 알아냈다. 그래서 띄어쓰기 없이 작성한 것이 문제인가 싶어서 관련 키워드로 검색을 해봤다. word-break: break-all; 이것저것 검색해 보다가 알게된 것이 css word-wrap 속성. word-wrap: break-all을 적용했더니 내가 원하는 대로 띄어쓰기 없이 글을 작성했을 때에도 줄 바꿈이 잘 되는 것을 확인할 수 있다. +) 근데 `word-break: break-all` 속성을 지정했더니 단어가 깨지면서 개행되는 문제가 있었다. 나는 테스트 용으로 띄어쓰기 없.. 2023. 6. 7.
[React] resize 이벤트로 브라우저 크기에 따라 javascript 적용하기 CSS와 관계없이 브라우저의 width에 따라 컴포넌트 내에서 javascript를 다르게 적용하기 위해 resize 이벤트를 사용했다. resize 이벤트 const [width, setWidth] = useState(window.innerWidth); const isMobile = width { setWidth(window.innerWidth); }, 200); useEffect(() => { window.addEventListener('resize', handleResize); return () => { window.removeEventListener('resize', handleResize); // cleanup }; }, []); resize 이벤트는 document view의 크기가 변경될 때.. 2023. 6. 7.
[TIL] 2023.06.06 Programmers_순서 바꾸기 순서 바꾸기 문제 설명 정수 리스트 num_list와 정수 n이 주어질 때, num_list를 n 번째 원소 이후의 원소들과 n 번째까지의 원소들로 나눠 n 번째 원소 이후의 원소들을 n 번째까지의 원소들 앞에 붙인 리스트를 return하도록 solution 함수를 완성해주세요. 입출력 예 num_list n result [2, 1, 6] 1 [1, 6, 2] [5, 2, 1, 7, 5] 3 [7, 5, 5, 2, 1] 입출력 예 #1 [2, 1, 6]에서 첫 번째 이후의 원소는 [1, 6]이고 첫 번째까지의 원소는 [2]입니다. 두 리스트를 이어 붙이면 [1, 6, 2]가 됩니다. 입출력 예 #2 [5, 2, 1, 7, 5]에서 세 번째 이후의 원소는 [7, 5]이고 세 번째까지의 원소는 [5, 2, .. 2023. 6. 6.