Search for a command to run...
Articles tagged with #nextjs
GraphQL은 API를 위한 Query Language이다. 우리에게 더 익숙한 REST API와 GraphQL의 차이점이 무엇인지 알아보고, Next.js에서 GraphQL을 사용하는 방법에 대해 알아보겠다. REST API Representational State Transfer의 약자로 URL로 자원을 표현하고 HTTP 요청을 통해 CRUD를 실행하는 API이다. GET api/todos/1PUT api/todos/1 처럼 HTTP 메소...
트위터 로그인 모달창을 만들어보며 넥스트의 parallel routes 와 intercepting routes 을 학습한 내용을 정리해보았습니다. 트위터 로그인 창을 확인해봅시다. 루트 디렉토리 화면을 배경으로 i/flow/login 페이지가 동시에 표시되고 있습니다. 저는 app router 를 학습하기 전까지는 createPortal 을 사용하여 포탈 영역에 로그인 컴포넌트를 띄우는 방식을 사용했었습니다. const NoLogin =()=...
React.js 18 에 도입된 리액트 서버 컴포넌트는 서버에서 동작하는 리액트 컴포넌트를 의미합니다. Next가 권장하는 라우팅 방식인 app router의 기반이 되는 컴포넌트이기 때문에 app router 를 이해하기 위해서는 server component 에 대한 이해가 필요합니다. server component 리액트는 클라이언트단만을 컴포넌트화하는 대신, server component라는 개념을 통해 서버 영역을 컴포넌트화합니다. ...
병렬 라우팅을 이용한 Tabs 구현
SSGgetStaticPropsISR 개요 현재 풀스택 프레임워크인 넥스트를 배우는 중인데, 넥스트의 가장 중요한 특징인 사전렌더링에 대해 정리해보고자 합니다. (page-router 기반으로 배우는 중입니다) 작동원리가 헷갈려서 제가 이해한 대로 정리했습니다. 넥스트를 시작해보면 리액트만 하던 분들은 좀 당황하실건데, index.html 이 없습니다... 바로 넥스트의 특징인 사전렌더링 때문인데요, 그러면 컴포넌트를 어디에 뿌리는가? 바로바...
💡 이 글은 Tailwind에 대한 기초지식을 전제로 쓰인 글입니다. TailwindCSS는 html/xml 국면에서 style를 일괄적으로 트래킹할수 있게 하고, 보다 간편한 반응형 제작, 프리셋 제공 등 여러 이점이 있지만, 프로젝트의 복잡도가 증가하면서 프레임워크에 대한 여러 의문 또는 한계를 만날 수 있다. 본문에서는 필자가 프로젝트를 진행하며 공부한 몇 가지 Tailwind 상식과 주의점을 공유하고자 한다. 동적 className...