프론트엔드 개발자 엄성준

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

문제 설명 r, e, v 뒤에 나오는 값을 더하여 나온 최종 숫자에서 앞자리를 월로 뒷자리를 일로 출력r, e, v 뒤에 나오는 숫자는 1부터 10까지입니다. 이를 넘어가는 숫자가 나올 경우 앞 숫자만 뽑아냅니다.문자열: adr10bb1d9ia10e33b7u88k3j1a3v11v9 나의 풀이function solution(data){ // match()를 통해서 정규식으로 원하는 값 추출 // [rev]: "r", "e", "v" 중 하나의 문자 // 10 or 0 ~ 9 사이의 숫자 data = data.match(/[rev](10|[0-9])/g) // 예상 값 -> ['r10', 'e3', 'v2', 'v1', 'v9'] let result = 0; for(l..

개인 프로젝트에서 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) {..

먼저 기획서에서 모바일 화면일 때 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

Test message를 보낼 때 ERROR: 21610가 발생해서 어떻게 해결했는지 적어볼까 합니다. Verified Caller IDs 탭에 들어오셔서 평가판 계정일 경우 허용된 번호를 등록하시면 정상적으로 메시지를 보낼 수 있습니다. 이 문제를 해결하려고 회사에 메일을 보낼까도 생각해보았지만 Stack Overflow에 다른 분이 적어두신 글을 보고 해결했습니다!