본문 바로가기
반응형

전체 글340

[ReactJS] JSX JSX 1const element = Hello, world!; cs다음과 같은 변수 선언을 고려해보자.이 태그는 html이나 문자열이 아니다.이것은 JSX라고 불리는 자바스크립트의 새로운 확장된 문법이다.리액트 개발자들은 리액트 라이브러를 통해 UI를 표현 하기 위해서 JSX 문법을 사용하기를 추천한다.JSX를 템플릿 문법이라고 생각할 수도 있지만, 어느 문법보다 강력한 기능을 제공한다. 가장 중요한 점은 JSX는 리액트의 앨리먼트를 생성한다는 것이다.다음 포스팅에서 엘리먼트를 HTML DOM에 랜더링하는 방법이 있을 것이고,우선은 JSX를 사용하는 방법에 대해서 알아보도록하자. JSX에 자바스크립트 문법 포함하기 12345678910111213141516171819function formatName(.. 2017. 6. 12.
[ReactJS] Hello world! Hello world! 튜토리얼부터 포스팅하고 기능을 설명하는건 순서가 안맞는 것 같지만, 리액트에 대한 기본 지식이 없다면 여기서 라이브러리 사용방법을 익히고 튜토리얼로 돌아가도 좋다. 어떤 언어를 익히건 초기에는 콘솔창에 Hello world를 띄우기 마련이다똑같은 원리로, 리액트에서도 리액트만의 문법을 사용하여 Hello world를 출력해 보도록하자. 그전에, 리액트는 로컬에서 실행환경을 갖추고 작업해도 되지만,Codepen이라는 브라우저 기반 환경에서도 원활히 돌아가기 때문에, 실습 시 이 사이트를 추천한다.Hello world를 미리 짜놓은 페이지는 다음과 같다.https://codepen.io/gaearon/pen/ZpvBNJ?editors=0010 1234ReactDOM.render( He.. 2017. 6. 12.
[Backjoon] 11727번 문제 - 2xn 타일링 2 2×n 직사각형을 2×1과 2×2 타일로 채우는 방법의 수를 구하는 프로그램을 작성하시오.아래 그림은 2×17 직사각형을 채운 한가지 예이다. 풀이경우의 수 문제이다. 우선 2Xn 직사각형에서 n이 1일때 부터 생각해보면 경우의 수는 1가지 이다.n이 2일 때 타일을 채우는 경우의 수는 3가지이다. n이 3일때부터 앞에서 구해진 2x1과 2x2를 기반으로 생각할수 있는데, 2x1타일로 먼저 채울 경우와 2x2타일로 먼저 채우는 경우의 수로 나뉜다.위의 그림 처럼 모든 경우의 수를 고려 했을 때 중복되는 경우의 수를 빼면 타일의 경우의 수가 나오는 것이다. 즉 2x3타일을 채우기 위해서는2x3-2x1으로 채워졌다는 가정하에 2x2만 더 채우면 되므로 2x2의 경우의 수 만큼 더해주면되고2x3-2x2으로 채.. 2017. 6. 12.
[Raspberry] Vim 설치 Vim 설치 저번에 기본적으로 제공되어있는 vi로 작업을 하려고 했는데 뭔가 자꾸 오류가나서 그냥 Vim을 설치 하기로 했다. 123sudo apt-get updatesudo apt-get upgradesudo apt-get install vim cs 다음의 명령어를 라즈베리에 입력해 준다. apt는 라즈비안에서 사용하는 패키지 관리자를 의미한다.update는 설치된 파일이나 라이브러리의 업데이트 내용이 있으면 갱신해 주는 명령어이다.upgrade는 업데이트가 갱신된 파일이나 라이브러리를 설정하거나 설치하는 명령어이다.그러므로 반드시 update 다음에 upgrade 명령어를 실행하기 바란다.마지막으로 install vim이라는 명령어를 입력해주는것 만으로 vim 의 설치가 완료된다. 문법 하이라이팅 기.. 2017. 6. 11.
[Raspberry] 정적 IP 할당 정적 IP 할당 라즈베리 파이를 연결하면 DHCP를 이용해서 IP 주소를 동적으로 할당 받게된다.이렇게 되면 라즈베리파이에 접근하는데 있어서 불편한 점이 한두가지가 아니다.따라서 IP주소를 고정적으로 할당하는 것이 편하다. 고정 IP를 할당하기 위해서 내부에 있는 파일을 건드려야 할 필요성이 있는데sudo vi /etc/network/interfaces명령어를 입력하면 ip가 저장되어 있는 파일을 열수 있다.vi가 아니라 nano 등의 에디터로 열어도 상관없다. 파일을 수정하기 전에는 다음과 같이 설정이 되어있다.이더넷과 무선 연결에 대해 세팅하는 의미인데, 현재는 auto로 동적 할당 받게 된다. vi가 잘 안되서 그냥 nano로 편집했다.여기서 수정할 곳은 auto eth0 부터이다.위의 사진과 차이.. 2017. 6. 11.
[Backjoon] 2581번 문제 - 소수 자연수 M과 N이 주어질 때 M이상 N이하의 자연수 중 소수인 것을 모두 골라 이들 소수의 합과 최소값을 찾는 프로그램을 작성하시오.예를 들어 M=60, N=100이 경우 60이상 100이하의 자연수 중 소수는 61, 67, 71, 73, 79, 83, 89, 97 총 8개가 있으므로, 이들 소수의 합은 620이고, 최소값은 61이 된다. 풀이 이중 반복문으로 소수를 구한 다음순회하여 모든 소수를 더하고sort 내장 함수로 정렬하여 가장 처음 값을 출력한다. 12345678910111213141516171819202122232425262728293031323334353637383940import java.util.ArrayList;import java.util.Collections;import java... 2017. 6. 11.
[Raspberry] 맥에 라즈비안 OS 설치 맥에 라즈비안 OS 설치 미니 컴퓨터인 라즈베리 파이를 동작 시키기 위해서 OS(Operate System)를 설치해줘야한다.여러가지 운영체제들이 있지만 그중에서 라즈베리파이에 최적화 된 라즈비안을 설치 하도록 하겠다. 구글에서 라즈비안이라고 검색하면 제일 최상단에 공식 홈페이지가 나온다.홈페이지에 들어가면 바로 첫 페이지에서 라즈비안을 다운 받을수 있는데,왼쪽은 풀 버전이며, 오른쪽은 좀더 가벼운 라이트 버전이다. 빠른 진행을 위해서 라이트 버전을 다운받았다. 라즈베리에 운영체제를 설치하기 위해서 저장 공간으로 미니 SD카드를 사용한다.우선 미니 SD 카드를 자신의 맥에 연결하는데,연결 후 'diskutil list' 명령어를 터미널 창에 입력하면 현재 마운트 된 장치들의 리스트를 확인할 수 있다. 여.. 2017. 6. 11.
[ReactJS] 튜토리얼(Tutorial) - 10 튜토리얼(Tutorial) - 10 앞선 포스팅에서 틱택토 그리드에 버튼을 클릭할 때 마다 히스토리를 저장했다.이렇게 저장한 히스토리를 호출하여 움직임으로 보여주고, 해당 시점으로 이동하는 기능을 추가해보자 움직임 보여주기 1234567891011121314151617181920212223242526272829303132333435363738 render() { const history = this.state.history; const current = history[history.length - 1]; const winner = calculateWinner(current.squares); const moves = history.map((step, move) => { const desc = move ? .. 2017. 6. 11.
[ReactJS] 튜토리얼(Tutorial) - 9 튜토리얼(Tutorial) - 9 히스토리 저장 틱택토 게임을 만들면서 불변성에 대한 이야기를 했었다.불변성을 유지함으로써 리액트에서 가지는 이점들이 상당히 많았는데이를 틱택토 게임에 구체적으로 적용해보도록하자. 1234567891011121314151617history = [ { squares: [ null, null, null, null, null, null, null, null, null, ] }, { squares: [ null, null, null, null, 'X', null, null, null, null, ] }, // ...]cs 이를 위해서 상태값을 저장해야 하는데 위의 코드와 같이 배열에 순차적으로 넣어두는 방법이 있다.이렇게 되면 인덱스 값으로 해당 히스토리에 접근이 가능하다. 12.. 2017. 6. 11.
반응형

티스토리툴바