본문 바로가기
분류 전체보기
 (398)
[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..
[리액트(React)] Vercel로 React 프로젝트 배포하기 간단한 프로젝트는 github pages로 배포하는 편인데, 이번엔 좀 제대로 관리하고 싶은 프로젝트라 vercel로 배포하기로 했다. 전에 Next 프로젝트를 Vercel로 배포한 적이 있어서 딱히 고민하지 않았던 것 같다 ㅎㅎ * 공식 홈페이지: https://vercel.com/ Vercel: Build and deploy the best Web experiences with The Frontend Cloud – Vercel Vercel's Frontend Cloud gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized Web. vercel.com Vercel은 깃허브와 연동..
[스프링부트(Spring Boot)] CLOUDTYPE으로 서버 배포하기 포트폴리오 사이트에 필요한 api를 Spring Boot 로 개발하고 어떻게 배포할지에 고민을 많이 했다. 처음에는 AWS로 배포하려고 했는데(그것밖에 몰랐다..^^) 찾아보니 클라우드 타입이라는 사이트가 있었다. RDS와 S3를 사용 중인데 지금은 aws 프리티어를 이용 중이라 금액이 크지는 않지만 어쨌든 매달 요금이 나가는 상황이라.. EC2로 배포까지 하면 과금이 두려웠다... 심지어 프리티어가 끝나가기에.. HTTPS 지원 + Github Actions 지원에 금액적인 메리트가 커서 클라우드 타입으로 배포를 결정했다. * 공식 홈페이지: https://docs.cloudtype.io/guide/welcome/intro 소개 - 클라우드타입 Docs 클라우드타입은 클라우드 기반 애플리케이션을 빠르게..
[리액트(React)] 드래그 앤 드롭(drag & drop) // 드래그 앤 드롭, drag & drop - 마우스나 터치스크린을 이용해서 객체를 이동시킬 수 있게 하는 기술 // react-beautiful-dnd - drag & drop 을 구현하기 위한 라이브러리 - DragDropContext, Droppable, Draggable의 세 가지 주요 컴포넌트로 구성되어 있다. DragDropContext : 전반적인 프레임워크 Droppable : 드롭 가능한 영역 Draggable : 드래그 가능한 각 요소 1. 설치 npm install react-beautiful-dnd 타입스크립트를 사용한다면 @types도 추가로 설치한다. npm install --save-dev @types/react-beautiful-dnd 2. DragDropContext 사용..
[리액트(React)] Github page 배포 전에 바닐라 JavaScript로 코딩해서 직접 Github 사이트에서 설정을 통해 배포한 적이 있는데, React는 배포가 훨씬 간편하다. 먼저 gh-pages를 설치해준다. npm install gh-pages 다음으로는 루트 하위에 .env.production 파일을 생성하여 배포 사이트 주소를 적어준다. PUBLIC_URL=https://github이름.github.io/repository명 깃허브 사이트의 주소 규칙은 따로 도메인을 설정하지 않는 한 항상 일정하다. router v6 를 사용하는 경우, basename도 따로 설정해주어야 한다. const router = createBrowserRouter( [routes들], { basename: process.env.REACT_APP_PROF..

티스토리툴바