원하는 기능은 검색창에 아이디를 입력시 해당 아이디를 가진 사용자가 뜨게 하는것거기에 연관 검색 기능까지 추가하여 '김'만 쳐도 김씨 성을 가진 사용자가 뜰 수 있다. 또한 친구 추가 버튼을 누르면 초대 모달까지 뜨도록 구현 나는 검색창과 연관검색 부분을 따로 components로 빼서 구현했다. 1. input에 데이터를 저장, 전달, 검색하기 위한 useState 생성const navigate = useNavigate();    const [userInput, setUserInput] = useState("");     const [searchResults, setSearchResults] = useState([]);     const [invitedUsers, setInvitedUsers] = us..

먼저 src 폴더 아래에 fonts 폴더를 만들고 그 안에 woff 파일을 넣어줬습니다. import { createGlobalStyle } from "styled-components";export const GlobalStyle = createGlobalStyle` @font-face { font-family: 'Pretendard'; font-weight: 300; src: url('/assets/font/Pretendard-Light.woff') format('woff'); } @font-face { font-family: 'Pretendard'; font-weight: 400; src: url('/asset..

react-calendar 라이브러리는 React에서 캘린더 UI를 쉽게 구현할 수 있도록 도와주는 라이브러리이다.기본적인 날짜 선택 기능부터 커스텀 스타일링까지 다양한 기능을 제공한다. 진행중인 프로젝트에서 캘린더를 커스텀하여 작업할 일이 생겨서 처음으로 캘린더 라이브러리를 사용해보았다.처음 사용하며 공부했던 내용을 정리하려고 한다.혹시나 나처럼 처음 사용해보는 분들께 도움이 되길..! npm install react-calendar먼저 리액트 패키지를 설치한다 만들고싶은 캘린더 (+ 여러개의 날짜를 선택할 수 있어야 함)   이렇게 기본값만 적용시 뜨는 UI  import 'react-calendar/dist/Calendar.css'라이브러리가 제공하는 css styling 일단 숫자 뒤에 '..

💡 리액트가 관리하는 데이터 '상태' : state✔️리액트 훅html에서는 으로 선언하던 것과 달리 리액트에서는 로 선언function Resume(props) { let like = 0; function clickLike() { like += 1; console.log(like); } const myColor = props.color; const styleColor = {color:myColor}; return( {props.name} 자기소개서 {props.hello} 취미 : {props.hobby} 좋아하는 음식 : {props.food} ..

React Componentsfunction App() { const name = '라이캣!'; const someStyle = {backgroundColor:"black", color:"white"}; const today = new Date(); const year = today.getFullYear(); const month = today.getMonth()+1; const date = today.getDate(); const hour = today.getHours(); const min = today.getMinutes(); const sec = today.getSeconds(); return ( 안녕, {name} 1호 안녕, 라이캣 2..

React 란❓ 사용자 인터페이스를 만들기 위한 Java Script 라이브러리✨라이브러리 : 주어진 코드를 개발자의 필요에 따라 마음대로 고르거나 수정해서 사용 가능➡️ jQuery, React ✨ 프레임워크 : 구조와 규칙이 정의되어 있어서 개발자는 제시하는대로 익히고 따라야만 함 ➡️ Angular, Vue.js, Spring ✔️리액트의 특징- 사용자와의 상호작용에 도움을 줌- 브라우저의 성능을 높이는 작업- 컴포넌트 기반 (웹에서 UI를 구성하는 작은 단위, 구성한 컴포넌트 반복해서 사용이 가능) Component란❓ UI를 구성하는 작은 단위 JSX란❓ 자바스크립트 xml의 약자로 리액트에서 사용하는 특수한 문법- jsx는 html과 매우 유사하지만 다른 언어- js코드에서 마치 html태그를..