안녕하세요! 저는 얼마 전 reflow와 repaint를 공부했습니다.그리고 저는 알아차렸습니다.저의 과거 프로젝트에서 이것을 간과하고 진행했다는 것을.. 그래서 이번에 수정해보고, 얼마나 개선되는지 직접 확인해보고 싶고, 그걸 확인하려면 뭘 해야 하는지도 몰랐던 저였기에이젠 알아보고자 했습니다. 1. 프로젝트 소개https://github.com/yewon-saurus-mini-project/air-hockey-app GitHub - yewon-saurus-mini-project/air-hockey-appContribute to yewon-saurus-mini-project/air-hockey-app development by creating an account on GitHub.github.com 먼..

1. Docker Compose란?Docker Compose is a tool for defining and running multi-container applications. It is the key to unlocking a streamlined and efficient development and deployment experience. Docker Compose는 '다중 컨테이너 애플리케이션'을 정의하고 실행하는 도구입니다. 간소화되고 효율적인 개발 및 배포 환경의 핵심적입니다. YAML 파일을 작성하여 서비스, 네트워크 및 볼륨을 쉽게 설정하고 관리할 수 있습니다. production, staging, development, test, CI workflow 등 모든 환경에 대한 작업을 수행합니다..

1. 문제 상황과거의 프로젝트를 리팩토링 해보려고 오랜만에 열어본 참이었습니다.아니.. 그런데 말이죠만족스럽게 동작하던 스크롤 이벤트가 제대로 동작하지 않는 것이 아니겠습니까?? 정확히는.. 스크롤을 이동시키는 것까지는 잘 해주는데,{ behavior: 'smooth' }가 적용되지 않은 모습이었습니다. ✅ 의도한대로 동작하는 모습 ✅❌ 문제 관측 상황 ❌ 2. 해결https://stackoverflow.com/questions/62098093/scroll-behaviour-smooth-not-working-at-all아마 저와 같은 문제를 겪으신 모양입니다.. 그리고 제가 시도한 부분은 바로 이것 Windows 설정 > 접근성 > 애니메이션 효과를 살펴봐야 했습니다.이게 꺼져있더군요^^켬 으로 전환하니..

안녕하세요!! 이번에는 에어 하키를 구현하기 위해 꼭 필요했던 로직을 기록해 보겠습니다. HTMl 요소 간 충돌을 감지하고, 충돌 발생시 이어서 적절한 로직을 수행하도록 했습니다. 그 상세한 로직 수행 내용을 적어보자면,puck과 스테이지 벽 간 충돌 시 - puck이 벽으로부터 튕겨져 돌아오도록 처리puck과 paddle 충돌 시 - puck이 paddle로부터 튕겨져 나가도록 처리puck과 goalPost(골대) 충돌 시 - ⓐ 어느 쪽 골대에 충돌했냐에 따른 점수 카운트 처리 + ⓑ puck 위치 초기화 + ⓒ 카운트다운 재시작라는 부분에서 적극! 활용되었습니다. 해당 로직을 구현하기 전 구글링을 통해 레퍼런스를 수집해 보니, MDN이나 다른 개발자분의 블로그에서도 확인할 수 있었습니다. (최하단 ..

안녕하세요.. 이번에는 Next.js, Node.js 프로젝트에서 Socket.IO를 사용한 웹 소켓 실시간 통신 내용을 복기해 보겠습니다. 이 프로젝트에서는 다음 부분에서 Socket.IO 웹 소켓 통신을 사용했습니다.게임방 목록 조회게임방 생성 (목록 추가)게임방 입장 (목록 삭제)게임 진행 중각자 paddle 위치 동기화puck 위치 동기화점수 동기화카운트다운 동기화 1. Socket.IO 설치 (1) Node.js 프로젝트 - socket.io 설치npm install socket.io (2) Next.js 프로젝트 -  socket.io-client 설치npm install socket.io-client 2. Socket.IO 사용 (예시)(1) Node.js 프로젝트간단하게 확인하기 위해, 방..

안녕하세요! 이번에는 Next.js에서 모달(팝업) 창을 구현했던 내용을 복기해 보겠습니다.. 이 프로젝트에서는 다음 부분에서 모달이 필요했습니다.이런 식으로 ⓐ 방 생성 시 방 설정 form, ⓑ 비밀방 참가 시 비밀번호 입력 form을 모달로 띄워주고 싶었습니다. 구글링 해보니, Next.js 14 버전에서는 모달 창을 쉽게 띄울 수 있는 방법으로 '패러랠 라우트'와 '인터셉트 라우트'라는 기술을 사용하는 방법이 가장 먼저 보였습니다. ....그런데 저는  `showModal` 상태를 두고, 이 상태가 true냐 false냐에 따라 모달이 나타나고 사라지도록 하는 고전적인(..) 방법으로 구현했습니다. ....Next.js와 TypeScript를 처음 써보면서 컴포넌트 만들기에 익숙해지고 싶었습니다!..