임이지의 블로그

1. 초기 변수 설정 e: 입자의 궤적을 저장하는 배열입니다. h: 하트 모양의 경로를 정의하는 노드들의 배열입니다. O, Q: 캔버스의 너비와 높이입니다. v: 궤적의 수, 각 궤적에 있는 입자의 수, 하트 경로에 있는 노드의 수를 정의합니다. M: Math 객체의 단축형입니다. R, C, Y: 각각 Math.random, Math.cos 함수와 하트 경로 계산에 사용되는 상수입니다. 2. 하트 경로 계산 하트 모양의 경로를 계산하기 위해 for 루프를 사용하여 h 배열에 노드를 추가합니다. 이 노드는 하트의 수학적 공식을 기반으로 계산됩니다. 3. 입자 초기화 while 루프를 사용하여 각 궤적에 대한 입자 배열을 생성합니다. 각 입자는 위치, 속도, 반경, 가속도, 타겟 노드, 방향, 마찰, 색상 ..

Web/HTML JS 2024. 2. 21. 15:19

플러터의 장점 하나의 코드로 ios, android, macos, window, web 모두 동작 가능 RN의 경우 머터리얼 디자인을 적용 시 시스템에 있는 그래픽 라이브러리로 동작하기 때문에 iOS, Android위젯의 스타일 달라 보일 수 있다. 반면에 플러터는 SKIA 엔진을 탑재하여 그래픽 라이브러리가 OS 종속성을 갖고 있지 않아 iOS, Android 모두 같은 스타일로 보여 준다. 핫 리로딩을 지원(앱을 처음부터 다시 시작하지 않고 새로운 코드가 반영됨) 배우기 싶다 (dart언어) 플러터의 단점 RN 보다 성능적인 면에서는 빠르다고 할 수 있으나 생태계가 크지 않다는 점 위에 내용과 마찬가지로 아직까진 네이티브(Android, Swift) 보다는 성능적인 면에서 앞서지 않음 현재 지속적으로..

Web 2022. 6. 30. 16:46

2021.11.08 - [Developer/IT 도서] - Do it! 클론 코딩 트위터 노마드 코더 니꼴라스와 만드는 트위터 Do it! 클론 코딩 트위터 노마드 코더 니꼴라스와 만드는 트위터 책 소개 ‘클론 코딩’만큼 빠르고 효과적인 학습법은 없다! 9살부터 코딩을 시작한 전형적인 ‘천재 코더’ 니꼴라스! 니꼴라스는 세상에서 가장 빠르게 프로그래밍을 배울 수 있는 방법은 클 overface.tistory.com 책 보면서 실습을 하는 도중 한 시간 정도 원인을 찾았다. 문제 ) 코드는 아래와 같다. 책에 있는 내용을 그대로 타이핑했다. import firebase from "firebase/app"; import "firebase/auth"; // TODO: Add SDKs for Firebase p..

Web/FIREBASE 2021. 11. 9. 15:06

custom Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있습니다. 아래는 채팅 어플리케이션에서 친구가 온라인 상태인지 아닌지에 대한 메시지를 표시하는 컴포넌트 입니다. import React, { useState, useEffect } from 'react'; function FriendStatus(props) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); } ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange); retu..

Web/REACT 2021. 11. 3. 12:40

Hook은 JavaScript 함수입니다. 하지만 Hook을 사용할 때는 두 가지 규칙을 준수해야 합니다. 최상위(at the Top Level)에서만 Hook을 호출해야 합니다 반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 마세요. 대신 early return이 실행되기 전에 항상 React 함수의 최상위(at the top level)에서 Hook을 호출해야 합니다. 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됩니다. 이러한 점은 React가 useState 와 useEffect 가 여러 번 호출되는 중에도 Hook의 상태를 올바르게 유지할 수 있도록 해줍니다. 오직 React 함수 내에서 Hook을 호출해야 합니다 Hook을 일반적인..

Web/REACT 2021. 11. 3. 12:32

Using the Effect Hook 클래스 기반 컴포넌트에서 상태를 관리하기 위해에서는 state를 사용해야 했습니다. 리액트 컴포넌트에서 동적인 값을 상태(state)라고 부릅니다. 리액트 16.8 버전에서 Hooks라는 기능이 도입이 되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. Effect Hook을 사용하면 함수 컴포넌트에서 side effect를 수행할 수 있습니다. import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // componentDidMount, componentDidUpdate와 같은 방식으로 useEffect(()..

Web/REACT 2021. 11. 3. 12:06

Using the State Hook state hook 사용하는 방법을 알아 봅시다. Hook과 같은 기능을 하는 클래스 예시 React에서 클래스형 컴포넌트를 사용해봤다면, 아래의 코드는 익숙할 겁니다. class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } render() { return ( You clicked {this.state.count} times this.setState({ count: this.state.count + 1 })}> Click me ); } } 위 코드에서는 state는 { count : 0 }이며 사용자가 this.setState() 를 호출..

Web/REACT 2021. 11. 3. 11:32

HOOK은 React 버전 16.8부터 React 요소로 새로 추가 되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다. 리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었습니다. 리액트 16.8 에서 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. 리액트에서 HOOK을 사용하는 이유는 functional component 에서 state를 가질 수 있게 합니다. 기존의 react 에서는 class component, did mount, render 이런것을 안해도 된다. 모든 것은 하나의 function 이 된다. 함수형 프로그래밍으로 모든 것을 할 수..

Web/REACT 2021. 10. 31. 19:49