분류 전체보기 (410) 리스트형 [리액트(React)] Webpack 설정하기 리액트 공부를 하면서 CRA와 Vite를 주로 사용해서 프로젝트를 생성했다.CRA와 Vite 중 뭘 사용할까 고민해본 적은 있지만, Webpack으로 직접 설정해볼까 고민해본 적은 없다.(※ CRA는 webpack을 사용하고 있고 Vite는 개발 단계에서는 ESM을, 빌드 단계에서는 Rollup을 사용한다.)좋은 기회를 얻어서 Webpack을 사용하여 프로젝트를 생성해보게 되었다.// WebpackWebpack이란, 자바스크립트의 정적 모듈 번들러(Static Module Bundler)이다.자바스크립트 애플리케이션의 개발 단계에서 여러 개의 모듈을 하나의 파일이나 여러 파일로 결합하는 역할을 한다.설정이 자유로워 높은 확장성과 유연성을 가진다.webpack 버전 4.0.0 이후로는 설정 파일이 없어도.. [Next.js] Cloudflare에 이미지 업로드하기 이전에는 이미지를 AWS의 S3에 업로드 했는데, 프리티어도 끝난 김에 다른 서비스를 찾아보았다.Cloudflare는 이미지가 자동으로 최적화 되어서 편리하다.근데 얘도 무료는 아니고, 매달 5$ 를 내는 게 가장 저렴한 요금제인 것 같다.(환율 적용하여 6836원 빠져나갔다.)정해진 요금으로 정기결제말고 유연하게 사용량에 따라 책정하는 요금제를 선택해도 좋을 것 같다.일단 나는 공부용이기 때문에 한 달 하고 해지한 후 나중에 다시 필요할 때 결제할 예정..먼저 회원가입 후 원하는 요금제를 결제하고 나면 Images의 하위 메뉴가 생긴다. (요금제 결제 전에는 하나만 있다.)Images > Overview 페이지로 들어가서 Use Api 탭의 Get an API token here을 눌러준다.1. Clo.. [Next.js] 이미지 컴포넌트 사용하기 일반적으로 이미지를 업로드 할 때는 img 태그를 사용하는데, next에서는 img 태그가 아닌 Image 컴포넌트를 사용하는 것을 권장한다.▪ 이미지 최적화Image 컴포넌트를 사용하면 자동으로 이미지를 최적화해 준다.이미지 크기(width, heigth) 및 화질(quality) 을 간편하게 조절할 수 있다.▪ Lazy loading화면에 보이지 않을 때는 이미지를 로딩하지 않고, 사용자가 이미지를 보게 될 때 이미지를 로딩한다.초기 페이지 로딩 시간이 단축된다.// 외부 호스트 허용Image 컴포넌트의 src속성에 외부 호스트(aws, github ... ) 의 이미지 주소를 넣는 것은 보안 상의 이유로 제한되어 있다.(Invalid src prop ... hostname is not config.. [Next.js] Prisma 사용하여 데이터베이스 연동하기 // Prisma- Object Relational Mapping(ORM)- 데이터베이스와의 상호작용이 편리하다.- DB의 모든 데이터 타입을 Prisma를 통해 정의하면 TypeScript가 지원되기 때문에 자동완성이 된다.- 공식 사이트: https://www.prisma.io/ Prisma | Simplify working and interacting with databasesBuild, fortify, and grow your application easily with an intuitive data model, type-safety, automated migrations, connection pooling, caching, and real-time database subscriptions.www.. [Next.js] Zod를 사용하여 데이터 검증하기 // Zod- 타입스크립트의 타입 안정성을 향상시켜주는TypeScript-first 스키마 선언 및 검증 라이브러리- 공식 문서: https://zod.dev/ GitHub - colinhacks/zod: TypeScript-first schema validation with static type inferenceTypeScript-first schema validation with static type inference - colinhacks/zodgithub.com▪ 설치npm install zod▪ 스키마 정의 및 검증import { z } from 'zod';const 스키마명 = z.자료형({ 데이터명: z.자료형().검증메소드(),});const 스키마명 = z.자료형().검증메소드();스키.. [Next.js] 렌더링 과정 및 개념 특정 페이지로 이동할 때, next.js는 서버에서 모든 page와 component를 render해서 HTML 형태로 브라우저에 넘겨준다.(SSR)그러면 사용자는 서버에서 렌더링된 초기 화면을 바로 볼 수 있다.초기 HTML이 제공되기 때문에 SEO 향상에 도움이 된다.그리고 그 즉시 React 애플리케이션을 생성하여 초기 HTML에 연결한다.(hydration)이를 통해 interactive한 SPA(Single Page Application) 가 된다.SSR은 모든 component에 발생하는데, hydration은 use client를 선언한 component에만 발생한다. [리액트(React)] Gatsby - Contentful // Contentful- 컨텐츠를 관리하는 시스템- 공식 사이트: https://www.contentful.com/ Where content drives business momentum | ContentfulBusiness moves faster when teams producing content have a platform that empowers them to collaborate, innovate, and deliver impactful experiences at scale.www.contentful.com// Content 모델 생성 회원가입 후 Content 모델을 생성한다.처음 가입하면 샘플들이 여러 개 있는데 싹 다 지워버렸다. content type의 Name을 정하고 Create를 누른.. [리액트(React)] Gatsby // Gatsby- 정적 사이트를 구축하는 리액트 기반 프레임워크- 기존 리액트에서 작업하는 것과 동일하게 작업하고, 빌드 후 배포할 때 모든 리액트요소를 html로 변환해준다.- 데이터를 편리하게 가져올 수 있도록 GraphQL을 사용한다.- 공식 사이트 :https://www.gatsbyjs.com/ The Best React-Based Framework | GatsbyGatsby is a React-based open source framework with performance, scalability and security built-in. Collaborate, build and deploy 1000x faster on Netlify.www.gatsbyjs.com▪ 설치npm install -g.. < 1 2 3 4 5 ··· 52 >
