전체 글
-
MVC, FluxNote 2020. 11. 23. 16:28
MVC, MVVM 같은 키워드는 소프트웨어 설계와 관련된 디자인 패턴으로, 소프트웨어 공학에서의 "흔히 사용되는" 설계 패턴을 의미한다. React에 단방향 데이터 흐름, Redux에 Flux 패턴 역시 일종의 디자인 패턴이다. MVC(Model-View-Controller) MVC 패턴은 Model + View + Controller를 합친 용어 구조 Model : 어플리케이션에서 사용되는 데이터와 그 데이터를 처리하는 부분 View : 사용자에서 보여지는 UI 부분 Controller : 사용자의 입력(Action)을 받고 처리하는 부분 동작 MVC 패턴의 동작 순서는 아래와 같다. 사용자의 Action들은 Controller에 들어옴 Controller는 사용자의 Action를 확인하고, Model..
-
CSS basic box modelNote 2020. 11. 21. 12:55
문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정합니다. 하나의 박스는 네 부분(영역)으로 이루어집니다. 각 영역을 content(콘텐츠), padding(안쪽 여백) 영역, border(테두리 영역), 그리고 margin(바깥 여백) 영역이라고 부릅니다. Content 콘텐츠 경계(content edge)가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함합니다. 콘텐츠 영역의 크기는 콘텐츠 너비(콘텐츠 박스 너비)와 콘텐츠 높이(콘텐츠 박스 높이)입니다. 배경색과 배경 이미지를 가지고 있기도 합니다. box-sizing 속성의 값..
-
JSX 조건부 렌더링Note 2020. 11. 20. 15:00
JSX 내부의 자바스크립트에서 if 문을 사용할 수가 없다. 하지만 조건에 따라 다른 내용을 렌더링 해야 하는 경우에는 JSX 밖에서 if 문을 사용해 사전에 값을 설정하거나, 조건부 연산자를 사용하면 된다. 조건부 연산자 function App () { const check = '체크'; return ( {check === '체크' ? ( 체크남방 입니다 ) : ( 체크남방 아닙니다 )} ) } 이렇게 삼항 연산자를 이용하여 코드를 작성하면 브라우저에서 아래와 같은 문구를 볼 수 있다. 하지만 check 값을 변경하면, 브라우저에 나타나는 문구가 변경된다. const check = '제크' 개발을 하다 보면 특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때는 아예 아무것도 렌더링하지 않아야 ..
-
ReactNote 2020. 11. 19. 14:23
React(리액트) 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 ko.reactjs.org React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 간단한 컴포넌트 리액트 컴포넌트는 render()라는 메서드를 구현하는데, 이것은 데이터를 입력받아 화면에 표시할 내용을 반환하는 역할을 한다. 컴포넌트로 전달된 데이터는 render() 안에서 this.props를 통해 접근할 수 있다. JSX 자바스크립트의 확장 문법 JSX는 리액트 "엘리먼트(element)"를 생성한다. React를 사용하기 위해서 JSX가 꼭 필요한 것은 아니지만 대부분의 사람들은 ..
-
BMP, JPG, PNGNote 2020. 11. 17. 17:26
BMP 마이크로소프트에서 개발한 무손실 비트맵(bitmap) 이미지 파일 컨테이너로 윈도 시스템에서 주로 사용된다. 주로 반복 문자열 제거라는 압축 기법을 이용한 무손실 압축 상태로 사용되기 때문에 압축 효율은 그리 높지 못하다. 이미지 확장자 중에 화질이 제일 선명하고 호환성이 매우 높지만 대부분의 BMP 파일은 압축을 거의 하지 않아 상대적으로 크기가 크다는 단점이 있다. JPG 합동사진전문가단체(JPEG, Joint Photographic Exports Group)에서 지정한 정지화상을 위한 표준으로 용량대비 화질이 뛰어나다. 현재 가장 많은 분야에서 가장 많이 사용되고 있는 손실 압축 기반의 비트맵 이미지 파일 컨테이너로 RGB 신호를 그대로 사용하지 않고 비디오에서 많이 사용하는 YCbCr 방식..