728x90 Programming68 리액트 프로젝트에서 ESLint로 문법 검사하기 2020/12/09 - [Programming/React] - 리액트 프로젝트에서 Prettier로 코드 스타일 통일하기 리액트 프로젝트에서 Prettier로 코드 스타일 통일하기 본인 혼자 개발할때는 크게 상관이 없지만, 나를 제외한 다른 개발자와 같이 협업을 하여 개발을 진행할때는 여러 규칙들을 정해서 그 규칙을 따라 코드를 작성하는 편이 좋다. 예를 들면 들여 dev-syhy.tistory.com 이전 글에서는 Prettier로 코드 스타일 맞추는 거에 대해 작성했었는데 이번에는 또 다른 좋은 확장 도구인 ESLint에 대해 소개하려고 합니다. ESLint는 자바스크립트 문법 검사를 해주는 확장도구입니다. 설치를 하고 나서 App.js에서 이어서 작성을 해보겠습니다. const로 변수를 선언했기 때.. 2020. 12. 9. 리액트 프로젝트에서 Prettier로 코드 스타일 통일하기 본인 혼자 개발할때는 크게 상관이 없지만, 나를 제외한 다른 개발자와 같이 협업을 하여 개발을 진행할때는 여러 규칙들을 정해서 그 규칙을 따라 코드를 작성하는 편이 좋다. 예를 들면 들여쓰기는 몇칸으로 할건지, 쌍따옴표를 사용할건지 / 홑따옴표를 사용할건지, 대괄호 사이에 공백을 넣을건지 등등등... 개발자마다 코드 스타일이 같을 순 없기때문에 각자 코드 스타일로 코드를 짜되, 파일 저장시에는 팀에서 정해진 룰을 따라 그 규칙대로 저장된다면 너무 좋지않을까? Prettier는 모든 원본 스타일을 제거하고 모든 출력코드가 지정한 스타일을 따르도록 해주는 유용한 도구다. vscode npm npm install --save-dev --save-exact prettier yarn yarn add --dev -.. 2020. 12. 9. CSS로 글자 양 옆으로 선 그리기 CSS로 글자 양 옆으로 선 그리기. 방법은 before와 after를 통해서 선을 그리면 된다. 1) css 2) body 선 위 텍스트 가나다라마바사아자차카타파하 하하하하하 양 옆으로 선이 그려집니다 선 아래 텍스트 abcdefghijklmnopqrstuvwxyz 3) 결과 2020. 12. 1. [React] react state 배열 수정하기 react state에 있는 배열의 마지막에 요소를 추가하는 방법. (불변성 유지) case 1 : 이전 값(prevState)을 이용한 방법 case 2 : concat을 이용하는 방법 case 3 : spread 연산자 이용한 방법(es6) 이 중에서 원하는 걸 골라서 사용하면 된다. import React, { Component } from "react"; class ArrayTest extends Component { state = { array: [1, 2, 3], }; componentDidMount() { /** * case 1 : 이전 값(prevState)을 이용한 방법 */ this.setState((prevState) => ({ array: [...prevState.array, 4],.. 2020. 11. 26. 이전 1 2 3 4 5 6 7 8 ··· 17 다음 728x90
