프론트엔드 개발자 엄성준 블로그

NextJS에서 API Call을 했을 때 JSON Data가 정렬되어 있기를 원해서 Crome 도구를 찾아보게 되었습니다. 결론은 왼쪽에 작은 창에서 보이는 것처럼 JSON Data를 다루고 싶다 하시면 아래의 링크를 타고 들어가셔서 다운로드하시면 쉽게 적용하실 수 있습니다! https://chromewebstore.google.com/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd JSONView 브라우저에서 JSON 문서를 보세요. chrome.google.com

이전에 제로베이스에서 팀프로젝트를 구현할 때 이메일로 인증번호를 받아서 로그인하는 과정을 구현한 적이 있습니다. 이 때는 백엔드에서 이메일 인증 관련 로직을 처리해서 어떻게 구현했는지 정확히 알지 못했습니다. 그래서 이번 기회에 구현을 하게 되었는데 문제점이 생겼습니다. 처음에 SendGrid를 통해서 이메일 인증관련 로직을 처리하려고 하였으나 SendGrid에 회원가입을 하자마자 access관련 문제가 파바박 하고 터지고 구글 검색과 수많은 댓글을 통해서 알아낸 점은 SendGrid에 가입해 성공하여도 추가로 요구하는 정보도 만고 인증을 하려면 수많은 절차를 거쳐야 한다는 점을 알게 되었습니다. 그래서 찾아낸 다른 방법이 nodeMailer입니다. 먼저 nodeMailer를 사용하기 전에 저는 제 네이..

Test message를 보낼 때 ERROR: 21610가 발생해서 어떻게 해결했는지 적어볼까 합니다. Verified Caller IDs 탭에 들어오셔서 평가판 계정일 경우 허용된 번호를 등록하시면 정상적으로 메시지를 보낼 수 있습니다. 이 문제를 해결하려고 회사에 메일을 보낼까도 생각해보았지만 Stack Overflow에 다른 분이 적어두신 글을 보고 해결했습니다!

문제 설명 다음 규칙을 지키는 문자열을 올바른 괄호 문자열이라고 정의합니다. (), [], {} 는 모두 올바른 괄호 문자열입니다. 만약 A가 올바른 괄호 문자열이라면, (A), [A], {A} 도 올바른 괄호 문자열입니다. 예를 들어, [] 가 올바른 괄호 문자열이므로, ([]) 도 올바른 괄호 문자열입니다. 만약 A, B가 올바른 괄호 문자열이라면, AB 도 올바른 괄호 문자열입니다. 예를 들어, {} 와 ([]) 가 올바른 괄호 문자열이므로, {}([]) 도 올바른 괄호 문자열입니다. 대괄호, 중괄호, 그리고 소괄호로 이루어진 문자열 s가 매개변수로 주어집니다. 이 s를 왼쪽으로 x (0 ≤ x < (s의 길이)) 칸만큼 회전시켰을 때 s가 올바른 괄호 문자열이 되게 하는 x의 개수를 return ..

React hook form을 통해서 onValid 된 data를 fetch를 통해서 pages / users / enter.tsx에 요청을 보냈다. const onValid = (data: EnterForm) => { // console.log(JSON.stringify(data)); fetch("/api/users/enter", { method: "POST", body: JSON.stringify(data), headers: { "Content-Type": "application/json", }, }); }; 이 때 headers에 적힌 "Content-Type" : "application/json"문장이 없으면 enter.tsx에서 req즉 request의 body에 접근했을 때 undefiend가..

기존에 회사에서나 개인프로젝트를 할 때 state를 활용해서 form 내부의 Input의 값들을 저장하는 방식을 많이 이용하고 그에 해당하는 예외처리나 에러처리를 정말 긴 코드로 해결했었는데 앞으로는 React Hook Form을 이용해서 간단하게 해결할 수 있다는 생각이 듭니다. 제가 아래에서 사용한 useForm의 옵션 말고도 더욱 다양하고 도움이 되는 기능들이 많습니다. https://react-hook-form.com/docs/useform useForm Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com import { FieldErrors, useForm } from "react-ho..

문제 설명 경화는 과수원에서 귤을 수확했습니다. 경화는 수확한 귤 중 'k'개를 골라 상자 하나에 담아 판매하려고 합니다. 그런데 수확한 귤의 크기가 일정하지 않아 보기에 좋지 않다고 생각한 경화는 귤을 크기별로 분류했을 때 서로 다른 종류의 수를 최소화하고 싶습니다. 예를 들어, 경화가 수확한 귤 8개의 크기가 [1, 3, 2, 5, 4, 5, 2, 3] 이라고 합시다. 경화가 귤 6개를 판매하고 싶다면, 크기가 1, 4인 귤을 제외한 여섯 개의 귤을 상자에 담으면, 귤의 크기의 종류가 2, 3, 5로 총 3가지가 되며 이때가 서로 다른 종류가 최소일 때입니다. 경화가 한 상자에 담으려는 귤의 개수 k와 귤의 크기를 담은 배열 tangerine이 매개변수로 주어집니다. 경화가 귤 k개를 고를 때 크기가..

문제 설명 사진들을 보며 추억에 젖어 있던 루는 사진별로 추억 점수를 매길려고 합니다. 사진 속에 나오는 인물의 그리움 점수를 모두 합산한 값이 해당 사진의 추억 점수가 됩니다. 예를 들어 사진 속 인물의 이름이 ["may", "kein", "kain"]이고 각 인물의 그리움 점수가 [5점, 10점, 1점]일 때 해당 사진의 추억 점수는 16(5 + 10 + 1)점이 됩니다. 다른 사진 속 인물의 이름이 ["kali", "mari", "don", "tony"]이고 ["kali", "mari", "don"]의 그리움 점수가 각각 [11점, 1점, 55점]]이고, "tony"는 그리움 점수가 없을 때, 이 사진의 추억 점수는 3명의 그리움 점수를 합한 67(11 + 1 + 55)점입니다. 그리워하는 사람의 ..

관리자 기능 중에 Mui DatePicker를 이용해서 날짜를 선택하는 부분이 있었는데 이 때 허무맹랑한 날짜(1242-12-12)를 키보드로 입력한 이후에 new Date()로 오늘 날짜를 입력시키는 기능이 정상 작동하지 않았습니다. 또한 화폐정보를 가져올 때 키보드 입력을 필요로 할만큼 큰 범위를 갖고있다고 생각하지 않았기에 키보드 입력자체를 막기로 결정했습니다. DatePicker 속성에 아래의 코드를 적용하시면입력을 막을 수 있습니다.

Prisma Login - pscale auth login Prisma Planet Scale Bridge 연결 - pscale connect (데이터 베이스 이름) Prisma datbase 생성 - pscale database create (데이터 베이스 이름) --region gcp-asia-norteast3 Prisma datbase 푸쉬(schema.prisma의 변경 사항을 저장) - npx prisma db push Prisma studio 브라우저에서 열기 - npx prisma studio Client 생성 npm install @prisma/client import { PrismaClient } from "@prisma/client"; npx prisma generate