Large Rainbow Pointer
반응형
프로젝트 초기 세팅 (with 템플릿, eslint, prettier, commitLint, tailwind)
💜 프로젝트 구현2024. 7. 10. 16:39프로젝트 초기 세팅 (with 템플릿, eslint, prettier, commitLint, tailwind)

시작하며...이번 프로젝트에서 프로젝트 초기 세팅을 하게 되었는데 초기 세팅을 진행한 순서와 방법에 대해 글을 작성하려고 한다. 1. 템플릿 만들기가장 먼저 깃허브 이슈와 Pull Requset 템플릿을 만들었다.만드는 방법은 아래 링크에서 확인할 수 있다. https://jjang-j.tistory.com/79 [GitHub] 깃허브 이슈(issue) & PR(Pull Request) 템플릿 만들기☘️ 시작하기 앞서 깃허브로 협업을 하기 위해서 이슈와 PR 이 필요하다. ☘️ 이슈 템플릿 만들기 1. 레포지토리의 Settings 창에 들어온다. 이슈를 생성할 레포지토리의 오른쪽에 있는 Settings 를jjang-j.tistory.com 이슈 템플릿은 위에 있는 내용 그대로 사용하였고, PR 템플릿은 ..

[React] 좋은 리액트 코드 작성을 위한 환경 구축하기
💜 리액트/React2024. 6. 18. 14:23[React] 좋은 리액트 코드 작성을 위한 환경 구축하기

(해당 게시글은 모던 리액트 Deep Dive 를 참고해서 작성한 글입니다.) ESLint를 활용한 정적 코드 분석버그와 예기치 못한 작동을 방지하기 위해 여러 가지 방법이 있는데 그 중에 정적 코드 분석이 있다. 정적 코드 분석이란?코드의 실행과는 별개로 코드 그 자체만으로 코드 스멜(잠재적으로 버그를 야기할 수 있는 코드)을 찾아내어 문제의 소지가 있는 코드를 사전에 수정하는 것 자바스크립트에서 가장 많이 사용되고 있는 정적 코드 분석 도구가 바로 ESLint 이다. ESLint 살펴보기ESLint 는 어떻게 자바스크립트 코드를 읽어서 분석할까?자바스크립트 코드를 문자열로 읽는다.자바스크립트 코드를 분석할 수 있는 파서(parser)로 코드를 구조화한다.2번에서 구조화한 트리를 AST(Abstract..

[React] ESLint & Prettier 설정 방법
💜 리액트/라이브러리2023. 12. 22. 15:16[React] ESLint & Prettier 설정 방법

+) 팀 프로젝트에서 ESLint & Prettier 적용한 내용 https://jjang-j.tistory.com/129 프로젝트 초기 세팅 (with 템플릿, eslint, prettier, commitLint, tailwind)시작하며...이번 프로젝트에서 프로젝트 초기 세팅을 하게 되었는데 초기 세팅을 진행한 순서와 방법에 대해 글을 작성하려고 한다. 1. 템플릿 만들기가장 먼저 깃허브 이슈와 Pull Requset 템플릿jjang-j.tistory.com 시작하며...팀 프로젝트를 하다보면, 사람마다 코드 스타일이 다른 경우가 발생한다.그래서 코드의 규칙을 설정하여 일관성을 맞춰주기 위해 eslint 와 prettier 를 사용한다. 실제로 나도 팀프로젝트를 진행하면서 eslint 와 prett..

반응형
image
loading