뚝딱뚝딱 코딩 기록_

[Next.js_pre-rendering] Next.js의 서버 사이드 렌더링(사전 렌더링)을 통해 client로 데이터를 전달하는 과정에서 Serializing Error가 발생했다. 무슨 오류인지 찾아보니 데이터를 JSON으로 변환하는 과정에서 발생하는 오류라고 한다. 1️⃣ 원인 Next.js의 사전 렌더링 함수를 이용하여 데이터를 props로 보내는 경우 JSON 형태로 전달된다. Json은 데이터 교한을 목적으로 만들어져 특정 언어에 종속되지 않는다는 특징이 있는데, 때문에 특정 언어에 종속되는 객체는 JSON으로 변환(Serializing, 직렬화)할 수 없다고 한다. 전달하는 데이터 중 Timestamp 데이터가 존재했는데 Timestamp는 Javascript에서 Date 객체로 취급된다...

[Firebabse_ 인증] Firebase를 통해 서버리스 애플리케이션으로 쇼핑몰 프로젝트를 진행하고 있다. 사실 쇼핑몰은 예전부터 하고싶은 프로젝트였는데 잠시 미뤄두고 있었다. 그런데 친구가 쇼핑몰을 오픈하려고 한다는 소식을 듣고 괜히 만들어주고 싶어서(?) 드디어 시작하게 되었다. (ㅎㅎ firebase의 인증 시스템을 이용하여 자체 회원가입 및 로그인, 구글 소셜 로그인 기능을 구현하였는데 복습도 할 겸 정리해 보려고 한다. 1️⃣ 파이어베이스 연동하기 파이어베이스에 프로젝트를 생성하고 [프로젝트 설정 - Web App] 부분을 보면 아래 사진처럼 sdk 설정 및 구성 방법이 나온다. 저 부분을 복사해서 src/api/firebase.js 폴더에 붙여넣기 하면 된다. 참고로 firebaseConf..

[Next_ Notion API] Next.js로 블로그를 만들던 중 어차피 노션에 프로젝트를 정리해 놓으니 게시글을 노션의 데이터베이스와 연결해서 가져오면 좋을 것 같다는 생각을 하게 되었다! 그래서 발견한 것이 바로 Notion API였는데 막상 시작해보니 생각보다 많이 복잡했다.. 방법도 여러가지가 있었는데 역시나 한번에 성공하는 법은 없었고..! 이런 저런 방법을 시도해 본 결과 드디어..! 성공했다 ㅠㅠ 막상 성공하니까 어려운 것도 아니었는데 처음 시도해본 일이어서 헤맸던 것 같다..ㅎㅎ ※ 설치할 라이브러리 - @notionhq/client를 이용하여 notion과 연결할 예정!! npm install @notionhq/client 1️⃣ 노션 API 통합 만들기 연동할 노션 워크스페이스의 통..

[redux-toolkit] 리액트로 진행한 프로젝트에서 리덕스를 공부한 적이 있는데 리덕스의 보일러 플레이트 코드를 간소화하기 위해 리덕스 툴킷 (redux-toolkit, rtk)를 사용한 적이 있다. 공부하면서 노션에 정리해놓은 것을 다시 복기할 겸 정리하려고 한다. 상태 관리 라이브러리 (state management library) → redux, modox, recoil 등 state가 상위 component로 올라갈수록 관리하기 복잡해지는 현상 해결 Redux toolkit (RTK) Redux 로직을 작성하고 저장소를 설정하는 프로세스(redux 작업)를 단순화 redux 저장소 구성의 복잡성, 많은 패키지 추가, 상용구 코드 해결 위해 사용하는 도구 API configureStore() ..

[React_ 절대 경로 설정하기] 지금까지는 절대 경로의 필요성을 많이 느끼지 못했는데 최근에 상대 경로로 import된 '../../../...' 이러한 것들이 신경쓰여 절대 경로를 설정하기 시작했다. - tsconfig.json // tsconfig.json { ... "compilerOptions": { ... "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } React 프로젝트를 Typescript로 세팅하고 절대경로 설정을 위해 tsconfig.json 파일에 baseUrl과 paths를 넣어주었다. Javascript로 실행할 때에는 jsconfig.json 파일만 수정하면 간단하게 해결 되었는데 Typescript에서는 경로가 없다면서 오류가 계속 발..

[Javascript_ 두 큐 합 같게 만들기] 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 📢 문제 길이가 같은 두 개의 큐가 주어집니다. 하나의 큐를 골라 원소를 추출(pop)하고, 추출된 원소를 다른 큐에 집어넣는(insert) 작업을 통해 각 큐의 원소 합이 같도록 만들려고 합니다. 이때 필요한 작업의 최소 횟수를 구하고자 합니다. 한 번의 pop과 한 번의 insert를 합쳐서 작업을 1회 수행한 것으로 간주합니다. 큐는 먼저 집어넣은 원소가 먼저 나오는 구조입니다. 이 문제에서는 큐를 배열로 표현하며, 원소가 배열 앞쪽에 있을수록 먼저 집어넣..

[Javascript_ 롤케이크 자르기] 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 📢 문제 📢 철수는 롤케이크를 두 조각으로 잘라서 동생과 한 조각씩 나눠 먹으려고 합니다. 이 롤케이크에는 여러가지 토핑들이 일렬로 올려져 있습니다. 철수와 동생은 롤케이크를 공평하게 나눠먹으려 하는데, 그들은 롤케이크의 크기보다 롤케이크 위에 올려진 토핑들의 종류에 더 관심이 많습니다. 그래서 잘린 조각들의 크기와 올려진 토핑의 개수에 상관없이 각 조각에 동일한 가짓수의 토핑이 올라가면 공평하게 롤케이크가 나누어진 것으로 생각합니다. 롤케이크에 올려진 토핑들의 번호를..

[Javascript_ 쿼드압축 후 개수 세기] 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 📢 문제 📢 0과 1로 이루어진 2n x 2n 크기의 2차원 정수 배열 arr이 있습니다. 당신은 이 arr을 쿼드 트리와 같은 방식으로 압축하고자 합니다. 구체적인 방식은 다음과 같습니다. 당신이 압축하고자 하는 특정 영역을 S라고 정의합니다. 만약 S 내부에 있는 모든 수가 같은 값이라면, S를 해당 수 하나로 압축시킵니다. 그렇지 않다면, S를 정확히 4개의 균일한 정사각형 영역(입출력 예를 참고해주시기 바랍니다.)으로 쪼갠 뒤, 각 정사각형 영역에 대해 ..

[스택 / 큐] 스택 (Stack) 후입선출(LIFO) 원칙을 따르는 데이터들의 모임 스택에 가장 마지막으로 추가된 요소가 가장 먼저 제거됨 삽입, 삭제 시간 복잡도 : O(1) 예시 : 호출스택, 실행 취소, 다시실행, 브라우저 접속 기록 추적 등 (뒤로가기) 배열을 이용한 스택 구현 프로그래밍 언어 자체에 스택이라는 데이터 종류가 내장되어 있기도 함 (JS 지원 X) push, pop을 이용하여 구현 (시간 복잡도 면에서 더 효율적임) unshift, shift를 이용하여 구현 let stack = []; stack.push("google"); stack.push("instagram"); stack.push("youtube"); console.log(stack) // ["google", "instag..

[Javascript_ 이모티콘 할인행사] 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 📢 문제 📢 카카오톡에서는 이모티콘을 무제한으로 사용할 수 있는 이모티콘 플러스 서비스 가입자 수를 늘리려고 합니다. 이를 위해 카카오톡에서는 이모티콘 할인 행사를 하는데, 목표는 다음과 같습니다. 이모티콘 플러스 서비스 가입자를 최대한 늘리는 것. 이모티콘 판매액을 최대한 늘리는 것. 1번 목표가 우선이며, 2번 목표가 그 다음입니다. 이모티콘 할인 행사는 다음과 같은 방식으로 진행됩니다. n명의 카카오톡 사용자들에게 이모티콘 m개를 할인하여 판매합니다. 이모티콘마..