Jun's TID

리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤나 비슷하다. 리액트에서 이벤트를 사용할 때 주의할 사항들이 몇 가지가 존재하는데, 이는 다음과 같다. 1. 이벤트 이름은 Camel Case: 예를 들어 HTML의 onclick은 onClick으로 작성해야 한다. 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. 3. DOM 요소에만 이벤트를 설정할 수 있다. 직접 만든 컴포넌트에는 자체적으로 이벤트를 설정할 수 없다. 바로 한번 예제와 함께 알아보도록 하자. 우선, 예제로 사용할 컴포넌트를 생성하여 불러오자. ◎EventPractice.js import {Component} from 'react'; class E..

리액트에서 컴포넌트를 선언하는 방식은 크게 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다. 첫 리액트 프로젝트에 있던 App.js 에는 function App()으로 시작하는 함수형 컴포넌트가 있었는데, 이를 클래스형 컴포넌트로 변경할 수도 있고, 새로운 컴포넌트를 추가할 수도 있다. 바로 한번 리액트의 컴포넌트 개념에 대하여 알아보자. 함수형, 클래스형 컴포넌트 ◎App.js import logo from './logo.svg'; import './App.css'; function App() { const name = 'React'; return ( {name} ); } export default App; 위와 같이 함수형 컴포넌트로 선언되어 있는 App() 컴포넌트를 클래스형으로 바꿔보면, import..

리액트에서 사용하는 자바스크립트 확장 문법인 JSX를 올바르게 사용하기 위해 준수해야 할 몇 가지 규칙과 문법을 알아보자. 1. 감싸인 요소 컴포턴트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. 아래와 같이 작성할 수 없다는 이야기이다. import logo from './logo.svg'; import './App.css'; function App() { return ( 리액트 안녕 잘 작동하니? ); } export default App; 위 코드는 2개 이상의 컴포넌트를 감싸는 부모 요소가 없기 때문에 오류가 난다. 아래와 같이 div 태그로 감싸거나, import logo from './logo.svg'; import './App.css'; function App() { retur..

다시 프런트로 넘어와서, 이번에는 리액트를 본격적으로 공부하려고 한다. 말은 웹 개발자라고 하지만, 사실상 지금 다루고 있는 게 ExtJs 뿐이라... 점점 소위 말하는 "트렌드"와 멀어진다는 느낌이 들어 부랴부랴 시작해보려고 한다. 리액트로 개발을 입문하는 사람들도 적지 않다고 하니... 플러터도 있지만, 웹 개발 쪽에서는 확실히 node.js와 react.js 가 자리를 많이 차지하고 있는 거 같다. 책은 "리액트를 다루는 기술"을 참고하며, 기초부터 차근차근 모르고 넘어가는 부분 없이 확실하게! 해보자. 바로 시작해보자. - React? 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용한다. 다른 자바스크립트 "프레임워크"와는 달리 MVC 중 오직 View 부분만 신경을 쓰는 라..

합성곱 신경망의 구조와 구성 요소에 대하여 다뤘으니, 이번에는 본격적으로 합성곱 신경망을 직접 설계하고 이용하여 이미지 분류를 해보자. 우선, 동일하게 데이터를 준비해주자. from tensorflow import keras from sklearn.model_selection import train_test_split (train_input, train_target), (test_input, test_target) = keras.datasets.fashion_mnist.load_data() train_scaled = train_input.reshape(-1, 28, 28, 1) / 255.0 train_scaled, val_scaled, train_target, val_target = train_test..

합성곱 신경망(Convolutional Neural Network, CNN)은 필터링 기법을 인공 신경망에 적용함으로써 이미지를 더욱 효과적으로 처리하기 위해 고안되었다. 지난번 포스팅까지 다뤘던 인공 신경망에서는 각 뉴런마다 입력 개수만큼의 가중치가 존재했다. 즉, 모든 입력에 가중치를 곱하고 절편을 더하여 1개의 출력을 만드는 방식이었다. 예를 들어, 밀집층에 뉴런이 3개가 있다면 출력 또한 3개가 되며, 이는 입력 개수에 상관 없이 동일하다. 합성곱은 이러한 밀집층의 계산과는 조금 다르다. 입력 데이터 전체에 가중치를 적용하는 것이 아니라, 일부에 가중치를 곱한다. 즉, 가중치를 줄이는 효과가 있는데 특성이 어마어마하게 많아 가중치의 개수도 셀 수 없이 많은 이미지에서 연산량을 줄이고 효과적으로 처..

이전에 사이킷런에서 제공하는 일반적인 머신러닝 알고리즘은 좋은 성능을 내기 위해 매개변수를 조정하고 훈련하는 과정을 반복한다. 다소 모델의 구조가 어느 정도 고정되어 있다고 느껴진다. 반면에 딥러닝에서는 층을 추가하고 층에 있는 뉴런의 개수와 활성화 함수를 결정하는 등의 과정이 있어 모델의 구조를 직접 만든다는 느낌이 훨씬 강하다. 이번에는 Keras를 사용하여 모델을 훈련하는데 필요한 다양한 도구들을 알아보려고 한다. 바로 시작해보자. Keras의 fit() 메서드는 Histroy 객체를 반환하는데, 이 History 객체는 훈련 과정에서 계산한 지표, 즉 손실과 정확도 값이 저장되어 있다. 이 값을 잘 사용하면 그래프를 그릴 수 있다. 우선, 데이터를 준비하고 from tensorflow import..

지난번 포스팅에서 인공 신경망에 대한 기초적인 지식과 케라스를 사용하여 직접 이를 제작해봤다. 인공 신경망은 하나의 층이 아닌 여러 개의 층을 가질 수 있는데, 층을 더 추가하여 데이터 셋을 더 정확하게 분류하는 심층 신경망을 만들 수 있다. 입력층과 출력층 사이에서 입력 받은 데이터를 가중치와 절편에 따라 중간에서 연산한 뒤, 설정되어 있는 활성화 함수로 출력하여 내보내는 층을 은닉층이라고 하는데, 출력층의 경우에는 활성화 함수로 적용할 수 있는 함수의 종류가 시그모이드(이진), 소프트 맥스(다중)으로 제한되어 있지만, 은닉층의 활성화 함수는 그 종류가 비교적 자유롭다. 대표적인 은닉층의 활성화 함수로 렐루(ReLU) 함수를 사용하는데, 이는 밑에서 다룰 것이다. (활성화 함수는 분류 문제를 풀기 위해..

앞서 머신러닝의 지도 학습, 비지도 학습을 대표하는 각각의 알고리즘을 예제와 함께 실습하며 머신 러닝을 조금 핥아봤다. 완벽하지는 않지만, 이제 어느 정도 친해진 거 같으니 딥러닝을 다뤄보자. 이번 글에서는 28 x 28 픽셀로 이뤄진 사진 데이터 샘플과 텐서플로를 가지고 직접 인공 신경망을 만들어보며, 딥러닝이 무엇인지, 텐서플로가 뭔지 알아보려고 한다. 바로 시작해보자. 우선 데이터 셋은 패션 MNIST 데이터 셋을 사용하는데, 이는 10가지의 패션 아이템 사진 샘플이 각 6000장 씩 들어있는 데이터 셋이다. 우선, 아래와 같이 텐서플로의 케라스를 임포트하고 데이터를 로드한다. from tensorflow import keras import matplotlib.pyplot as plt import ..

비지도 학습의 예제들을 다뤄보면서, 과일 사진들을 예제 데이터로 사용하였다. 사진 데이터의 경우, 만약 10000개의 픽셀을 분석하여 모델을 만드는 예제라면, 특성이 10000개인 데이터를 다루는 셈이다. 머신러닝에서는 이런 특성을 차원이라고 하는데, 차원이 많으면 많을수록 좋은 성능을 내겠지만, 필요 이상으로 많다면, 모델이 과대적합될 가능성이 생기고, 저장 공간을 너무 많이 차지할 수도 있다. 그렇기 때문에 차원 축소를 통해 데이터를 가장 잘 나타내는 일부 특성만 선택하여 데이터의 크기를 줄이고 학습 모델의 성능을 향상시킬 수 있다. 이번에는 대표적인 차원 축소 알고리즘인 주성분 분석을 다뤄보려고 한다. 바로 한번 알아보자. 주성분 분석(Priciple component analysis)은 데이터에 ..