꾸준히 성장하는 개발자

api 주소나 api key를 숨겨주고 싶을 때 사용하는 방법을 알아보자 // index.js const API_KEY = "..."; export default function Home() { const [movies, setMovies] = useState([]); useEffect(() => { (async () => { const { results } = await (await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`)).json(); setMovies(results); console.log(results); })(); }, []); 개발자 모드에서 network 탭으로 들어가 확인을 해보면 api키가 그대로 나오..

시작하기 전 Next.js는 무엇인가?? Next.js는 React 기반의 프레임워크로, React 애플리케이션을 구축하기 위한 기능과 기본 구조를 제공합니다. 다음은 Next.js의 주요 특징입니다: 서버 사이드 렌더링 (Server-Side Rendering, SSR): Next.js는 페이지를 서버 측에서 렌더링하여 초기 로드 속도와 검색 엔진 최적화(SEO)를 개선할 수 있습니다. SSR은 사용자에게 초기 콘텐츠를 빠르게 표시하여 사용자 경험을 향상시킵니다. 정적 사이트 생성 (Static Site Generation, SSG): Next.js는 빌드 시점에 사전 렌더링하여 정적 파일로 생성할 수 있습니다. 이를 통해 동적 데이터를 사전 렌더링하여 정적인 HTML 파일을 생성하고 CDN에 배포할 ..

a태그로 페이지 이동이 가능하나 빨간 줄이 쳐져 있는 것을 볼 수 있다. a태그로 한다고 해서 작동이 안 되는 것은 아니나 페이지가 넘겨질 때마다 전체 페이지가 새로고침이 되는 것을 볼 수 있다. 그만큼 속도는 좀 더 느려진다 에러 메시지를 보면 next/link의 Link를 사용하라고 나온다 그대로 바꿔보게 되면 아래처럼 바꿔줄 수 있다. import Link from "next/link"; export default function NavBar() { return ( Home About Us ); } React에서는 태그 없이 로만도 사용이 가능한데 Next.js 도 만약 저 안에 태그를 안 쓴다면 어떨까? 하지만 단점이 이 Link에 무언가를 전달할 수는 없다는 점이다 예를 들어 style이나 cl..