Learn Next.js: Partial Prerendering (Optional) | Next.js An early look into Partial Prerendering and how it works. nextjs.org Partial Prerendering Next.js 14에서 실험 중인 기능 소셜미디어에서 포스팅은 static, 좋아요는 dynamic인 것처럼 dynamic + static 콘텐츠를 조합할 수 있음 정적 로딩 셸을 사용하여 경로를 렌더링하면서 일부 부분을 동적으로 유지할 수 있는 실험적 기능으로, 경로의 동적 부분을 분리할 수 있습니다. React의 Concurrent API를 활용하고 Suspense를 사용하여 특정 조건(예: 데이터가 로드될 때까지)이 충족될 때까지 애플리케이..

Learn Next.js | Next.js Learn how to build a full-stack web application with the free, Next.js App Router Course. nextjs.org app 폴더에서 대부분의 작업 수행 구조 크게 app / public / scripts 스타일 → 일반적으로 tailwind / css.module 사용 폰트 최적화 It hosts font files with other static assets so that there are no additional network requests. 네트워크 요청을 추가적으로 하지 않도록 다른 스태틱 에셋으로 폰트 파일을 호스트함 // add global.css to top-level componen..

node.js 강의를 들으면서 REST API 지식을 나름대로 활용하겠다고 app.put을 사용했는데 서버에는 app.get, 폼에는 POST method를 사용하는 것이다! 음.....? 왜일까. 우선 MDN 문서를 보니 form에서는 get/post 만 사용 가능하다고 나와있고, form에서 PUT/DELETE 사용시 method-override를 사용하면 된다고 한다. GET은 조회, DELETE는 삭제 기능이라는 것을 직접 해보기도 했고 어느 정도 이해한 상태라서 PUT/PATCH는 정확히 언제 쓰이는 건지, POST와 PUT, PATCH의 차이는 정확히 뭔지 알고 싶어졌다. 비교를 위해 REST API 공식문서에서 POST, PUT, PATCH HTTP 메서드의 정의와 사용 예시를 가져왔다. P..

리액트로 개발이 끝나면 코드를 파일 하나로 압축하는 build 작업 수행 src 폴더 안의 코드, 파일은 압축되지만 public 폴더의 내용물은 보존되므로 이미지, 텍스트, json 파일 등 보관하기 이미지가 여러 개 있을 경우 public 폴더에 저장하면 편함 서브 경로(blahblah.com/sub)에 배포하는 경우 이미지 경로 또한 수정해야 함 따라서 위처럼 작성할 것

문제의 코드 update() { missiles.forEach(missile => { if (missile.direction === "vertical") { this.vy = 1; this.position.y += this.vy; } else if (missile.direction === "horizontal") { this.vx = 1; this.position.x += this.vx; } }); this.blockCollisionCheck(); } 일정한 속도로 미사일을 쐈으면 좋겠는데 의도치 않게 가속도가 붙었다. 뭐지... 혹시 또 forEach문 때문일까 했는데 역시나였다!!^^ 편하다는 이유로 for문 대신 forEach문 정말 많이 썼는데 아래 코드 때문에 문제가 생긴 것이었다. functi..

for…in object에 사용 객체의 속성 확인용 → 디버깅 enumerable한 것만 출력 부모의 prototype에 저장된 것도 출력 특정 값을 가진 키가 있는지 확인 for…of array, 문자, arguments, NodeList, Map, Set에 사용 Nodelist에 사용 가능 class Object { constructor({ imgSrc, position, splitFrames = { x: 1, y: 1 } }) { // default value object 설정 obj[key] when you want to use a value as the property key that is determined at runtime dynamic key name 런타임 실행시 사용 const key..