이번 글을 통해 배워갈 내용 SVG Clip Path를 통해 커스텀 모양의 로딩바 Transition 효과 구현해보기 위의 특정한 모양에 로딩 CSS를 구현하고 싶고 뒤에 배경은 투명으로 해서 작업을 하고 싶은 경우 자바스크립트 없이 SVG를 가지고 가능합니다. React에서 Styled Component를 써서 작업을 하였으며 React가 아닌 기본 Html CSS, 혹은 앵귤러나 Vue에서도 똑같이 적용해주시면 됩니다. ClipPath 안에 체스 모양들을 넣고 ClipPath id를 설정해줍니다. g에 clip-path id를 연계해주고 g 안에 rect와 circle을 넣어준 다음 CSS 처리를 해줍니다. 그다음 CSS 애니메이션으로 x의 위치를 수정해주면 끝입니다. 전체 코드는 아래와 같습니다. ..
이번 글을 통해 배워갈 내용 SVG Clip Path를 통해 호수에 돌멩이 던지면 생기는 물결처럼 Transition 효과 구현해보기 위의 그림처럼 동그란 원이 점점 커지는 CSS를 구현하고 싶고 뒤에 배경은 투명으로 해서 작업을 하고 싶은 경우 자바스크립트 없이 SVG를 가지고 가능합니다. React에서 Styled Component를 써서 작업을 하였으며 React가 아닌 기본 Html CSS, 혹은 앵귤러나 Vue에서도 똑같이 적용해주시면 됩니다. ClipPath 안에 체스 모양들을 넣고 ClipPath id를 설정해줍니다. g에 clip-path id를 연계해주고 g 안에 rect와 circle을 넣어준 다음 CSS 처리를 해줍니다. 그다음 CSS 애니메이션으로 circle의 반지름을 수정해주면 ..
이번 글을 통해 배워갈 내용 리액트 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를 만들고 리스트..
이번 글을 통해 배워갈 내용 CSS Padding 값을 넣으면서 공간 크기를 유지하고 싶은 경우 CSS에서 Padding 값을 넣을 때 공간 차지하지 않게 하는 법에 대해서 알아보겠습니다. 300px 너비의 div 안에 좌우 50px의 패딩을 주었는데 보시는 것과 같이 400px이 되었습니다. 아래와 같이 300px 그대로 적용하고 패딩값이 부모의 크기에 영향을 주고 싶지 않다면 아래와 같은 속성을 넣어주면 됩니다. -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */..
이번 글을 통해 배워갈 내용 리액트에서 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..
