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

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

이번에 회사에서 carInspection 즉 셀러가 차량의 수리 이력등을 등록 및 수정하는 기능을 개발하게 되었습니다. 이때 carInspection의 등록은 PopUp에 있는 버튼을 통해서 등록할 수 있었는데 만약 셀러가 버튼을 눌러서 carInspeciton을 등록하고, 등록 이후에 창을 다시 열어서 수정을 하던 도중 취소를 하면 이전에 등록했던 carInspection 정보가 유지가 되어야 했습니다. 위의 기능을 개발하기 위해 등록하기 버튼을 눌렀을 때 duplicatedConditionList에도 원본 객체에 등록된 정보를 똑같이 할당해 주었는데 이때 원본 객체를 그대로 전달하면 수정을 할 때 duplicatedConditionList 또한 변하기 때문에 완벽한 깊은 복사 즉 Deep Copy를 ..

2023년 11월 기준 node -v 관련 오류가 난다면 node -v 18 이상을 설치하시면 정상 작동됩니다. 기존에 16v이 설치되어 있었는데 따른 작업 필요 없이 아래의 링크에 가서 LST버전 다운로드하시면 정상 작동됩니다. LTS 관한 정보는 검색해서 참고하시면 좋을 것 같습니다. https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org