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..

주말에 여의도 IFC몰에 방문했어요~! 점심을 뭘 먹을지 고민하다가 여의도 IFC몰 안에 있는 카페마마스로 결정~! 카페마마스는 아는 사람은 아는 인증된 브런치 맛집이랍니당ㅎㅎ몇년 전에 국회의사당역 근처 카페마마스에서 파니니를 처음 먹었는데 정말 맛있게 먹었던 기억이 있어서 오랜만에 또 먹고싶었어요 >,

주말에 남자친구와 각자 작업할게 있어서 어느 카페를 갈까 고민하다가 부평구청 청리단길?이라 불리우는 카페거리에 가보았다. 청리단길은 그렇게 큰 거리는 아니지만 주변에 푸릇푸릇한 나무들이 많아서 거리를 걷기만해도 눈과 마음이 힐링되는 것 같다. 🌳🌱 역시 주말이라그런지 청리단길 카페에는 사람들이 많았다. 어디 카페에 들어가볼까 고민하다 전에 한번 방문해본적이 있었던 라곰(RA.GOM) 카페에 또 들렀다. 라곰카페는 바깥 인테리어도 참 예쁘다. 날씨 좋은날 바깥자리에서 커피를 마셔도 너무 좋을것 같다. 라곰카페는 1층, 지하1층 총 2층으로 되어있었다. 1층에서는 이 창가 자리가 뷰가 젤 좋은데 역시나 이미 앉아계신 손님이 있었다. 매우 매우 탐나는 자리다. 다음에는 꼭 요자리에 앉고 싶다.😊 아쉽지만 창가..

display : inline-block 인 div 2개가 있고, 각각 width 50%을 주었을때 한줄로 표시되어야하는데 (전체 width는 100%이므로)하나의 div가 두번째 줄로 내려가는 현상이 발생됨 이는 display : inline-block 이 html의 공백(white-space)을 고려하기 때문! contentcontent이런식으로 div 사이의 공백을 제거하면 한줄로 표출된다. 출처 : https://stackoverflow.com/questions/6871996/two-inline-block-width-50-elements-wrap-to-second-line

저자 : 아사이 아츠시출판 : 한빛미디어 발매 : 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에 지정하는 테이블 이름이나 열 이름. 논리명은 설계상의 이름.- 자료형 : 금액이나 개수처럼 수치 데이터만 다룰 수 있는 열은 수치 자료형으로, 제조번호처럼 알파벳도 다루어야 한다면 문자열형으로 지정 (수치형을 문자열형으로 변환하는것은 문제가 되지..