이번 글을 통해 배워갈 내용 onclick 지난 강의에서 보여드린 Square component의 square 클래스를 가진 button에 onClick 함수를 넣어줍니다. console.log("click")}> 클릭을 하면 화살표 함수를 써서 함수를 건내주고 콘솔창에 클릭을 표시해줍니다. localhost로 보시면 위와 같이 (발글씨 1. Click, 2. F12 눌러서 확인) 확인이 가능합니다. 자이제 생성자를 만들어서 상태(state)를 관리해보겠습니다 constructor(props) { super(props); this.state = { value: null, }; } 위에 코드를 추가해줍니다. 생성자가 props를 인자로 받아서 super 함수로 subclass를 정의하고 Square cla..
이번 글을 통해 배워갈 내용 props 를 통한 데이터 전달 props의 정의 리액트에서 어떠한 값을 컴포넌트를 통해 전달하고자 할때 props(속성)을 주로 사용합니다. 먼저 보드 컴포넌트를 열고 renderSquare(i) { return ; } 위와 같이 Square 컴포넌트 함수에서 value 값을 넣어줍니다. 그렇게 되면 함수 컴포넌트를 호출 할때 0 부터 8까지 값이 들어갈 것입니다. 사각형 (Square) 컴포넌트를 열고 {this.props.value} 상위 컴포넌트에서 받은 props 값을 출력해주면 위와 같이 0 부터 8 까지의 값을 잘 전달 받아 출력해주는 것을 알 수 있습니다. 다음 강좌에서는 컴포넌트 상호작용에 대해서 알아보겠습니다. 감사합니다. 구글링하다가 알게된 Props 관련..
이번 글을 통해 배워갈 내용 리액트 컴포넌트 컴포넌트 폴더를 만들고 (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 ..
이번 글을 통해 배워갈 내용 ...으로 표시되는 스프레드 구문에 대해서 알아보곘습니다. 리액트(자바스크립트 기반 라이브러리)를 사용중에 ...으로 시작되는 스프레드 구문을 보셨다면 처음에는 놀랄 수 있습니다. 위에 ...this.props는 상위 코드에서 span 태그로 감싼 좋아요 두개를 보여주며 웹에서 콘솔 찍어서 보게 되면 위와 같습니다. 눈치 빠른 분들은 벌써 아시겠지만 스프레드 구문(...)을 정의하자면 다음과 같습니다. 함수 호출등의 경우에서 0개 이상의 인자 또는 배열의 요소가 예상되는 위치 또는 문자열과 같은 iterable을 확장하거나 0인 위치에 객체 표현식을 확장하는 경우 쓰입니다. 위에 예시를 들자면 props가 span 태그 없이 "like1" 과 "like2"로 나뉜다면 {.....
이번 글을 통해 배워갈 내용 리액트 앱을 깃 레포에서 풀 받아서 실행 하는 법을 알려드립니다. 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": { ..
이번 글을 통해 배워갈 내용 VS 코드에서 HTML 코드 템플릿을 단축키로 생성하는 법을 배워보겠습니다. HTML 파일 생성후 코드 입력 란 클릭후 SHIFT + ! 버튼을 누르시고 엔터 치시면 위와 같이 기본 HTML이 생성됩니다. 읽어주셔서 감사합니다 좋은 하루 되세요~ 출처 및 인용 https://code.visualstudio.com/docs/languages/html HTML Programming with Visual Studio Code Get the best out of Visual Studio Code for HTML development code.visualstudio.com
