KorSA

참고> velopert.com/3642 1. 스타일링 -> css => velopert.com/3480 -> Sass => velopert.com/3503 // HTTP 요청 라이브러리인 axios 사용도 경험해볼 수 있음 -> LESS, stylus, styled-components.. =>velopert.com/3447 2. 상태관리 -> 프로젝트가 복잡해질 경우 App 등의 Component에서 사용하는 state가 매우 복잡해지고 이를 업데이트 하는 로직도 복잡해짐 -> state를 체계적으로 관리하는 라이브러리들이 있음 => Redux, MobX => velopert.com/3528 3. 불변성 유지 -> 데이터의 깊이가 깊어지면 불변성 유지는 꽤나 귀찮은 작업임 -> 불변성 유지를 도와주는 라..

참고> velopert.com/3640 1. Component의 상태가 업데이트되면 Component의 re-rendering이 발생하고, Component의 re-rendering이 발생하면 그 Comopnent의 자식 Component도 re-rendering이 발생한다. -> 굳이 업데이트하지 않아도 될 부분은 LifeCycle API 중 하나인 shouldComponentUpdate 함수를 사용해 효율적으로 작동시킬 수 있다. -> shouldComponentUpdate 함수에서 기존의 props 정보와 파라미터로 받은 nextProps 정보의 차이를 비교하여 update 여부를 리턴할 수 있다. 2. 불변성을 유지해주어야만 shouldComponentUpdate 로직을 굉장히 간단하게 짤 수 있..

참고> velopert.com/3638 1. 배열의 특정 원소를 제외시킬 때 사용하기 좋은 함수 => filter 함수 : 특정 조건에 부합되는 원소들만 뽑아서 새 배열을 만들어 줌 2. 데이터 수정의 한 방법 1) editing 값을 저장하는 bool 변수 선언 2) editing === true 일 때에는 Component에서 input 태그를 렌더링하고, editing === flase 일 때에는 Component에서 div 태그를 렌더링한다.

참고> velopert.com/3636 1. React 에서는 state 내부의 값을 직접적으로 수정하면 절대 안됨 => 불변성 유지 -> push, splice, unshift, pop 안됨 -> concat, slice, map, filter 사용 -> React의 re-rendering을 위한 조치 2. Component 내부에서 사용하는 값들 중, 렌더링과 관계 없는 변수들은 굳이 state에 넣어줄 필요가 없음. 그냥 Component 클래스의 내부 변수로 관리. 3. 컴포넌트를 여러개 렌더링하려면, 그냥 JavaScript 배열의 내장 함수인 map을 사용하면 된다. 4. Component가 자신의 부모로부터 props 받아서 어떤 처리를 한다고 가정해볼 때, 프로그래머가 실수로 props를 ..

참고> velopert.com/3634 * 이 튜토리얼을 따라하려고 create-react-app 을 하니 React가 더이상 -g 로 create-react-app을 사용하는 방식을 지원하지 않는다는 말이 나왔다. 그래서 기존에 내 컴에 깔려있던 create-react-app을 npm uninstall create-react-app으로 지운 후, npx create-react-app phone-book 으로 React 앱을 생성하였다. 1. Computed property names: 어떤 객체의 property에 접근할 수 있게 해주는 문법, ECMAScript 2015부터 적용됨. ex) 이벤트를 받을 때 [e.target.name]: e.target.value 로 사용할 수 있음 2. 부모 컴포넌..

참고> velopert.com/3631 1. LifeCycle API: 컴포넌트가 사용자의 브라우저에서 나타날 때, 사라질 때, 업데이트 될 때 호출되는 API -> 옴총 중요!! 2. componentWillMount : 컴포넌트가 새로 만들어질 때마다 호출됨 -> 이 API는 컴포넌트가 사용자의 화면에 나가기 직전에 호출됨 -> 이 API는 크게 신경쓰지 않아도 됨 -> 원래 서버측 JavaScript에서 썼었는데 React v16.3에서는 이 API가 deprecated됨 -> React v16.3 이후부터는 UNSAFE_componentWillMount() 라는 이름으로 사용됨 3. componentDidMount -> 컴포넌트가 사용자의 화면에 나타나게 됐을 때 호출됨 -> DOM을 사용해야 하..

참고> velopert.com/3629 1. 리액트 컴포넌트에서 다루는 데이터는 두 개로 나뉨: props, state 2. props: 부모 컴포넌트가 자식 컴포넌트에게 주는 값 -> 자식 컴포넌트는 props를 받아오기만 하고, 받아온 props를 직접 수정할 수는 없음 3. state: 컴포넌트 내부에서 선연하며 내부에서 값을 변경할 수 있음 4. 자신이 받아온 props 값은 "this." 키워드를 통해 조회 가능 5. props의 기본값을 설정할 때에는 컴포넌트의 defaultProps를 설정할 수 있음 6. 함수형 컴포넌트와 클래스형 컴포넌트의 주요 차이점은 state와 LifeCycle이 빠져있다는 점. -> 성능상 미세한 차이가 있으나, 무수히 많은 컴포넌트를 렌더링할게 아니라면 성능적으로..

참고> velopert.com/3626 1. React를 사용하면 웹 애플리케이션에서 사용하는 UI를 재사용 가능한 컴포넌트로 분리하여 작성하기 때문에 프로젝트의 유지보수성을 우수하게 해줌 2. import 구문: 파일에서 JSX를 사용하려면, 현재 파일에 필요한 React Component를 꼭 import 해야 함. 3. webpack은 빌드시 파일의 확장자에 따라 다른 작업을 자동으로 해줌 -> CSS 파일을 불러오면 메인 프로젝트에서 사용한 프로젝트를 한 파일에 모두 결합해줌 -> JavaScript 파일을 불러오면 모든 코드들이 제대로 로딩되게끔 순서를 설정하고 하나의 파일로 합쳐줌. -> svg처럼 따로 설정되지 않은 확장자의 경우 그냥 파일로 불러오고 나중에 사본을 만들어 그 경로를 받아옴...

참고> velopert.com/3621 1. React를 제대로 쓰려면 Node, yarn, Webpack, Babel 등의 도구를 설치해야 함. -> 입문자에겐 좀 어려운 과정이어서 페이스북에서 create-react-app 도구를 제공해줌. 2. Webpack을 사용하는 이유: 여러 개의 JSX 파일로 나뉜 React 컴포넌트를 한개로 결합하기 위해 사용. 3. Babel을 사용하는 이유: JSX를 비롯한 새로운 JavaScript 문법들을 사용하기 위해 사용.

참고> velopert.com/3612 1. 요즘 웹은 단순한 웹 페이지가 아니라 웹 애플리케이션. -> 브라우저 상으로 자연스러운 흐름을 통한 많은 것을 할 수 있음. 2. 사용자와의 인터랙션이 별로 없는 웹사이트라면 프론트엔드 라이브러리를 굳이 쓸 필요 없이 직접 만들면 됨. -> But, 인터랙션이 많아지고 프로젝트 규모가 커지면 라이브러리가 꼭 필요 3. 대표적인 JavaScript 라이브러리로 Angular, Ember, Backbone, Vue, React 등이 있음 -> 라이브러리들마다 저마다의 특성이 있음 4. Angular -> 라우터, HTTP 클라이언트 등 웹 프로젝트에서 필요한 대부분의 도구들이 내장 -> Angular 1은 나온지 오래되서 많은 기업에서 이미 사용중임 -> Angu..