이번 글을 통해 배워갈 내용 리액트 컴포넌트 컴포넌트 폴더를 만들고 (src 폴더를 마우스 오른쪽으로 누른뒤 New folder 클릭 이름을 component로 설정) 그안에 |--->component |--->Board.js |--->Game.js |--->Square.js 위와 같이 Board.js, Game.js, Square.js 파일을 추가해줍니다. 틱택토 게임에서 게임을 실행하면 보드가 있고 그안에 사각 모양이 있습니다. 위와 같은 내용을 생각해 두고 https://codepen.io/gaearon/pen/oWWQNa Tic Tac Toe ... codepen.io 공식문서에 있는 틱택토 코드펜 코드를 학습적 용도로 참조및 인용해서 component 폴더 내에 있는 파일들을 작성하겠습니다. 일..
이번 글을 통해 배워갈 내용 리액트 몇가지 키워드 정의 VS 코드를 활용한 몇가지 세팅 리액트의 정의 리액트는 사용자 인터페이스 구축을 위해 사용되는 자바스크립트 라이브러리 입니다. Component 들을 이용해서 UI를 만드는 환경을 제공해줍니다. 진행하기에 앞서서 몇가지 중요 키워드들을 설명하고 가겠습니다 props component들이 받는 매개변수 properties(속성들)의 약자입니다. render 화면에서 보고자 하는 것들의 설명을 반환해줍니다. 리액트는 이 설명을 받아서 결과를 화면에 표시해줍니다. JSX 특별한 구문으로서 구조를 더 쉽게 쓰게 도와줍니다. 예시) 라는 구문은 빌드할때 React.createElement('div'>로 변환됩니다. 자 이제 다시 리액트 프로젝트를 계속 진행하..
이번 글을 통해 배워갈 내용 리액트 공식문서에 나온 틱택토 게임 강좌를 하나씩 설명하면서 진행해보겠습니다. 먼저 리액트를 처음 써보시는 분들은 몇가지 설치 후 진행을 해주셔야 합니다. 윈도우를 기준으로 강의를 작성하였습니다. 맥을 쓰시는 분들은 호환 되는 커맨드를 인터넷 검색하시면서 따라와 주시면 감사하겠습니다. 또한 VS 코드를 기반으로 진행될 예정이니 없으신 분들은 아래에서 다운 받아 주시면 됩니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern ..
이번 글을 통해 배워갈 내용 리액트 앱을 깃 레포에서 풀 받아서 실행 하는 법을 알려드립니다. 1. 윈도우의 경우 CMD 창을 여시고 2. 받고자 하시는 디렉토리(폴더)로 이동합니다 예시 cd C:\learn (폴더를 만드시고자 한다면 mkdir 폴더명 을 통해 만드신뒤 이동하시면 됩니다.) 3. 깃 클론을 합니다 git clone 레포url 예시 git clone https://github.com/songk1992/ppp_2021_summer_frontend 4. 다운이 다되면 cd를 이용해 다운받은 레포의 디렉토리로 이동합니다. cd 디렉토리명 cd ppp_2021_summer_frontend 5. package.json 파일을 확인해서 script가 잘 써있는지 확인합니다. "scripts": { ..
