1 - 들어가기 앞서.. 팀원과 컨벤션 정의 및 lint 규칙을 정하는 상황이 있습니다. 그런데 작업을 하다 보면 서로 코드 컨벤션에 소홀해지는 경우가 있습니다. 이런 상황일 때, 사용하면 좋은 도구가 husky 입니다. husky 를 사용하면 커밋 전, 푸시 전 등 git hooks 상황에 맞게 코드 규칙을 강제할 수 있습니다. 2 - 용어 및 도구 정리 git hooks git 과 관련한 이벤트가 발생했을 때, 추가 스크립트를 실행하는 기능 git hooks 는 클라이언트 훅과 서버 훅으로 나뉩니다. 클라이언트 훅은 git 이벤트를 실행 시, 실행자의 컴퓨터에서 실행하는 훅입니다. 서버 훅은 git 이벤트를 실행 시, 타 서버에서 실행하는 훅입니다. .git/hooks 폴더 내부에 보면 각 훅을 확인할 수 있습니다. husky git hooks 를 편리하게 사용하도록 도와주는 도구 git 이벤트 실행자는 클라이언트 훅을 사용할 수 있습니다. .git/hooks 폴더 내부에 존재…

패키지 소개 ESLint 란? (ES + Lint) 자바스크립트 소스 코드의 오류를 표시하기 위한 도구입니다. ES란, Ecma Script, 표준 자바스크립트 Lint란, 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류 등을 표시하기 위한 도구 Prettier 란? 코드를 예쁘고 일관성 있게 유지시켜주는 자동완성 도구입니다. eslint 로 소스코드를 분석하고, prettier 로 올바르게 문법을 자동으로 고칠 수 있으므로 함께 사용합니다. airbnb convention 란? 에이비앤비에서 만든 코딩 컨벤션(문법을 이렇게 작성하자! 라는 약속) 입니다. 여러 회사가 만든 코딩 컨벤션이 존재하며, 그중 에어비앤비에서 만든 약속입니다. 적용방법 1. eslint config 패키지 추가 eslint-config 로 시작하는 패키지를 설치 시 extends 옵션에 사용 extends 옵션을 통해 설정을 패키지의 설정을 적용할 수 있음 2. eslint plugin 패키지 추…

1. react 는 pre-rendering 지원 안됨 검포넌트가 렌더링 되고 나서 서버로 api 요청을 한다 검색엔진이 인덱싱하기 어렵다(블로그, 쇼핑몰 등 필요할 시) 따라서 nextJS 를 사용해서 pre-rendering을 적용한다. 2. pre-rendering 두가지 방법으로 나뉨: Static Generation / Server-side Rendering 함수가 실행되는 시점에 따라 나누는 것 빌드 시에 페이지를 만든다(npm start: build 한 파일을 실행하는 것 npm run dev 랑 다름) 프리랜더링은 컴포넌트의 함수보다 먼저 실행된다 (getStaticProps) Incremental Static Generation: 특정 시간이 지나기 전까지는 초기 페이지를 보여주고 이후에는 지난 페이지 보여줌 2-1. getStaticProps Static Generation 빌드 시 페이지를 생성 데이터 패칭 실패 시 redirect, destination 또는 …

Ionic 1. Ionic 이란 아이오닉 페이지는 스스로를 이렇게 소개합니다. https://ionicframework.com/ An open source mobile UI toolkit for building modern, high quality cross-platform mobile apps from a single code base in React.Vue.Angular. 아이오닉은 리액트, 뷰, 앵귤러에서 최신 고품질의 크로스 플랫폼 앱을 구축하기 위한 오픈 소스 모바일 UI 툴킷입니다. 2. Ionic react vs react native 크로스 플랫폼 앱을 구현하기 위해 사용되는 것으로 리액트 네이티브도 있습니다. 아이오닉 리액트와 리액트 네이티브는 어떤 점이 다른지 읽어봤습니다. https://ionic.io/resources/articles/ionic-react-vs-react-native Ionic React is web-first, meaning that it i…