리스트를 누르면 좌측으로 슬라이드 되고 타이틀을 누르면 이전 리스트로 돌아오는 메뉴를 만들었다.    See the Pen Untitled by minkyung (@myosotis99) on CodePen.   애니메이션을 누르면 $title의 갯수와 -100을 곱해서 wrapper margin left에 줬다.  let $animate = function(){ let pos = $title.length * -100; $wrapper.style.marginLeft = pos + '%';}   li을 클릭하면 애니메이션이 실행되고 $title에 이전 타이틀에 텍스트가 담긴다.  for (let i = 0; i { //메뉴의 갯수가 title의 갯수 -1 과 같으면 리턴 ..

이정환 선생님의 한입 크기로 잘라먹는 리액트 강의를 다 듣고 프로젝트에 있던 감정 일기장을 응용해서 만들 수 있는 것 찾다가 독후감 사이트?를 만들기로 했다   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를 적용해주면 된다.

html을 doc파일로 다운로드 받고 싶을때 사용하는 방법이다var html = [];function export2doc(fileName) { html.splice(0); // header var static = { mhtml: { top: "\n\n_html_", head: "\n", body: "_body_" } }; //html var htmlInner = '내용'; html.push(htmlInner); var styles = ( `@page { mso-page-border-surround-header: no; mso-page-border-surr..

jsPdf를 사용하여 여러 pdf파일을 제작하였는데 나중에 까먹지 않기 위해 적어둬야겠다   https://github.com/parallax/jsPDF?tab=readme-ov-file GitHub - parallax/jsPDF: Client-side JavaScript PDF generation for everyone.Client-side JavaScript PDF generation for everyone. - parallax/jsPDFgithub.com 위에 사이트에 들어가서 라이브러리를 받아 사용하면 된다. cdn을 받아 사용해도 되는데 웬만하면 다운받아서 쓰는 걸 권한다.   [기본 사용법] new jsPDF("orientation", "unit", "format");orientation  '..

원래는 document 높이를 가져와서 스크롤을 했었는데 예시에서는 작동을 안 하길래 임시 컨테이너를 만들어 사용했다  window에 적용하려면 아래를 사용하면 된다. window.addEventListener('scroll',function(){ var progress = document.querySelector('.progreeBar') var windowTop = window.scrollY; var winHeight = window.innerHeight; var docuHeight = document.documentElement.scrollHeight; var scrolling = (windowTop /(docuHeight - winHeight)) * 100..