본문 바로가기
댓글1. 디자인 목차 기본 틀 작성 form list 누적 작성 코드 게시판 view 페이지에 들어갈 댓글 기능을 구현해보자! 틱택토 게임 때 작성했던 레이아웃을 가지고 와서 컴포넌트만 변경해서 기본 틀을 작성해보자! 다만, 이번에는 props 속성 중 children이라는 속성을 사용해서 자식이 아닌 자손에게 props를 넘겨주는 스킬을 사용해 볼 것이다. props.children이란? props 속성 중 children 사용 시, 자식 뿐만이 아닌 자손에게 props를 전달 가능 앱 컴포넌트에도 상태가 존재하는 경우 예를 들면 (로그인 기능의 로그인 구분값) Comment 컴포넌트가 댓글에 대한 state값을 가지고 있는 경우 state 값을 App 컴포넌트에 있는 아이들이 Comment 컴포넌트에 넘겨주고 Com.. 2022. 4. 25.
틱택토6. 승자 결정하기 목차 승자를 반환하는 함수 선언 클릭시 동작하는 이벤트 함수 내에 승자 반환함수 호출 div에 status 렌더 1. 승자를 반환하는 함수 선언 먼저 함수의 내부에 이기는 경우를 배열로 작성해보자. 이중배열을 통해 이중배열의 엘리먼트는 squares의 인덱스 번호가 될 것이다. const calculateWinner = (squares) => { const line = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; }; 다음으로는 이기는 경우에 대한 반복을 돌리면서 각각의 경우의 엘리먼트(즉, 매개변수로 들어올 squares의 인덱스가 될 부분)을 각각 변수에 담아보자. 그 다음엔 매개변.. 2022. 4. 23.
틱택토5. 컴포넌트 작성(3) 지난 게시글에서는 board 컴포넌트에 상태를 선언하고, setState로 상태 변경을 감지한 후, Square컴포넌트로 onClick 이벤트를 작동시킬 함수를 props로 전달하였다. 이번 게시글에서는, state값 props로 전달해서 버튼 클릭 시 'X' 또는 'O' 렌더링 한번 클릭한 버튼을 재클릭할 수 없도록 하기 를 해볼 것이다. 1. state값 props로 전달해서 버튼 클릭 시 'X' 또는 'O' 렌더링 버튼엘리먼트의 내부의 value props로 전달할 수 있도록하는 코드 부터 시작해보자. 지난 게시글에서 squares 변수를 선언하여 handleClick 안에서 작성해두었기 때문에 간단히, renderSquare 함수 안의 Square 컴포넌트로 보낼 props인 value의 값을 아.. 2022. 4. 23.
틱택토4. 컴포넌트 작성(2) 지난번 게시글에서 아래 부분까지 완료하였다. 3개의 컴포넌트 생성 매개변수 i를 받는 renderSquare 함수 생성 매개변수 i를 Board 컴포넌트에서 Square 컴포넌트로 props 전달 리액트 dev 확장파일을 통해 props 잘 전달된 점 확인 오늘은 나머지 부분을 시작해보자. 우선은 버튼을 클릭했을 때 'X' 또는 'O'로 플레이어가 나타날 수 있게 하자! 이를 위해 board 컴포넌트 안에 state를 선언 board 컴포넌트 안에 handleClick이라는 함수를 선언해서 props로 Square 컴포넌트에 전달 Square 컴포넌트에서 온클릭 이벤트 작성 후 이벤트 동작 여부 확인 handleClick 함수의 내용 작성 를 할 것이다. 우선, board 컴포넌트 안에 상태(state).. 2022. 4. 22.
객체3. class 개념 목차 클래스란? 클래스 정의하기 클래스 body와 method 클래스란? 객체를 생성하는 템플릿 클래스는 데이터와 데이터를 조작하기 위한 코드를 캡슐화 JS에서의 클래스는 프로토타입에 의해 작성되지만, ES5와는 다른 문법과 의미를 가짐 특별한 함수 1. 클래스 정의하기 클래스를 정의하기 위한 두 가지 방법 Class 선언 Class 표현식 1-1. 클래스 선언(class declaration) 클래스명과 함께 class 키워드 사용 class Classmates{ constructor(name,heights,gender,dob){ this.name = name; this.heights = heights; this.gender = gender; this.dob = dob; } } 끌어올리기(hoistin.. 2022. 4. 22.
객체2. this와 생성자(constructor) 목차 this란? 생성자란?(Constructor) 1. this란? 현재 코드가 동작되고 있는 해당 객체를 가리킴 하나 이상의 객체에서 생성된 모든 객체에 대하여 같은 메서드 속성/메서드를 사용할 수 있게 해줌 (단, 각각의 객체의 속성에 부여된 값에 따라 반환 값은 다르다) 가령, 아래와 같은 person1과 person2라는 객체가 있다고 가정해보자. 아래의 코드에서 보다시피 두 객체의 속성명은 동일하다. const person1 = { name: { first: 'Conan', last: `O'brien` }, age: 59, bio: function() { console.log(`${this.name['first']} ${this.name['last']} is ${this.age} years o.. 2022. 4. 22.
객체1. 기본 개념 목차 객체란? 객체 생성 객체의 속성/메서드에 접근하기 객체의 속성/메서드 설정하기 속성 부여 시, 괄호 표기법의 특이점 1. 객체란? 객체는 관련된 데이터 또는 함수의 집합 객체 내부에서 속성과 메서드라고 불리는 변수와 함수들로 구성됨 표준국어대사전에서 객체를 검색해보면 '작용의 대상이 되는 쪽'이라고 나온다. 그렇다. 우리가 객체를 쓰는 이유는 앞서 객체의 설명에서 보았듯이, 객체 내부의 속성과 메서드라는 항목들을 통하여 속성값에 특별한 작용을 하기 위해서이다. (쉽게 말해서, 속성값을 사용하기 위해서 객체를 씀) 이 점을 잘 기억해두면 객체를 이해하는데 큰 도움이 될 것이다. 자 그럼 다시 본론으로 돌아와서, 일반적인 방법으로 객체를 한번 생성해보자 2. 객체 생성 객체는 속성(properties).. 2022. 4. 22.
틱태토3. 컴포넌트 작성(1) 목표: 3*3 보드판 렌더 및 props 전달을 통해 각각의 버튼에 인덱스 값 나타내기 각각의 버튼을 식별할 수 있는 index를 Board 컴포넌트에서 Square 컴포넌트로 전달하기 브라우저를 통해 렌더 및 props 전달 여부 확인 이전에 생성하였던 컴포넌트 안에 내용을 작성해보자 https://yellow-w.tistory.com/222 2. TicTacToe 게임의 명세 이 게임은 3*3형식의 바둑판에서 먼저 빙고를 완성하는 사람이 이기는 게임이다. Game/Board/Square라는 3개의 컴포넌트 존재 Game 컴포넌트는 하위에 Board 컴포넌트를 가진 게임 Set Board 컴포넌트는 크 yellow-w.tistory.com 이전 글에서 보았던 명세대로, Game 컴포넌트에서 Board .. 2022. 4. 21.
틱택토2. TicTacToe 게임의 명세 이 게임은 3*3형식의 바둑판에서 먼저 빙고를 완성하는 사람이 이기는 게임이다. Game/Board/Square라는 3개의 컴포넌트 존재 Game 컴포넌트는 하위에 Board 컴포넌트를 가진 게임 Set Board 컴포넌트는 크게 두 가지 영역으로 나뉨 승자 또는 다음 선수를 나타내는 영역 Square 컴포넌트의 각각의 버튼을 포함하는 board-row 영역*3 Square 컴포넌트는 클릭 시, 버튼의 내부에 클릭한 플레이어를 표시하는 버튼 엘리먼트를 가짐 게임의 규칙 플레이어 중 승자가 생기면 게임은 종료된다. 이미 한번 클릭된 버튼은 재클릭할 수 없으며, 플레이는 되돌릴 수 없다. 2022. 4. 21.

티스토리툴바