이정환 선생님의 한입 크기로 잘라먹는 리액트 강의를 다 듣고 프로젝트에 있던 감정 일기장을 응용해서 만들 수 있는 것 찾다가 독후감 사이트?를 만들기로 했다   2024.08.07 - [react] - [react] kakao 책 검색 api 사용하기2024.08.07 - [react] - [react] Datepicker 사용하기  kakao api를 사용해 검색을 하면 원하는 책의 내용을 가져오고 날짜부분은 datepicker를 사용했다. 기존 html, js 환경에서 kakao 지도 api를 썼을 때는 이렇게 헷갈리지 않았는데 react는 따로 설치해야하는 npm들도 있어서 더욱 어렵게 느껴진 것 같다. 일기장 프로젝트를 응용하는 부분에서 책 내용과 별점, 날짜부분 등을 추가하다 보니 생각보다 구현..

다양한 달력 라이브러리가 있지만 그 중에서도 많이 사용하고 있는 datePicker를 사용해 보려고 한다  설치//npmnpm install react-datepicker --save//yarnyarn add react-datepicker   설치가 끝났으면 파일에 import 한다import DatePicker from 'react-datepicker';import 'react-datepicker/dist/react-datepicker.css';   아래 코드를 적용하면 const [selecedDate, setSelecedDate] = useState(new Date()); setSelecedDate(new Date(date)}/>   이와 같이 나온다   한국어로 설정하고 싶을 때는 아래 np..

Kakao API을 사용하기 위해서는 REST_API_KEY 를 알아야하는데 https://developers.kakao.com/ 에 로그인을 하고 내 어플리케이션을 등록한 후 앱키에 들어가면 정보를 알 수 있다.   서버와 데이터를 주고받기 위해서는 HTTP통신을 해야하는데 react에는 HTTP client 내장 클래스가 없어 Axios를 설치해야 한다. npm install axiosyarn add axios  적용 코드 ↓ ↓ ↓import axios from 'axios';import './App.css';import {useState } from 'react';function App() { const Kakao = axios.create({ baseURL: 'https://dapi..

react 연습을 하던 도중 문득 배포를 해보고 싶다! 해서 적어보는 react 배포하는 방법  1. 깃허브 로그인을 하고 위에 버튼을 누른다.   2. 나는 하위 파일을 만드는거라 그냥 파일 이름을 적었지만 그게 아니라면 파일이름.github.io를 적고 버튼들을 클릭하고 생성한다.   3.  settings -> Pages에 들어가서 Branch를 main으로 바꾸고 sava를 해주면 5-10분 사이에 사이트가 따란-! 만들어진다.   4. 이제 작업중인 파일에 패키지를 설치해줘야한다. npm install gh-pages  5. 패키지 설치가 끝나면 package.json 파일로 들어가서 아래 부분을 추가한다. "homepage": "만들어진 사이트 URL", "scripts": { "pred..

react 내 font를 적용해주겠다. 1. 다운로드 받은 폰트를 src/fonts/에 넣어준다. @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 100; src: url("./Pretendard/Pretendard-Thin.otf") format("opentype");}  2. font.css 파일을 만들어 파일을 선언해 준다.  3. 최상단 파일인 index.js & index.tsx파일에 font.css파일을 적용해준다.  4.폰트를 사용할 css에 font-family를 적용해주면 된다.