프론트엔드/React (5) 썸네일형 리스트형 [React/Next.js] nodemailer 사용법 nodemailer노드 메일러는 Next.js 프레임워크 환경에서 백엔드 서버의 도움 없이도 자체적으로 API route를 제공해 메일 로직을 프론트엔드 내에서 처리 가능하도록 해준다. 1. 라이브러리 설치npm install nodemailernpm install -D @types/nodemailer // 타입 스크립트 사용시에 추가 2. 원하는 mail API와 연동 여기선 gmail과 연동하도록 하겠다.무료이기도 하고 쉬워보였...기 때문. 알고보니 어려웠다. Google 클라우드 플랫폼로그인 Google 클라우드 플랫폼으로 이동accounts.google.comGoogle Cloude 콘솔 로 진입 API 및 서비스 - OAuth 동의 화면으로 들어가 정보 등록 API 및 서비스 - AP.. [REACT18/GSAP] GSAP + ScrollTrigger 사용법 GSAP/Scroll Triigergsap는 다양한 화면 이벤트를 만들어 낼 수 있는 라이브러리다.그 중 ScrollTrigger는 스크롤을 통한 이벤트를 발생시킬 수 있는데요즘은 이런 식으로 이벤트를 통한 동적인 웹페이지를 만드는 것이 유행인 것 같다. 사용 라이브러리필수적인 라이브러리는 다음과 같다. useEffect를 통해 gsap와 ScrollTrigger를 연동gsap를 통한 이벤트 생성ScrollTriiger를 통해 이벤트 조건과 타겟 클래스를 지정하는 것이다. ScrollTrigger 사용법해설도 적어놓을 거지만 간단하게 보고 가자. 1. to 이벤트대상 클래스는 barcodeVideo이며 기준이 되어줄 클래스는 firstVideoBox이다. 시작 지점은 firstVideoBox의 .. [Lenis/GSAP] 패키지 설치와 연동 방법 Lenis/GSAP 부드러운 슬라이드와 슬라이드 이벤트를 조작할 수 있는 패키지1. 패키지 설치npm install @studio-freight/lenis gsap @gsap/react 2. Lenis 설정 + GSAP 연동'use client';import { useEffect, useRef } from 'react';import Lenis from '@studio-freight/lenis';import { gsap } from "gsap";import { ScrollTrigger } from "gsap/ScrollTrigger";export default function LenisScroll({ children }: { children: React.ReactNode }) { const lenis.. [NEXT.JS 14] 14 안정화 버전 프로젝트 생성 및 세팅 1. node.js 설치 https://nodejs.org/ko Node.js — 어디서든 JavaScript를 실행하세요Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org일단 가장 중요한 개발도구 node.js를 안정화 버전으로 다운로드 한다. 2. next.js 프로젝트 생성 npx create-next-app@14.2.24 [프로젝트 이름] --ts --eslint --tailwind --src-dir --app --import-alias="@/*" 이걸 터미널이나 bash에서 원하는 폴더로 이동한 뒤 입력한다. 필자가 사용할 라이브러리를 같이 기입하게 되는데 -- 뒤로 적힌 것들이 그것이다. 3.. [REACT] axios를 사용해야만 하는 이유 문법axios는 매우 간결한 문법을 사용한다.fetch보다 짧고 가독성이 높다. 변환 및 파싱Json으로 형식 변환을 지정없이도 할 수 있다.rest api를 받아오는 것도 자동으로 파싱해준다. 에러 체크 fetch는 '요청 실패'에 대한 오류만을 체크한다. (데이터 값을 보내는 것)즉, 받아오는 값이 에러가 난다거나 데이터를 보낸 후 404에러나 500에러가 나도 전혀 체크하지 못한다.axios는 각 에러에 대한 다양한 처리를 할 수 있어 훨씬 간편하고, 유용하다. 인터셉터 기능요청 전송 전에 가로채 값을 체킹하거나 추가하는게 자유롭다.fetch가 불가능한건 아니지만 MVVM 패턴에 좀 더 가까워진다. 요약 : axios 그냥 쓰자. 이전 1 다음
