전체 글

리액트 기반 세로로 배치된 5개의 이미지들을 사용자가 스크롤함에 따라서 나타나도록 애니메이션을 구현해봅시다~!먼저 리액트에서 애니메이션을 구현하는 방법은 다양하게 존재하지만, 외부 라이브러리를 사용하지 않는 방법과 기본 API만 사용하는 방법을 포함해 총 3가지로 구현해보았습니다. Result깃허브 링크: https://github.com/abyss-s/react-scroll-animation배포 링크: https://react-scroll-animation-orcin.vercel.app/ 1. IntersectionObserverIntersectionObserver는 순수 JavaScript API로, 라이브러리에 의존하지 않고도 스크롤 애니메이션을 구현할 수 있습니다. Intersection Obse..

Spring Boot 개발환경 설정, 포스트맨 테스트 & 깃 관리 정리유레카 미니 프로젝트 진행 전, 개인 공부를 위해 작성한 자료입니다. 스프링부트란?Spring Boot는 스프링 프레임워크의 복잡한 설정을 단순화하여 빠르고 효율적인 애플리케이션 개발을 가능하게 하는 프레임워크입니다. 주요 특징은 다음과 같습니다:자동 설정(Auto Configuration): 애플리케이션 실행 환경에 맞게 필요한 설정을 자동으로 구성해줍니다.독립 실행형 애플리케이션: 내장 톰캣, 제티 등 웹 서버를 포함하여 별도의 서버 설치 없이 애플리케이션을 실행할 수 있습니다.프로덕션 친화적 기능: 모니터링, 로깅, 보안 등 프로덕션 환경에 필요한 다양한 기능을 제공합니다.개발환경개발환경에 따라 설정 방법에 차이가 있을 수 있으니..

MySQL PID 오류 해결 방법 (Homebrew 설치 기준) 스프링부트와 데이터베이스 연동 실습을 혼자 해보려고 mysql 서버를 켰는데 갑자기 먹통이 되더니 ERROR! The server quit without updating PID 에러가 발생했습니다.구글링을 통해 찾아보았더니 전부 mysql을 재설치해보는게 베스트라고 해서 진행했지만 또 에러...😳아무래도 이미 실행중인 서버가 있었는데, 캐시가 남아있거나 뭔가 충돌이 발생한 것 같습니다.재설치해도 소켓파일이 꼬인 모양을 볼 수 있습니다..이런 경우 그냥 모든 쓰레기 파일을 날리고 다시 받아야 합니다. 1. MySQL 프로세스 종료Homebrew로 설치한 경우brew services stop mysql 2. MySQL 관련 파일 삭제설치 경로..

Next.js 강의를 수강하던 도중 다음과 같은 에러가 발생했습니다. Error: Route "/movies/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at MovieDetail (src/app/(movies)/movies/[id]/page.tsx:6:10)  강의 내용과 버전차이가 있어서 발생한 문제로 파악되어 공식문서를 참고했습니다.주어진 오류는 params를 비동기적으로 처리해야 한다는 것을 의미합니다.  경고 발생 원인코드 내에서 동적 렌더링을 사용하는 API에 접근할 때 발생합니다.이는..

문제https://www.acmicpc.net/problem/7453  개념투포인터, 이분탐색, 해시맵  구현 코드(JavaScript)const fs = require('fs');const input = fs.readFileSync('/dev/stdin').toString().trim().split('\n');const n = +input[0];const lines = input.slice(1).map((li) => li.split(' ').map((i) => +i)); const map = new Map();for (let i = 0; i    코드 설명4개의 열(column)을 가진 n x 4 크기의 행렬이 주어졌을 때 A[a]+B[b]+C[c]+D[d]=0이 되는 쌍, 즉 조합 개수를 찾는 문제입..