ryukyungwoo1220 님의 블로그

NEXT.js 란?React 기반 프레임워크로, 파일 기반 라우팅, 서버 사이드 렌더링(SSR)·정적 사이트 생성(SSG), API 라우트, 이미지 최적화, 자동 코드 분할 등을 제공해 생산성과 성능을 높여 주는 풀스택 개발 솔루션입니다.NEXT.js의 특징NEXT.js의 구조NEXT.js의 파일 기반 라우팅주요파일라우팅동적 라우팅레이아웃Data Fetching데이터 패칭(data fetching)이란 웹 애플리케이션이 외부 또는내부의 데이터 소스로부터 데이터를 요청해서 가져오는 과정 이 데이터 패칭이 언제 일어나고 어디서 수행되는지 선택한 렌더링 방식(SSG, SSR, CSR 등)에 따라 달라짐SSG(Static Site Generation)빌드 시점에 모든 페이지를 미리 렌더링해 HTML 파일로 저장..

Routing 등록function App() { return ( } /> } /> } /> } /> } /> } /> } /> } /> );}Routing 이동export default function Navbar() { return ( home about posts login search );}Routing 안내export default function LoginPage..

useRef렌더링 사이에 변경 가능한 .current 속성을 유지하는 ref 객체를 반환하는 React 훅입니다.import { useRef, useState } from "react";export default function Timer() { // const [timerId, setTimerId] = useState(0); 랜더링되지 않는 변수이기 때문에 useRef를 쓰는게 더 좋음 const timerId = useRef(null); const [count, setCount] = useState(0); function start() { timerId.current = setInterval(() => { console.log("start"); // setCoun..

package.json각종 패키지 설정이 들어가 있음중요한 설정 type : 기본 타입 esModule 방식으로 되어있음script : 실행할 수 있는 명령어 목록dependencies : 의존성 목록들vite.config.tsvite 개발환경 설정defineConfig : 개발도구에 대한 설정을 할 수 있음-> sever { port : 5555 // 포트 5555로 열기 open : true // 서버 열고 브라우저로 바로 열기 ... }eslint.config.js문법 검사 설정 파일rules 안에 "끄고 싶은 옵션" : "off" 로 끄기 가능JSXjavascript + html = jsxexport default function Expression() { // 자바스크립 코드 ..

타입스크립트let a = 1;a = "hello";a = true;a = {};// 문제점?// 1) 타입을 파악하기가 어렵다// 2) 오류나 실수 발생 가능성이 높아진다// 3) 특히 대규모 프로젝트나 협업 시 매우 불편console.log(a.toFixed()); // 컴파일 때 못잡아줌// 문제점을 해결하기 위한 방한으로 "타입스크립트"라는 언어가 등장타입스크립트의 컴파일tsc [file name].ts -> js 파일로 컴파일(트랜스 파일)트랜스 파일된 파일을 실행하려면 node를 써야 됨node는 자바스크립트 런타임 tsc --init : tsconfig.json을 생성해주는 명령어 ts파일을 실제로 구동하려면 tsconfig.json에 컴파일러 옵션과 타겟을 지정해줘야 됨// 타입을 지정할 수..

제네릭// 타입을 나중에(사용 시점에) 결정하는 문법// 코드 재사용성 + 타입 안정성function echo(value: T): T { return value;}console.log(echo(2));console.log(echo("A"));console.log(echo(true));// 함수를 제네릭으로 선언type FirstElement = (arr: T[]) => T;const getFirst: FirstElement = (arr) => arr[0];getFirst(["a", "b"]);const getFirstNum: FirstElement = (arr) => arr[0];getFirstNum([1, 2, 3]);interface User { id: number; name: string;}c..

인터페이스 선언interface User { id: number; name: string; email?: string;}interface User { readonly createdAt: Date;}// 합쳐야만 생성이 됨const userA: User = { id: 1, name: "name", email: "email", createdAt: new Date(),};const userB: User = { id: 2, name: "name2", email: "email2", createdAt: new Date(),};function printUser(user: User) {}함수에서의 인터페이스interface Add { (a: number, b: number): number;}ty..

Union유니온 타입 '|’ 여러 타입 중 하나만 만족let value: number | string | boolean = 2;value = "hello";value = true;Intersection인터섹션 타입 '&’ 보통 객체 타입에 사용type Person = { name: string;};type Developer = { skills: string[];};type DevOrPerson = Person | Developer;type DevPerson = Person & Developer;const personA: DevOrPerson = { name: "string", // skills: ["java", "javscript"], 하나만 만족해도 만족함};const personB: Dev..

함수 선언(1) 함수 선언식function add(a: number, b: number): number { return a + b;}(2) 함수 표현식 (변수 = 함수)const sub = function (a: number, b: number): number { return a - b;};(3) 화살표 함수const multiply = (a: number, b: number): number => { return a * b;};선택적 매개변수 optional propertyfunction log(msg: string, userName?: string): void { console.log(`${userName}: ${msg}`);}log("안녕하세요"); //에러가 발생하지 않음log("안녕하세요"..

타입 추론타입을 명시하지 않아도 타입스크립트가 알아서 타입을 추론 하는 것 추론할 단서(=값)이 명시되어야 추론이 가능함let a = 1;a.toFixed();a.toExponential();// a = "hello" // 자동으로 타입 추론이 됐기 때문에 다른 타입 할당불가let b = "hello";b.toUpperCase();let c = true;let d = {};let e; // 오른쪽에 타입을 추론할만한 값이 없을 땐 any로 추론됨구조 분해 할당구조에 따라서 데이터가 분해되고 각각 타입이 추론 됩니다let user: { name: string; age: number;};user = { name: "이름", age: 123 };let { name, age } = user;let [todo..