프론트엔드 정복하기

CLI(Command Line Interface)란?) : 명령줄 인터페이스 또는 명령어 인터페이스라고 하는데, 텍스트 터미널을 통해서 사용자컴퓨터가 상호작용하는 것을 뜻한다. 윈도우는 cmd창, Mac OS유저는 Terminal 창을 이용해서 명령어를 입력 및 출력받는 행위라고 보면 된다. 여기서 입출력을 가능하게 해주는 소프트웨어(cmd, Terminal)을 터미널(terminal)이라고 하고, 사용자가 입력한 명령어를 해석해주는 소프트웨어를 셸(shell)이라고 한다.

위와 같은 탬플릿이 있다. 노트북 카드를 구성하는 html은 다음과 같을 것이다. 노트북 상세설명 위와 같은 카드를 여러 개 만들기 위해서는 위 코드를 복사 한 후, 각 태그의 내용들을 각각의 제품에 맞는 정보로 수정할 것이다. Vue Component 메소드는 위의 과정을 간단하게 가능하게 해준다. vue로 Component를 정의해주고 Component로 정의된 를 나열 및 작성하면 된다. Vue.component('태그명', { 설정값 (json 형식) }) 1) component 설정하기 props : 외부에서 attribute(속성) 값으로 입력받을 항목들을 props 안에 배열로 넣어준다. template : 상품을 표현할 html 태그들을 ` ` 안에 넣어준다. 2) component 태그 ..

2020년 10월 20일 React 17버전이 릴리즈됐다. 해당 버전은 새로운 기능보다는 React를 더 쉽게 할 수 있도록 하는 데 중점을 두고 출시되었다. 점진적 업그레이드 React 17버전은 점진적인 React App 업그레이드를 가능하게 한다. 보통은 예를 들어 React15버전을 16버전으로 업그레이드할 때에 React 전체 앱을 한번에 업그레이드시키는 방법을 취한다. 현재도 이 방법이 가장 이상적인 방법이라 생각하며 이것을 추천한다. 반면 유지보수가 더딘 경우, 즉 한 번에 1버전 그 이상으로 업그레이드를 하는 경우에는 앱의 일부는 17 하위 버전으로 유지하는 것이 더 효율적일 수도 있다. 문제는 이 방법을 사용하게 되면 로딩 속도가 느리거나 이벤트에 문제가 야기될 수 있다. React 17..

1. keepAlive 2. react-router-cache-router 3. axios-extensions dohoons.com/blog/1810/

Redux 상태관리 툴에 불편한 점이 있다. 바로 리덕스 상태 앱을 종료하거나 브라우저를 새로 고침하면 저장돼 있던 state들이 모두 reset된다는 것이다. 여기에 아주 편리한 Redux 라이브러리가 있다. Redux-Persist는 state을 LocalStorage나 Session에 저장함으로써 새로고침함에도 state 저장 상태를 유지시킨다. Redux-Persist 설치 및 사용 예시를 살펴보자. 1. 설치 npm install --save redux-persist 2. 사용 예시 //reducers/index.js // reducers/index.js import { combineReducers } from "redux"; ➊ import { persistReducer } from "redu..

... useEffect(() => { console.log("컴포넌트 시작") return () => { console.log("컴포넌트 종료 ") } }, []) ... array dependency를 [ ] 빈 상태로 두면 => componentDidMount와 비슷한 기능을 한다. 컴포넌트를 호출하면 => '컴포넌트 시작' 이 출력된다. return을 사용하면 => componentWillUnmount와 같은 기능을 한다. 컴포넌트가 종료되면 => '컴포넌트 종료'를 출력한다. 여기서, componentWillUnmount란?) 컴포넌트가 소멸된 시점에(DOM에서 삭제된 후) 실행되는 메소드다. 컴포넌트 내부에서 타이머나 비동기 API를 사용하고 있을 때, 이를 제거하기에 유용하다.