프로그래밍언어/React 6

[React 도전기] 7x7 3목 (오목 변형)

안녕하세요! 이제 3목 7x7 마지막입니다! 다음은 아마 오목 버전으로 보여드릴 수 있을 거 같습니다(희망을 가지며 ㅎ..) 이번 버전에서는 앞으로 원래 사용하는 오목판(19x19) 등 자유롭게 오목판을 변경할 수 있도록 새로운 function을 만들었습니다(노가다로 이제 안해도 숫자만 바꾸면 판이 바뀌어요!) 그리고 endIf가 붙는 조건문에서 조건을 조금 수정하였습니다. 한가지 아쉬운게 있다면 이제 변수를 한가지만 받아서 그 변수로 다른 변수의 값들을 다 바꾸어 주고 싶은데 그 방법을 찾고 있는 중입니다...(React를 잘 아신다면 도와주시면 감사하겠습니다) /* 7x7 3목 버전 수정 상황 1. 7x7이 아니더라도 자유롭게 오목판 변경 하기 위해서 for문 추가 2. 가로 , 세로 항목 중 end..

[React 도전기] 6x6 3목(오목 변형)

안녕하세요! 오늘은 지난 시간에 이어서 5x5 이 아닌 6x6 으로 3목을 구현해보았습니다. 이전에 처음으로 소스를 구현하고 알고리즘을 만들었을 때는 반나절 정도 고민을 했지만 6x6은 금방 만들게 되었습니다. 이번 버전에서는 어떤 버전들이 수정 되었고 어떤 흐름으로 이어지는지 알아보게 되는 시간이었습니다. 아래 코드를 참고하시면서 후에 만들어질 오목에 대해서도 피드백 주시면 감사하겠습니다! function Square(props) { return ( {props.value} ); } class Board extends React.Component { renderSquare(i) { return ( this.props.onClick(i)} /> ); } render() { return ( {this.re..

[React 도전기] 5x5 3목(오목 변형 버전)

안녕하세요! 오늘은 5x5 판의 3목을 진행 하려고 합니다! 왜 오목을 안하고 3목을 하느냐? 얼마전 사수분께서 오목판(19x19) 판으로 오목을 구성해보라고 말씀하셨습니다. 이전에 3x3에서 5x5으로 판을 키워서 그런지 19x19가 할만해서 쉽겠거니... 했는데.. 문제는 오목을 둘때 이기는 공식이 문제가 되었습니다 ㅎ.. 그래서 오목 대신 3목으로 시작하게 되었다는 것이니 참고 해주시면 되겠습니다. 먼저 3목으로 승리하는 조건입니다. * 승리 조건 1. 가로 , 세로 , 대각선(/ , \) 총 4가지 조건에 두는 돌이 3개가 되는지 확인 할 것. 2. 바둑판은 좌표로 지정해둠으로 0 1 2 3 4 5 6 7 8 9 10 11 처럼 4 5 6 에 바둑돌이 놓여졌을때 승리 하는 방식이 안되도록 지정(이..

[React 도전기] 5x5 Tic Tac Toe(변형)

안녕하세요. 지난시간에 말씀드린 것 처럼 오늘은 5x5 게임을 구성해보려고 합니다. 처음에는 3x3을 했으니 5x5를 금방하겠지? 하는 생각에 아무것도 모른채 만지작했는데.. 아직 React의 개념을 몰라서 그런지 조금 헤매게 되었습니다. 하지만 성공 했습니다! 아래 코드를 참고 하시면서 봐주세요! 특히 vscode등 다른 에디터를 쓰시는분은 import 부분을 참고 해주세요! /* code adapted from https://reactjs.org/tutorial/tutorial.html */ /* import 코드는 vscode 등 다른 에디터를 사용할 때 사용해주세요. 작성자는 react 홈페이지에 있는 웹페이지에서 진행해서 환경이 다름을 말씀드립니다. import React from 'react'..

[React 도전기] Tic Tac Toe

안녕하세요! 지난 시간 React 에 대해서 소개 드렸습니다. 사이트에 들어가보면 많은 자료들과 단계별 가이드 들이 있습니다. 제가 오늘 알려드릴 부분은 간단한 튜토리얼을 재미있게 진행 할 수 있는 Tic Tac Toe 게임입니다. 이 게임은 우리가 즐겨하는 오목과도 비슷한 게임이라고 생각하시면 될꺼같습니다. https://ko.reactjs.org/tutorial/tutorial.html#before-we-start-the-tutorial 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 위 자습서의 내용대로 쭉 따라가시면 아래 화면과 함께 자습서의 내용이 마무리 됩니다. 위 화면이 나오셨나요?..

[React 도전기] React 시작!

안녕하세요. 요즘 한창 프론트엔드에 대해서 하나씩 배우고 있는 중에 있습니다. 현재는 자바스크립트와 더불어 React에 대해 배우고 있습니다. 요즘 한창 인기가 오르고 있다는 React 인데... 저는 아직 잘 모르겠네요 ㅎ... 아무튼 오늘 React를 도전하시는 입문자분들께 추천드리는 사이트를 소개 하고자 왔습니다! 바로 리액트 공식 사이트 인데요! https://ko.reactjs.org/tutorial/tutorial.html 자습서: React 시작하기 – React A JavaScript library for building user interfaces ko.reactjs.org 위 사이트에 들어가시면 기본 리액트에 대한 개념 및 기본 예제인 tic tac toe 게임을 하나하나 진행을 해보실..