본문 바로가기

TIL✨

 (71)
더보기 버튼 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..
기능구현고민 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라 서버를 어떻게 내가 조작할 수..
TIL 1.경험✨ 디자이너님이 피그마에 와이어프레임을 짜주시고 그 프레임을 보면서 첫날에 이어서 회의를 진행했다. 예뻤다. (기능 구현 열심히 하자) 튜터님 SA 피드백을 받았다. -로그인은 소셜과 기본 로그인 중에 우선은 기본부터 해놓고 나중에 소셜을 넣자. - 모바일일때의 화면(반응형)도 준비하자. ( 모바일은 360px ~ 480px까지 대응되면 좋고 데스크탑은 보통 1024px 이후 부터입니다. 태블릿까지 고려하면 너무 시간이 많이 드니 360px~480px, 1024px ~ 페이지 수가 쫌 늘어났다. 그에 맞게 기능도 기하급수적으로 늘고 있는 느낌이다.) 커뮤니티가 밀린만큼 우선 순위의 기능들을 먼저 다같이 해결해나가고 각자 부가적인 기능을 맡아서 진행하는 방식을 맡았다. 와이어프레임도 회의내용과 피드..
최종프로젝트 시작_TIL 1. 경험 새로운 최종 프로젝트 팀원들을 만났다. 처음엔 다들 내성적이라 조용했다 (알고보니 한 분 빼고 모두가MBTI I였다는ㅋㅋㅋ) 다들 배려도 좋으시고 밝으셔서 좋았다.🥰 처음으로 디자이너님과 함께 협업을 하게되었다.(디자이너님도 열심히 해주시고 회의에도 엄청 잘 참여해주셨다. 너무 감사했다.) 이때까지 했던 프로젝트들 경험을 바탕삼아 계획을 진행했다.( AM 9 ~ PM 9)를 진행했다.with 디자이너님 오래 의견을 나눈 만큼 좋은 프로젝트를 짤 수 있을 것 같아서 힘들었지만 즐거웠다. 피그마를 이때까지 사용은 해왔지만 이번만큼 알차게 써본적이 없는 것 같다. 2. 프로젝트 계획 : 예적금 비교 사이트 3. 하루 총 정리 첫날에는 회의만 찐하게 했다. 회의를 디테일하고 정확하게 해놔야 나중에 편..

티스토리툴바