본문 바로가기

전체 글

 (134)
중복조합 nHr = (n+r-1)Cr 으로 적을 수 있다. 가장 기본적인 예제를 설명해보자면. 중국집에 짬짜볶 3가지의 메뉴가 있다. 5명의 손님이 왔을 때 손님이 주문한 메뉴의 조합을 고르는 경우가 중복조합 문제가 된다. 먼저 그릇 다섯 개를 준비한다고 가정해보자. ㅇㅇㅇㅇㅇ 그리고 다음과 같이 경계선을 그릇 사이에 임의로 둬 보겠다. ㅇㅇ/ㅇ/ㅇㅇ 이렇게 만들었을 때 경계선으로 구분된 그룹을 앞에서부터 짜장면, 짬뽕, 볶음밥 그룹으로 나눌 수 있는 것이다. 메뉴가 3가지이기 때문에 3가지 그룹을 만들면 된다. 이 때 필요한 경계선의 개수는 메뉴의 개수 -1 이다. 즉 위의 예에서는 3-1인 2가 된다. 결국 그릇의 갯수 + 경계선의 갯수인 7개 중에 접시 5개를 선택하면 되겠다.
2020-12-03 :: State State props은 부모 컴포넌트로부터 상속받는 것으로 읽기 전용이다 때문에 컴포넌트 내부에서 변경할 수 없지만, state는 컴포넌트 내부에서 변경할 수 있다. state는 원래 클래스형 컴포넌트에서만 사용 가능했지만 Hooks의 useState라는 함수를 통해 함수형 컴포넌트에서도 사용 가능하게 되었다. 컴포넌트의 state는 객체 형식이어햐 한다. const { value } = this.state; //state의 비구조화 할당. state는 아래와 같이 constructor 밖에 선언할 수 있다. class Counter extends Component { state = { number: 0, fixedNum: 0 }; ... } this.setState()에 객체 대신 함수 전달하기 thi..
2020-12-03 :: 컴포넌트와 Props 클래스형 컴포넌트와 함수형 컴포넌트 컴포넌트를 선언하는 방식은 두 가지이다. 하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스형 컴포넌트이다. 클래스형 컴포넌트와 함수형 컴포넌트의 가장 큰 차이점은 클래스형 컴포넌트의 경우 state와 라이프사이클 기능을 사용할 수 있다는 것과 임의 매서드를 정의할 수 있다는 것이다. 함수형 컴포넌트의 장점은 클래스형 컴포넌트보다 훨씬 선언하기가 편하다. 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다. 또한, 프로젝트를 완성하여 빌드를 한 후 배포할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다. 함수형 컴포넌트의 주요 단점은 state와 라이프사이클 기능을 사용할 수 없다는 것인데 리액트 v16.8이후 Hooks이 도입되면서 이러한 단점이 해결..
2020-12-03 :: JSX 코드 이해하기 import 구문을 통해서 모듈 설치가 가능하다. 이러한 기능은 node.js에서 지원한다. node에서는 require라는 구문을 사용한다. 모듈 통합 기능을 브라우저에서도 사용하기 위해 bundler를 사용한다. 대표적인 bundler로는 WebPack, Parcel등이 있다. 리액트 프로젝트에서는 주로 웹팩을 사용한다. 번들러 도구를 사용하면 import로 불러온 모듈을 모두 하나로 합쳐 하나의 파일로 만들어 준다. 최적화를 위해 여러 개의 파일로 나누는 경우도 존재한다. 웹팩을 이용하면 SVG나 CSS형식의 파일도 import할 수 있는데, 이 때 웹팩의 loader가 사용된다. 로더 덕분에 여러 형태의 미디어 파일을 사용할 수 있다. 또한 babel이라는 도구를 통해 최신 자바스크..
2020-12-01 :: 리액트 시작하기 Why React? 리액트 기반의 많은 프레임 워크가 등장했다.(Angular, Vue 등등..) 이 프레임워크들의 구조는 공통적으로 Model과 View를 가지고 있다. Model은 데이터를 관리하는 영역이고 view는 사용자에게 보여지는 부분이다. 이러한 구조에는 단점이 있다. 어플의 규모가 크고 수정해야할 사항이 많은 경우에 성능이 저하되는 점이다. 이를 해결하기 위해 새로 제시된 것이 기존의 뷰를 다 날려버리고 처음부터 새로 랜더링 하는 React이다. 다만 이러한 작업이 DOM에서 이루어질 경우에는 더욱 비효율적으로 변하는데 이를 React-DOM을 통해 극복했다. 리액트 이해 리액트는 자바스크립트 기반의 라이브러리로 사용자 인터페이스를 만드는데 사용된다. 리액트의 아키텍처는 다른 프레임워크와 ..
React Tutorial; Tic-Tac-Toe 리액트 공식문서에 있는 튜토리얼 프로젝트를 로컬에서 직접 작성해보며 공부했다. 로컬에서 작업할 때에는 반드시 react, react-dom을 import 해주어야 한다. import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import './index.css'; class 공부했던 class와 일맥상통하는 부분이 있다. 다만 괄호를 이용해서 해당되는 코드 전체를 element로 사용할 수 있다는 특징이 있다. class ClassName extends React.Component { render() { return() } } 위와 같은 방식으로 작성되는 class의 기본 틀을 기억하자. State JS 클래스에서 서브클래스의 ..
React Tutorial by Tania Rascia 한글 번역2 Props 지금까지 우리는 제법 괜찮은 Table 컴포넌트를 만들어 봤다. 하지만 아직 데이터는 하드코드 되어 있다. 리액트의 중요한 특징 중 하나가 데이터를 다루는 방식인데, 이는 properties를 의미하는 props와 state로 대표된다. 먼저 props을 통해 데이터를 다루는 법에 대해 알아보자. 먼저 TableBody에 작성했던 모든 데이터를 객체 배열형태로 App.js의 render()매서드 안에 정의해보자. 이러한 형태는 API를 통해 JSON 구조의 객체를 전달받은 경우와 비슷하다. const TableBody = () => { return } class App extends Component { render() { const characters = [ { name: 'Charlie',..
201102 React; Main Concept(1, 2, 3) Modern JS let, const를 사용한다. var이랑 같은 키워드라고 생각해도 좋다. JS에서 class를 지정할 때 필요한 두 가지이다. 첫 번째, 두 개 이상의 method를 정의할 때 콤마를 넣지 않아도 상관없다. 두 번째, JS에서 this 키워드는 해당 클레스가 호출된 방식에 따라 결정된다. =>를 화살표 함수라고 정의한다. 이 함수는 일반함수와 같지만 더 짧다. 예를 들어 x => x*2는 function(x) { return x*2}와 같다. 중요한 점은 이 화살표 함수는 this값을 갖지 않으므로 외부 method로부터 this value를 보호할 수 있다. Hello World ReactDOM.render( Hello, world!, document.getElementById('r..

티스토리툴바