Web/Next.js
Next.js에 Tailwind CSS 적용하기
Next.js에 Tailwind CSS 적용하기
2021.01.21Tailwind CSS Tailwind CSS는 Bootstrap과 흡사한 UI 프레임워크 입니다. Tailwind CSS는 커스터마이징이 가능한 저수준 CSS 프레임 워크로, 맞춤형 디자인을 작성하는 데 필요한 모든 빌딩 블록을 제공합니다. 대부분의 UI 프레임워크의 경우 미리 디자인 되어 있는 구성요소가 있어 처음에는 빠른 장점이 있습니다. 하지만, 사이트를 사용자가 지정한 디자인으로 제작하고 싶은 경우에는 많은 제약이 따릅니다. Tailwind CSS는 HTML을 떠나지 않고도 커스터마이징 가능한 디자인을 만들 수 있는 저수준 유틸리티 클래스를 제공합니다. npm/yarn을 통해 Tailwind 의존성 설치하기 Tailwind CSS 패키지를 프로젝트에 설치합니다. npm을 사용하는 경우 # Nex..
React 개발이 이렇게 쉬웠나? (Feat. Next.js)
React 개발이 이렇게 쉬웠나? (Feat. Next.js)
2020.12.03해당 글은 제가 DEVIEW 2020의 발표 영상 DEVIEW 2020 - React 개발이 이렇게 쉬웠나? (Feat. Next.js)을 보면서 문서화 및 제 의견을 추가한 글입니다. 0.React 개발이 이렇게 쉬웠나? (Feat. Next.js) 1. UI Library React / UI 라이브러리 리액트 리액트를 이용한 개발은 처음에는 모든 것을 해결해줄 만능 해결책을 가진 것 같이 느껴진다. 그러나 프로젝트의 규모가 커지고, 계속 사용할 수록 리액트를 이용한 개발의 어려운 점들이 등장한다. 1. UI Library React에서는 현재 리액트 개발이 어려운 이유와 이를 설명하기 위해 리액트와 리액트 개발에 대해 소개하려한다. 1.1 커져가는 React 생태계 리액트는 꽤나 과거부터 2020년 ..
Next.js의 기본 구조 정리
Next.js의 기본 구조 정리
2020.11.22Next.js 구조 Next.js의 기본 구조는 다음처럼 구성됩니다. |-- pages | |-- _document // HTML Document, Application Container, 각종 페이지 등을 작성한다. | |-- _app // Application Container. 공통의 레이아웃을 작성한다. | |-- _error // Error Page. | |-- hello // Hello Page /hello로 시작되는 경로의 페이지 컴포넌트 _app // import App from 'next/app' function MyApp({ Component, pageProps }) { return } // Only uncomment this method if you have blocking data ..
Next.js에서 Apollo Client 사용하기
Next.js에서 Apollo Client 사용하기
2020.11.14Apollo Client @apollo/client 라이브러리를 이용합니다. Apollo는 GraphQL 서버에서 필요한 정확한 데이터를 쉽게 query할 수 있는 GraplQL 클라이언트입니다. 데이터를 가져오고 변조하는 것 이외에도, Apollo는 query와 그 결과를 분석하여 클라이언트 사이드 캐시를 구성하며 이를 통해 추가 query와 mutation이 실행될 때 최신 상태로 유지되게 합니다. Next.js에서 Apollo Client 사용하기 SSR을 할 수 있는 Next.js 프레임워크에서 Apollo Client를 사용하는 방법이 여러가지 있다. next-with-apollo라는 라이브러리가 유명하지만 아쉽게도 최신 스펙인 getServerSideProps나 getStaticProps를 정..
create-react-app 와 next.js 어떤 걸 써야 할까?
create-react-app 와 next.js 어떤 걸 써야 할까?
2020.09.15CRA(eject X) vs CRA(eject O) vs Next.js CRA without eject CRA에서 eject를 하지 않고 사용하는 방법 React를 이용하여 프로젝트를 만들 때 사용하는 가장 기본적인 방법 장점 신경써야 할 코드량이 적음 webpack 설정을 신경쓰지 않을 수 있음 단점 react-scripts로 인한 추상화로 설정 flow 이해가 힘듬 추상화 정도가 높아서 라이브러리 적용시 webpack등 코어한 부분을 건드려야할 경우, 결국 eject를 해야 함 (CRA 공통) webpack-dev-server를 이용한 개발 모드를 위한 서버만 제공, build된 파일로 프로덕션 서버(BFF) 실행을 위해서는 CRA와 동떨어진 새로운 서버를 만들어야함 (CRA 공통) SSR을 자체적으..
[Next.js] 공유된 컴포넌트 사용하기
[Next.js] 공유된 컴포넌트 사용하기
2020.01.21이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다. 오역 및 오탈자 발견시 댓글로 제보해주시면 감사하겠습니다. Next.js는 결국 페이지라는 것을 알 것입니다. 리액트 컴포넌트를 내보내고 해당 컴포넌트를 pages 디렉토리 안에 넣으면 페이지를 만들 수 있습니다. 그 결과로 파일명에 기반한 고정된 URL을 얻을 수 있습니다. 내보내진 페이지들은 자바스크립트 모듈이기 때문에, 다른 자바스크립트 컴포넌트도 불러올 수 있습니다. 무슨 자바스크립트 프레임워크를 쓰던지 이와 같은 기능을 기대할 것입니다. 이번 수업에서 우리는 공통된 헤터 컴포넌트를 만들고 여러 페이지에서 이를 사용할 것입니다. 마지막으로는 레아아웃 컴포넌트를 구현하고 이것이 어떻게 여러 페이지가 어떻게 보일 지를 정하는 데 도움을 줄 것..
[Next.js] 페이지 간 이동하기
[Next.js] 페이지 간 이동하기
2020.01.20이 글은 Next.js의 공식 튜토리얼을 번역한 글입니다. 오역 및 오탈자 발견시 댓글로 제보해주시면 감사하겠습니다. 이제 간단하게 Next.js 앱을 생성하고 실행하는 법은 알 것입니다. 이 앱은 오직 하나의 페이지를 가졌지만, 우리는 가능한 많은 페이지를 추가할 수 있습니다. 예를 들어, pages/about.js에 다음과 같은 내용을 추가하여 "About" 페이지를 생성할 수 있습니다. export default function About(){ return( This is the about page ); }이제 http://localhost:3000/about 페이지에 접근할 수 있을 것입니다. 다음으로는 이 페이지들을 연결해야하는데, 우리는 HTML의 태그를 사용해왔습니다. 그러나 클라이언트 사이..
[Next.js] Next.js 시작하기
[Next.js] Next.js 시작하기
2020.01.15🤔 Next.js란? 단일 페이지의 자바스크립트 애플리케이션을 만드는 것이 꽤나 어려운 일이라는 것을 다들 알고 있을 것이다. 다행히도, 우리에게는 다양한 선택지의 프레임워크와 라이브러리가 있다. 그럼에도 불구하고 원하는 애플리케이션을 만들 수 있기까지는 상당한 러닝커브가 있다. 우리가 배워야 할 것들은 CSR(Client Side Rendering), 페이지 레이아웃, API 등이다. 그것만 있는가? 특정 페이지는 SSR(Server Side Rendering)이 필요할 수 있다. 따라서 우리는 더 간단하지만, 수정하기 쉬운 어떤 것이 필요하다. PHP를 이용했을 때, 웹 앱이 어떻게 만들어지는 지 생각해보자. 파일을 만들 것이고, PHP 코드를 작성하고, 간단하게 배포하면 된다. 라우팅에 대해서 그렇..