목록전체 글 (42)

기록

husky, lint-staged 설정

Package 설치 npm i -D husky lint-staged 설정하기 npx husky install // husky bash 들어잇는 폴더 생성 npx husky add ./husky/pre-commit // 커밋시 실행할 bash 파일 추가 pre-commit #!/bin/sh . "$(dirname "$0")/_/husky.sh" npm run precommit // 실행할 스크립트 package.json { ... "scripts": { "start": "next start", "dev": "next dev", "build": "next build" "lint:fix": "eslint --fix src", "precommit": "lint-staged" }, "lint-staged": { ..
Next 2021. 7. 2. 12:05
Prettier, Eslint, tsconfig 설정

Prettier 설치 npm i -D prettier Prettier 파일 설정 root에 .prettierrc.js 생성 module.exports = { singleQuote: true, //인용부호 작은 따옴표 사용 semi: true, //모든 문법 끝에 세미콜론 추가 useTabs: false, tabWidth: 2, //탭 공백 넓이 trailingComma: 'none', //후행 쉼표 제거 printWidth: 80, //줄바꿈 넓이 bracketSpacing: true, // 브라켓 간격 arrowParens: 'avoid', //arrow function 매개변수 하나일때 괄호 제거 jsxSingleQuote: true //jsx 인용부호 작은 따옴표 사용 }; ESLint 파일 설정 ..
Next 2021. 7. 1. 17:46
TDD

TDD(Test-driven development) 테스트 주도 개발(Test-driven development, TDD)은 매우 짧은 개발 사이클을 반복하는 소프트웨어 개발 프로세스 중 하나이다. 우선 개발자는 바라는 향상 또는 새로운 함수를 정의하는 (초기적 결함을 점검하는) 자동화된 테스트 케이스를 작성한다. 그런 후에, 그 케이스를 통과하기 위한 최소한의 양의 코드를 생성한다. 그리고 마지막으로 그 새 코드를 표준에 맞도록 리팩토링한다. 이 기법을 개발했거나 '재발견' 한 것으로 인정되는 Kent Beck은 2003년에 TDD가 단순한 설계를 장려하고 자신감을 불어넣어 준다고 말하였다. TDD 는 소프트웨어 개발 방법론 중의 하나이다. TDD 는 Test-Driven Development, 즉 테..
Develop 2021. 7. 1. 16:53
Next JS 시작하기 (feat.typescript)

프로젝트 생성 npx create-next-app --typescript 프로젝트 구조 왼쪽 - 프로젝트 설치시 기본 구조 오른쪽 - 기존 리액트 프로젝트에서 src폴더에 파일들을 관리했었기때문에 익숙한 구조로 구조변경 당장에 사용하지않는 파일 및 폴더 삭제 public 폴더는 남겨놔야한다 안에 들어가있는 favicon 404 에러가 표출된다... Babel 설정 프로젝트 root에 .babelrc 파일생성 { "presets": ["next/babel"] } 프로젝트 실행 npm run dev or npm run build && npm start
Next 2021. 6. 8. 17:46
useState, useEffect

useState 용법 const [count, setCount] = useState(0) count -> 현재 상태값 setCount -> 상태값 변경 useState(0) -> 초기 상태값 0 Count 예제 const Count = (props) => { return{props.count} } const App = () => { const [count, setCount] = useState(0) const handleIncrease = () => { setCount(count + 1); // setCount(prevState => prevState + 1) 이렇게도 사용가능 } const handleDecrease = () => { setCount(count - 1); } return ( + - ) ..
React 2021. 6. 3. 17:51
state, props

State - 컴포넌트 안에서 관리되어짐. - 변경가능 - 동적인 상태값 const Name = (props) => { return{props.name} } const App = () => { const [name, setName] = useState('dev.jung') return } Props - 부모 컴포넌트로부터 받는 값 - 수정 불가능 const Name = (props) => { return{props.name} } const App = () => { return }
React 2021. 6. 3. 15:58
Prev 1 ··· 3 4 5 6 7 Next