juni

웹 페이지에서 즐길 수 있는 간단한 게임 구현 1. 포켓볼 피하기 게임참고 자료 : https://fe-developers.kakaoent.com/2022/220830-simple-canvas-game/전체 코드'use client';import Link from 'next/link';import React, { useCallback, useEffect, useRef, useState } from 'react';interface ItemPos {  x: number;  y: number;  w: number;  h: number;}export default function PokeBallGamePage() {  const [state, setState] = useState'play' | 'pause' |..

Figma 포켓몬과 다마고치를 합쳐 포켓몬을 게임을 통해 얻은 재화로 육성 할 수 있게끔 구상함

SSR 에서는 url을 절대적으로 입력해야해서 CSR처럼 입력 시 오류가 발생함 -> 전체 주소 입력export const getPokemon = async (id: string) => { try { const response = await axios.get( `http://localhost:3000/api/pokemons/${id}` ); return response.data; } catch (error) { console.error(`Error fetching pokemon with id ${id}:`, error); throw new Error("Failed to fetch pokemon"); }}; 전체 코드📦src ┣ 📂app ┃ ┣ 📂(pokemon) ┃ ┃ ┗ 📂_components ..

클라이언트 컴포넌트와 서버 컴포넌트라우팅에 상관 없는 기타 버튼 , 네비게이션 등과 같은 경우는 app폴더 바깥의 components 폴더로 관리서버 컴포넌트// src>app>page.tsxexport default function Home() {  console.log("여기는 어디일까요?");  return (    div className="p-8">      안녕하세요! 내배캠 리액트.. 아니아니 넥스트입니다!    /div>  );} alert는 서버 컴포넌트에서 사용 불가 os.hostname은 서버 컴포넌트에서(Node.js 런타임 환경) 사용이 가능// src>app>page.tsxexport default function Home() {  // console.log("여기는 어디일까요?..

React 및 Next.js에서의 라우팅 구현 방법기존의 React.js를 사용하여 웹 애플리케이션을 만들 때는 react-router-dom을 이용해서 라우팅을 가능이렇게 중요한 라우팅에 대한 근본적인 시각, 전략이 next.js 13버전을 기점으로 변경.변경 전 : pages 폴더에 원하는 페이지의 파일 이름을 둠 변경 후 : app 폴더 밑에 폴더명을 기반으로 자동 라우팅이 됨. 그래서 app router라고 보통 말을 하는 것 랜더링 기법원시적 방법 MPA : 페이지 이동 및 렌더링 시 깜빡거리는 현상 -> UX 저하획기적 방법 SPA (Single Page Application ) : 브라우저에서 JS를 이용해 동적으로 페이지를 렌더링 -> root라는 id를 가진 div만 다운로드 (JS로 U..

프레임워크와 라이브러리프레임워크 : 개발자가 기능 구현에만 집중 가능하도록 필요한 모든 프로그래밍적 재원을 지원하는 기술의 조합 Spring Framework : Java 기반의 웹(백엔드) 프레임워크FE까지 가능한 full stack coverage frameworkJSP, ThymeleafVue.js, Angular.js : Javascript 기반 웹 프론트엔드 SPA 프레임워크Django, Flask : Python 기반의 웹 프레임워크Ruby on Rails.NET FrameworkExpress.js, NestJS : Javascript 기반 웹 백엔드 프레임워크라이브러리 : 공통 기능의 모듈화가 이루어진 프로그램의 집합React.jsreact-router-domreduxNext.jsNext.j..