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

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..

오늘은 회사에서 백엔드 개발자분의 요청으로 Skeleton UI를 가장 간단하게 만들어달라는 요청이 있어서 최대한 빨리 만들어 보았습니다. 여기서 핵심은 @keyframes에서 opacity를 이용하여 구현한 것입니다. 코드를 그대로 가져다가 실행하시면 opcity가 변함으로 인해 반짝거리는 효과를 보실 수 있습니다.

https://www.npmjs.com/package/react-datepicker react-datepicker A simple and reusable datepicker component for React. Latest version: 4.25.0, last published: 15 days ago. Start using react-datepicker in your project by running `npm i react-datepicker`. There are 2897 other projects in the npm registry using react-datep www.npmjs.com React DatePicker를 활용하여 날짜와 시간을 입력받고 있었는데 여기서 문제가 발생했다 날짜 선택 이후 ..

코드를 작성 도중 백엔드에서 넘어오는 날짜 데이터의 형식이 date : '20231228' 이런 형식인데 '2023-12-28' 다음과 같은 형식으로 만들고 싶던 도중 싶게 만들 수 있는 방법을 알아냈습니다. const testDate = '20231228'; console.log(testDate.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3')); 위의 코드와 같이 replace(/(\d {4})(\d {2})(\d {2})/, '$1-$2-$3' )를 이용하면 쉽게 변경할 수 있습니다.

2023년 7월 3일에 회사에 입사한 지 5개월이 지났습니다. 우수사원 상을 수상하게 되었습니다! 앞으로도 어떠한 요구 사항이든 구현할 수 있고 모든 문제에 대처할 수 있는 능력을 키우기 위해 끊임없이 노력하겠습니다!

먼저 darkMode를 브라우저의 설정대로 적용할 것인지 사용자가 임의로 버튼을 만들어서 class상태를 통해 적용할 것인지를 정해야 합니다. tailwind.config.ts or tailwind.config.js 파일에서 darkMode 속성이 media일 때는 브라우저의 설정대로 적용, class일 때는 사용자가 임의로 조정이 가능한 상태입니다. import type { Config } from "tailwindcss"; const config: Config = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: ..

아래의 예시와 같이 ``(템플릿 리터럴)이 정상 작동되지 않아 지저 분하고 긴 코드가 될 뻔했지만. 구글 검색을 통해서 jsp에서 ``(템플릿 리터럴)이 사용되지 않는 이유와 해결법을 찾았습니다. jsp를 사용할 경우, jsp의 EL 표현식과 JavaScript의 템플릿 문자열이 겹치게 되기 때문에 정상 작동이 되지 않은 것 같습니다. 그래서 아래와 같이 코드를 작성하면 정상 작동되는 걸 확인할 수 있었습니다. paintFilmDataList.forEach((filmData) => { const filmBox = document.querySelector('.' + filmData.position); // if (filmBox) { // filmBox.innerHTML = // '' + filmData.m..

오늘 회사에서 차량의 도막을 입력받는 input의 validation을 검증하던 도중 조건이 아래와 같았습니다. - 자릿수(length)는 5이하 - e(지수), 문자,. 금지 위의 조건들을 충족하기 위해서 input type number를 vailidation 하는 건 까다롭다고 생각이 들어서 input type을 text로 지정한 뒤 문자열의 최대 길이는 maxLength 효과를 이용했고 다른 조건들은 정규식을 이용했습니다. 회사에서는 jsp + vue.js를 이용해서 구현했지만 회사 코드를 공개할 수 없어서 집에서 리액트를 이용해서 혼자 복습해 보았습니다. import React, { useState } from "react"; const YourComponent = () => { const [in..