천천히 알아가는 세상

안녕하세요. 이번에는 VS Code에서 ESLint 설정하는 방법에 대하여 알아보겠습니다. 실습환경 React - create-react-app 1. Linting Formatting에 가깝지만 더 많은 규약과 규율을 검사해 주는 작업이다. 웹 개발에서는 Airbnb에서 사용하는 Linting 규율을 많이 사용한다. 2. ESLint ESLint는 코드를 정적으로 분석하여 문제를 빠르게 찾습니다. ESLint는 JavaScript 코드의 문제를 찾고 수정하는 데 도움이 되는 오픈 소스 프로젝트입니다. JavaScript를 브라우저에서 작성하든 서버에서 작성하든, 프레임워크가 있든 없든 ESLint는 코드가 최상의 수명을 유지하도록 도울 수 있습니다. 3. ESLint 설치 설치 시 react 설치한 my..

안녕하세요. 이번에는 VSCode에서 Prettier을 설정하는 방법에 대하여 알아보겠습니다. 실습환경 - React - create-react-app 1. Formatting Code의 스타일을 통일시켜 준다. 문법이 아닌 코드의 스타일을 통일시켜 줘서 가독성을 높이고 버그를 예방한다. Prettier를 사용하여 관리할 수 있다. 2. React 설치 npx create-react-app my-app 3. Prettier 사용자 간의 코드 스타일을 맞춰주는 기능을 한다. 4. Prettier설치 -save : 패키지 모듈에 추가 --save-dev : 개발할 때만 사용, 빌드 & 배포 시 패키지 포함 X cd my-app npm install --save-dev prettier 설치 후 package...

안녕하세요 VS Code 에서 html 기본 양식 불러오는 방법에 대해서 알려드리겠습니다. 1. Visual Studio Code 처음에 HTML 파일을 생성한 후 내용 입력 칸에 ! 만 입력한 후 Tab 키를 누르면 기본 양식이 자동으로 생성됩니다. 이 방법을 사용하시면 Visual Studio Code를 조금 더 편하게 사용할 수 있습니다. 2. 크롬 개발자 모드 크롬 창에서 F12를 클릭하면 개발자 모드 창이 생기며 html 문서의 요소, 콘솔 창 말고도 여러 가지 정보를 볼 수 있습니다. 감사합니다.