- 실무 경험
Google Spreadsheet JWT 403 PERMISSION_DENIED 오류 해결기
Autowini 프로젝트에서 Node.js로 구글 스프레드시트 다국어 데이터를 가져오던 중, PERMISSION_DENIED 오류가 발생했습니다.
- 실무 경험
Prettier 적용 with Import 자동 정렬
WiniLogis 프로젝트에 코드 스타일을 통일하기 위해 Prettier를 도입했습니다.
- 실무 경험
<textarea />를 활용한 채팅 입력창에서 한글 Enter 키 입력 시 메시지가 두 번 전송되는 이유
처음에는 아래와 같은 로직으로 채팅 입력창을 구현했습니다. 사용자가 <textarea />에 메시지를 입력한 뒤 Enter 키를 누르면, 메시지를 전송하고 입력창을 초기화하는 구조입니다.
- 실무 경험
React i18n 다국어 처리 빌드 크기 최적화 1
Autowini 서비스를 개발하면서 다국어(i18n) 지원을 위해 react-i18next를 도입해 사용하고 있었습니다.
- 실무 경험
es-toolkit의 throttle로 성능 최적화한 Scroll To Top 버튼 구현
화면 좌측 하단이나 우측 하단에 자주 보이는 Scroll To Top 버튼을 몇 번 구현한 적이 있습니다.
- 실무 경험
Tanstack Query와 Optimistic Update로 Autowini 좋아요 기능 구현하기
Optimistic Update는 한국말로는 낙관적 업데이트라고 말합니다. 성공적인 상태 업데이트가 이뤄질 거라는 가정 하에 서버 응답 이전에 UI를 미리 업데이트하는 방법입니다.
- 실무 경험
WiniLogis 블로그의 가독성 문제 해결 React-Quill을 활용한 텍스트 에디터 적용
WiniLogis는 글로벌 무역 부킹 서비스를 제공하는 플랫폼으로, 블로그를 운영하고 있습니다.
- 실무 경험
차세대 이미지 포맷(WebP)을 통한 웹 성능 개선
이전에 WiniLogis의 메인 페이지 성능을 개선하기 위해 Google Lighthouse를 사용하여 Core Web Vitals 점수를 체크한 적이 있습니다. 이 과정에서 지적받은 주요
- 실무 경험
React-Swiper로 기존 Slider 성능 개선하기
AuctionWini Seller 사이트의 메인 페이지에서 사용된 Slider는 데이터를 map 함수로 반복 처리하여 1px씩 동적으로 계속 움직이는 방식으로 구현되어 있었습니다.
- 실무 경험
웹 브라우저 페이지 이동으로 들어왔는지, 새로고침으로 들어왔는지 구분하는 법 With React & TypeScript
웹 브라우저 접속 시 페이지 이동으로 들어왔는지, 새로고침으로 들어왔는지 구분을 통해 분기처리를 해야 하는 로직을 작성해야 했습니다.
- 실무 경험
크로스브라우징(Cross Browsing) - iOS 환경에서 키보드가 화면을 가리는 문제 해결
AutoWini 클레임 프로젝트를 개발하면서 React 프로젝트를 통해 웹, 모바일, 앱에서 채팅 UI가 모두 잘 작동하도록 반응형 웹을 구현해야 했습니다.
- 실무 경험
SPA(Single Page Application)페이지 SEO 최적화 With React Helmet
최근에 Spot 운임 리스트를 보여주는 Ocean Freight 페이지를 개발할 때
- 실무 경험
Safari에서 깨지는 CSS 해결
정말 중요한 기획의 퍼블리싱을 맡게 되었습니다.
- 실무 경험
Text ReadMore 구현 With WiniLogis Our Shipment
먼저 기획서에서 모바일 화면일 때 3줄 이상의 문장일 경우 Read more 버튼이 보이게 해 달라는 요청이었습니다.
- 실무 경험
Mui DatePicker 키보드 Event PreventDefault 하기
관리자 기능 중에 Mui DatePicker를 이용해서 날짜를 선택하는 부분이 있었는데
- 실무 경험
세상에서 가장 간단한 Skeleton UI With Only HTML & CSS
오늘은 회사에서 백엔드 개발자분의 요청으로 Skeleton UI를 가장 간단하게 만들어달라는 요청이 있어서 최대한 빨리 만들어 보았습니다.
- 실무 경험
React DatePicker 날짜 & 시간 저장 오류
https://www.npmjs.com/package/react-datepicker
- 실무 경험
도전의 5개월, 우수사원 상 수상 기쁨과 다짐
2023년 7월 3일에 회사에 입사한 지 5개월이 지났습니다.
- 실무 경험
jsp에서 ``(템플릿 리터럴) 정상 사용 법
아래의 예시와 같이 (템플릿 리터럴)이 정상 작동되지 않아 지저 분하고 긴 코드가 될 뻔했지만.
- 실무 경험
input type = "text"일 때 숫자만 입력되게 정규식 이용법
오늘 회사에서 차량의 도막을 입력받는 input의 validation을 검증하던 도중 조건이 아래와 같았습니다.
