본문 바로가기

FrontEnd84

[Next.js] Middleware에 대해 알아보자 Middleware란? 통용적으로 사용되는 의미로는 "서로 다른 애플리케이션이 서로 통신하는 데 사용되는 소프트웨어" 이다. 미들웨어를 통해 더욱 빠르게 혁신할 수 있도록 애플리케이션을 지능적이고 효율적으로 연결하는 기능을 제공한다. 미들웨어는 단일 시스템에서의 다양한 기술,도구, DB간에 다리 역할을 한다. 유저는 이 같은 서비스에 대해 인식하지 못한다. 개발자는 처음에 미들웨어를 사용하여 초기 코드를 다시 쓰지 않고도 새 프로그램을 초기 시스템과 통합하였습니다. 미들웨어는 분산 시스템의 중요한 통신 및 데이터 관리 도구가 되었습니다. 개발자는 미들웨어를 사용하여 애플리케이션 개발을 지원하고 디자인 프로세스를 단순화합니다. 이렇게 하면 서로 다른 소프트웨어 구성 요소 사이를 연결하지 않고 자유롭게 비즈.. 2022. 12. 22.
[Next.js] Image 컴포넌트에 대해 (feat. local & remote) 1. Next.js 가 제공하는 Image 컴포넌트(공식문서 링크) 특징과 장점 특징 lazy loading 이미지 사이즈 최적화 placeholder (Local Image일 경우) 장점 성능 향상 : 적절한 사이즈 이미지 서빙 & 작은 용량의 포맷 사용 가능 시각적인 안전성: placeholder를 통해 이미지 로드전 CLS(Cumulative Layout Shift) 방지 빠른 페이지 로딩: lazy loading & 이미지 사이즈 최적화, placeholder를 통한 2. lazy loading 이미지 로드 하는 시점을 필요할 때 까지 지연시키는 기술을 의미한다. ( 페이지 로드 속도 빨라지는 이점) 사용자가 이미지가 나올때까지 스크롤 하지 않으면 이미지는 로드 되지 않는다. Next.js는 사용.. 2022. 12. 22.
[Next.js] SWR을 통해 캐시 데이터 가져오기 SWR란? HTTP 캐시 무효 전략인 State-While-Revalidate 에서 유래됨. SWR은 캐시로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화 된 데이터를 가져오는 전략 SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트를 경험할 수 있음. Next.js 팀에서 만들었다. 설치 yarn add swr // npm install swr 사용법 import useSWR from "swr"; const fetcher = (url:string)=>{ fetch(url).then(res=>res.json()) } const useUser = () => { const { data, error } = useSWR("/api/users/me",fetcher); r.. 2022. 12. 12.
[Next.js] 환경변수 타입 지정 및 자동완성(.env) 참고: https://jforj.tistory.com/259 1. .env 파일에 사용할 변수 입력 COOKIE_NAME= carrot_market COOKIE_PASSWORD = carrot_password 2. next.config.js 파일에 변수들에 대해 입력 ( 자동완성 ) /** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, env: { COOKIE_NAME: 'carrot_market', COOKIE_PASSWORD: 'carrot_password', }, }; 3. env 타입 지정 root 경로에 @types 폴더 생성 후 그 안에 import-env.d.ts 파일 생성 import-env.d... 2022. 12. 11.
[JavaScript] this에 대해 (feat. bind) js에서의 this는?? 객체를 가리키는 키워드 상황에 따라 바뀜 this는 자신을 포함한 함수를 호출한 객체이다. 전역적인 객체에서 this를 가리키면 window 객체가 나옴(엄격모드 'use strict' 와 상관없이 항상 ) 브라우저 자체의 객체는 window니까 console.log(this)를 했을 때 console의 주체는 window니까 window가 나온겨. window.console.log(this) 라는 뜻 function main(){ console.log(this); } main() // 이렇게 호출하는 것은 사실 window.main() 과 같음. 즉 window 객체를 가리키게 됨 // 'use strict' 모드라면 main()을 호출했을때 undefined가 나옴 // 엄격.. 2022. 12. 11.
[TypeScript] 제네릭(Generics) 정리 제네릭이란? 제네릭은 C#,Java 등의 언에서 재사용성이 높은 컴포넌트를 만들때 자주 활용된다. 한가지 타입보다 여러 가집 타입에서 동작하는 컴포넌트를 생성하는데 사용됨. 제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다. function getText(text) { return text; } JS로 이러한 코드가 있을 때 인자로 'hi', 10, true를 각각 넣어준다면 함수는 그 값을 그대로 리턴해준다. 이를 TS의 제네릭 문법을 적용해본다면 아래처럼 정의한 후 재활용이 가능해진다. // const getText = (text:T):T =>{} // const getText = (text:T):T =>{} // 위처럼 제네릭에 기본 타입도 줄 수 있다. function getTex.. 2022. 12. 9.
[TypeScript] TS에서의 함수 ( 파라미터, 리턴 타입 지정 ) 기본 틀 파라미터의 타입은 해당 파라미터 옆, 리턴 타입은 파라미터 선언 오른쪽 아래와 같이 선언해주면 타입 실드가 장착돼서 TS가 알아서 이후 논리 어긋난것들에 대해 알려줌 파라미터의 타입을 지정해주면 필수 파라미터가 됨 ( 선택적으로 줄려면 파라미터명 옆에 '?' 붙여주면 됨) function 함수이름(변수:타입):타입 { return 리턴할 값 } const 함수이름 = (변수:타입):리턴타입 =>{.../} 리턴 할 게 없을때는 void(공허한) 를 써준다. function fn():void { console.log('리턴값 없음') } 선택적인 파라미터라면 '?'를 붙여주는데 이것은 곧 그 파라미터는 type | undefined 를 의미함 function 함수이름(x?:number) { con.. 2022. 12. 9.
[Next.js] API Route에 대해 ( NextApiRequest ,NextApiResponse ) API Route 란? 등장배경 React 애플리케이션을 개발하다보면 backend API가 필요한 시점이 온다 (Eg.) DB의 데이터 조회| 사용자가 요청하는 데이터 처리 작업(html page가 아닌 입력받은 데이터만 필요) 이를 위해 노드.js 을 활용한 custom server 파이프라인을 구축해서 작업하는 방식이 있다. 하지만 이럴 경우 Next.js의 성능 최적화를 해침 (+TS 및 Es6 방식의 모듈 시스템 사용 못함) 이를 위해 API Routes 라는 기능을 추가해서 Next.js 안에서 필요한 serverless API Endpoint를 구축 가능해짐 API란? 여러 종류가 있지만 REST API가 대표적임 REST API란 REST 규칙의 특수한 규칙을 가진 웹 API를 말한다. (.. 2022. 12. 9.
[TypeScript] declare module 에 대해 (feat. import, export ) 모듈(module) 이란? import | export 가 있는 파일을 모듈이라고 한다. 외부에서 직접적으로 모듈을 불러오지 않으면 그 모듈의 데이터는 사용X import : 모듈에서 데이터를 불러올 때 사용 export: 모듈에서 데이터를 내보낼 때 사용 [TypeScript] 컴파일 될 때 import, export 데이터의 행방 변수, 상수, 함수, 클래스: JS 모듈 로더 코드로 컴파일 된다. 타입: JS 코드로는 컴파일 되지 않음. ( JS 코드에서는 삭제 ) 네임스페이스: JS 일반 객체로 컴파일 된다. 등장 배경 사용 빈도가 높은 라이브러리의 타입들은 @types/라이브러리를 통해 알 수 있다. 하지만 기능이 약한 라이브러리는 모듈 정의가 안되어 있는 경우가 많음 또한, 여러 문서에서 반복적.. 2022. 12. 9.

티스토리툴바