CHAPTER1. 프로젝트 생성하기

호랑이소굴·2019년 11월 10일
0

Nextjs + applo

목록 보기
1/1
post-thumbnail

Nextjs 와 graphql 을 사용해보자

1. apllo - qraphqh 클라이언트
2. priteer, eslint - 코드 설정
3. immer - 불변성 관리
4. jest, enzyme - 테스트
  • mkdir (project-name)
    프로젝트 파일 생성

  • cd (project-name)
    프로젝트 파일 이동

  • yarn init -y
    package.json 생성 및 업데이트
    yarn 을 설치해야 사용 가능
    -y : package.json default 생성하는 옵션

  • package.json 추가

{
	...
	"scripts": {
		"dev": "next",
    	"build": "next build",
    	"start": "next start",
    	"lint": "eslint pages/**/*.tsx",
    	"lint:fix": "eslint --fix pages/**/*.tsx"
  	}
}
  • tsc -init
    typescript 미리 설치해야 함
    tsconfig.json 생성

  • yarn add react react-dom next
    react next 추가

  • yarn add typescript --dev
    TypeScript 추가

  • yarn add eslint eslint-config-airbnb-base eslint-plugin-import --dev
    ESLint packages

  • yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev
    TypeScript ESLint packages

  • touch .eslintrc.js

// .eslintrc.js use vim
module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  extends: [
    // Airbnb style guide 적용
    "airbnb-base",
    // TypeScript ESLint recommanded style 적용
    "plugin:@typescript-eslint/eslint-recommended"
  ]
};
  • mkdir pages
    Nextjs 규칙 적용

  • touch pages/index.tsx

vim pages/index.tsx
	function Home () {
	  return <div>Welcome to Next.ts!</div>
	}
	export default Home
  • tsconfig.json 주석 해제
    "jsx": "preserve",

  • yarn run lint
    eslint 설정과 다른 곳 경고

  • yarn run lint:fix
    eslint 설정과 다른 곳 자동 수정

  • yarn run dev
    서버 확인


chapter2 예고 - jest, enzyme 추가 및 applo 연동

혹시나 이상한 부분이 있다면 댓글 달아주시면 내용 수정하겠습니다!

profile
안녕하세요!

0개의 댓글