프론트엔드 개발자 엄성준

문제 설명 다음 규칙을 지키는 문자열을 올바른 괄호 문자열이라고 정의합니다. (), [], {} 는 모두 올바른 괄호 문자열입니다. 만약 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

const [dragStartIndex, setDragStartIndex] = useState(null); const [dragEnterIndex, setDragEnterIndex] = useState(null); const handleAddShowImg = (e: ChangeEvent) => { if (!e.target.files) return; if (e.target.files.length + showImg.length > 8) { alert('등록할 수 있는 이미지의 최대 갯수는 8장입니다.'); return; } const imgList = e.target.files; const imgUrlList = [...showImg]; for (let i = 0; i < imgList.length; i++..

schema.prisma File에서 아래와 같이 설정 generator client { provider = "prisma-client-js" // previewFeatures = ["referentialIntegrity"] //PlanetScale은 MySQL처럼 foreign key(외래키)를 지원하지 않음 그렇기 때문에 이 문장을 넣어야 하지만 현 버전에서는 자동으로 지원해주는 것 같음 } datasource db { provider = "mysql" url = env("DATABASE_URL") relationMode = "prisma" // Prisma를 통해서 관계를 체크한다. } model User { id Int @id @default(autoincrement()) phone Int? @u..

zsh: command not found: brew Error가 나신다면 아래의 과정을 차례대로 따라 해보시길 바랍니다. Planet Scale cli 설치 전 Homebrew를 설치해야 합니다. 터미널에 아래 명령어를 입력하시면 비밀번호를 입력하라고 나오는데 비밀번호 입력 후에 엔터를 누르시면 됩니다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 설치가 완료 된 후 버전확인을 했을 때 제대로 나오면 설치가 된 겁니다. brew -v 이후 터미널에서 아래를 차례대로 실행하시면 됩니다. 1. brew install planetscale/tap/pscal 2. brew install..