jeong's blog

1. React의 LifeCycle 초기구성 : React 컴포넌트 객체가 DOM에 실제로 삽입되기 전까지의 과정을 마운팅(Mounting)이라고 하는데, 마운팅 시 아래의 LifeCycle 함수들이 순차적으로 수행된다. constructor() componentWillMount() render() componentDidMount() 컴포넌트가 모두 구성된 직후인 componentDidMount() 함수에서 데이터를 가져오는 API 호출을 수행하면 효과적이다. 2. API 호출 예제 2-1. fatch API를 사용해 서버로부터 데이터를 가져와 화면에 표출하는 예제 위와 같은 React LifeCycle의 개념을 활용해 API를 호출하는 예제를 작성해보자. 예제에서는 javascript ES6에서 지원하..

1. Component의 props 와 state 리액트 컴포넌트에서 다루는 데이터는 props와 state로 나뉜다. props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 값이다 (-> 부모 컴포넌트에서 자식 컴포넌트로 전달하는 속성값들을 의미하는 'properties'의 줄임말) 자식 컴포넌트에서는 props를 받아오기만하고, 받아온 props를 직접 수정할 수 는 없다. state는 컴포넌트 내부에서 선언하며 내부에서 관리되는 값이다. 값을 변경할 수 있다. props 와 state 비교 및 정리 : props 와 state 는 둘다 일반 JavaScript 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는 데이터를 갖고 있으나 props는 함수의 매개변수처럼 컴포넌트에 전달 (전달받은 컴포넌..

JSX 란? Javascript + XML 이 합쳐진 자바스크립트의 확장 문법이다. 개발자가 자바스크립트 내부에 마크업 코드를 작성할 수 있도록 해준다. JSX 문법에서는 java, c++과 유사하게 카멜케이스를 사용한다. 리액트의 컴포넌트는 항상 렌더링을 수행하며. render() 함수가 렌더링할 요소(element)를 반환하는데 이때 JSX문법을 사용할 수 있다. JSX에서는 중괄호{}를 이용하여 자바스크립트(JavaScript) 구문을 실행할 수 있다. 이러한 중괄호는 속성의 값으로도 들어갈 수 있다는 점에서 사용이 편리하다. 특징 및 주의할 점 jsx 문법에서는 여러개의 요소가 들어갈때 전체 요소를 감싸주는 태그가 없으면 오류가 발생한다. 1개 이상의 요소가 사용될 때는 아래 코드의 과 같이 감싸..

React 란? UI를 효과적으로 구축하기 위해 사용하는 자바스크립트(JavaScript) 기반의 라이브러리이다. React는 Facebook에서 개발한 유저 인터페이스 라이브러리로서 개발자로 하여금 재사용 가능한 UI를 생성할 수 있게 해 준다. 이미 Facebook을 비롯하여 Airbnb, Netflix, Dropbox, Twitter, Evernote, Uber 등의 큰 서비스들에서 React를 사용하고 있다. React의 특징 및 장점 Component 기반 : 리액트는 모든 것이 Component로 이루어진다. Component는 UI를 구성하는 개별적인 뷰 단위이다. 작은 블록들을 조립하여 성을 만드는 것처럼, 전체 앱은 각 Component들이 결합하여 만들어진다. 캡슐화된(Encapsula..

저자 : 아사이 아츠시출판 : 한빛미디어 발매 : 2015.11.01 1. 트랜잭션- 발주처리의 예로 주문이 발생했을 경우, 주문 테이블에는 INSERT 한 번, 주문상품 테이블에는 주문된 상품 수 만큼 INSERT명령이 실행됨.ex) 발주처리INSERT INTO 주문 VALUES(4, '2018-09-30', 1); INSERT INTO 주문상품 VALUES(4, '0003', 1); INSERT INTO 주문상품 VALUES(4, '0004', 2);이때, 세 번째 INSERT 명령에서 에러가 발생했다고 치면, 트랜잭션 기능을 사용하지 않을 경우. 앞서 실행한 두 개의 INSERT명령에 의해 주가된 데이터를 DELETE명령으로 삭제하는 처리가 필요함. 이는 매우 번거로움. 2. 롤백과 커밋- 위 경우..

저자 : 아사이 아츠시출판 : 한빛미디어 발매 : 2015.11.01 1. 정규화- 정규화란 데이터베이스의 테이블을 규정된 올바른 형태 개선해나가는 것. - 정규화는 데이터베이스 설계 단계에서 행해짐. 경우에 따라서 기존 시스템을 재검토할 때 정규화하는 경우도 있음.- 정규화하는 과정을 통해 관계형 데이터베이스가 효율적으로 동작하도록 만들 수 있음. 2. 제1정규형- 첫 번째 단계가 제1 정규화로, 이를 시행하면 제1 정규형 테이블을 만들 수 있음. 제1정규화의 1단계 : 하나의 셀에 하나의 값만 저장할 수 있도록하고, 반복되는 부분을 세로(행 방향으로 늘려나간다. - 주문상품 열에 있는 값들을 상품코드와 상품명, 개수 데이터를 담는 3개의 열로 나눔. - 한번의 주문으로 여러 개의 상품을 주문할 수 있..

저자 : 아사이 아츠시출판 : 한빛미디어 발매 : 2015.11.01 1. 데이터베이스 설계- 데이터베이스를 설계한다는 것 : 데이터베이스의 스키마 내에 테이블, 인덱스, 뷰 등의 데이터베이스 객체를 정의하는 것. 스키마 내에 정의한다는 뜻에서 '스키마 설계'라 불리기도 함.- 테이블 설계의 주된 내용은 테이블 이름이나 열, 자료형을 결정하는 것. 테이블 간의 관계를 생각하며 여러 테이블을 정의하고 작성. - 논리명과 물리명 : 물리명은 CREATE TABLE에 지정하는 테이블 이름이나 열 이름. 논리명은 설계상의 이름.- 자료형 : 금액이나 개수처럼 수치 데이터만 다룰 수 있는 열은 수치 자료형으로, 제조번호처럼 알파벳도 다루어야 한다면 문자열형으로 지정 (수치형을 문자열형으로 변환하는것은 문제가 되지..

저자 : 아사이 아츠시출판 : 한빛미디어 발매 : 2015.11.01 1. 곱집합과 교차결합- 곱집합 : 두 개의 집합을 곱하는 연산 방법으로 '적집합' 또는 '카티전곱(Cartesian product)'이라고도 불림. 곱집합은 야구팀들의 대전표를 짜는 것과 비슷한 개념. - 집합 X가 {A,B,C}라는 요소를 가지고, 집합 Y가 {1,2,3}이라는 요소를 가질 때 집합 X와 Y의 곱집합을 구하면 아래와 같음. 교차결합(Cross Join)SELECT * FROM 테이블명1, 테이블명2 - 데이터베이스의 테이블은 집합의 한 종류라 할 수 있음. 만약 SELECT명령의 FROM구에 테이블을 두 개 지정하면 이들은 곱집합으로 계산됨. - FROM 구에 복수의 테이블을 지정하면 교차결합을 함. 교차결합은 두 ..

저자 : 아사이 아츠시출판 : 한빛미디어 발매 : 2015.11.01 1. SQL과 집합- SELECT 명령을 실행하면 데이터베이스에 질의하며, 그 결과 몇 개의 행이 반환됨.이때 반환된 결과 전체를 하나의 집합으로 , 집합 내 하나의 행을 하나의 요소로 볼 수 있음. 2. UNION으로 합집합 구하기- 집합의 연산 중 '합집합'은 집합을 서로 더한 것을 의미. A U B 로 표기. - SQL에서는 SELECT명령의 실행 결과를 하나의 집합으로 다룰 수 있음. 합집합을 계산할 경우에는 UNION 키워드를 사용. SELECT * FROM sample71_a; > 결과 a 1 2 3 SELECT * FROM sample71_b; > 결과 b21011 - 두 개의 SELECT명령을 UNION해서 합집합 구하기..

저자 : 아사이 아츠시출판 : 한빛미디어 발매 : 2015.11.01 1. 뷰- 뷰는 SELECT 명령을 기록하는 데이터 베이스 객체.- 본래 데이터베이스 객체로 등록할 수 없는 SELECT명령을, 객체로서 이름을 붙여 관리할 수 있도록 한 것이 뷰. 뷰를 참조하면 그에 정의된 SELECT명령의 실행결과를 테이블처럼 사용할 수 있음. - 뷰를 정의할 때는 이름과 SELECT명령을 지정. 뷰를 만든 후에는 SELECT명령에서 뷰의 이름을 지정하면 참조 가능. 사용 ex) SELECT * FROM (SELECT * FROM sample64) sq; -> from 구에 서브쿼리 사용서브쿼리 부분을 '뷰 객체'로 만들면 SELECT * FROM sample_view_67; -> sample_view_67은 뷰의..