EVN 란? 개발자만 알아야 하는 민감한 정보(Port, DB, API KEY 등)나 Git, 오픈소스에 올리면 안 되는 값들이 있다. 이때 환경변수 파일을 외부에 만들어 저장시켜 소스코드 내에 하드 코딩하지 않고 사용할 수 있다. 1. EVN 파일 사용 방법 1-1) 최상위 경로(root)에서 .evn 파일 생성 환경 변수로 지정할 값 작성 리액트(create-react-app)일 경우 변수명 REACT_APP_으로 시작한다. ( ex) REACT_APP_API_KEY ) NextJS의 경우 NEXT_PUBLIC_으로 시작한다. 1-2) .gitignore 설정 추가 .evn파일을 등록해주어야 Git에 Push 할 때, 파일이 올라가지 않는다. 1-3) 환경 변수 사용 const API_KEY = pr..

데이터가 유효할 때만 화면이 보이는 게 좋은가 또는 Loading화면을 보여준 다음에 데이터가 받는 게 좋을지 선택하여 SSR 방법을 사용할지 redirect, rewrites을 사용할지 선택하면 된다. * Source Code * https://github.com/kangilbin/React.js/blob/master/nextjs-study/next.config.js 1. redirect 사용 방법 요청 URL을 임의의 URL 변경시켜 준다. parameter 값은 확인 가능하다. ( next.config.js ) const { redirect } = require("next/dist/server/api-utils"); const nextConfig = { reactStrictMode: true, sw..

1. Style JSX 스타일을 꾸미는 방법 import Link from "next/link"; import { useRouter } from "next/router"; export default function NavBar() { const router = useRouter(); return ( Home About ); } 컴포넌트에 CSS를 적용시켜준다. global : 모든 컴포넌트에 CSS 적용한다. - NextJS는 하나의 큰 앱이 아니라 각각의 나누어진 페이지이기 때문에 하나의 페이지에 작성한 global CSS는 다른 페이지에 영향일 끼칠 수 없지만, 컴포넌트로 하위에 넣게 되면 적용된다. ( _app.tsx에 넣어서 전체 페이지에 적용) 2. Custom App Component ( 템플..

* NextJS 프로젝트 설치 및 실행 * https://cocococo.tistory.com/42 * Source Code * https://github.com/kangilbin/React.js/tree/master/nextjs-study 1. Routes pages 폴더 안에 새로운 page 파일을 넣게 되면 자동으로 이동할 수 있다. ( about.tsx ) export default function Potato() { return "about"; } export default로 만들어 주어야한다. 함수명은 상관없다. 파일 이름이 그대로 url로 들어간다. index 파일은 메인 홈페이와 연결되어있다. http://localhost:3000 => index 페이지 2. Routing import L..

NextJS Next.js는 Pre-Rendering, 서버 사이드 렌더링(SSR), 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다 * Pre-Rendering, SSR, CSR 개념 * https://cocococo.tistory.com/41 1. NextJS 실행 과정 1) reactJS를 백엔드에서 동작시켜서 페이지를 미리 만들어 컴포넌트들을 렌더링 시킨다. 2) 렌더링이 끝났을 때 HTML이 되고 HTML를 페이지 소스 코드에 넣어준다. 3) 사용자는 자바스크립트와 reactJS가 로딩되지 않더라도 콘텐츠를 볼 수 있다. 4) react가 로딩이 끝났을 때 기본적으로 존재하는 것들과 연결시켜주어 react ..

NextJS Next.js는 Pre-Rendering, 서버 사이드 렌더링(SSR), 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 개발 프레임워크이다 * ReactJS는 Client-Side-Rendering 방식이다. 1.Client-Side-Rendering( CSR ) 이란? CSR은 클라이언트(사용자)에서 모두 처리하는 방법으로 서버에서 전체 페이지를 최초에 한번 렌더링 하여 보여주고 사용자가 요청할 때마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링 하는 방식이다. SSR과 달리 서버에 HTML 문서를 요청하는 것이 아니라, 브라우저에서 자바스크립트로 콘텐츠를 렌더링 하는 것이다. ( 최초 렌더링된 HTML ) ..

라이브러리 설치 및 기본 사용 법은 아래 링크에서 확인 https://cocococo.tistory.com/29 Share Layout Animation 레이아웃 공유 란? 서로 다른 애니메이션 효과를 자연스럽게 이어지도록 하는 방법이다. 1. Layout Animation ( CSS 변경을 통한 자동 애니메이션 적용 ) Layout에 prop을 사용한 애니메이션 적용 방법 Layout prop이란? element에게 prop을 주어 CSS를 변경하게되면, 해당 element는 Layout이 바뀔 때 애니메이션 효과가 발생한다. ( CSS 때문에 Layout이 바뀐다면 저절로 애니메이션 효과가 이루어진다. ) function App() { const [clicked, setClicked] = useSta..

라이브러리 설치 및 기본 사용 법은 아래 링크에서 확인 https://cocococo.tistory.com/29 AnimatePresence AnimatePresence 란? elemet가 나타나거나 사라질 경우 애니메이션 효과 발생시키는 컴포넌트이다. 자연스러운 show / hide의 애니메이션 효과를 부여한다. * AnimatePresence의 규칙 * 1. visible상태여야 한다. 2.내부에는 조건문이 있어야 한다. 1. AnimatePresence를 사용한 Show / Hide 구현 import { motion, AnimatePresence } from "framer-motion"; import { useState } from "react"; import styled from "styled-c..

라이브러리 설치 및 기본 사용 법은 아래 링크에서 확인 https://cocococo.tistory.com/29 1. useScroll Hook을 사용한 Scroll에 따른 애니메이션 효과 적용 useScroll Hook은 Scroll에 대한 좌표값을 얻는다. import { useScroll } from "framer-motion"; const { scrollY, scrollYProgress } = useScroll(); useEffect(() => { scrollY.onChange(() => { console.log(scrollY.get(), scrollYProgress.get()); }); }, [scrollY, scrollYProgress]); scrollY : 픽셀 단위 수직 스크롤 값 scro..

라이브러리 설치 및 기본 사용 법은 아래 링크에서 확인 https://cocococo.tistory.com/29 1. Drag 효과 const boxVariants = { hover: { scale: 1.5, rotateZ: 90 }, click: { scale: 1, borderRadius: "100px" }, // 색상을 줄때 string형(blue 등)으로 주면 animate가 안된다. rgb값을 넣어야 한다. drag: { backgroundColor: "rgb(46,204,113)", transition: { duration: 3 } }, }; function App() { return ( ); } export default App; whileHover : 마우스를 올려놓았을 때 whileTap..