오늘은 네이버 오픈 API를 사용하여 쇼핑 정보를 가져오면서 겪었던 문제와 이를 해결했던 경험을 공유하려고 합니다. 이 과정에서 Too Many Requests 에러를 해결하고 효율적인 데이터 요청 방법을 찾았던 내용을 소개해 드릴게요. 문제 상황: Too Many Requests저희 서비스에서는 네이버의 쇼핑 정보를 가져와야 했습니다. 특히 한 번에 2000개의 키워드에 대해 쇼핑 정보를 불러와야 하는 상황이었습니다. 네이버 오픈 API를 사용해 많은 데이터를 받아오려고 여러 번 요청을 보냈지만, 그럴 때마다 Too Many Requests라는 응답을 받게 되었습니다. 처음에는 "왜 이런 문제가 발생할까?"라고 고민했습니다. 당시 요청 방식은 1초에 상품 100개씩, 키워드 100개를 요청하는 구조였는..

안녕하세요. 오늘은 크롬 Lighthouse를 사용하여 웹 페이지의 성능을 최적화한 경험을 공유하려고 합니다. 이전에 웹 페이지의 로딩 속도를 3분에서 3초로 단축한 경험을 공유한 적이 있습니다.  하지만 그때에도 "정말? 어떻게? 결과는?"이라는 의문이 남아 있었습니다. 그래서 저는 크롬의 Lighthouse라는 훌륭한 도구를 사용하게 되었습니다. Lighthouse 사용 방법Lighthouse는 크롬 개발자 도구에서 사용 가능한 성능 측정 도구입니다. F12(개발자 도구)를 열고 오른쪽 >> 버튼을 누르면 Lighthouse 탭이 보입니다. 여기서 모바일 또는 데스크톱 환경을 선택해 페이지 성능을 검사할 수 있습니다. 저희 서비스는 데스크톱에 최적화된 서비스이기 때문에 데스크톱 환경을 선택했습니다.초..

안녕하세요! 오늘은 두 배열을 비교할 때 효율적으로 코드를 작성하는 방법에 대해 공유하려고 합니다. 처음에는 조금 복잡하게 코드를 작성했지만, 개선을 통해 훨씬 깔끔하고 효율적인 코드로 만들 수 있었어요. 이 과정을 함께 살펴볼까요? 초기 코드처음 작성한 코드는 두 배열을 비교하면서 키워드의 위치를 확인하는 작업이었는데요, 아래와 같았습니다.// 데이터를 순회하며 keywords 배열과 비교data.forEach(item => { if (keywords.includes(item.keyword)) { // 특정 값의 인덱스 찾기 const index = keywords.indexOf(item.keyword); // 이후 작업 }});이 코드에서는 data 배..

안녕하세요! 오늘은 프론트엔드 지식을 채우기 위해 제가 어떤 식으로 공부하고 있는지, 그리고 GPT에게 받은 도움을 바탕으로 어떻게 정리했는지에 대해 이야기해보려고 합니다. 이직 준비와 프론트엔드 지식 확장을 위해 많이 다루어지는 주제를 찾아보았어요. 많은 사람들이 다루는 주제는 그만큼 중요하고, 프론트엔드 개발자라면 알고 있어야 한다고 생각했거든요.Q: 구글에서 제일 많은 프론트엔드 블로그 주제 top 10 알려줘이유는 간단해요. 많은 사람들이 다루는 주제는 그만큼 인기가 있고, 프론트엔드 개발자라면 반드시 알아야 하는 내용일 가능성이 높다고 생각했기 때문입니다. 그래서 GPT에게 이렇게 물어봤습니다. GPT의 답변프론트엔드 개발자들이 많이 다루는 인기 블로그 주제를 정리해드릴게요. 이 주제들은 트렌디..

안녕하세요! 오늘은 CSS 클래스 기반 스타일 관리를 통해 유지보수성과 효율성을 강화한 이야기를 풀어보려고 합니다. 스타일 작업을 할 때, JavaScript에서 직접 스타일을 조작하는 대신 CSS 클래스 기반으로 작업하면 어떤 장점이 있는지 한번 알아볼게요! 왜 CSS 클래스를 사용했냐고요? 저는 CSS 클래스 기반 스타일 작업을 하면서 한 가지 깨달음을 얻었습니다. JavaScript로 스타일을 직접 조작하다 보면 코드가 복잡해지고, 유지보수가 어렵더라고요. 그래서 CSS로 스타일을 정의해두고 JavaScript에서는 클래스 이름만 추가/삭제하는 방식으로 작업해보기로 했습니다. 이 방법을 사용하니, JavaScript에서 스타일 조작에 들이는 시간을 줄이고, 코드 검증 시간도 단축할 수 있었어요. 이..