오늘 컨텐츠는 라이브 코딩, 테트리스 게임 만들기를 합니다. 시작부터 완성까지 바닐라JS로 만들어 나갑니다. 라이브 때 진행한 코드는 여기서 보실 수 있습니다. https://github.com/panarch/youtube 0:00:00 시작 전 토크 & 오늘 만들 게임 소개 0:15:24 시작 & grid를 이용한 전체 레이아웃 그리기 0:37:05 보드 cell 격자 배경 그리기 0:44:28 테트리스 블록 그리기 0:57:23 블록이 자동으로 아래로 떨어지게 만들기 1:03:36 블록이 바닥에 떨어지면 멈추게 만들기 1:08:20 블록을 쌓고 새 블록 생성하는 기능 만들기 1:14:44 좌,우,아래 방향키 조작 지원하기 1:21:10 위 방향키로 블록 회전 기능 구현하기 1:33:50 스페이스로 하드 드롭 기능 구현하기 1:41:03 꽉 찬 라인 지우는 기능 구현하기 1:54:07 라인 지워지는 애니메이션 구현하기 2:02:55 고스트 블록 기능 구현하기 2:11:49 점수 계산 구현하기 2:14:53 게임 시작 기능 구현하기 2:20:15 블록 둘 공간이 없을 때 게임오버 구현하기 2:25:11 게임오버 구현중 잠시 화면 멈춤 (제 모습, 채팅창, 목소리만 나옵니다ㅠ) 2:30:21 다음 블록 보여주는 queue 구현 시작 2:42:26 남은 시간 보여주는 프로그레스바 구현 2:50:35 데모 - 테트리스 게임 플레이 2:53:08 완성 후 토크

📌 채널 맴버쉽 가입 링크: https://www.youtube.com/channel/UCkspazgUKE-ezUXmKYlI3bA/join 00:00 서론 00:24 문제점 02:06 해결법 04:05 실습 06:58 인사 안녕하세요 여러분. 이번에는 여러분께서 생소하실 내용에 대해 한번 준비 해봤어요. 🥹 많은 분들이 nextjs를 사용하시고 배우시는데, 정작 nextjs 서버가 조금만 부하를 받으면, 얼마나 쉽게 터질 수 있는지 잘 감이 안오시는 거 같아 제작을 하게 되었습니다. (저도 제가 만든 프로젝트가 그렇게 쉽게 터질지 몰랐어요 ㅠ) 그리고 영상에서는 나오진 않았지만 부하 테스트로 최적화 하는게 트레픽을 더 많이 받을 수 있는 장점 이외에 하나의 장점이 더 있어요. 페이지의 응답 속도를 빠르게 하기 때문에 FCP, TTI와 같은 여러 웹 성능 지표를 올릴 수 있어요. 그래서 저는 시저와 멘토링 나라를 진행하면서 이러한 것들을 이용하여 포트폴리오를 더 개선하려고 했어요. 시저와는 이런 내용을 사용하진 못했지만, 이걸 보시는 동료님께는 유용하게 쓰이기를 바래봅니다. 요즘 날씨가 많이 추워지네요. 항상 건강 유의하시고 행복한 하루 되셨으면 좋겠습니다. 그럼 다시 한번 저의 영상에 관심 가져주셔서 감사합니다! 그럼 좋은 하루되세요~! #프론트엔드 #개발자 #개발취업 #개발이직 #네카라쿠배당토 #nextjs #javascript #nodejs #reactjs #대규모

기술을 공유하고 함께 성장해가는 개발 문화, NHN이 추구하는 가치입니다.

Learn how to implement internationalization in your Next.js projects with next-intl. This process makes your app accessible to a global audience and improves user experience. It allows websites to offer content in many languages, and allows developers to provide exact and accurate translations instead of relying on potentially inaccurate browser translations. In this tutorial, I’ll be using next-intl with the Next.js app router. Next-Intl official documentation: (https://next-intl-docs.vercel.app/)