본문 바로가기

전체 글153

[Next.js] 4가지 주요 렌더링 기법 1. CSR(Client Side Rendering)2. SSG (Static Site Rendering)3. ISR (Incremental Static Regeneration)4. SSR (Server Side Rendering) 2024. 9. 30.
[Next.js] Page Router vs App Router 2024. 9. 28.
[Next.js]Next.js 1. Next.jsHigh-Quality 웹 어플리케이션을 만들 수 있는 웹을 위한 React Framework 2. Next.js의 장점1. SSR, SSG, ISG -> 사용자 입장에서 초기 로드 시간 단축 , 코드 스플리팅, 이미지 최적화까지 다 해줌2. Search Engine Optimization -> 서버 사이드 렌더링을 통해 웹 페이지가 초기 로드 시 완전히 렌더링 되므로,위와 일맥상통 하는 것이지만, 검색 엔진이 쉽게 콘텐츠를 인덱싱 할 수 있다. 정적 사이트 생성으로 미리 생성된 html파일을 제공하고, seo 성능 극대화3.개발자 경험 - 자동 코드 분할, 핫 리로딩, 타입스크립트 지원, API 라우트 지원 -> 백엔드와의 통합을 쉽게-> 환경 설정이 적다 4. 확장성과 유연성서버리스.. 2024. 9. 28.
[TypeScript] Generic과 Utility Type 1. Genericfunction printStrings(arr: string[]): void {    for (let i = 0; i arr.length; i++) {        console.log(arr[i]);    }}function printNumbers(arr: number[]): void {    for (let i = 0; i arr.length; i++) {        console.log(arr[i]);    }} 위 함수들은 기능이 비슷하지만, 각각 String 타입과 number 타입의 배열을 처리할 수 있는 함수이다.위와 같은 코드가 많아졌을 때 하나의 함수로 만들 수는 없을까? -> 이러한 상황에서 Generic을 사용할 수 있다.Generic은 타입을 변수처럼 사용하는.. 2024. 9. 27.
[TypeScript] Type 추론 // 타입 추론 : TypeScript의 중요한 기능 중 하나로, 개발자가 타입을 명시적으로 지정하지 않아도, // 타입 안정성을 유지할 수 있도록 도와줌let numbers = [1,2,3,4,5];let string = ["a","b","c"];// { name: string; age: number }로 추론let person = {    name: "Alice",    age: 25}; person.name = "Bob"; // 정상person.age = 30; // 정상person.age = "thirty"; // 오류: 'string' 형식은 'number' 형식에 할당할 수 없습니다. // 객체 리터럴 방식의 추론 let person = {    name: "Alice",    age: 25}.. 2024. 9. 27.
[TypeScript] 여러가지 Type 선언 function add(a: number, b: number): number {    return a + b;  }    const sum: number = add(1, 2); // Error  console.log(sum);    //Boolean  let isBoolean: boolean;  let isBooleanFalse: boolean = false;  //Number  let num : number;  let nan : number =  NaN;// stringlet str : string;let name : string = "tester";// Arraylet names : string[] = ["tester","tester2","tester3"];let someArr : any[] = [".. 2024. 9. 26.

티스토리툴바