이번 글을 통해 배워갈 내용 리액트 State를 관리하는 한 가지 방법 리액트를 다루면서 State가 많아지는 경우 Redux, Zustand 등의 상태 관리 라이브러리를 쓰기에는 애매모호한 경우들이 있습니다. 본 예제는 6개의 State = 과일 3개 + 채소 3개 해서 총 6개의 State를 2개의 리스트로 묶어서 사용합니다. 화면은 이와 같으며 일단 야채와 과일 리스트를 만들었습니다. const fruitList = { APPLE: 'apple', BANANA: 'banana', KIWI: 'kiwi' } const vegetableList = { LETTUCE: 'lettuce ', CABBAGE: 'cabbage ', CARROT: 'carrot ' } 그다음 해당되는 State를 만들고 리스트..
이번 글을 통해 배워갈 내용 리액트에서 svg를 이용해서 그림 그리기 효과 구현해보기 먼저 본 튜토리얼을 진행하는데 필요한 SVG 파일을 만들어 줍니다. (한 줄 그리기로 그려야 더 예쁜 효과가 나옵니다) (없으시다면 없는 대로 진행해주셔도 됩니다) 김 씨는 천사를 그렸습니다. 아래는 김씨가 그린 천사 SVG 파일내부 입니다. Layer 1 위에서 path에 d값만 빼서 아래의 angel.js 파일을 만들었습니다. export const angelDrawingLength = 7531; export const angelDrawing =`m278,245c1,-1 -1.31,-2.33749 -4,-4c-3.60901,-2.23048 -4.59399,-4.513 -7,-6c-2.69,-1.66251 -5.934..
이번 글을 통해 배워갈 내용 리액트 훅 함수 기반으로 생성자 구현해보기 여기 귀여운 고양이가 있습니다 중앙 버튼을 누르면 고양이가 말하는 기능이 토글 되고 하단에 버튼을 누르면 함수기반 그리고 클래스 기반으로 변경되게 세팅했습니다. 먼저 클래스에서 생성자를 세팅하는 것부터 보겠습니다. 생성자는 ES6에서 클래스와 함께 등장한 개념으로 클래스에 인스턴스가 생성되면 가장 먼저 실행되는 메서드로서 주로 인스턴스의 초기값들을 세팅해줍니다. 생성자를 클래스에서 세팅하는 경우 아래와 같이 간단하게 세팅할 수 있습니다. export default class TestCl extends Component { constructor(props) { super(props); this.state = { isTalking: fa..
이번 글을 통해 배워갈 내용 Styled component key frame animation Styled component 리액트 카메라 촬영 기능 을 사용한 카메라 Component 리액트로 카메라 CSS를 만들고 거기에다가 실제 카메라를 연동해서 NextJS로 돌려봤습니다. 회사 끝나고 밤 10시부터 새벽 2시까지 혼자 만들어봤는데 뭔가 만들고 나니까 뿌듯하네요 리액트로 스타일 컴포넌트를 제외한 외부 라이브러리 안 쓰고 카메라 컴포넌트를 만드니까 뭔가 라이브러리 없이도 이것저것 자유롭게 만든다는게 라이브러리를 쓰는 것보다 더 즐거운 것 같습니다. 아래 내용을 한번 읽어보시고 도움이 되길 바라며 즐코(즐거운 코딩) 하시길 바랍니다 카메라 안에 카메라 비디오 렌즈 내부 렌즈 플래시 버튼을 넣어주고 CS..
리액트 훅을 사용해서 캔버스에 움직이는 하트 애니메이션 만들기 Make heart animation inside canvas using react hook 이번 글을 통해 배워갈 내용 Canvas Animation 1. 리액트 컴포넌트를 만들고 캔버스를 더해줍니다. import React from 'react'; const Heart = () => { return ( ); }; export default Heart; 2. 리액트 컴포넌트와 Dom 이 상호작용을 하기 위해서 ref를 추가해줍니다. import React from 'react'; import { useRef } from "react"; const Heart = () => { let ref = useRef(); return ( ); }; ex..
이번 글을 통해 배워갈 내용 리액트개발을 할때 빠른 속도로 코딩을 하게 도와주는 익스텐션인 심플 리액트 스니펫스를 알아보겠습니다. 먼저 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..
