스터디기록일지

Problem hover & check 되게 하기 Solve 저번에도 한 번 해결했던 problem이라 hover문제를 같은 방법으로 해결했다. //호버 const [isboxHovering, setIsboxHovering] = useState(0); hover가 되어야 하는데에 조건문을 넣고 {isboxHovering == true? ( ) : ( )} 마우스를 올려두는 데에 onMouseOver 함수를 사용한다. setIsboxHovering(1)} onMouseOut={() => setIsboxHovering(0)}> 그러면 요렇게 hover된다. Check 하는 부분도 어렵진 않았다. 호버처럼 선언해주고 const [isboxChecking, setIsboxChecking] = useState(f..

ux ui 수업을 병행하며 듣느라 클론 코딩 속도가 더뎌지고 있다. 하지만 취업전까지 계속 해볼 생각이다. 항상 문제였던 메뉴 캐러셀을 드디어 구현했다. 저번에 사용하던 방식이 아닌 react-slick을 사용했다. react-slick 으로 메뉴 캐러셀 구현하기 먼저 슬릭을 설치한다. npm install react-slick slick-carousel 임포트해주고 import Slider from "react-slick"; slick에는 setting함수로 일부 css와 기능을 수정 할 수 있다. const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 5, slidesToScroll: 5, prevArrow: ( ), next..

현재 필터 모달을 만들고 있다. 생각보다 내용물이 굉장히 많아서 시간이 좀 걸린다. Issue useState로 버튼이 1개가 눌리면 나머지는 눌리지 않는 false로 설정해야한다. Solve const [countbtn, setcountbtn] = useState(false); function ctbtn(){ setcountbtn(!countbtn); if(countbtn===true){ setcountbtn1(false); setcountbtn2(false); setcountbtn3(false); setcountbtn4(false); setcountbtn5(false); setcountbtn6(false); setcountbtn7(false); setcountbtn8(false); return } }..

Problem 페이스북 소셜 로그인을 진행하려했는데, 진행되지 않았다. 찾아보니 페이스북은 acebook SDK는 http 환경에서의 로그인 시도를 차단합니다. 따라서 localhost에선 작동을 테스트할 수 없습니다 😢 Vercel, Netlify등으로 배포한 뒤에 테스트해주세요 그래서 다른 소셜로그인을 사용해야 할 것 같다. Problem 구글 소셜 로그인을 설치하던 중 npm ERR! code ERESOLVE라는 에러가 떴다. Solve npm install 뒤에 ' --save --legacy-peer-deps ' 를 추가해주면 된다. Issue 구글 소셜 로그인 구현하기 Solve 따로 컴포넌트를 만들어 넣어주었다. 구글 클라우드에서 프로젝트 생성 후 클라이언트 id를 받아와야 진행할 수 있다...

8주차 피드백 Issue 달력 날짜를 누르면 그 날짜가 날짜 입력 자리에 입력되게 하기 Solve 날짜 입력 자리에 아래를 넣으면 된다. {moment(value).format("MM월 DD일")} 하지만 여기서 problem은 초기 세팅부터 날짜 입력이 되어 있다. 초기부터 입력되는 게 아니라 달력에서 누르면 그때 날짜입력이 --> 해당 날짜로 변해야 한다. 그래서 useState를 사용해줬다. const [ddd, setddd] = useState(false); 달력을 누르면 상태가 true로 변하고 이 상태가 true일 경우 if문으로 해당날짜로 변하게 만들어 주었다. 누르기전 누르면 상태가 변경된다. Problem 내가 구현해야할 달력은 2달이 동시에 보이는 달력이다. +날짜를 몇일부터 몇일 까지..

Issue open api 를 이용해 지도 구현하기 기존의 airbnb사이트는 google map을 사용해서, 나도 google map으로 화면에 구현해보려 했으나, 과금 되지 않고 300불 크레딧을 사용해도 된다는 google이었지만 카드정보를 입력을 해두어야 하는것에 사알짝 겁이나 무료인 카카오맵을 이용하였다! Problem 화면이 뜨지 않는다. 하얀 화면이 뜬다. https://velog.io/@yeum0523/React%EB%A1%9C-Kakao-Map-%EB%9D%84%EC%9A%B0%EA%B8%B0 React로 Kakao Map 띄우기 카카오 api 가입하기 우선 카카오 api 서비스를 사용하기 위해선 여기 사이트에서 가입이 필요합니다. 콘솔에서 내 프로젝트 생성하기 가입을 완료 했다면, 화면..

모달 하나 뜨면 다른 건 닫히게. 헤더 가로스크롤 7주차 피드백 Problem modal 하나가 뜨면 다른 하나가 사라지게 하고 싶다. 지금은 두개의 모달이 동시에 뜬다. Solve 모달을 모달 안에 모달로 만들었는데, 여기서 안에 있는 밖으로 빼고, useEffect로 조건을 적용하니 해결되는 문제였다. 간단한 방법으로 해결되었지만 해결되기까지 꽤 걸린 것 같다. useEffect(()=>{ if(signOpen==true){ setModalOpen(false); return } return }); recoil의 특징을 살리기 위해서 ModalSign 컴포넌트와 ModalNext컴포넌트 를 나눴다.(원랜 같은 컴포넌트 안에 있었음) 아직 해결하지 못한 Problem 위 문제와 같은 모달 문제인데 다른 ..

Issue 캐로셀을 이용해 가로스크롤 구현하기. Problem 이미지가 비율에 맞게 나오는게 아니라 잘려서 나온다. Solve css에서 object-fit 을 사용했다. 하지만 IE에서는 지원하지 않는다. 그래서 background-size : cover 를 사용하니 비율에 맞게 잘 나왔다. Issue 이제 케로셀 구현이 가능해졌다. 이제 추가로 해결해야될 문제는 버튼이 그냥 보이는게 아니라 hover될때 보이게 해야하고 이제 각각 다 다른 이미지가 들어가야 하는 것이다. Problem 먼저 각각 다 다른 이미지가 들어가야 하는 문제를 해결해보도록 하겠다. Solve 방법은 간단했다. const images = useRef([{ src: img_path }, { src: "https://a0.musca..

recoil 사용해보기. Atom의 특징 1. 업데이트와 구독이 가능하다. atom이 업데이트 되면, 해당 atom을 구독하고 있던 모든 컴포넌트들의 state가 새로운 값으로 리렌더링 됩니다. 2. 동일한 atom을 여러 컴포넌트에서 구독할 수 있다. atom은 key 라고 하는 unique한 id로 구분됩니다. 동일한 atom을 여러 컴포넌트에서 구독하고 있다면, 해당 컴포넌트들은 같은 상태(state)를 공유하고 있는 것이며, 상태가 업데이트되면 해당 atom을 구독 중인 모든 컴포넌트들이 리렌더링됩니다. npm i recoil recoil을 프로젝트에 설치 해준다. recoil은 recoilRoot, redux는 reduxRoot로 index.js를 구성해준다. import React from '..

6주차 피드백 Problem 이미지 비율 유지하면서 반응형으로 만들기 현재 4개 이미지가 일정비율을 유지하면서 반응형이 되게 하는것까지 성공했다. 하지만 이상하게 아레 메뉴 목록(장소, 별점등)등을 추가하면 이미지 높이가 길어진다. 원래 에어비앤비 내가 구현한 에어비앤비 First - Solve grid에 top bottom 비율을 조율했다. .main_ctt_crd1 { display: grid; column-gap: 24px; grid-auto-rows: minmax(0, 1fr); grid-template-areas: 'top' 'bottom'; width: 100%; height: 100%; grid-template-rows: 58% 30%; } 하지만 아래와 거리가 너무 멀다. row-gap을 ..