맨땅에 헤딩

🤔 Promise사용 코드 useEffect(() => { getBookData() .then((res) => setPosts(res.data.items)) .catch((err) => console.log(err)); }, []); ✅ async await으로 바꾼 코드 const getApi = async () => { try { const response = await getBookData(); const { data } = response; setPosts(data.items); } catch (e) { console.error(e); } }; useEffect(() => { getApi(); }, []); 💻 async/await 구문을 사용하여 getBookData()함수 호출 1️⃣ cons..

google books API를 통해서 받아온 데이터를 페이지네이션 기능을 넣으려고 했는데, 생각지 못한 오류가 발생했다. 에러는 아니어서 에러메시지가 뜨지는 않았지만 내가 생각한대로 나오지 않고, 페이지마다 나오는 목록의 개수가 제멋대로였다 😓 첫페이지의 목록의 개수가 3개인데, 다음은 5개, 다음은 0개 이런식... 그래서 limit의 값을 고정값으로 5, 10이렇게 바꿔도 최대값이 그 값이 되긴 하지만 고정적인 개수로는 나오지 않았다. 🔍 원인 원인은 return앞에 적어준 if문 때문이었다. 🔫 나의의도: 받아오는 데이터중 빈데이터가 있는 것은 건너뛰고, 데이터에 값이 모두 담긴 것만 받아오고 싶다. 🔫 의도와는 다른 결과값: 데이터가 없는 곳은 빈값을 넣는다 ➡️ 목록에서 한자리를 차지함 이러한..

todo와 같이 crud를 만드면서 create기능을 구현할때도 만났던 에러이다. create를 할때는 새로운 키값을 넣어줘야하기 때문에 uuid라이브러리를 이용해서 이러한 에러를 해결했다. uuid를 사용하는 이유와 사용법도 직접 블로그에 정리해두었다. 리액트 uuid 설치 (리액트 고유id, 고유key 사용이유) uuid란 리액트에서 사용하는 라이브러리로서, 고유한 id값을 자동으로 추가해줘서 편리하다. 1. 사용법 1️⃣ install npm install uuid npm을 사용하면 위와같은 코드를, yarn을 사용하면 yarn add uuid 를 통 hihiha2.tistory.com 하지만 이번에는 같은 오류더라도 추가하기 기능이 아니라, 이미 존재하는 open api를 받아오면서 고유한 key..

chatgpt api를 이용해서 내 웹사이트에서 chatgpt에 질문을하고 답변을 받을수 있는 기능을 넣었는데, 질문을 하고 답변을 받을때, 아래와 같은 오류가 발생하였다. 화면에 답변이 정상적으로 나오기 때문에 기능이 작동하지 않는 에러는 아니었지만 고치고 싶어서 구글링을 열심히 함..!! 🔍 원인 이 오류는 보안 백엔드/서버 측이 아닌 프런트엔드/클라이언트 측에서 OpenAI를 호출하는 경우 발생한다. ✅ 해결 chatgpt의 api를 받아오는 코드에 delete configuration.baseOptions.headers["User-Agent"]; 를 추가한다. 💻 기존 코드 const generateText = async (input) => { const configuration = new Con..

요즘 내가 만들고 있는 웹사이트이다. 오늘 어떤 책을 읽을지 고민중인 유저들을 위해서, 1. 책을 검색하고 2. chatGPT를 통해서 책에대해 궁금한 내용도 질문할 수 있게 해두었다. googleBooks의 api와 chatGPt의 api를 사용했다. 이 프로젝트를 기획할 단계부터 외부 api를 활용하는 것을 익히고 싶은 생각이 있어서 일부러 이런 기능을 이용할 수 있는 사이트를 제작했다. 오늘은 axios를 따로 API폴더를 만들어서 모듈화하는 작업을 하였다. 하다가 계속 map관련 에러가 발생해서 해결하느라 시간이 좀 들었는데 이 과정에서 그래도 왜 에러가 발생했는지를 이해했더니, 의외로 해결방법은 엄청 간단했다 🥲 해결이유과 과정은 아래 포스팅에 자세하게 정리해두었다. Array.map is no..

googlebooks의 API를 가져오는 과정에서 Array.map is not a function 라는 에러가 발생하며, map을 사용할 수가 없다는 에러가 나왔다. 원래는 잘 작동하던 코드였는데 axios를 모듈화하여 따로 빼주는 과정에서 이런 에러가 발생했다. 해결하느라 꽤 시간이 걸렸지만 이유를 알고나니, 해결방법은 완전 간단했다. 🔍 원인 Array.map is not a function 에러는 배열이 아닌값을 map()을 돌리면 발생한다. 나의 경우 bookData를 불러오는 과정에서 경로를 더 들어가야하는데, 그냥 response를 그대로 받아오게 했더니 이런 에러가 발생하였다. ✅ 해결 console.log(res); 를 통해서 받아오는 값을 확인한다. 개발자도구-콘솔창을 열어서 확인을 하..

오늘부터는 스터디에서 공부하는 형식을 조금 변경하기로 했다. 각자 최근 공부한 내용들을 공유하고 어떤 코드를 짰는지, 또 어떤 방식을 추가하면 좋을지 서로 의견을 나누는 식이다. 나는 최근에 만들고 있는 개인 프로젝트 페이지를 화면공유로 보여줬다. googleAPI를 이용해서 책을 가져오는데, maxResult=40으로 최대 40개의 데이터만 받아오게 걸어놨는데, 그걸 다 받아오면서 페이지네이션을 하는 형식으로 바꿔보는게 좋을것같다는 피드백을 받아서 그 부분을 수정할 계획이다. 사진에 있는 코드는 같은 스터디원중 carlos님의 코드인데, 저 부분은 백엔드부분이라서 정확하게 이해는 못했지만 저런식으로 짜는구나.. 정도로 이해했다 ㅎㅎ 오늘은 axios를 모듈화하여 main 페이지가 아니라, API폴더아래..

🔍 가장 큰 수 찾기 문제설명 정수 배열 array가 매개변수로 주어질 때, 가장 큰 수와 그 수의 인덱스를 담은 배열을 return 하도록 solution 함수를 완성해보세요. ✅ 내 코드 function solution(array) { return [Math.max(...array), array.indexOf(Math.max(...array))]; } 💻 내가 이용한 메서드 1. Math.max(): 가장 큰수를 찾는다. 2. indexOf(): 인덱스를 찾는다. 💻 학습한 것 1. Math.max(): 배열을 인수로 받지 않는다 -> ...전개연산자를 이용해서 배열을 각각의 값으로 분리해야한다. 2. indexOf(): array.indexOf(찾고싶은값)의 형태로 사용한다. 🙋‍♀️ 내 생각 처음..

리액트로 책을 검색하고, chatGPT로 질문과 대답도 들을 수 있는 사이트를 만들고 있다. 만들면서 어떤 날은 기능이 잘 구현되어 기분이 엄청 좋은 채로 잠들고, 또 어떤날은 잘안돼서 집에 오는길에 조금 우울한 날도 있었다.. ㅋㅋ 그래도 계속 손보면서 조금더 나은 방법으로, 사이트가 조금씩 발전하고 있는거같아서 다행이다. (힘들어도 포기하지 않은 나자신 칭찬합니다) 엄청 대단한 사이트는 아니지만 그래도 뭔가 결과물이 눈에 보여서 조금은 뿌듯하다.😄 내일은 디자인을 조금 더 이쁘게 바꾸고 배포까지 할 예정이다. 추가적으로는 컴포넌트나 className을 조금 추상적으로 지은것같아서 더 구체적으로 바꾸는 작업을 해야겠다. (그래야 개인 프로젝트가 아닌, 회사에서 대규모의 플젝을 할때도 좋은코드니까..!!..

ChatGPT를 불러와서 내가 만들 프로젝트에서 적용을 해보았다. 내가 만든 사이트는 오늘 어떤 책을 읽을지 고민일때 한번에 찾아보기 쉽도록 만든 사이트이다. 각각의 가격 정보나 상세설명은 구글 API를 이용했고, 그 이상의 추천이나 질문은 chatGPT에게 질문을 해서 바로 답변을 받을 수 있도록 기능을 구현하였다. 이 과정에서 ChatGPT API를 불러오는 코드는 기억해두면 좋을것같아서 기록해둔다. 우선 당연히 기본적으로 OpenAI API 사이트에서 personal API키를 발급 받아야한다. 아래의 사이트에서 본인계정을 누르고 - View API KEYS - Create new Secret key 를 통해서 API 키를 발급받고 이것을 따로 저장해둔다. OpenAI API An API for a..