프론트엔드 개발자 엄성준

오픈소스 기여 경험기: Next.js 한글 문서, es-toolkit, Frontend Fundamentals

최근 1년 전 개발한 React 포트폴리오 프로젝트를 Next.js로 마이그레이션하는 작업을 진행하며, Next.js에 대해 알지 못했던 부분을 보완하고 필요한 정보를 얻기 위해 공식 문서를 참고했습니다.  그런데 공식 문서가 한글을 지원하지 않아, 자연스럽게 한글로 제공되는 Next.js 한글 문서를 접하게 되었고, 그 과정에서 모든 페이지의 이미지가 깨지는 문제를 발견하여 해결할 수 있었습니다.   Pull Request 링크: https://github.com/luciancah/nextjs-ko/pull/158 [no-issue] fix: external image 컴포넌트의 baseUrl 수정 by umsungjun · Pull Request #158 · luciancah/nextjs-ko기존에 ..

Optimistic Update란 무엇일까?Optimistic Update는 한국말로는 낙관적 업데이트라고 말합니다. 성공적인 상태 업데이트가 이뤄질 거라는 가정 하에 서버 응답 이전에 UI를 미리 업데이트하는 방법입니다. 사용자 요청을 서버가 성공적으로 처리할 거라고 미리 예상하고, UI를 즉각적으로 변경해서 사용자에게 서버 응답 속도와 관계없이 즉각적인 피드백을 제공해서 사용자들이 시스템을 빠르게 쓸 수 있다는 점입니다. 특히 네트워크 상태가 좋지 않거나 응답 시간이 길어도 사용자 경험에는 영향을 덜 미치게 됩니다. 다만, 서버에서 오류가 발생하면 잠시동안 화면에 잘못된 정보가 표시될 수 있습니다. 따라서 이 경우를 대비한 오류 핸들링(롤백) 로직을 같이 설계해야 하는 주의점이 있습니다. Autowi..

문제 상황 AutoWini 클레임 프로젝트를 개발하면서 React 프로젝트를 통해 웹, 모바일, 앱에서 채팅 UI가 모두 잘 작동하도록 반응형 웹을 구현해야 했습니다. 대부분의 환경에서는 문제가 발생하지 않았지만, iOS 환경에서는 input이나 textarea를 통해 글자를 입력할 때 키보드가 올라오면서 화면의 너비를 인식하지 못해 키보드에 화면이 가려지는 문제가 발생했습니다.   문제 해결이 문제를 해결하기 위해 CSS와 JavaScript를 사용하여 화면의 높이가 변할 때 동적으로 vh(viewport height) 값을 재설정하는 방법을 사용했습니다. 구체적인 코드는 다음과 같습니다./* css */#viewContainer { height: 100vh; height: calc(var(..

문제 설명수포자는 수학을 포기한 사람의 준말입니다. 수포자 삼인방은 모의고사에 수학 문제를 전부 찍으려 합니다. 수포자는 1번 문제부터 마지막 문제까지 다음과 같이 찍습니다.1번 수포자가 찍는 방식: 1, 2, 3, 4, 5, 1, 2, 3, 4, 5, ...2번 수포자가 찍는 방식: 2, 1, 2, 3, 2, 4, 2, 5, 2, 1, 2, 3, 2, 4, 2, 5, ...3번 수포자가 찍는 방식: 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, 3, 3, 1, 1, 2, 2, 4, 4, 5, 5, ...1번 문제부터 마지막 문제까지의 정답이 순서대로 들은 배열 answers가 주어졌을 때, 가장 많은 문제를 맞힌 사람이 누구인지 배열에 담아 return 하도록 solution 함수를 작성해 주세..

문제 설명 프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다. 또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다. 먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요. 제한 사항 작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다. 작업 진도는 100 미만의 자연수입니다. 작업 속도는 100 이하의 자..

개인 프로젝트에서 Commit시 제목을 입력할 때 Commit Convension을 활용하고 있는데 매번 다른 블로그를 참고해서 작성하는 것보다 익숙해질 때까지 제 블로그를 참고하기 위해 작성합니다!Feat : 새로운 기능을 추가하는 경우Fix : 버그를 고친경우Docs : 문서를 수정한 경우Style : 코드 포맷 변경, 세미콜론 누락, 코드 수정이 없는경우Refactor : 코드 리펙토링Test : 테스트 코드, 리펙토링 테스트 코드를 추가했을 때Chore : 빌드 업무 수정, 패키지 매니저 수정Design : CSS 등 사용자가 UI 디자인을 변경했을 때Rename : 파일명(or 폴더명) 을 수정한 경우Remove : 코드(파일) 의 삭제가 있을 때. "Clean", "Eliminate" 를 사용..

먼저 500 Error가 발생한 원인은 간단합니다. const { data } = useSWR( latitude && longitude ? `/api/posts?latitude=${latitude}&longitude=${longitude}` : null ); Next.Js의 SSR 방식은 클라이언트 단에서 useSWR을 통해서 API Call을 호출하기 전에 즉 브라우저에 화면을 그려주기 전에 미리 초기 값({latitude: null, logintude: null})으로 백엔드에 호출을 해서 화면을 그리는 방식이기 때문에 param의 latitude, logintude의 값이 null로 전달되어서 발생한 문제입니다. 위도와 경도를 구하는 useCoords 함수는 초기값으로 각각 {latitude: nu..

최근에 Spot 운임 리스트를 보여주는 Ocean Freight 페이지를 개발할 때 React Helmet을 활용해서 페이지의 MetaTag(title, description, kewords)를 관리하고 이와 더불어 페이지의 URL 또한 신경 써서 페이지를 개발하였습니다. const SEO = ({ title, description, keywords }: HelmetProps) => { return ( {title} {description && } {keywords && } ); }; 자세한 코드는 보여드릴 수 없지만 위와 같이 최적화를 적용해서 배포하니 며칠 뒤 새로 만들어진 페이지에도 불구하고 SEO가 적용된 것을 확인할 수 있었습니다. 또한 Img Tag에 alt속성에 winiLogis를 입력하지 ..

오늘 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) {..