성연이의 프로그래밍 블로그

ESLint와 Prettier 1) ESLint a. 문법 검사 도구 b. 코드를 작성할 때 실수를 하면 에러 or 경고 메시지를 VS Code 에디터에서 바로 확인 가능 2) Prettier a. 코드 스타일 자동 정리 도구 b. JSX 작성 시 코드의 가독성을 위해 들여쓰기를 사용 c. 자동 코드 정리를 하면 코드가 제대로 정렬되고, 세미콜론(;)이 빠진 곳에는 자동 추가, 작은따옴표는 큰 따옴표로 프로젝트 설정 및 ESLint 기본 설정 create-react-app prettier-react 1) create-react-app으로 프로젝트 생성 2) VSCode로 해당 디렉토리 열기 3) VSCode 익스텐션 마켓플레이스에서 ESLint를 검색 후 설치 4) 프로젝트 디렉토리에 .eslintrc ..

1. 리액트 코드 분석 1) import React from 'react'; a. 리액트를 불러와서 사용할 수 있게 해 줌 b. 리액트 프로젝트 생성 시 node_modules라는 디렉터리가 생성 c. 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈 설치 d. import 구문을 통해 리액트를 불러와서 사용 가능 => 모듈 불러와서 사용하는 것(번들러 bundler)은 원래 브라우저에는 없던 기능. 2. 번들러 1) 종류 a. 웹팩(주로 사용), Parcel, browserify b. 웹팩을 주로 사용, 편의성과 확정성이 다른 도구들보다 뛰어남 2) 특징 a. import(or require)로 모듈 불러왔을 때, 불러온 모듈을 모듀 합쳐서 하나의 파일을 생성해줌 b. 최적화 과..

React의 가장 큰 특징은 Virtual DOM이다. 1. DOM(Document Object Model) 객체로 문서 구조를 표현하는 방법으로 XML or HTML로 작성 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용 DOM = 트리 형태. 특정 노드 찾기, 수정, 제거, 삽입 가능 많은 플랫폼과 웹 브라우저에서 DOM API 사용 2. DOM의 단점 = 느림 동적 UI에 최적화되어 있지 않음 HTML은 자체적으로 정적이지만 자바스크립트를 사용하여 동적으로 만들 수 있음 DOM 자체는 빠름. DOM 자체를 읽고 쓸 때의 성능 = 자바스크립트 객체를 처리할 때의 성능 웹 브라우저 단에서 DOM에 변화가 일어나면 웹 브라우저가 CSS를 다시 연산, 레이아웃 구성, 페이지 리페인트를 ..

1. 리액트란? 사용자 인터페이스를 빌드할 수 있는 JavaScript 라이브러리 페이스북에서 제공해주는 프론트엔드 라이브러리 기존의 뷰를 없애고, Virtual DOM을 사용하여 처음부터 새로 렌더링을 하여 빠른 속도로 뷰를 변경시켜준다. 2. 장점 Virtual DOM을 사용하여 속도가 빠르다. 자바스크립트 친화적이다. 간단한 개념만 알면 웹, 앱 모두 개발이 가능하다. 최대한 성능을 아끼고, 편안한 ux를 제공한다. 3. 특징 Javascript 라이브러리 MVC, MVW등인 프레임워크와 달리 오직 View만 신경 쓰는 라이브러리 4. 컴포넌트 특정 부분이 어떻게 생길지 정하는 선언체 제사용 가능 API. 수많은 기능 내장 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식 정의 컴포넌트 내부에 ..