TIL

Rest 란 무엇인가? REST (REpresentational State Transfer) REST는 표현 상태 전송의 약자이자 분산형 하이퍼미디어 시스템(distributed hypermedia systems)의 아키텍처 스타일이라고 한다."Roy Fielding"이 2000년에 그의 유명한 논문에서 발표 후 웹 기반 API(애플리케이션 프로그래밍 인터페이스)를 구축하는 데 가장 널리 사용되는 접근 방식 중 하나가 되었다.REST는 프로토콜이나 표준이 아니라 아키텍처 스타일이다.개발 단계에서 API 개발자는 다양한 방식으로 REST를 구현할 수 있다.다른 아키텍처 스타일과 마찬가지로 REST에도 기본 원칙과 제약 조건이 있는데,`서비스 인터페이스를 RESTful` 이라고 지칭하려면 이러한 원칙을 충족..

` 터미널 열기 ` ctrl + `` 터미널 새로 열기 ` Ctrl + Shift + 5

` `띄어쓰기

☁️개발환경☁️● Next.js 13 (page router) 강의를 보는데 dynamic을 이용해 import를 하면서 " 코드를 분리하면된다. " 라고 말을 하셨다.  도대체 그게 무슨말이지? dynamic은 뭔데? 라는 생각이 들었다. 그래서 길지 짧을지 모르는 til을 작성하게 되었다.  ❓ next/dynamic공식문서에서 dynamic을 검색하니 `react.lazy` 이라고 title에 작성되어있다.그럼 먼저 Lazy Loading이 뭔지 간단하게 살펴보자.next.js에서 lazy loading은 경로 렌더링에 필요한 javaScript의 양을 줄여서 앱의 초기 로딩 성능을 개선하는데 도움이 된다.클라이언트 컴포넌트와 가져온 라이브러리의 로딩을 지연시키고 클라이언트 측에서 실행되도록 번들 ..

☁️환경 ☁️Next.jsTypeScriptEslint(prettier)yarn berry(pnp)emotion  ❓ yarn berryyarn 패키지 매니저의 새로운 버전으로 이전버전과는 구조적으로 변화와 새로운 기능을 도입. TypeScript로 작성되어 타입 체크가 되어있다.Table 구조로 되어있을 뿐 아니라 json 데이터 타입을 사용하기 때문에 메모리 내의 연산이 이러어저 좋은 성능을 보여준다.Plug n Play : 기존의 로컬 node_module 폴더 대신 패키지를 캐시 폴더에 저장하고, .pnp.cjs파일에 의존성을 찾을 수 있는 정보가 기록된다.  1. 설치하기설치 명령어yarn set version berry​ 2. .yarnrc.yml 설정하기아래 코드 추가하기nodeLinker:..

환경next.jstypeScriptyarn❓ESLint: 자바스크립트 코드 문법 오류 및 코드 스타일 가이드를 제공하기 위한 정적 코드 분석 틀이다. 자바스크립트와 JSX코드를 위한 오픈소스 린팅 유틸리티로,프로그램을 작성할 때 발생할 수 있는 오류, 버그, 스타일 오류 그리고 일관성 없는 코드 패턴을 식별해준다.코드를 분석해 잠지적인 문제를 지적해 주기 때문에 효율적이고 일관성있는 깨끗한 코드를 작성할 수 있도록 도와준다. 커스텀도 가능하다. 팀단위로 프로젝트를 진행하래 코딩 규약에 맞춰 검사 규칙을 조정할 수 있다. 예를 들면 특정 코딩 스타일을 강제하거나, 사용하지 않는 변수, 미사용 표현식 등을 경고하도록 설정할 수 있다.플러그 인을 통해 기능을 확장할 수도 있기 때문에 React 같은 기술스택에..

absolute / relative 사용 시 수직 가운데 위치시키기 absolute right-0 top-1/2 transform -translate-y-1/2

cmder 이용 1. 초기 파일 만들기 yarn create react-app 파일이름 --template typescript 2. react router dom 설치하기 yarn add react-router-dom 타입스크립트를 이용함으로 types-react-router-dom 설치 필요 yarn add --dev @types/react-router-dom

필요한 파일 vite.config.ts tsconfig.json vite.config.ts import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react()], resolve: { alias: [ { find: "@", replacement: "/src" }, { find: "@page", replacement: "/src/page" }, ], }, }); { find: "@", replacement: "/src" }, 생성되는 파일은 src 아래에 존재할 것 이므로 "@" 는 " /src " 로 지정 { find: "@page", replace..

너무 간단해서 텍스트 쓸게 없지만.. import없이 환경변수 방법으로 가져와서 사용하면 된다!! 공식문서 https://create-react-app.dev/docs/using-the-public-folder/ Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and higher. create-react-app.dev