Circle

캘린더를 이제 슬슬 만들어야 하는데 이미 시중에 많은 라이브러리가 있어서 그것 중에 골라서 적용해야 할 것 같다. 본격적인 작업에 앞서 일단 내가 필요한 디자인과 기능은 이런데1\. 월 - 일 일주일 간의 일정이 표시됨2\. 좌측에는 모임이 시작되는 시간대가 표시됨3\

본격적인 사용법을 작성해보겠다 일단 공식문서는 여기로 https://fullcalendar.io/ 이것을 사용하려면 일단 패키지를 다운받아야 하는데 이런 식으로 작성하면 패키지가 다운로드 받아진다. package.json 이 파일 안에서 설치된 패키지 확인 가능!

필요 사항하나만 선택하는 버튼과 다중 선택이 가능한 입력 폼 만들기곰곰이 생각해보니 input의 radio와 checkbox 속성을 적용하여 그것을 버튼처럼 만드는 방법이 떠올랐다.일단 전체 구조는 분리된 섹션 레이아웃이 하나의 폼이고 Submit 버튼 클릭 시 위에서

목표 : 아래 로고의 텍스트 부분이 움직이는 기능을 구현

위와 같은 레이아웃을 구현하였는데 화면 사이즈를 줄이면 원래 있던 위치에서 벗어나는 문제가 발생이런 식으로 부모 속성에 relative를 주고 자식 속성에 absolute와 그에 따른 위치를 작성한 상태이다.하지만 이렇게 작성하면 내가 원하는 디자인대로 표현하지 못하는

서브 브랜치 작업을 마치고 develop 페이지로 푸시했는데 해당 페이지가 반영이 안됨. git status로 확인하니 working to clean이 뜨는 상황. 아무래도 작업하다 깃이 꼬인 것 같다.첫번째 방법 - 최신 브랜치 상태 업데이트결과 : 반영 안됨두번째

우선 내가 만들 기능은 하트 버튼 클릭 시 꽉 채운 하트로 이미지가 바뀌는 기능이다.useState 훅을 사용하여 상태 업데이트이미지 경로가 길기 때문에 이미지를 불러온 뒤 변수에 담아 저장했다.또한 useState에 초기 값을 처음에 보여지는 이미지로 전달했다.버튼에

내가 만들고 싶은 기능은 더보기 메뉴 클릭 시 팝업창이 나타나며 x 아이콘을 누르거나 빈 화면 클릭 시 창이 없어지는 기능이다.더보기 아이콘 클릭 시 팝업 창 토글 기능x 클릭 시 화면이 닫히는 기능빈 화면 클릭 시 화면이 닫히는 기능(어렵고 중요⭐⭐⭐)

여러 데이터 값이 들어갈때는 배열 안 객체 형태로 저장, 공통된 키 선언{배열.map((새로운배열,index) => ())} -> 순차적인 데이터 생성{ a === "A" II b === "B" ? () : c === "c" ? () : null } // 중첩된 삼항

이번에 구현할 기능은 더보기 클릭 시 해당 데이터가 나오는 구조!일단 클릭 시 다른 컴포넌트로 이동하기 때문에 새 컴포넌트인 requestPopUp.js를 생성하고 App.js에 등록한다.여기에 등록하지 않으면 useNavigate로 해당 컴포넌트 이동이 불가능하다!c

목표1\. 프로필 유효성 검사2\. 미리보기 이미지 표시useForm - 리액트에서 제공하는 간편한 유효성 검사 기능시작하기유효성 검사 부분 작성자세한 설명 참고https://www.notion.so/Sign-up-js-1702cfe07323808289f3df

만들어야 할 기능 - select 안 옵션 다중 선택과 선택 시 해당 옵션이 옆으로 배치되게 설정하기다중 배치하는 방법은 select multiple={true} 로 설정하면 되지만나처럼 옵션이 옆으로 나열되게 하려면 이 방식으로 디자인하기 복잡했다.분명 이런 기능을

회원가입 시 구글, 카카오, 네이버 API를 가져오는 것은 마무리 했고 이제는 유효성 검사와 중복확인 로직을 구현할 차례이다.유효성 검사는 리액트에서 자주 사용하는 react-hook-form을 활용하였다.기본 속성 참고https://www.notion.so/

일반적인 axios 대신, 직접 만든 커스텀 Axios 인스턴스를 import해서 사용하는 방식으로 아래와 같은 이점이 있다.우선 프로젝트에 기본적으로 필요한 부분만 작성하였다.

⭐ 커스텀 훅을 만든 뒤 App.jsx에서 감싸줘야 하는게 포인트

이번에는 로그인 / 로그아웃 상태 관리와 헤더에 로그인 시 로그아웃이 뜨고 로그아웃 일 시 로그인 버튼이 보여지도록 하는 과정을 구현할 예정이다.user, setUser은 유저정보 업데이트 로직인데 그러면user가 login이고 setUser는 logout이 아닐까 생

우선 내가 만들 기능은 하트 버튼 클릭 시 좋아요가 눌리는 기능이다.전체적인 구성을 보면 일단 구조가 같은 형태의 UI가 반복이 되고 있기 때문에 이 역시 map 메서드를 통해 코드를 간략화하였다.위와 같이 작성하면 코드가 훨씬 간결해지고 유지보수도 용이해진다.그리고

지금 내가 만들어야 하는 구조는 인기있는 모임 아래에 전체 모임이 나오게끔 배치하는 구조이다. 그래서 지난번에 작성한 코드를 토대로 밑의 전체 모임도 코드를 구성해보면이런 식의 구성이 나오는데 onClick함수도 그렇고 return 아래에 짜여지는 코드도 비슷한 구성이

make circle 부분에 axios 요청을 할 계획이다.간단하게 로직을 살펴본다면 form 안의 submit 버튼 클릭 시 폼이 제출되면서 데이터가 백엔드 서버에 전달이 되는 것이다.우선 가장 먼저 해야할 것은?버튼 클릭 시 폼이 제출되도록 폼의 함수이벤트와 버튼의