코딩하는 문과생

[props & state] props : 부모 컴포넌트가 자식 컴포넌트에게 주는 값, 자식 컴포넌트는 받아오기만 하고, 수정불가 state: 컴포넌트 내부에 선언하고, 내부에서 값 수정가능 [Props] - MyName.js import React, {Component} from 'react'; class MyName extends Component { render(){ return( 안녕하세요! 제 이름은 {this.props.name} 입니다. {/* 자신이 받아온 props 값은 this. 키워드를 이용해 조회가능 */} ); } } export default MyName; -App.js import React, {Component} from 'react'; import './App.css' im..

프로젝트를 생성하고 프로젝트를 열어보면 아래와 같은 형태로 리액트 프로젝트가 구성되어 있다. 리액트가 유저인터페이스로 보여지는 방법은 App.js -> index.js -> index.html 파일 순으로 따라 가보면 리액트의 렌더링하는 방법을 알 수 있게 된다. [App.js] create-react-app 명령어를 통해 리액트 프로젝트를 구성하면 App.js에는 기본적으로 함수기반의 컴포넌트가 생성된다. 함수기반의 컴포넌트와 클래스기반 컴포넌트는 약간 차이가 있는데, 함수기반 컴포넌트 : 상태값 변경없이 props만 부모 컴포넌트로부터 받는 경우, 렌더링만 필요한 경우 클래스기반 컴포넌트 : 상태값 변경이 필요한 경우 로 나뉘어진다. 조금 더 쉽게 보기 위해 아래 함수기반 컴포넌트를 클래스기반 컴포넌..

개인 프로젝트를 위해 리액트를 공부해보려 한다. [리액트 초기 설정] 리액트는 jQuery처럼 의 형태로 사용하지 않는다. Node.js, Yarn, Webpack, Babel 등의 도구를 이용해 프로젝트를 설정한다. 페이스북에서 제공하는 create-react-app을 통해 프로젝트 설정을 진행한다. - Webpack? 리액트 프로젝트는 컴포넌트를 파일로 분리해 저장한다. 이를 한개로 결합하기 위해 사용하는 도구가 Webpack이다. - Babel? 리액트 컴포넌트는 JSX라는 문법으로 작성되는데, 이러한 문법을 사용하기 위해서 Babel이라는 도구가 필요하다. [설치파일] Node.js: Webpack, Babel과 같은 도구들을 사용하기 위해 필요. Yarn: 패키지 매니저 도구, NPM에 비해 더..

오라클을 깊게 공부하게 되면서, 그리고 대용량 데이터를 다루며 깨달은 점은"인덱스"만 잘 타도 조회속도에 엄청난 효율을 가져올 수 있다는 것이다. 1. WHERE 절 내에 스캔할 범위를 줄여줄 칼럼이 있다면 적극적으로 사용하는 것이 좋다.ex. 대학교를 예로 들면 univ = "KNU" 라는 조건을 통해 스캔할 양을 줄일 수 있다. 2. 옵티마이저는 조건의 우선순위를 between보다는 =를 우선으로 생각한다. 따라서 여기서 파생되어 주의해야 할 점은 인덱스를 태우고 싶다면 "=" 조건을 통해 옵티마이저가 인덱스를 고려하도록 설정할 수 있다. 3. 인덱스가 사용되지 않는 경우"해당 부분을 잘 이용하면 Cost를 엄청 줄일 수 있다." 3-1. 칼럼에 substr()과 같은 함수나 || 처럼 필터가 사용되..