Web Front-End (41) 썸네일형 리스트형 Babel 이란? 운영하고 있는 웹 프로젝트의 덩치가 커지다 보니.. 바벨을 어느정도 다룰 수 있어야겠다.. 정리 고고.. 바벨 공식 사이트 1. 바벨이란? -> 입력과 출력이 모두 자바스크리브 코드인 컴파일러다. 고수준의 언어를 저수준의 언어로 변환되는데 보통의 컴파일러와 비교된다. 초기의 바벨은 ES6 코드를 ES5 코드로 변환해 주는 컴파일러였으나 현재는 바벨을 이용해서 리액트의 JSX 문법, 타입스크립트와 같은 정적 타입 언어, 코드 압축, 제안 단계에 있는 문법 등을 사용할 수 있게 해준다. 2. 바벨을 실행할 수 있는 방법 1) @babel/cli로 실행하기 2) 웹팩에서 babel-loader로 실행하기 3) @babel/core를 직접 실행하기 -> 바벨을 설치하기 위해서는 npm을 통해 @babel/cor.. VSCode Extentions (유용한.. 익스텐션) 1. Active File In StatusBar - 현재 파일 경로를 바 형태로 보여주는 확장팩 2. Auto Rename Tag - div, p, 와 같이 쌍으로 닫는 태그중 하나만 수정해도 쌍으로 쑤정해준다. 3. Better Comments - 주석 룰에 따라 색을 표시해줌.. 은근 유용함 4. Bracket Pair Colorizer - 같은 블럭 끼리 색을 표시해준다. 5. ES7 React/Redux/GraphQL/React-Native snippets - 리액트에서 일부 이니셜만 입력하면 코드 조각을 제공해준다. 6. ESLint - ESLint를 설치해야하고 VSCode 확장팩을 설치해야.. 코딩컨밴션 효과를 극대화할수 있다. 매우 유용 7. Highlight Trailing White .. CSS3 prefix CSS3 속성 중 표준 규약이 아닌 속성들은 브라우저에 따라 다른 방식으로 지원 되기 때문에 이에 대한 별도 처리를 해줘야하는데 속성 앞에 각 브라우저에 속하는 prefix를 사용하여 처리한다. -webkit 웹키트 방식의 브라우저용(사파리, 크롬) -moz- 게코 방식 브라우저용(모질라 파이어폭스) -o- 오페라 브라우저 -ms- 마이크로 소프트 인터넷 익스플로러 사용시에는 각 브라우저 prefix를 붙인 속성을 먼저 쓰고 표준이 정해진 후 사용할 속성을 맨 마지막에 명시한다. React 주요 개념 1. 리액트에서 DOM을 직접 수정하지 않는다. - 과거에는 DOM을 쉽게 선택할 수 있도록 jQuery를 주로 사용하였고 대부분의 개발자들의 수고를 덜어준건 사실이다. 하지만 웹프론트-백엔드를 영역이 생기면서 기존 DOM을 Select해서 직접 데이터를 바인딩하는 방식이 점차 복잡해지고 코드가 뒤섞여지므로써 유지보수의 비용이 많이 발생하였다. 웹 프론트의 발전을 거듭하면서 탄생한 리액트에서는 DOM을 직접수정하는게 아니라 리액트가 갖고 있는 상태값을 이용하여 UI를 그린다. - 리액트는 화면을 그리는 모든 코드를 컴포넌트 함수에 선언형으로 작성하도록 하여 UI 데이터가 변경되면 컴포넌트 함수를 이용해서 화면을 자동으로 갱신한다... 이게 되기 때문에 더 이상 jQuery가 필수가 아니게 되었고 리액트가.. Typescript React 프로젝트 생성 Typescript React 프로젝트 생성 1. 신규 생성 yarn create react-app --template typescript 2. 기존 프로젝트에 타입스크립트 적용 yarn add typescript @types/node @types/react @types/react-dom @types/jest 참조 React-Redux, Redux, Redux-logger, Redux-thunk, Redux-saga 정리 리액트에서 하나의 앱에는 하나의 Store가 존재한다.(Vuex와 동일) Store의 state는 읽기전용 기존 상태는 건들이지 않고 새로운 상태를 생성하여 업데이트 해줘야한다. 리듀서는 이전 상태와 액션 객체를 파라미터로 받고 언제나 새로운 상태의 객체를 만들어서 반환해야한다. 똑같은 파라미터로 호출된 리듀서는 언제나 똑같은 결과값을 반환해야한다. Redux 주요 기능 createStore: 리액트 프로젝트에서 스토어를 생성시켜준다. combineReducer: 모듈화된 리듀서들을 하나의 리듀서로 통합시켜준다. applyMiddleware: 미들웨어를 사용할 수 있게 해준다. React-redux 주요 기능 Provider: 리액트 앱의 컴포넌트에서 리덕스 스토어에 Hook을 통해 접근가능 use.. React - 로컬에서 build 후 서버띄우기 개발 후 프로덕션 버젼으로 확인이 필요한 경우가 있다. 원래대로라면 웹팩 컴파일된 빌드 파일을 웹 서버의 DocRoot에 배포해서 테스트해야하지만 vscode에서 간단히 프로덕션버젼으로 확인 가능한 방법이 있다. serve 라는 패키지를 사용해야하는데 $yarn global add serve $npx serve 로 실행하면 잘된다. Javascript export 구문 1. export 여러개의 변수를 export 할 수 있다. import 하는 경우 import { , ...... } from '' 2. export default 오직 하나의 변수를 export 할 수 있다. import 하는 경우 import from '' 이전 1 2 3 4 5 6 다음
