1. 틱택토 게임 소개 2. 코드 구현 1. 틱택토 게임 소개 틱택토(tic-tac-toe)는 두 명이 번갈아가며 O와 X를 3x3 판에 써서 같은 글자를 가로, 세로, 혹은 대각선 상에 놓이도록 하는 놀이이다. 이번 글에서는 틱택토 게임을 진행할 수 있게 구현하고, 게임이 끝난 시점에서 승자를 결정하는 것과 다음 플레이어가 누구인지에 대해서도 나타내고자 한다. 2. 코드 구현 calculateWinner 함수는 게임 진행 중 승자가 발생하는 시점을 정한다. 승자가 되기 위해서는 lines라는 이중 배열의 원소 [0,1,2] 부터 [2,5,8] 까지 총 8가지 경우 중 하나를 상대방보다 먼저 만족시켜야 한다. Square 컴포넌트 3x3 판의 각각의 사각형에 해당한다. 태그를 클릭했을 때 this.pro..
1. props 2. state 오늘은 React의 props와 state에 대해서 알아보려고 한다. 아직 위의 그림만 보았을 때에는 props와 state가 무엇인지, 어떤 역할을 하는지 추측하기 어려울 수도 있다. 아래 개념 설명을 본 후 이해했다면, 나중에는 위 그림만 보고 '아, props와 state의 차이가 이거였지!' 라고 말하게 될 것이다. 1. props props는 properties의 줄임말로, 어떠한 값을 컴포넌트에게 전달해주어야 할 때 사용한다. 아래의 코드를 예로 들어서 설명하겠다. id가 root인 태그 안에 컴포넌트를 넣고, 그 안에 컴포넌트를 넣고자 한다. App 컴포넌트에서 Ele를 선언할 때 React.createElement()를 사용했는데, () 안에는 3개의 인자값..
1. 프레임워크 vs. 라이브러리 2. Front-end 프레임워크 등장 배경 3. React 소개 및 사용 방법 1. 프레임워크 vs. 라이브러리 프레임워크(framework)는 소프트웨어의 구체적인 부분에 해당하는 설계와 구현을 재사용이 가능하게끔 일련의 협업화된 형태로 클래스들을 제공하는 것이다. 프레임워크는 뼈대나 기반구조를 뜻한다. 프로그래밍을 진행할 때 필수적인 코드, 알고리즘 등 어느 정도의 구조를 제공해주기 때문에 프레임워크를 사용하는 프로그래머는 이 프레임워크의 뼈대 위에서 코드를 작성하여 프로그램을 개발하면 된다. 오늘 소개할 React와 예전부터 사용해왔던 Node.js의 express는 모두 프레임워크에 속한다. 라이브러리(Library)는 특정 기능 수행을 위해 활용 가능한 도구 ..
- Total
- Today
- Yesterday
- 자료형
- gcc
- DOM
- short
- History 객체
- stdio.h
- 리액트 #React #props #state #javascript
- keyword
- c언어
- 컴파일
- window 객체
- location 객체
- int
- Browser Object Model
- long
- Char
- 키워드
- 변수
- bom
- Document Object Model
- Screen 객체
- Navigator 객체
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |