목록2024/10 (4)
EtoC
연습문제 페이지를 다만들었고 다풀었을때 보여줄 완료 페이지를 만들려고 한다.자격증 이미지를 띄우고 돋보기 추가해볼까 하다가 뭔가 연관되는게없다는 생각이 들어서폭죽을 터뜨리는 것으로 바꾸었다. 그런데 검색해보니 정말 다양한 폭죽 라이브러리가 있었다. 내가 선택한 방법은 react-confetti 라이브러리이다.라이브러를 사용하지않고 Vector와 Class 를 사용한 폭죽을 구현해보고싶었지만,다른작업이 많이 남아있기에 가장 빠르게 할 수 있는걸 선택했다. react-confettiReact component to draw confetti for your party.. Latest version: 6.1.0, last published: 2 years ago. Start using react-confet..
연습문제페이지를 북마크까지 연결하고나니 시각적인 효과를 좀 더 주고싶어졌다간단하게 스크롤 효과를 주고싶어 AOS 스크롤 라이브러리를 사용했다.npm i aos 설치해주고 버튼클릭시 문제id가 변동될때마다 효과가 새로 발생하도록 설정하였다.import AOS from 'aos';import 'aos/dist/aos.css'; const [animation, setAnimation] = useState("fade-right"); useEffect(() => { AOS.init({ duration: 1000, }); AOS.refresh(); }, [currentIdx]);const handleNextQuestion = () => { if (currentIdx { if (cu..
기능이 잘 작동되어서 몰랐는데 개발자 모드를 열었더니알 수 없는 경고문들이 가득한 콘솔창이 날 반겨준다. [경고문 원인]HTML의 기본요소는 내가 커스텀한 props들을 알지못하는데 DOM으로 직접 전달되서 발생한 경고문이다.경고문이라서 그냥 넘어갈까 했는데 나중에 팀원이 콘솔창 열었다가 기겁할거같으니 내가 해결해야지 😇다행히 읽어보니 해결방법이 설명되어있다. const CustomRadio = styled.span` width: 2rem; height: 2rem; display: flex; justify-content: center; align-items: center; margin-right: 0.5rem; color: ${({ isChecked, isCorrect, isWrong ..
팀원이 OAuth 로그인과 Spring Security 설정을 하고 main 브랜치에 merge했다는 연락을 받았다.집에와서 나도 form 로그인과 회원가입을 구현하는데 다양한 문제가 발생해서 기록해본다.0. 데이터베이스 설정 누락 및 칼럼 없음브라우저에서 회원가입하는데 500 에러가 발생했다.인텔리제이를 열어보니 DB 연결 설정이 없다고하고 application.yml 파일이 사라져있었다.git에 시크릿키랑 DB 정보가 그대로 노출되서 Git 캐시를 삭제하고, 다시 커밋 후 푸시& 풀 을 하면서 파일이 날아간거같다.다시 yml 파일을 재생성.Error starting ApplicationContext. To display the condition evaluation report re-run your ..