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

정말 중요한 기획의 퍼블리싱을 맡게 되었습니다. 전 페이지의 퍼블리싱을 끝내고 다음 주 월요일이 배포인데 문제가 생겼습니다. 바로 Chrome에서는 정상 작동하는 CSS가, Safari에서는 정상 작동하지 않는 아주 절망적인 상황이 벌어졌습니다. 먼저 시간이 없기 때문에 문제 해결을 위해 이전에 작성해 두었던 코드를 분석해 본 결과 .commonBookingStep1PopUpRequestTimeWrapper { font-size: 0.8rem; padding: 1.5rem 1rem; display: flex; flex-direction: column; gap: 1rem; color: #000; > :nth-child(1) { span { color: #d10023; } } > :nth-child(2) {..

import { useRouter } from "next/router"; import { useEffect, useState } from "react"; export default function useUser() { const [user, setUser] = useState(); const router = useRouter(); useEffect(() => { fetch(`/api/users/me`).then((response) => response.json().then((data) => { if (!data.ok) { return router.replace("/enter"); } setUser(data.profile); }) ); }, [router]); return user; } 먼저 useEffe..

Given an array arr and a chunk size size, return a chunked array. A chunked array contains the original elements in arr, but consists of subarrays each of length size. The length of the last subarray may be less than size if arr.length is not evenly divisible by size. You may assume the array is the output of JSON.parse. In other words, it is valid JSON. Please solve it without using lodash's _...

먼저 기획서에서 모바일 화면일 때 3줄 이상의 문장일 경우 Read more 버튼이 보이게 해 달라는 요청이었습니다.저는 이 요구사항을 충족시키기 위해 모바일일 경우 특정 길이 이상일 때 Read more 버튼이 보이게 직접 구현했었습니다.하지만 이때 문제점은 영어와 한글이 섞여있거나 A, b와 같이 문자열의 너비 차이 등등 여러 가지 문제 점이 등장했습니다. 이 문제를 해결하기 위해 구글 검색을 정말 많이 했었는데 딱히 마음에 드는 해결방법을 찾지 못하던 중이었습니다. 하지만 계속된 노력 끝에 WiniLogis에서 사용 중인 기술스택에 적합한 라이브러리를 찾게 되었습니다.https://www.npmjs.com/package/react-show-more-text react-show-more-textThe..

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

기존에 회사에서나 개인프로젝트를 할 때 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..

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