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

오늘 Nomard Coder를 통해서 학습한 내용 중 Optimistic UI Update에 대해서 알게 되었다. Optimistic UI Update란? 예를 들어 백엔드에 Post 요청을 보내고 업데이트된 데이터를 통해 다시 보이는 화면을 업데이트해주고 싶을 때 지금까지는 다시 Get 요청을 보내서 전달 받은 데이터를 화면에 업데이트해 주는 경우가 많으셨을 겁니다. 이때 Post요청을 보내고 즉각적으로 화면에 데이터가 변환된 것처럼? 보여주고 싶을 때 사용하는 것이 바로 Optimistic UI Update입니다. Optimistic UI Update를 구현하는 방법은 저는 useSWR의 mutate기능을 통해서 구현했습니다. const { data, mutate } = useSWR( router.q..

정말 중요한 기획의 퍼블리싱을 맡게 되었습니다. 전 페이지의 퍼블리싱을 끝내고 다음 주 월요일이 배포인데 문제가 생겼습니다. 바로 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 ..

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