생각하다 생각하다

Next.js에서 구글 폰트 사용하기 import { 폰트명 } from "next/font/google"; 에 글로벌 폰트 적용시키기 import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export default function MyApp({ Component, pageProps }) { return ( ) } 한 페이지에서만 폰트 사용하기 import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin'] }) export default function Home() { return ( Hello World ) } Font F..

Next.js 13버전의 핵심기능을 알아보자 안녕하세용. Next.js가 13버전으로 업데이트 되었습니다. 이번 업데이트는 개발자들에게 더 나은 경험과 편의성을 제공해주면서 성능과 효율을 향상시키는 기능들이 많이 생겼습니다. 이번 포스팅에서는 nextjs 13버전의 주요 기능들과 업데이트된 API에 대해 알아보도록 하겠습니당. 🧐 본 포스팅은 공식문서를 토대로 작성되었으며, 모든 업데이트 사항을 포함하고 있지는 않습니다. 🍊 app/ 디렉토리 pages를 쓰던 이전 버전과는 다르게 13부터는 app/ 디렉토리를 사용하여 라우팅합니다. layout.js layout.js 라는 이름으로 파일을 생성하면 레이아웃을 사용할 수 있습니다. 이는 내비게이션 바와 같은 공통적인 UI를 구현하는 부분이 됩니다. exp..

🧐 React Hooks의 useMemo를 알아보자 안녕하세용. 오늘은 리액트 hooks 중에서도 자주 사용되는 편인 useMemo에 대해서 알아보려고 합니다. useMemo() 훅은 React에서 제공하는 하나의 최적화 기술로, 계산 비용이 많이 드는 함수 호출을 메모이제이션하는 데 사용됩니다. 이를 통해 컴포넌트의 리렌더링을 줄이고 성능을 향상시킬 수 있습니다. 본 포스팅은 react 공식 문서를 참고하여 작성되었습니다. 오늘은 useMemo Hook에 대해 알아보고 사용해 볼게용 🧐 🍊 useMemo는 뭐고, 어디에 사용될까? useMemo()는 React Hook 중 하나로, 함수형 컴포넌트에서 계산량이 많은 연산을 최적화하는 용도로 사용됩니다. useMemo()는 메모리에 값을 저장해두고, 해당..

자바스크립트에서 Set과 Map의 차이점에 대해 알아보자 자바스크립트에서 사용하는 Set과 Map은 알고리즘을 풀 때 유용하게 사용하는 함수인데요. 이번 포스팅에서는 자바스크립트의 Set과 Map에 대해 비교해보고, 각각의 활용법에 대해 알아볼게요 🧐 🍊 Set이란? Set은 중복을 허용하지 않는 값들의 집합입니다. 이는 고유한 값을 저장하고 검색하기 위해 사용됩니다. Set은 순서가 없기 때문에 요소에 인덱스로 접근할 수 없으며, 반복문을 통해 요소를 순회할 수 있습니다. Set은 주로 중복된 값을 제거하거나 고유한 값들을 추출하는 용도로 사용됩니다. 📍Set 생성하기 const set = new Set(); 📍값 추가하기 set.add(1); set.add(2); set.add(3); 📍값 삭제하기 ..

🧐 React Hooks의 useContext를 알아보자 props를 사용할 때 가끔 비효율적이라고 느낄 때가 있죠. 그럴 때 사용할 수 있는 것이 바로 context입니다. 본 포스팅은 react 공식 문서를 참고하여 작성되었습니다. 오늘은 useContext Hook에 대해 알아보고 사용해 볼게용 🍊 useContext란 무엇일까?useContext란 리액트 hook의 하나로, 부모 컴포넌트에서 생성한 context를 읽고(read), 구독(subscribe)할 수 있게 하는 도구입니다. 🤷🏻‍♀️ context? 그게 뭔데요context란 말이 와닿지 않을 수 있습니다. context를 직역하면 문맥, 배경, 상황이라는 뜻인데, props의 대안으로 나온 것이기 때문에 중간 컴포넌트를 거치지 않아도..

Next.js 파일 기반 라우팅과 동적 라우팅을 알아보자 👀 React에서 주로 사용되는 라우팅 라이브러리는 코드 기반 라우팅을 제공하고 있습니다. 이 방식은 라우팅을 컴포넌트 내에서 코드로 관리하죠. 일반적으로 URL 경로에 대한 라우팅 정보와 해당 경로에 렌더링할 컴포넌트를 매핑하는 방식으로 사용하고 있죠. 반면에, Next.js에서는 조금 다르게 라우팅을 합니다. 간단히 말하면, 프로젝트 디렉토리 내의 페이지 파일의 경로와 URL 경로가 일치하는 것입니다. 오늘은 이 파일 기반 라우팅에 대해서 알아볼게요 🧐 🍊 파일 기반 라우팅이란? Next.js 에서는 파일을 기반으로 라우팅됩니다. 🙋🏻‍♀️ 파일 기반 라우팅? 이게 무슨 소린가요 🧑🏻‍🏫 파일 이름이 곧 url 경로가 된다는 소리입니다! 📍 페..

리액트에서 컴포넌트와 태그의 차이점은 무엇일까? react에서 a 태그와 Link 컴포넌트는 링크를 생성하고 페이지를 전환할 때 사용됩니다. 그런데 이 두 접근 방식은 서로 다른 용법을 갖고 있습니다. 이번 포스팅에서는 a 태그와 Link 컴포넌트의 차이점에 대해 설명하고, 각각의 장단점과 어떤 상황에서 사용해야 하는지에 대해 알아보도록 할게요 🧐 🍊 태그란? 태그는 HTML에서 하이퍼링크를 생성하는 태그로 다른 웹 페이지, 문서, 이미지, 동영상 등 다양한 리소스에 대한 링크를 생성할 수 있습니다. 사용자가 클릭하면 해당 링크가 이동하거나 특정 동작을 수행하게 됩니다. 📍 태그 사용법 a태그란 by 3o14 웹 페이지에서 태그를 클릭하면 브라우저는 해당 링크의 주소로 이동하며, 새로운 페이지를 불러옵니..

next.js 새 프로젝트 생성하기 안녕하세요! 요즘 react의 프레임워크인 next.js를 공부 중이에요. 오늘은 next.js 프로젝트 생성하는 방법에 대해서 알아볼게요. 👀 🍊 Next.js란? Next.js는 리액트 기반의 프레임워크로, 웹 애플리케이션 개발을 더욱 쉽고 효율적으로 만들어줍니다. 이 Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하여 페이지의 초기 로딩 속도를 향상시키고 SEO(검색 엔진 최적화)를 개선할 수 있습니다. 이는 사용자 경험과 웹 애플리케이션의 성능을 향상시켜줍니다. 🍊 Next.js의 특징 📍 서버 사이드 렌더링(SSR) Next.js는 서버 사이드 렌더링(Server Side Rendering)을 지원하여 초기 로딩 속도를 향상시키..