본문 바로가기

전체 글125

Module not found: Error: Can't resolve 'react-dom/client' in '경로' React downgrade시 나타나는 오류 client는 React 18 version에서 사용하기에 오류 발생 [해결 방법] 1. index.jsx (or tsx) 파일의 import를 수정한다. import ReactDOM from 'react-dom/client' 를 import ReactDOM from 'react-dom' 으로 수정한다. 2. DOM Render 코드를 수정한다. 위의 코드가 React 18 버전 render 부분인데 16 버전인 아래로 변경해준다. 2022. 6. 5.
react AOS 사용법 저번 시간에 포스팅 했던 Animation.css와 비슷한 AOS 사용법을 알아보도록 하자. 먼저, AOS를 설치한다. yarn add aos AOS는 특이하게 useEffect를 사용한다. 따라서 useEffect를 import 해준다. import React, {useEffect} from 'react' ; 그리고 AOS를 import 해준다. import AOS from 'aos'; import "aos/dist/aos.css'; 이제 useEffect를 적어준다. useEffect(() => { AOS.init({ duration: 1500, }); }) 이제 효과를 적용해보자. 페이지를 보면 요렇게 박스가 나온다. 원하는 효과가 있다면 data-aos 부분을 복붙해서 원하는 요소에 붙여넣어보자... 2022. 2. 9.
react Animate.css 사용법 CSS를 이용한다면 다양한 애니메이션 효과를 구현할 수 있다. 그런데 시간도 없고 귀찮다면 어떻게 할까? Animate.css를 사용해보자. https://animate.style/ Animate.css | A cross-browser library of CSS animations. Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints. animate.style 나는 react에서 사용하려고 한다. 먼저, 설치를 해준다. npm 설치 npm install an.. 2022. 2. 3.
11399 ATM node.js https://www.acmicpc.net/problem/11399 11399번: ATM 첫째 줄에 사람의 수 N(1 ≤ N ≤ 1,000)이 주어진다. 둘째 줄에는 각 사람이 돈을 인출하는데 걸리는 시간 Pi가 주어진다. (1 ≤ Pi ≤ 1,000) www.acmicpc.net 인하은행에는 ATM이 1대밖에 없다. 지금 이 ATM앞에 N명의 사람들이 줄을 서있다. 사람은 1번부터 N번까지 번호가 매겨져 있으며, i번 사람이 돈을 인출하는데 걸리는 시간은 Pi분이다. 사람들이 줄을 서는 순서에 따라서, 돈을 인출하는데 필요한 시간의 합이 달라지게 된다. 예를 들어, 총 5명이 있고, P1 = 3, P2 = 1, P3 = 4, P4 = 3, P5 = 2 인 경우를 생각해보자. [1, 2, 3, 4, 5].. 2022. 1. 2.
1931 회의실 배정 node.js https://www.acmicpc.net/problem/1931 한 개의 회의실이 있는데 이를 사용하고자 하는 N개의 회의에 대하여 회의실 사용표를 만들려고 한다. 각 회의 I에 대해 시작시간과 끝나는 시간이 주어져 있고, 각 회의가 겹치지 않게 하면서 회의실을 사용할 수 있는 회의의 최대 개수를 찾아보자. 단, 회의는 한번 시작하면 중간에 중단될 수 없으며 한 회의가 끝나는 것과 동시에 다음 회의가 시작될 수 있다. 회의의 시작시간과 끝나는 시간이 같을 수도 있다. 이 경우에는 시작하자마자 끝나는 것으로 생각하면 된다. 예제 입력 1 복사 11 1 4 3 5 0 6 5 7 3 8 5 9 6 10 8 11 8 12 2 13 12 14 예제 출력 1 복사 4 1. sample을 배열 형태로 담아주기 힌트.. 2022. 1. 2.
자잘한 오류 수정과 배포 오늘 한 내용 자잘한 오류들 해결 배포 https://3tamp.netlify.app 오늘 배운 내용 배포 전 yarn build를 하고 build 폴더를 deploy해야 흰 화면으로 배포되지 않는다. 소감 드디어 모든 프로젝트가 끝났다. 제일 완성도 있는 프로젝트였는데 다른 프로젝트들에 비해 오래 걸리지 않았던 것 같다. 그만큼 나의 실력이 향상 됐다는 것일까? 그래도 부족함을 많이 느꼈던터라 자만하지 말고 열심히 공부하자. 앞으로 만들고 싶은 프로젝트가 많이 남았다. 여태까지는 한단계 발전한 느낌으로 프로젝트를 나름대로 업그레이드하고 있었다. 근데 이제는 코드를 더 깔끔하고 효율성있게 짜는 프로젝트로 나가야하는 것인지 고민이 된다. 아직 아무것도 모르면서 하는 고민 같기도 하지만... 다음 프로젝트는.. 2021. 12. 30.

티스토리툴바