- 실무 경험
확장자는 JPG인데 Windows에서 열리지 않는 이미지 문제 해결한 방법
Window 운영체제에서 .jpg 확장자 이미지가 다운로드는 되지만 열리지 않는 문제를 해결한 과정을 공유합니다.
- 실무 경험
iframe으로 인한 width 드래그 조절 문제 해결한 방법
리스트 영역(. listContainer)의 width를 마우스 드래그로 조절하는 기능을 구현하던 중 예상치 못한 문제가 발생했습니다.
- 실무 경험
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를 도입해 사용하고 있었습니다.
- 기술 정리
Failed to load module script 에러 해결한 방법
Vanilla JS로 프로젝트를 진행하던 중 익숙한 에러 메시지를 다시 마주쳤습니다.
- 프로젝트
오픈소스 기여 경험기: Next.js 한글 문서, es-toolkit, Frontend Fundamentals
최근 1년 전 개발한 React 포트폴리오 프로젝트를 Next.js로 마이그레이션하는 작업을 진행하며,Next.js에 대해 알지 못했던 부분을 보완하고 필요한 정보를 얻기 위해 공식 문서를 참고했습…
- 실무 경험
es-toolkit의 throttle로 성능 최적화한 Scroll To Top 버튼 구현
화면 좌측 하단이나 우측 하단에 자주 보이는 Scroll To Top 버튼을 몇 번 구현한 적이 있습니다.
- 실무 경험
Tanstack Query와 Optimistic Update로 Autowini 좋아요 기능 구현하기
Optimistic Update는 한국말로는 낙관적 업데이트라고 말합니다. 성공적인 상태 업데이트가 이뤄질 거라는 가정 하에 서버 응답 이전에 UI를 미리 업데이트하는 방법입니다.
- 기술 정리
React Conext 톺아보기
오늘 React Context를 톺아보려는 이유는 많은 기업에서 React를 사용하면서 Props 전달이 필요한 상황에서 Context를 적극 활용하고 있다는 생각이 들어서입니다.
- 기술 정리
브라우저 언어와 크로스 브라우징
최근 사내 프로젝트 개발 중 국내 사용자에게만 가격 정보를 가리는 기능을 구현할 일이 있었습니다.
- 프로젝트
S3와 CloudFront로 정적 사이트 호스팅: React 앱 배포 경험
기존에도 React로 만든 프로젝트를 여러 번 배포해 보았지만, 주로 Vercel, GitHub, Spotify 같은 플랫폼을 이용해 흔히 '클릭 한 번'으로 쉽게 배포하는 방식만 경험했습니다.
- 실무 경험
WiniLogis 블로그의 가독성 문제 해결 React-Quill을 활용한 텍스트 에디터 적용
WiniLogis는 글로벌 무역 부킹 서비스를 제공하는 플랫폼으로, 블로그를 운영하고 있습니다.
- 기술 정리
자바스크립트의 이벤트 루프(Event Loop)란?
먼저 이벤트 루프(Event Loop)에 대해서 알기 전에 JavaScipt의 특징인 Single Thread(싱글 스레드)에 대해서 알아보겠습니다.
- 프로젝트
Expo 호스팅을 통해 React Native 앱 배포하기
다른 블로그 글과 공식 문서를 참고하면서 여러 가지 명령어를 시도했지만 잘되지 않아 어려움을 겪었습니다.
- 실무 경험
차세대 이미지 포맷(WebP)을 통한 웹 성능 개선
이전에 WiniLogis의 메인 페이지 성능을 개선하기 위해 Google Lighthouse를 사용하여 Core Web Vitals 점수를 체크한 적이 있습니다. 이 과정에서 지적받은 주요
- 실무 경험
React-Swiper로 기존 Slider 성능 개선하기
AuctionWini Seller 사이트의 메인 페이지에서 사용된 Slider는 데이터를 map 함수로 반복 처리하여 1px씩 동적으로 계속 움직이는 방식으로 구현되어 있었습니다.
- 실무 경험
웹 브라우저 페이지 이동으로 들어왔는지, 새로고침으로 들어왔는지 구분하는 법 With React & TypeScript
웹 브라우저 접속 시 페이지 이동으로 들어왔는지, 새로고침으로 들어왔는지 구분을 통해 분기처리를 해야 하는 로직을 작성해야 했습니다.
- 실무 경험
크로스브라우징(Cross Browsing) - iOS 환경에서 키보드가 화면을 가리는 문제 해결
AutoWini 클레임 프로젝트를 개발하면서 React 프로젝트를 통해 웹, 모바일, 앱에서 채팅 UI가 모두 잘 작동하도록 반응형 웹을 구현해야 했습니다.
