전체 글 (105) 썸네일형 리스트형 SingleProject_240704 ( Next.js 포켓몬 도감 ) 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 .. Study_240703 ( Next.js Rendering , Route Handlers ) 클라이언트 컴포넌트와 서버 컴포넌트라우팅에 상관 없는 기타 버튼 , 네비게이션 등과 같은 경우는 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("여기는 어디일까요?.. Study_240702 ( Next.js 라우팅 ) 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.. Study_240701 ( Next.js ) 프레임워크와 라이브러리프레임워크 : 개발자가 기능 구현에만 집중 가능하도록 필요한 모든 프로그래밍적 재원을 지원하는 기술의 조합 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.. Study_240628 SingleProject_240627 ( TS-Favorite-Countries ) 📦src ┣ 📂api ┃ ┗ 📜countryAPI.ts ┣ 📂assets ┃ ┗ 📜react.svg ┣ 📂components ┃ ┣ 📜CountryCard.tsx ┃ ┣ 📜CountryList.tsx ┃ ┗ 📜Layout.tsx ┣ 📂pages ┃ ┗ 📜Home.tsx ┣ 📂routes ┃ ┗ 📜Router.tsx ┣ 📂types ┃ ┗ 📜country.ts ┣ 📂zustand ┃ ┗ 📜countryStore.ts ┣ 📜App.css ┣ 📜App.tsx ┣ 📜index.css ┣ 📜main.tsx ┣ 📜QueryClientSetup.tsx ┗ 📜vite-env.d.ts import axios from "axios";import { Country } from ".... Study_240626 ( TS , React Cookbook , 객체 지향 프로그램, 도서 관리 코드 ) 터미널에서 ts-node 사용법 : yarn global add ts-node -> 전역적으로 설치 -> ts-node 파일명 function sum(a: number, b: number): number { return a + b;}function objSum({ a, b }: { a: number; b: number }): string { return `${a + b}`;} type Person = { id: number; age: number; height: number };async function getPerson(): PromisePerson[]> { const res = await fetch(`http://localhost:5008/people`); if (!res.ok) { t.. Study_240625 ( TS 객체 리터럴 , 유틸리티 타입 , 간단한 카페 코드, 객체 지향 프로그램 ) object literal ( 객체 리터럴 ) : const , let 사용 가능 -> 키+값 페어로 구성된 객체 정의 방식예시 코드 -> 어떤 타입의 값도 대입 가능 -> 코드 사용 전 값이 할당 되어야하므로 런타임 에러 방지 가능const obj = { a: [1, 2, 3], b: "b", c: 4,};enum과 사용 구별enum은 간단한 상수 값 그룹 관리 시 적합 / 상수이므로 각 멤버의 값이 변하면 안됨객체 리터럴은 멤버의 값이나 데이터 타입 변경 가능 / 복잡한 구조와 다양한 데이터 타입 사용 시 사용 유틸리티 타입Partial : 타입 T(제네릭)의 모든 속성을 선택적으로 만듦 -> 기존 타입의 일부 속성만 제공하는 객체 생성예시 코드// interface는 TS에서 객체의 구조 정의.. 이전 1 ··· 3 4 5 6 7 8 9 ··· 14 다음
