본문 바로가기

분류 전체보기

 (170)
데이터가져오기 변경....TIL 원래는 react-query를 사용해서 openAPI를 가져오려고 했으나 그것도 cors에러로 프록시 서버를 끼고 작업을 하고 있었다. query를 실행하면 수시로 데이터를 가져오는데 데이터가 수가 많아서 서버가 자꾸 요청이 많타고 정지되는 경우가 있었다. axios로 한번 가져오면 그 가져온 데이터로 props를 내려서 필요한 데이터만 리스트를 뽑고 있던 상황이였는데 (axios가 불편하진않았다. 실시간으로 데이터가 변경되는 게 아니고 언제 불러와도 같은 데이터이기 때문에 문제가 없다고 생각을 했다.) 더보기버튼을 구현이 생겼고 또 나중에 이 리스트를 눌렀을때 비교할 수 있도록 데이터를 스테이징하는 작업이 필요했다. 그럼 그 제품마다 고유한 id가 있어야하는데 openAPI에는 id값이 없었다 ㅠㅠ 그..
더보기 버튼 1.상황 계속해서 프로젝트가 진행되면서 하나를 완성했다고 끝이 아닌 새로운 기능이 추가가 되었다. 그래서 갑자기 나에게 배정된 제품 상세보기! 상품을 비교해주는 사이트라 거기에 집중을 한다고 제품을 하나하나 보고 싶다면 볼수있는 페이지가 없었다. 상품을 확인하려면 무조건 2개이상 비교를 해야지 가능한 상황이였다. 상품들의 리스트 작업을 하고 있었기 때문에 리스트를 눌렀을때 바로 밑에 기존의 리스트가 늘어나면서 안에 상세내용이 나올 수 있도록 토글? 같은 형식을 만들기로 추가가 되었다.🔥 2.내가 만난 문제 토글형식으로 제품의 상세보기를 만든다?라고 했을때 괜찮을 꺼같았다. state를 주고 그 값이 true일때 밑에 상세보기가 나올 수 있도록 하면 될 줄 알았다. const [toggleBtn,setTo..
top button구현 TIL 만약 유저가 은행을 검색하게 된다면 저런식으로 리스트가 뜨게 되는데 회색창 안에서 움직이기 때문에 밑에다가 top버튼을 만들어 주어야했다. 버튼은 리스트의 밖에 있는데 리스트의 상단으로 가게하려면 어떻게 해야할까 고민했다. 1.내가 만난 문제 평소처럼 웹에서 스크롤을 하면 탑 버튼이 생기는 형식이 아니였고, 버튼은 고정이였지만 대신 올라가야 할 위치가 버튼과 동일한 위치의 선상이 아니였다. 그래서 이걸 어떻게 해야할까 고민이였다. 2.시도 처음에는 저 리스트를 내리면 그 리스트 안에서 버튼이 형성되는 것은 어떠할까?라고 생각했는데 그럼 리스트를 누르려다가 버튼을 실수로 누를 수도 있는 상황이 생길 것 같았고 또 틀 안에서만 움직이는 리스트들이 답답해 보일껏 같은 생각이 들었다. 만들어 놓은 프레임을 따라..
검색기능 구현 TIL 1.내가 만난 문제 기능목표: 은행명 or 상품명을 입력하면 해당하는 상품을 가져오자. 은행에서 제공하는 open API에서 url 값으로 들고 올 수 있는 것은 은행명 밖에 없었고 또, 은행코드를 쳐야지만 되었다. 저기에는 은행명(string)도 된다고 했지만 안되었다. ㅠㅠ 그럼 나는 사용자가 입력한 은행명을 코드로 바꾸고 그 코드를 api로 useLocation을 사용해서 전달해야하는 것인가... 2.시도 👍 - 사용자가 입력한 "국민","국민은행"을 어떻게 다 코드로 바꿔야하는 것인가에 대해서 고민이 많이 하다가 다른방법이 없을까 열심히 검색을 해보니 필터와 맵으로 기능구현이 가능하다는 말을 자주 보게되었다. 3.해결 ✅ 먼저 필요한 값이 있는 데이터를 props로 컴포넌트로 넘겨준다. baseL..
WIL(14) 1.이번주를 되돌아보자 🔥저번주에 세워둔 이번 주 목표 - 최종 프로젝트 계획 세우기👍 디자이너님과 처음 해보는 협업으로 이때까지 해왔던 프로젝트와는 다르게 엄청 세밀하고 자세하게 계획을 진행해갔다. 그동안 해왔던 경험을 삼아서 해보니까 좋았던 점 나빴던 점을 나눠서 진행했다. 파이어베이스를 통해서 기능 구현 금융 openAPI를 사용해서 가져오기 (실시간 정보이기는보다는 바뀌지 않는 정보를 가져오기 때문에 react-query가 급하지 않았다.) 프레임에 맞춰서 UI 만들기 진행 중 UI에 맞춰서 기능구현도 진행 중 2.다음주 목표 기능구현 마무리하기 UI 마무리하기 서비스페이지 부족한 부분 완성하기 3.이번 주 목표 달성 여부✨ - 회의를 오래하고 자주 해야하다 보니까 시간도 잘 가고 최종이다보니 프..
기능구현고민 TIL 프로젝트 기간이 거의 5주라 기간이 널널하지 않을까라고 생각했던 내가 어리석을 정도ㅜㅋㅋ시간이 너무 잘 간다. 데이터를 불러왔으니까 그 불러온 상품들로 기능 구현을 시작해야됬다. 내가 맡은 부분은 데이터 상품들을 최고금리 순으로 나열하고, 또 사용자가 은행을 검색했을 때 해당 상품이 나올 수 있는 부분을 맡았다. 🔥기능 가장 높은 금리 들고 오기 [고민] - 은행 상품에는 금리,복리 또는 개월 수 , 예금 적금에 따라서 다양한 상품이 있다. 있는 데이터를 다 넣고 최고금리를 가져오면 적금이 높을 꺼고 복리가 높을 꺼다. 그래서 금리를 높은 순차로 정렬해도 그 의미가 없어지는것같았다. 그래서 고민한 결과 금감원의 페이지에서 전체 데이터를 최고금리 순으로 뽑았을 때 어떤 기준으로 가져왔는지 알아보고, 금감원..
TIL 이번 TIL은 내가 겪은 CORS에러에 대해서 트러블 슈팅 할 시간을 가질려고 한다. 앞에서 간단하게 어떻게 발생했고 해결은 어떻게 했는지 기록했는데 에러 기록을 위해서 다시 정리하려고 한다. 1.CORS란 무엇인가 cross-origin이 다를 경우 보안을 위해서 서버의 동의가 필요해서 나는 에러이다. cross-origin? 프로토콜 - http와 https는 프로토콜이 다른 것이다. 도메인 - domain.com과 other-domain.com은 다른것이다. 포트 번호 - 8080포트와 3000포트는 다른 것이다. 이 위에서 한 개라도 다른 경우를 말한다. 그래서 요청을 보내는 프론트 주소와 받는 백엔드 주소가 다르면 CORS에러가 발생한다. 그럼 어떻게 해결하나🧐 서버에서 응답 메시지 Access..
Open API 가 이렇게 고생시킬 줄이야 TIL 1.내가 만난 오류 튜터님의 피드백에 따라서 open API가 잘 가져와지는지 확인을 했다. 인증키 발급과 키를 넣고 주소를 쳐보니 데이터가 잘 나오길래 방심 CORS에러가 남...🥲(Cross-Origin Resource Sharing) _ 이거는 다음 TIL에 작성 거의 처음 만난 에러라 찾아봐도 이해하기가 쪼금 어렵긴했다. 2.시도 인증키를 요청할때 보니 "서버 URL"을 입력할 수 있도록 되어있는데 필수가 아니여서 그냥 안적어내서 그런가하고 내가 요청을 보낼 주소인 http:localhost:3000을 입력 -> 똑같이 안됨 데이터를 넘겨주는 서버가 Access-Control-Allow-Origin 에다가 localhost:3000을 입력해줘야했다. (OpenAPI라 서버를 어떻게 내가 조작할 수..

티스토리툴바