오늘 컨텐츠는 라이브 코딩, 테트리스 게임 만들기를 합니다. 시작부터 완성까지 바닐라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/)

react native에서 환경변수

🏆 멤버십 가입 감사합니다! seongjun Min님, jmin님, 김민준님, 온상온상님, For my something님, jun님, kan58dan님, 홍준혁님, 도건호님, kenny님, Jason님, orange007님, Toots Kim님, Economic님, Charles Gardes님, 나비는바다겡서님, Yechan Kim님, 두비두님, Min님, rom님, justsoSO님, 안암나무님, rnwkdbs12님, 안트라이님, Kms님, 탱크보이님, NA K님, 최경락님, Sydney님, 당근이실엇님, jy P님, 뱁새님, catch22님, mas chae님, 계폭란탄찜님, 이너피스님, 멍냥멍냥님, Ba Keem님, 박종윤님, 건빵건빵님, minandseok님, Jaewon Kim님, Jae Shin님, 박재은님, Minseok Jeon님 🔥 잡상훈 채널에 가입하여 혜택을 누려보세요. https://www.youtube.com/channel/UCSQRF8yIhSMVRXhIqLxQnsw/join 📕 출간서적 《쉽게 설명한 자바스크립트》 보러가기 예스24: https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=344435187 교보문고: https://product.kyobobook.co.kr/detail/S000213996137 알라딘: https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=344435187 📕 출간서적 《UX 디자인의 모든 것》 보러 가기 교보문고 https://product.kyobobook.co.kr/detail/S000001842178 예스24 https://www.yes24.com/Product/Goods/99397396 알라딘 https://www.aladin.co.kr/m/mproduct.aspx?ItemId=269572938 📩 비즈니스 문의 : ceo@nullenterprise.com

어느덧 App Router가 업데이트된 지도 좀 되었습니다. 솔직히 마음에 안 드는 부분이 꽤 있고, 당장 저도 쓰기 불편할 때가 많아 차마 팀에 도입하자는 얘기를 못 꺼내고 있습니다.OS 이미지도 매번 나오자마자 최신으로 업데이트하고, 검증된 라이브러리보단 날것의 새로 나온 라이브러리를 좋아하는 힙스터 개발자에겐 꽤 시리게 추운❄️ 겨울입니다. 이번에 간단하게 채팅 서비스 PoC를 진행하면서, Front-end 애플리케이션이 필요해졌습니다.초반엔 그냥

들어가며 타입스크립트의 객체는 세 가지 타입이 있는데, 헷갈릴 수 있기 때문에 정리해보았다. Object 자바스크립트 객체와 완전히 동일하다. 즉, toString(), hasOwnProperty() 등을 가지고 있다. Object.prototype. ...으로 쓸 수 있는 API들을 다 쓸 수 있다. primitive type, none-primitive 모두 할당될 수 있다. {} Object와 비슷하지만 비어있다. runtime에는 Object와 같지만 컴파일 시에는 다르다. 컴파일 시에는 Object의 멤버를 가지고 있지 않고, Object가 더 엄격한 객체이다. object typescript에서 추가된 객체 타입으로, non-primitive type을 할당할 수 있지만, primitive t..

안녕하세요. 오늘은 Google OAuth 인증을 팝업모드로 구현한 과정을 소개하고자 합니다. Background Google Ads 계정을 가져와야 하는 로직이 있었습니다. Process 1. 서버에서 Google 계정 연동을 위한 URL을 받습니다. 2. 받은 URL로 Google 계정 연동 버튼 클릭 시 팝업 창을 띄웁니다. 3. Google 연동 후 Callback URL에서 코드를 가져옵니다. 4. 가져온 코드로 User의 Google Account ID를 저장한 후 다음 단계로 넘어갑니다. 1번~3번의 과정은 클라이언트에서도 Google Client ID를 사용하면 code를 받을 수 있어 처음에는 @react-oauth/google이라는 라이브러리를 설치하여 구현하였습니다. 하지만 특정 이유..

안녕하세요. 보아스입니다. 여러분 Nextjs 에서도 Page 전환 애니메이션을 구현할 수 있다는 사실 알고 계셨나요? template 을 활용하면 가능합니다. (framer-motion 도 사용해보았습니다.) 그럼 오늘도 퐈이팅입니다 :) 예시코드 repository https://github.com/david718/nextjs-sample-for-lecture 비즈니스 및 기업 강의 문의: hkc7180@gmail.com