개발 성장 일ブl

url parameter란🤔웹 애플리케이션에서 URL을 통해 데이터를 전달하기 위한 방식 중 하나URL의 특정 부분에 데이터를 추가하여 서버로 정보를 전달하거나, 클라가 어떤 특정 데이터를 표시할지 지정할 때 사용https://example.com/search?query=javascript&page=2URL에서 파라미터는 보통 ?(물음표)와 함께 시작하며, 키=값 형식으로 데이터를 전달여러개의 파라미터가 있을경우 &(앤드)로 구분url parameter의 종류👀 1. Query ParameterURL에서 ?와 &로 구성된 부분을 가리킴데이터를 추가적으로 서버나 클라이언트로 전달할 때 사용https://example.com/products?category=books&sort=price* category..

✔️개발모드npm run dev실시간 코드 반영서버 렌더링(모든 페이지를 서버에서 요청 시점에 렌더링, 정적 페이지도 요청시 즉성 생성)설정이 완벽하지 않아도(예: getStaticPaths를 작성하지 않아도) 동작하도록 Next.js가 도와줌페이지를 즉시 렌더링하지만, 빌드 최적화는 적용x개발중에 사용✔️빌드모드npm run build // 빌드 파일 생성npm run start // 실행getStaticProps와 getStaticPaths를 통해 빌드 타임에 필요한 정적 페이지를 미리 생성페이지와 코드가 압축되고, 성능 최적화가 적용개발모드에서는 문제없이 작동하던 코드도 빌드 타임에 에러가 발생할 수 있음생성된 정적 파일을 사용하므로 요청에 대한 응답이 매우 빠름실제 서버에 배포하기 전에 사용

제네릭 extends// 제네릭 T에 들어올 수 있는 타입에 제약 조건이 없을 때type UserData = { name: string; userKey: T;};// 제네릭 T 에는 문자열이나 숫자만 들어올 수 있다는 제약조건을 줬을 때type UserData = { name: string; userKey: T;} 래퍼객체 : 임시로 객체로 인식type HasLength = { length: number;}// 제네릭 T는 length: number를 속성으로 갖는 객체 타입만 들어올 수 있다는 제약조건 부여function logLength(item: T): void { console.log(item.length);} 그러면 래퍼객체를 포함하고 싶지 않으면🤔& object : ..

마치 리액트의 App.jsx 컴포넌트, page 컴포넌트들의 루트마치 리액트의 index.html

next 강의 듣던중, async쓰니까 vscode에서 에러가 뜸... + yarn build시에도 작동안함이유 : next 14에서 서버 컴포넌트를 async 함수로 사용하면 JSX가 아닌 Promise를 반환,typescript 5.1이하에서 발생 방법1 : typescript + react 버전을 올리기 (근데 react 19버전으로 올라가서 비추...)방법2 : 에러나는 곳마다 밑에 주석 추가하기(귀찮...)}> {/* @ts-expect-error Async Server Component */}

Next  기본 동작 방식서버에서 데이터를 받아와서 클라이언트로 전달 => 클라이언트가 이를 화면에 렌더링 클라이언트 컴포넌트브라우저에서 실행되며, 사용자와의 상호작용을 처리상태(state) 관리와 효과(effect) 훅을 사용할 수 있음이벤트 핸들링이 가능필요에 따라 서버에서도 초기 렌더링이 이루어짐단, 클라이언트에서만 실행해야 하는 코드(ex:window 객체나 DOM조작)가 있다면 에러 발생가능비동기로 데이터를 가져오거나 렌더링해야할 때 로딩 상태를 처리할수 있도록 Suspense로 감싸줘야함// 클라이언트 컴포넌트"use client";import { useState } from 'react';function ClientComponent() { const [count, setCount] = ..

a태그페이지를 이동할 때 전체 페이지가 새로고침(완전한 리로드)됨Link태그페이지 이동 시 전체 페이지 새로고침 없이, 필요한 데이터만 가져와 빠르게 이동 Router(useRouter)클라이언트 측 라우팅을 위한 훅(hook)=> 현재의 라우터 상태에 접근하고, 페이지 이동 및 쿼리 파라미터를 쉽게 관리 가능=> 브라우저의 히스토리 스택과 밀접하게 관련되어 있음*히스토리 스택: 브라우저는 사용자가 방문한 페이지의 순서를 기록, 이 기록을 통해 뒤로 가기, 앞으로 가기 같은 기능이 가능"use client"; // client 로직을 사용하기 위함import { useRouter } from "next/navigation";const router = useRouter(); a태그보단 Link나 Route..

타입스크립트란🤔자바스크립트와 다르게 타입 시스템을 갖음=> 프로그램이 실행되기 전에 모든 변수와 표현식의 타입을 확인하고 고정하는 방식 JS vs TS특징JSTS타입 시스템동적 타입정적 타입컴파일필요 없음js로 컴파일 필요개발 경험유연하고 빠르게 시작 가능코드 완성, 타입 검사 등으로 향상된 개발 경험프로젝트 규모소규모대규모런타임 오류런타임에 타입 오류 발견 가능컴파일 타입 오류 발견 가능학습 곡선낮음높음도구 지원광범위한 도구와 라이브러리 지원JS생태계의 모든 도구와 라이브러리 지원브라우저 지원모든 브라우저에서 기본적으로 지원트랜스 파일 된 JS가 모든 브라우저에서 지원 타입선언불리언 : booleanlet isBoolean: boolean;let isDone: boolean = false;숫자 : n..

크롬의 확장자들과의 충돌...(예를들어  color zilla등...)💩그냥 무시하면 됨!신경쓰이면 시크릿모드로 고고👀👀👀

프레임워크란🤔개발자가 기능 구현에만 ‘딱’ 집중할 수 있도록 필요한 모든 프로그래밍적 재원을 지원하는 ‘기술의 조합’예시 : Vue.js, Angular.js, next.js등등 라이브러리란🤔공통 기능의 모듈화가 이루어진 프로그램의 집합예시 : react, redux등등=> 리액트가 상태관리(Redux), 라우팅(React-router-dom)이 지원이 됐다면 프레임워크였을수도,,,