전체 글27 VSCode에 React + ESLint + Prettier 설정하기 ESLint는 javascript 코드의 문법 검사 및 코딩 스타일 검사를 해주는 도구입니다. Prettier는 코드를 정해진 스타일대로 포매팅해주는 도구입니다. 이 두 가지 도구를 같이 사용하면 여러 명이서 개발을 하더라도 하나의 코딩 스타일을 유지해나갈 수 있습니다. 이번 글에서는 VSCode 환경에서 React 프로젝트에 ESLint와 Prettier 설정하는 과정을 정리해보겠습니다. React 프로젝트 생성하기 먼저 create-react-app 으로 React 프로젝트를 생성합니다. npx create-react-app react-eslint-prettier ESLint 설정하기 프로젝트가 생성되었으면 이제 이 프로젝트에 ESLint 설정을 해보겠습니다. 아래 명령어로 ESLint 설정을 간편하.. 2021. 11. 1. [SOLID] 3. LSP(Liskov Substitution Principle) - 리스코프 치환 원칙 이번 글에서는 SOLID 원칙의 L에 해당하는 LSP에 대해 정리해보겠습니다. LSP(Liskov Substitution Principle) LSP는 리스코프 치환 원칙의 줄임말입니다. 리스코프 치환 원칙이란 상위 타입의 객체를 하위 타입의 객체로 치환해도 코드가 문제없이 동작해야 한다는 원칙입니다. 다시 말하면 하위 타입의 객체가 상위 타입의 객체의 모든 동작을 포함하고 있어야 한다는 의미입니다. LSP를 위반하는 예시 코드를 보겠습니다. class Rectangle { private width: number; private height: number; constructor(width: number, height: number) { this.width = width; this.height = heigh.. 2021. 10. 11. [SOLID] 2. OCP(Open Close Principle) - 개방 폐쇄 원칙 이번 글에서는 SOLID 원칙의 O에 해당하는 OCP에 대해 정리해보겠습니다. OCP(Open Close Principle) OCP는 Open Close Principle의 줄임말입니다. 한글로는 개방 폐쇄 원칙이라고 부릅니다. 개방 폐쇄 원칙이란 확장에는 열려있고 변경에는 닫혀있다는 뜻입니다. 이렇게만 들으면 무슨 말인지 감이 잡히지 않습니다. 여기서 말하는 확장이란 새로운 기능이 추가됨을 의미합니다. 확장에는 열려있고 변경에는 닫혀있다는 말은 새로운 기능이 추가되어야 할 때 기존 코드의 변경 없이 새로운 코드를 쉽게 추가할 수 있어야 한다는 의미입니다. OCP를 위반하는 typescript 코드를 살펴보겠습니다. interface Excel {} class StatisticsController { p.. 2021. 10. 5. [SOLID] 1. SRP(Single Responsibility Principle) - 단일 책임 원칙 이번 글에서는 SOLID 원칙의 S에 해당하는 SRP에 대해 정리해보겠습니다. SRP(Single Responsibility Principle) SRP는 Single Responsibility Principle의 줄임말입니다. 한글로 번역하면 단일 책임 원칙입니다. 언뜻 보면 하나의 클래스가 하나의 역할만 해야 한다는 뜻으로 이해하기 쉽습니다. 하지만 이 말의 진짜 의미는 하나의 클래스는 하나의 액터만을 담당해야한다는 의미입니다. 여기서 액터란 클래스를 변화시킬 수 있는 주체를 의미합니다. 예시 코드를 보며 더 자세히 알아보겠습니다. 예시 코드는 javascript 코드입니다. class Employee { name; positon; constructor(name, position) { this.name.. 2021. 9. 9. 이전 1 2 3 4 ··· 7 다음
