NOW OR NEVER

Webpack web application을 위해 사용하는 bundler(도구) 모듈 해석 -> 의존성 그래프 생성 -> 번들 생성 웹팩 설치 명령어 : yarn add webpack webpack-cli --dev 실행 명령어 : npx webpack npx webpack --target=node Module 프로그램을 구성하는 내부의 코드가 기능별로 나뉘어져 있는 형태 한 파일에 쓰여진 큰 코딩 덩어리를 여러 개로 쪼개 사용 할 수 있음 어떤 기준을 통해 코드가 파일 단위로 분리되어있는 형태에서 서로를 참조 js, sass, css, jpg, png 등 module을 사용하기 위해서는 module을 인식하는 module system과 module을 다루는 키워드가 제공되어야 한다.(module이 어떤..

Typescript 복습 고급 타입 Intersection Types 여러 타입을 하나의 타입으로 합쳐진 타입 &로 표현 가능 특정한 타입들을 합쳐줘야 하는 타입이 필요할 때 사용 새로 만들지 않고 기존 타입들을 활용해서 사용하고 싶을 때 사용 Union Types | 로 표현 이타입일 수도 있고 저 타입일 수도 있을 때 사용 단 타입별로 묶어주고 싶을 땐 타입 가드(typeof 활용한 조건문으로)로 반환 값을 달리 해줘야 함 Primitive type이 아닌 인터페이스 타입 등을 가지고도 활용 가능 타입 가드를 member로 확인(변수.do) 사용자 정의 타입가드 만들고(함수로) 조건문의 조건으로 넣고 반환 값으로 (변수).do function 타입가드함수(파라미터 : 인터페이스타입 | 인터페이스타입)..

리액트 Router 리액트 라우터 라이브러리 Single Page Application(SPA) 라우팅을 클라이언트가 담당 단점 앱의 규모가 커지면 JS 파일의 크기가 너무 커질 수 있다.(해결책 : Code Splitting) 브라우저에서 자바스크립트가 구동되지 않으면 UI를 볼 수 없다.(해결책 : Server Side Rendering) ex) 검색엔진에서 크롤링 불가능 라우팅 : 어떤 주소에 어떤 UI를 보여줄지 규칙을 정하는 작업 리액트 라우터는 컴포넌트를 기반으로 라우팅을 한다. react-router-dom 설치 주요 컴포넌트 BrowserRouter : HTML5 History API 사용, 주소만 바꾸고 페이지는 다시 불러오지 않음, 가장 많이 사용 HashRouter : 옛날에 사용 하..

리액트 컴포넌트 스타일링 Sass 문법적으로 짱 멋진 스타일 시트 스타일시트의 재사용성, 코드 가독성 높여줌 반복되는 코드는 @mixin 활용 사용시 props 이름만 설정시 true 값을 갖는 것과 동일 라이브러리 설치 yarn add node-sass로 node-sass 라이브러리 설치(프로젝트에서 sass 사용 가능해짐, sass로 작성된 코드로 css로 변환해주는 역할) classnames 라이브러리 : 조건부로 class name 적용시 굉장히 쉽게 가능, yarn add classnames 문자열, 객체, 배열 등을 사용해서 다양한 옵션으로 조합해 classname으로 생성 가능 falsy한 값(false, null, 0, undefined) 무시 사용 : 사용하려는 파일 상단에 import ..