[eslint/prettier] 내가 보려고 정리하는 eslint, prettier 설정

정의 ESLint ECMA로 이루어진 코드의 오류 체크, 가독성 향상(들여쓰기, 줄간격 체크) 등을 위해 사용하는 도구. Prettier ESLint와 달리 오류 체크는 하지 않으나 code formatting을 일관된 스타일로 고정하는 도구. ESLint &Prettier 보통 두 가지를 함께 사용한다. 이를 통해 얻을 수 있는 이점은, 개발자의 실수로 발생하는 오류를 사전에 예방하고, 협업 시 코드 스타일을 일관되게 함으로써 가독성을 향상시킬 수 있다는 것이다. 팀 프로젝트에서는 코드 리뷰를 자주 하게 되므로 서로의 코드를 익숙하게 검토하기 위해서라도 lint와 prettier 도입은 필수적이다. 자주 사용하는 설정 NPM // 이 2개의 경우 global 설치도 해 두면 좋다. (최초 1회만) np..

• format_list_bulleted 개발 일지/Web FrontEnd
• · 2020. 10. 10.
• textsms

[SCSS] 기본 문법 정리

주석 /* 주석입니다 */ 중첩 .parent { color: red; .child { background-color: blue; } } 상위 선택자 참조 "&" .parent { /* 여기서 &는 .parent 를 가리킴 */ } 상위 선택자 무시 "@at-root" .parent { $w: 100px; @at-root .parent2 { ... } } 상위 선택자에 선언된 값은 쓰고싶은데 .parent의 자식은 아닐 때 사용한다. 변수 $변수명: 값; /*ex*/ $red: #ff0000; $header-color: $red; 여타 프로그래밍 언어와 동일하게 중괄호 내에서 선언 시 그 밖에서는 사용 불가. 글로벌 변수 !global $변수명: 값 !global; 있으면 그대로 없으면 새 걸로 !def..

• format_list_bulleted 개발 일지/Web FrontEnd
• · 2020. 10. 3.
• textsms

[webpack] 웹팩을 이용한 모듈 관리 - 기본

웹팩(Webpack)이란 웹팩은 모듈 번들러(module bundler)이다. 웹팩을 통한 빌드가 수행되면, 프로그램의 시작 지점인 entry point부터 시작하여 의존하는 모듈들을 읽어내려가 하나의 파일로 묶는(bundle)다. 모듈화의 대상은 Web Application을 구성하는 요소로, html, css, js, image file(JPG, PNG) 등이 이에 해당한다. 웹팩을 사용하는 이유? 웹팩을 사용하는 대표적인 이유는 다음의 세 가지이다. 1. 자바스크립트의 전역 공간 공유로 인해 발생하는 문제를 --> 모듈화, 모듈 번들링을 통해 해결 2. 요소(html, css, js, image)의 압축과 전처리와 같은, 반복 작업의 자동화 3. 성능 향상 (웹팩은 자원이 필요한 순간에만 요청한다...

• format_list_bulleted 개발 일지/Web FrontEnd
• · 2020. 9. 22.
• textsms

[CSS] 수평/수직 레이아웃 구성

웹 화면을 구성하다보면 수평, 수직으로 자료를 나란히 배치해야 하는 일이 자주 발생한다. 이를 위해 주로 사용되는 방법들을 한 곳에 정리해보기로 한다. 컨테이너에 부여하는 속성(자식 노드들을 위해 부여되는 속성)은 빨간색으로 표시하였다. 이 속성들은 레이아웃 배치를 위해 사용된다. 1. 수평 레이아웃 구성 (float + clear) float를 이용하면 요소를 수평으로 배치할 수 있으며, clear 속성을 명시해 줌으로써 다음 요소들은 지정한 컨테이너 아래에 쌓이도록 할 수 있다. clear 속성을 명시할 때에는 :after 가상 선택자를 이용하는 방법이 가장 깔끔하다. menu 1 menu 2 menu 3 login hello 결과 넘칠 시 아래로 내려간다. 브라우저 크기에 따라 가운데 영역이 변화한..

• format_list_bulleted 개발 일지/Web FrontEnd
• · 2020. 9. 10.
• textsms

[CSS] Property별 사용법

파란색으로 표시한 값이 디폴트(기본) 값이다. 애니메이션, 레이아웃과 관련된 프로퍼티는 이후에 다른 포스트에서 다룰 예정이다. display (표시) 해당 태그가 얼마만큼의 공간을 차지할 것인가를 결정한다. none: 영역을 차지하지 않음 block: 가로 영역을 모두 채움(기본: width:100%) div, p, h, li 등의 기본 값에 해당 block은 width, height 속성을 지정할 수 있다. inline: 딱 자기 공간만큼 채움 (줄바꿈 없음) span, b, i, a 등의 기본 값에 해당 inline을 사용할시 width, height 지정 불가능 inline-block: 줄바꿈은 없으나 너비, 높이를 지정할 수 있음. 레이아웃 배치에 사용 fiex: 컨테이너를 flex contain..

• format_list_bulleted 개발 일지/Web FrontEnd
• · 2020. 9. 10.
• textsms

[CSS] 자주 사용하는 배치 방법

CSS의 구조 css는 다음과 같은 구조로 이루어져 있으며, 각 selector를 node라고 부른다. selector { property : value; } 이 글에서는 구조에 명시된 순서대로 css에 대하여 알아보기로 한다. selector의 종류 html의 태그의 종류, 태그에 부여된 id와 class의 이름, html 간 계층적 구조에 의해 하나의 html 태그라도 이를 나타내는 다양한 selector 표현이 존재할 수 있다. 여기에서는 주로 사용하는 selector 표현에 대해서만 정리해 보기로 한다. 태그 이름: tagName { } 클래스: .className { } 아이디: #idName { } 자식 (바로 한 계층 아래만): parent > child 자손 (하위 계층을 모두 포함): a..

• format_list_bulleted 개발 일지/Web FrontEnd
• · 2020. 9. 9.
• textsms