반응형

생각 102

리액트 Suspense & lazy

리액트 Suspense와 lazy는 코드 스플리팅을 쉽게 구현할 수 있도록 도와주는 유용한 기능입니다. 코드 스플리팅은 애플리케이션의 성능을 향상시키기 위해 필요한 코드를 필요한 시점에 불러올 수 있는 기술로, 큰 규모의 React 애플리케이션에서 매우 중요합니다. 리액트의 lazy() 함수는 동적 import()를 사용해 컴포넌트를 로드하는 데 사용됩니다. 동적 import는 컴포넌트가 필요할 때만 로드하도록 합니다. Suspense는 렌더링이 완료되기 전까진 로딩 인디케이터나 다른 컴포넌트를 렌더할 수 있게 해주는 기능입니다. 예제: App.js javascriptimport React, { lazy, Suspense } from 'react'; const MyComponent = lazy(() =>..

생각/react 2023.06.29

딥러닝이란?

딥러닝이란 인공 신경망(Artificial Neural Networks)을 기반으로 한 인공 지능 기술의 한 종류입니다. 데이터의 복잡한 패턴을 인식하여 예측, 분류, 추천 등 다양한 작업을 수행할 수 있습니다. 딥러닝 모델은 크게 두가지 종류를 발견할 수 있는데, 하나는 CNN(Convolutional Neural Network)으로 이미지 인식에 사용되고, 또 하나는 RNN(Recurrent Neural Network)으로 자연어 처리에 사용됩니다. Python을 이용하여 딥러닝 모델을 만드는 방법은 다양한 라이브러리를 사용할 수 있는데, 대표적으로 TensorFlow와 Keras, PyTorch 등이 있습니다. 간단한 예제를 통해 설명 드리겠습니다. 여기서는 Keras를 사용해 간단한 신경망 모델을..

생각/인공지능 2023.06.29

useMemo와 useCallback

useMemo와 useCallback은 React의 훅(Hook) 중 하나로, 불필요한 렌더링을 줄이는 데 도움이 되는 기능입니다. 각각의 훅에 대한 설명과 예시 코드를 제공하겠습니다. useMemo useMemo는 메모이제이션된 값을 반환하는데 사용됩니다. 복잡한 연산을 줄이기 위해 계산된 값을 메모리에 저장하여, 의존성 배열의 값이 변경될 때에만 다시 계산하도록 합니다. javascript import React, { useMemo } from 'react'; const ExpensiveComponent = ({ value }) => { const calcValue = useMemo(() => { // 복잡한 계산 const result = value * 1000; return result; }, [..

생각/react 2023.06.26

머신 러닝

몬테카를로 방법 빈도주의에 바탕한 방법. 특정 값의 근사치를 구하기 위해 난수를 이용해 확률적으로 구한다. 일종의 시뮬레이션으로 이해할 수도 있다. 계산하려는 목표가 해석불가능한 함 수거나 구하기가 극히 어려울 때 사용한다. 마르코프체인 정확히는 ‘마르코프 성질을 가진 이산 확률과정’, 줄여서 ‘이산시간 확률과정’. 시간에 따른 계의 상태변화를 나타내는데 관찰 시간이 이산적이어서 이산시간이다. 미래(𝜏 + 1)의 상태는 현재(𝜏)에만 의존하고 과거(𝜏 − 1)에는 의존하지 않아야 한다. 조건부 확률 이 ‘과거상태와 독립’이라고 표현하기도 한다. 깁스샘플링 결합확률분포로부터 일련의 표본을 생성하는 알고리즘. 메트로폴리스 헤이스팅스의 특별한 예. 제안분포 원 분포를 근사해내기 위해 샘플링 과정에서 필요한 분..

생각/인공지능 2023.06.25

Chart.js

Configuration type: 'line' data: {} options: { plugins: {} }} plugins: [] } Configuration object structure type Chart type은 차트의 기본 유형을 결정합니다. Name Description bar bar 차트는 데이터 값을 수직 막대로 표시하는 방법을 제공합니다. 추세 데이터와 여러 데이터 세트의 비교를 나란히 표시하는 데 사용되기도 합니다. bubble bubble 차트는 데이터의 3차원을 동시에 표시하는 데 사용됩니다. 버블의 위치는 처음 2차원과 해당 수평 및 수직 축에 의해 결정됩니다. 세 번째 차원은 개별 버블의 크기로 표시됩니다. doughnut 데이터의 호는 각 데이터의 비례 값을 표시합니다. li..

생각/javascript 2023.06.23

react소리 조절

React 애플리케이션에 다음과 같이 오디오/비디오 요소를 추가하세요. jsx Your browser does not support the audio element. 또는 비디오 요소를 추가합니다. jsx Your browser does not support the video element. 음량조절은 다음과 같이 필요한 함수와 이벤트 핸들를 만들어 설정할 수 있습니다. jsx import React, { useRef } from 'react'; const SoundVolumeControl = () => { const audioElement = useRef(null); const handleVolumeChange = (e) => { const volumeValue = e.target.value; audi..

생각/react 2023.06.23

파이썬 라이브러리와 예시

NumPy (수치 계산 라이브러리) python import numpy as np a = np.array([1, 2, 3]) b = np.array([4, 5, 6]) c = a + b print(c) Pandas (데이터 분석 라이브러리) python import pandas as pd data = {'name': ['John', 'Alice', 'Bob'], 'age': [32, 24, 29]} df = pd.DataFrame(data) print(df) Matplotlib (시각화 라이브러리) python import matplotlib.pyplot as plt x = [1, 2, 3, 4, 5] y = [1, 4, 9, 16, 25] plt.plot(x, y) plt.xlabel('x') plt...

파이썬 예시 코드

출력하는 코드: python print("안녕하세요!") 문자열 조작 코드: python s = "뤼튼입니다" s_upper = s.upper() print(s_upper) 리스트 정렬 코드: python numbers = [3, 1, 4, 2] sorted_numbers = sorted(numbers) print(sorted_numbers) 함수 생성 코드: python def add(a, b): return a + b result = add(3, 4) print(result) 클래스 생성 코드: python class Dog: def __init__(self, name, age): self.name = name self.age = age def bark(self): print(f"{self.name}..

파이썬 기초 문법

다음은 파이썬의 기본 문법에 대한 간략한 설명입니다. 변수(variables): 값을 저장할 수 있는 공간입니다. 예: num = 5, name = "John" 자료형(Data Types): 파이썬에서 사용되는 기본 데이터의 종류로 몇 가지 예시가 있습니다. 정수(Integer): num = 5 실수(Floating Point): num = 5.0 문자열(String): name = "John" 리스트(List): my_list = [1, 2, 3, 4, 5] 튜플(Tuple): my_tuple = (1, 2, 3, 4, 5) 딕셔너리(Dictionary): my_dict = {'key': 'value', 'name': 'John'} 흐름제어(Flow Control): 조건문과 반복문을 사용한 프로그램의..

반응형