Frontend/Next.js

📌모달창 만들기 nextjs는 특별한 조치를 취하지 않으면 server component로 간주한다. 그래서 useState를 사용하려면 맨 위쪽에 "use client"; 코드를 추가해 client component로 만들어야 한다. "use client"; import { useState, useEffect, useRef } from "react"; import gsap from "gsap"; import Link from "next/link"; import "./modal.modul.css"; export default function Modal() { const [burgerClass, setBurgerClass] = useState("burger-bar unclicked"); const [isM..

📌next.js - favicon 기본 설정 npm run dev로 실행시키면 위의 title과 아이콘이 저렇게 기본설정 되어있다. 나는 저것을 이렇게 바꿔주었다. 아주아주 간단하다. 📌next.js - favicon 수정 export const metadata = { title: "도이 포트폴리오", description: "Generated by 도이", icons: { icon: "/tree.png", }, }; public파일 아래 사진을 추가한뒤 layout.js 에서 파일에서 metadata 객체에 icons 속성을 추가해주면 된다. 이 사진은 지워줘야 적용이 된다. 📌13버전 이후 바뀐 메타 태그 방식 라우팅 규칙이 변경됨에 따라 SEO에서 필수적인 메타태그 적용 방법도 달라졌다. 기존 Pa..

📌next.js 구조 next.js에서 url과 페이지를 만들고 싶으면 app 폴더 안에 url이름과 같은 폴더 만들고 그 안에 레이아웃 넣기 함수 안에 있는 {children} -> page.js가 들어가는 부분이다. 페이지변경과 상관없이 계속 보여줄 ui는 layout.js쓰면 편하다 !! html 사이에 for, if 사용이 불가능하다. map 반복문 사용시 key = {유니크한값} 넣으면 좋음 / 똑같은 요소들이 반복되면 구분하기 헷갈려하니깐 !! public폴더 안에 있는 이미지를 가져올 때는 경로가 /부터 시작이다. 📌img 넣는 법 1. img 최적화 방법 - lazy loading - 사이즈 최적화 - layout shift 방지 : 이미지 떄문에 레이아웃이 밀리는 현상을 방지한다. - 최..

✔️RoutingNext.jsnext.js는 직접 url을 적어줄 필요없이 파일 시스템을 통해 url이 표현된다.직접적인 page.tsx(jsx)파일이 없는 폴더는 실제 페이지가 없다. 사용자가 url로부터 보게 될 요소는 page.tsx다!! React수동적이 방식이다.  이 url 은 저 컴포넌트, 이 url은 이 컴포넌트 : url은 직접 적어주는 방식 /Home -> /about-us -> /movies/:id -> : id값에 따라 동적으로 해당하는 Moive 컴포넌트를 렌더링 한다.   usePathname : react hook으로 user가 머물고 있는 url을 알려준다.  ✔️Rendering우리의 react component(javascript function)를 가져와서 브라우저가 이..

📌Next.js 란 ? React는 라이브러리이고, Next.js는 리액트의 프레임워크이다. 라이브러리와 프레임워크의 주요 차이점은 "Inversion of Control"(통제의 역전)이다. 라이브러리에서 메서드를 호출하면 사용자가 제어할 수 있다. 그러나 프레임워크에서는 제어가 역전되어 프레임워크가 사용자를 호출한다. 라이브러리 - 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림 - react 프레임워크 - 파일 이름이나 구조 등을 정해진 규칙에 따라 만들고 따름 - next.js 라이브러리는 “어플리케이션을 만들 때 필요한 자원(기능: 함수)의 모임”이고, 프레임워크는 “코드를 작성하는 기본적인 틀을 제공해서 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경”이다. 즉..