이번 글을 통해 배워갈 내용 Styled component key frame animation Styled component 리액트 카메라 촬영 기능 을 사용한 카메라 Component 리액트로 카메라 CSS를 만들고 거기에다가 실제 카메라를 연동해서 NextJS로 돌려봤습니다. 회사 끝나고 밤 10시부터 새벽 2시까지 혼자 만들어봤는데 뭔가 만들고 나니까 뿌듯하네요 리액트로 스타일 컴포넌트를 제외한 외부 라이브러리 안 쓰고 카메라 컴포넌트를 만드니까 뭔가 라이브러리 없이도 이것저것 자유롭게 만든다는게 라이브러리를 쓰는 것보다 더 즐거운 것 같습니다. 아래 내용을 한번 읽어보시고 도움이 되길 바라며 즐코(즐거운 코딩) 하시길 바랍니다 카메라 안에 카메라 비디오 렌즈 내부 렌즈 플래시 버튼을 넣어주고 CS..
이번 글을 통해 배워갈 내용 리액트개발을 할때 빠른 속도로 코딩을 하게 도와주는 익스텐션인 심플 리액트 스니펫스를 알아보겠습니다. 먼저 VS 코드 익스텐션 아이콘 클릭 후 익스텐션 검색창에 Simple React Snippets를 검색합니다. 그리고 설치 버튼을 누릅니다.(이부분이 설치전에는 install로 보입니다) 설치가 완료되면 사용해 보겠습니다. 컴포넌트js 파일을 만듭니다. 그리고 여기서부터 마법이 실행되는데 예를 들어 React를 임포트하고 싶다면 imr 치고 엔터 치면 됩니다. stateless function component를 만들고 거기다가 navbar 클래스를 가진 nav를 만들고자 한다면 3초 안에 위와 같이 치면 됩니다. 그외에도 여러가지 단축키가 있는데 단축키들은 아래 사이트에서..
이번 글을 통해 배워갈 내용 3 x 3 틱택토 게임의 승자를 정하는 방법을 알아봅니다. 3 x 3 틱택토 게임에서 승리를 하는 방법은 총 8 가지가 있습니다. 이를 배열로 표현해서 판별하는 방법으로 튜토리얼에서는 승자를 정합니다. (BFS 나 DFS 로도 가능합니다만 시간 관계상 리액트 튜토리얼을 그대로 설명하겠습니다.) CalculateWinner 라는 함수를 만듭니다 lines 라는 const 변수 안에는 이길수 있는 경우의 수 (위에 설명한 8가지를 넣고) for문을 돌려서 lines의 조건에 부합하는지 아닌지 판별해주는 함수입니다. export default function calculateWinner(squares) { const lines = [ [0, 1, 2], [3, 4, 5], [6, ..
이번 글을 통해 배워갈 내용 리액트에서 간단한 불 값으로 순서를 정해봅니다. Board Class에서 현재는 "X" 를 입력하는 기능이 있지만 "O" 를 입력하는 기능이 없습니다. 간단한 Bool로 상태를 변경해서 플레이어 순서를 정해보겠습니다. 먼저 생성자에 xIsNext라는 값을 초기화 해서 "X" 가 첫 플레이를 하도록 설정합니다. constructor(props) { super(props); this.state = { squares: Array(9).fill(null), xIsNext: true, }; } 그 다음 handleClick 함수가 실행될때 XIsNext 값을 변경해서 다음 플레이어가 턴을 넘겨 받을수 있도록 변경합니다. handleClick(i) { const squares = thi..
이번 글을 통해 배워갈 내용 function components 지금까지는 클래스 컴포넌트를 사용해서 예제를 작성했습니다. 클래스에서는 React.Compoent를 상속 받아서 render method로 출력을 했습니다만 일부 컴포넌트는 Class 없이 함수로 간단하게 표현 할 수 있습니다. 이를 통해 더 간결하고 명확한 코드를 작성 할 수 있습니다. 상황에 맞게 둘중에 적합한 방법을 쓰는게 좋을 것 같습니다. 제가 참조하는 리액트 공식 문서 튜토리얼에서는 Square 클래스를 함수로 변경하기에 저도 한번 보고 따라서 변경해보겠습니다. // import React from "react"; // before // export default class Square extends React.Component ..
이번 글을 통해 배워갈 내용 controlled components 여러개의 자식 컴포넌트에서 부모가 데이터를 얻을 때 혹은 두개의 자식 컴포넌트 간에 데이터를 주고 받을 때 공유하는 State(상태)를 부모 컴포넌트에서 선언해줘서 관리를 해줍니다. 부모 컴포넌트는 자식들에게 데이터를 props를 통해 전달하고 이는 부모와 자식 그리고 자식과 자식 간에 데이터를 동기화 해줍니다. constructor(props) { super(props); this.state = { squares: Array(9).fill(null), }; } 먼저 보드 클래스에 생성자를 추가해줍니다. 그뒤에 renderSqaure 함수를 변경해줍니다. renderSquare(i) { return ; } 위에서 한 내용을 설명하자면 B..
이번 글을 통해 배워갈 내용 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 관련..
