전체 글14 마지막) vercel에 무료로 배포하기 여기까지 완료했다면 이제 웹상에서 내 프로젝트를 볼 수 있도록 배포해보자 배포를 하는 방법은 여러가지가 있는데 next js는 쉽게 배포를 할 수 있는 vecel과 연동을 제공한다 https://vercel.com/ Develop. Preview. Ship. For the best frontend teams – Vercel Deploy web projects with the best frontend developer experience and highest end-user performance. vercel.com 해당 홈페이지에 로그인이 완료됐다면 다음과 같은 화면이 뜰것이다. import project를 클릭하자 기본값으로 셋팅하고 next.js가 선택되어있는지 확인한 후 deploy를 시작한다. 배.. 2020. 8. 1. 7) styled-components 적용하기 데이터를 긁어오고 화면에 표시하는 작업까지 완료되었다. 이제는 styled-components로 이쁘게 바꾸어보자. styled-components를 프로젝트에 적용하기위해서는 몇가지 설정이 필요하다. 먼저 yarn으로 패키지를 설치해보자 yarn add styled-components 설치가 완료되면 pages폴더에 _document.js파일을 생성한다. import Document from 'next/document' import { ServerStyleSheet } from 'styled-components' export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new Se.. 2020. 8. 1. 6) dot-env 민감한 정보는 따로 숨겨보자 API 키 같은 정보는 github repository처럼 오픈된 장소에 올려서는 안된다. 악용의 여지가 있기 때문이다. dot-env라는 녀석을 이용해서 키를 관리해보자 yarn add dot-env 그리고 루트 경로에 .env파일을 만들고 아래처럼 작성해보자. 발급받은 키도 같이 입력해준다. rapidApiKey=발급받은키 입력 next js에서는 dotenv를 사용하기 위해서 추가 설정이 필요하다 next.config.js 파일을 생성해준다. module.exports = { env: { rapidApiKey: process.env.rapidApiKey, }, }; 여기까지 작업한 내용을 깃에 올려보자 *** .env파일은 깃에 올리지 않는다 -> .gitignore파일에 추가한다. 잘따라왔다면 g.. 2020. 8. 1. Mac에 Slack 메신저 설치, Workspace 생성하기 업무용 메신저로 많이 쓰이는 슬랙을 설치해 보자 https://slack.com/intl/en-kr/downloads/ Downloads Download Slack for free for mobile devices and desktop. Keep up with the conversation with our apps for iOS, Android, Mac, Windows and Linux. slack.com 해당 링크에서 슬랙을 다운 받는다. 업무용 메일이 있다면 해당 이메일을 입력해서 접속하면 되지만, 처음 시도 하는 사람들은 아래 사진 처럼 새로운 work space를 만들어보자 2020. 7. 25. 5) 리액트에서 API 요청하기 SWR 자, 이제 리액트에서 API를 요청하기 위한 준비를 해보겠다. 일반적으로 리액트에서 많이 쓰이는 Ajax API 통신용라이브러리는 1.브라우저에 내장된 window.fetch 2. Axios 3. Jquery Ajax등이 있다. 이번에 나는 React hooks에 최적화됐다는 SWR이라는 녀석을 써보기로 한다. https://swr.vercel.app/ SWR: React Hooks for Data Fetching SWR is a React Hooks library for data fetching. SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the.. 2020. 7. 17. 4)날짜 처리하기 date-fns 앞서 코로나 바이러스 API를 살펴보니 날짜라는것이 필요해졌다. 자바스크립트에서는 날짜를 다음처럼 처리한다. var date = new Date(); //Thu Jul 16 2020 23:27:34 GMT+0900 (Korean Standard Time) 이런식으로 생성하는데 2020-07-16으로 포맷을 일일이 바꿔주는것은 상당히 귀찮은 일이다. node에는 여러가지 날짜를 처리하는 라이브러리들이 있는데 이중에서 date-fns라는 라이브러리를 사용해보겠다. https://date-fns.org/ Modern JavaScript Date Utility Library date-fns provides the most comprehensive yet simple and consistent toolset fo.. 2020. 7. 16. 이전 1 2 3 다음
