분류 전체보기 (135) 썸네일형 리스트형 react-confetti로 폭죽 효과 만들기 연습문제 페이지를 다만들었고 다풀었을때 보여줄 완료 페이지를 만들려고 한다.자격증 이미지를 띄우고 돋보기 추가해볼까 하다가 뭔가 연관되는게없다는 생각이 들어서폭죽을 터뜨리는 것으로 바꾸었다. 그런데 검색해보니 정말 다양한 폭죽 라이브러리가 있었다. 내가 선택한 방법은 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 이벤트가 처음 렌더링 시에만 작동하는 문제 연습문제페이지를 북마크까지 연결하고나니 시각적인 효과를 좀 더 주고싶어졌다간단하게 스크롤 효과를 주고싶어 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.. Styled-components: DOM에 전달되는 prop 경고 없애기 기능이 잘 작동되어서 몰랐는데 개발자 모드를 열었더니알 수 없는 경고문들이 가득한 콘솔창이 날 반겨준다. [경고문 원인]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 .. Java file outside of source root 삼성노트북으로 작업하던 프로젝트를 맥에서 하기위해 git에서 레포지토리를 클론하고 intellij에서 폴더를 오픈하였다.아무리 찾아봐도 Run 버튼이 보이지 않았는데 파일 이미지가 이상하게 보였다.0110..일단 마우스를 올려보니 java file outside of source root 라면서 main 클래스가 실행되지 않는다. 다 맞게 들어가 있는데..뭐가문제인거지검색해보니 가장 쉬운방법이 root directory에 맞춰서 프로젝트를 다시 열어주면 된다는데 나는 아무일도 일어나지않았다.gradlew reload도, clean후 build도 똑같았다.원인 : Spring Boot 애플리케이션 실행 설정 ❌파일의 프로젝트 구조에 들어가서 확인해보니 SDK부터 모듈까지 전부 설정이 되어있지않았다. SDK.. 사용하지않는 Jenkins 종료 및 삭제 포트폴리오를 만들어야해서 이전에 했던 프로젝트를 실행하니 아래와 같이 떴다. CLI로 종료해도 계속해서 자동으로 실행된다.ᐅ lsof -i TCP:8080COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAMEjava 4501 sj 9u IPv6 0x15... 0t0 TCP localhost:http-alt (LISTEN)ᐅ kill -9 4501ᐅ lsof -i TCP:8080COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAMEjava 44362 sj 9u IPv6 0x9a4... 0t0 TCP localhost:h.. 비동기 일부 요청 실패 문제 : 해결(Promise.allSettled()) 평소 잘 뜨던 학생대쉬보드 페이지가 다른 계정으로 접속하니 유튜브 API를 활용한 요소만 랜더링되고 나머지는 아무것도 뜨지않았다.코드 정리를 한다고 axios 요청을 하나로 다 묶어버렸는데, 이게 문제가 된거같다. 코드를 확인해보니 확실히 가장 첫번째 fetch 요청이 실패해서 나머지 요청을 실행하지 않는거였다.신규 회원이 가입했을경우 최근에 본 강의가 없어서 빈값이 들어왔을때 요청이 실패하는거라는 생각이들었고,각 요청별로 예외처리를 하지않아서 줄줄이 실패하는 듯.더보기 왜 비동기 요청인데 첫번째 요청이 실패하니까 나머지도 호출이 안되나?- async/await 비동기 코드를 동기코드처럼 작성할수 있어서 자주사용하고 있었는데, 잘 모르고 사용하고있었다.- await을 사용하면 비동기 작업중 어딘가에서.. 게시판 상세페이지 접속시 자동 글 삭제 오류 게시판에 글을 작성하고 접속하면 반짝하더니 작성된 글이 사라지는 문제가 발생했다.아니 왜 자꾸 지워지는거지; 조건문도 달아보고 함수도 바꿔보고 했지만 Delete 함수를 아예 호출도 안한다.호출하기도 전에 지워져버리니 호출할 글이 없어서 페이지 자체가 존재하지않으니까 작동을 안하는거같다.어딘가에서 페이지가 접속할 때 자동으로 지우는거같은데..반짝하고 지우는게 useEffect와 관련이 있을거같다.확인해보니 AxiosDelete가 useEffect로 url이 변경될때마다 실행되도록 되어있었다. 기존의 코드import { useState, useEffect } from "react";import axios from "axios";const useAxiosDelete = (url) => { const [l.. [spring Boot] 403이 뜬 이유 모음 강사가 공지를 등록 api 를 작성하였는데 자꾸 403이 떴다. 1. 서버를 안켜서403 forbidden이 서버를 안켜서 나는 오류였다는거보다 내가 서버를 안키고 이러고있었다는데서 한번 충격. 2. curriculum이 없다고 403 forbidden이 떴다.token에 포함된 username을 이용해서 curriculum을 가져오도록 api를 작성하였는데 왜 없다고 뜨는걸까.../Users/sj/Desktop/homeLearn/Home-Learn/src/main/java/project/homelearn/controller/teacher/board/TeacherBoardController.java:27: error: cannot find symbol .orElseThrow(.. [NCP] Redis Redis 서버를 생성하기에앞서 우선 fconfig group을 먼저 설정해야한다. config group을 설정하였다면 다시 redis server탭으로 이동하여 redis server를 생성한다. config가 없다면 config-group에서 생성된 config가 Redis version과 맞는지 확인해보자.BACKUP 설정을 체크하고 파일보관기간 7일, 백업수행시간을 자동으로 설정하고 서버를 생성한다. 완전형 DB의 경우 생성된 후 자동으로 ACG규칙이 생성된다.규칙보기를 눌러보면 자기자신만을 허용하는 것을 확인할 수 있는데, 여기서 추가로 허용해줄와 접근허용해줄 규칙을 설정해줘야 거부가 나지않는다. ACG 설정에서 port 허용해주기 ACG 설정에 들어가서 설정을 해주자.접근소스의 경우 허.. Youtube API 사용하기 LMS 가 팀프로젝트의 주제로 정해졌다.AI, Compiler, 동영상 API, Three.js 같은 새로운 기능을 시도해보자는 이야기가나왔다.AI, Compiler 모두 재밌어보이는데 팀장님이 동영상 API를 맡기시며 이렇게 말했다 "저는 믿어요 이제. 저번 프로젝트때...아무튼 엄청난 칭찬의 말"흐어어 부담감이..! 하지만 이번에도 어떻게든 되겠지! 0. 생각 정리1. 어떤 동영상 API를 쓸까? => 고민할 필요도 없이 회의때 Youtube로 만장일치2. Youtube에서 원하는 기능을 구현 할 수 있을까? 1. 프로젝트 생성하기 Google 클라우드 플랫폼로그인 Google 클라우드 플랫폼으로 이동accounts.google.com저는 새로운 프로젝트이기때문에 프로젝트 만들기를 선택한다... [NaverCloud]젠킨스 도커에 설치 IF ) 이전에 생성된 파일이 있다면 삭제하는 방법CI/CD를 여러번 해보면서 파일들이 많이 생성되었는데 이 파일들때문에 에러가 나는것같았습니다.파일들을 지워보고 생성했던 코드를 적어보았습니다. 더보기# 경로에서 지울경우 rm -r 폴더명# docker_projects/폴더명/project안에 있는 파일 강제 삭제sudo rm -rf /docker_projects/폴더명/project# docker_projects/폴더명/project 디렉토리 생성sudo mkdir -p /docker_projects/폴더명/project# docker_projects/폴더명/project로 이동cd /docker_projects/폴더명/project1. 젠킨스를 도커에 설치 (CI/CD)Jenkins의 기본 포트는 .. [NaverCloud] 원격접속에서 도커 우분투에 설치 0. 네이버 클라우드로 서버 만들기공인 IP가 필요하기때문에 서버를 먼저 생성합니다.서버가 있다면 mac은 terminal로, window는 MobaXterm을 실행해줍니다.1. ssh 원격 접속하기서버에 접속하기위해 네이버 클라우드에서 생성한 서버의 동적 IP 주소를 조회합니다. 2. 동적 IP 주소를 입력해서 서버에 접속합니다.# 띄어쓰기 주의하자! ex)ssh root@223.130.135.142ssh root@동적IP주소 더보기ssh root@IP주소The authenticity of host 'IP 주소 (IP 주소)' can't be established.ED25519 key fingerprint is SHA256:39bKpXlSglql3j2trisE9z2MiYo5484BFYCZ4c/uCf.. [NaverCloud] server 만들기 0. 모바엑스텀 설치하기window 운영체제의 경우 원격에 접속하기위해 mobaXterm이 필요합니다.아래의 주소에서 다운로드 후 설치해주세요.MobaXterm 다운로드2. 서버 생성하기네이버 클라우스 플랫폼의 serverserver를 만들기에 앞서 네트워크가 필요하기때문에 VPC를 먼저 설정해줍니다. 1) VPC 생성하기 VPC와 Subnet더보기vpc는 zone과 상관없이 생설할 수 있다.하지만 subnet은 zone 안에 생성되어야한다.subnet은 동일한 zone에 여러 subnet이 생성 가능하다. public subnet은 서버만 윈치시킬 수 있으면 서버에 공인 IP를 부여할 수 있다.private subnet은 서버 혹은 로드밸런서를 위치시킬 수 있다. VPC가 생성되면 subnet Mana.. Docker 자바 2차 프로젝트를 들어가기에 앞서 각자 Docker에 대해 공부해오기로했다.도커에대해서 많이 들은 말을 정리해보면가상화 기술로 컨테이너 가상화 방식이다.도커 cli로 도커 이미지를 가상화한다.무중단 배포를 할 줄 알아야한다.이정도려나과연 여기서 내 지식이 얼마나 늘까 정리해본다.도커를 사용하는 이유도커가 등장하기 전, 회사에서는 각각의 다른 운영체제위에 vmware를 사용하여 가상머신으로 linux라는 공통의 컴퓨터를 생성하고 운영체제를 설치하여 사용하였다.이 경우 가상의 OS의 버전부터 설치할 프로그램의 버전까지 모두 맞춰야한다.하지만 컴퓨터안에 또다른 컴퓨터가 있다보니 실행되는 속도가 느리고 리소스를 많이 먹는 단점이있다.그래서 부팅 같은 운영체제의 핵심 기능(커널)을 공유하는 가상머신으로 DOC.. 애니리스트 페이지 - 장르 필터링 추가하기 애니메이션 페이지 최신순, 리뷰순 정렬도 다했고, 이제 검색 쿼리문 작성하고 프론트 페이지만 만들면 끝이였다.맡은일을 빠르게 끝내고 휴가를 하루 냈는데.. 휴가를 낸 날에 페이지 구성요소와 새로운 기능이 추가되었다.기존의 자유게시판은 따로 빠지고 장르별 필터링이 새롭게 들어왔다. 7월3일까지 다 해야하는데 힘내보자. 일단 장르를 선택할 수 있는 박스를 하나 만들었다.그리고 장르별로 무엇을 카테고리를 가져오고 애니 목록의 장르id들과 결합하여 장르별로 애니메이션이 보여지도록했다.장르 선택시 보여질 애니메이션 컨트롤let selectedGenres = [];function filterAnimations() { let animations = document.querySelectorAll('.ani-inf.. querySelectAll로 리뷰 수정하기 각각의 리뷰별로 수정 삭제 버튼이 뜨게 만들기는 성공했다.삭제는 reviewId 만 넘겨주면 됬기에 쉬웠는데문제는.. 수정하기... 음 어렵다 어려워..정렬된 순서의 index를 사용해서 그 review를 수정되도록 하려고 했는데0번째 인덱스만 제대로 선택되고 나머지들은 알수없는 순서의 리뷰에 수정영역이 생성되는것을 확인했다. 0}" > BEST --> 수정 삭제 .. JPA enum 에러 새벽에 JPA 를 어느정도 이해했다고 생각헀는데 또 에러가 났다. AnimationRating enum에 정의되지 않은 값이 데이터베이스에서 조회되어 발생했다고 한다. //Animation.java@Entity @Getter @Setterpublic class Animation { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; private String name; private String author; @Lob private String description; @Enumerated(EnumType.STRING) private AnimationRating rating; .. JPA-애니 리스트 조회하기 간단하게 JPA를 공부해보고 바로 적용해보는데 에러가 발생했다.org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'animationRepository' defined in hello.repository.AnimationRepository defined in @EnableJpaRepositories declared on JpaConfig: Could not create query for public abstract java.util.List hello.repository.AnimationRepository.findAnimations(); Reason: Validation failed for query .. ERROR! The server quit without updating PID file JPA의 기본적인 사용법을 공부하면서 POST 요청을 보냈는데 mysql에서 에러가 난다고 떴다.팀원이 mysql을 켜지않은거 아니냐고해서 '그럴리가..'라며 서버를 다시 켜봄.mysql.server start근데 아래와 같은 오류가 발생하였다../opt/anaconda3/bin/mysqld_safe: line 647: /opt/anaconda3/data/Kims-2.local.err: Permission deniedLogging to '/opt/anaconda3/data/Kims-2.local.err'.The server quit without updating PID filePID가 업데이트 되지않은채 서버가 종료됬다는게 무슨말이지..?kill -9 pid로 사용중인 mysql을 종료해봤는데 종료가 .. lombok 에러 및 설치 윈도우 노트북에서 m1 맥북으로 바꿨더니 로그인이 되지않는 문제가 발생했다. Authentication authentication = SecurityContextHolder.getContext().getAuthentication(); MemberUser memberUser = (MemberUser) authentication.getPrincipal(); //principal: "누구"에 해당하는 정보 -> 객체타입은 UserDetails :pw,id,auth SecurityContextHolder.getContext().setAuthentication (createAuth(authentication,memberUser.getMember().g.. Java - 입/출력 + 예외 Java에서 파일과 스트림(Stream)은 데이터를 저장하거나 읽고 쓰는 작업에 중요한 역할을 한다.1. File파일은 컴퓨터의 저장 장치(디스크)에 데이터를 영구적으로 저장할 수 있는 구조이다.어떤 소프트웨어로 생성한 데이터를 저장하면 데이터 파일이 생성되고 그 파일을 읽을 수 있다.파일은 크게 텍스트 파일(사람이 읽을 수 있음)과 바이너리 파일(사람 못 읽음)로 나뉜다.예: java 프로그램(텍스트파일), 텍스트파일을 컴파일한 파일(바이너리 파일) Java에서는 파일을 읽고 다루기 위해 java.io 패키지와 java.nio.file 패키지를 제공한다. java.io.File파일 및 디렉토리를 표현하는 클래스파일의 존재 여부, 크기, 경로 확인, 삭제 등 메타 정보 처리에 사용한다.import ja.. fetch와 pull git bash만 사용하던 나에게 eclipse의 GUI로 commit, pull, merge하는게 낯설었다. pull도 push 도 뭔가 2개씩 있다.myPage 브랜치를 merge하고 main에 받아왔는데 이걸 어떻게해야 MainPage 브랜치에 가져올 수 있더라..기억나는대로 원격저장소에서 pull을 눌렀는데 아무일도 일어나지 않았다. 값자기 생각이나지않아서 쭉 둘러보는데 fetch가 보였다.git fetch는 원격저장소에 변경사항의 유무를 확인하고, 변경된 데이터를 로컬로 가져오지는않는다. fetch후 다시 pull을 하니 변경된것을 확인! 아직까지는 git bash가 좀더 편한거같다 Java - 연산자 1. 산술 연산자수학처럼 계산에 사용되는 연산자를 말한다.연산자설명예시의미+ 더하기a = b + ca에 b+c를 대입한다-빼기a = b - ca에 b-c를 대입한다*곱하기a = b * ca에 b*c를 대입한다/나누기a = b / ca에 b/c를 대입한다 %나머지a =b % ca에 b/c의 나머지를 대입한다2. 대입 연산자 (=)변수에 값을 대입하는 연산자이다.연산자설명예시의미=변수에 값을 대입a = a +b변수 a에 a+b의 결과를 대입한다+=더한 값을 대입a += b변수 a에 a+b의 결과를 대입한다-=뺀 값을 대입a -= b변수 a에 a-b의 결과를 대입한다*=곱한 값을 대입a *= b변수 a에 a*b의 결과를 대입한다/=나눈 값을 대입a /= b변수 a에 a/b의 결과를 대입한다%=나머지를 대입a.. 이전 1 2 3 4 ··· 6 다음
