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

코드를 작성 도중 백엔드에서 넘어오는 날짜 데이터의 형식이 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

git merge를 했는데 충돌이 있어서 당황을 했는데 아래의 명령어를 통해서 마지막으로 한 merge 명령을 취소할 수 있었습니다. git merge --abort

문제 설명 Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다. Leo가 본 카펫에서 갈색 격자의 수 brown, 노란색 격자의 수 yellow가 매개변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 return 하도록 solution 함수를 작성해 주세요. 제한사항 갈색 격자의 수 brown은 8 이상 5,000 이하인 자연수입니다. 노란색 격자의 수 yellow는 1 이상 2,000,000 이하인 자연수입니다. 카펫의 가로 길이는 세로 길이와 같거나, 세로 길이보다..

최근 제가 만들고 배포한 포트폴리오 프로젝트가 잘 배포되어 있는지 확인을 해보았는데 아래와 같이 오류가 발생하는 중이었습니다. 이 문제를 해결하기 위해 network tab을 봤을 때 notion에서 이미지를 가져오는데 이때 이미지가 aws로 배포되어 있는데 도메인에 변경이 있는 듯했습니다. 그래서 network tab에 잡힌 도메인 주소를 next.config.js에 추가해 주었다. /** @type {import('next').NextConfig} */ const nextConfig = { images: { domains: [ "prod-files-secure.s3.us-west-2.amazonaws.com", // 추가 한 도메인 "s3.us-west-2.amazonaws.com", "images...