Teachable Machine Train a computer to recognize your own images, sounds, & poses. A fast, easy way to create machine learning models for your sites, apps, and more – no expertise or coding required. teachablemachine.withgoogle.com

JSX 소개 JSX는 Javascript를 확장한 문법입니다 UI가 어떻게 생겨야 하는지 설명하는 역할을 합니다 JSX 규칙 1. 태그가 비어있다면 />을 이용해 태그를 바로 닫아주어야 합니다. 2. 두 개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 합니다. 3. 태그를 작성 할 때 이름 없이 작성하면 Fragment가 만들어 집니다. Hello, React!! 안녕하세요 Hello, React!! 안녕하세요 4. Javascript 표현식을 사용할 때는 중괄호{ }를 이용합니다. const name = 'Josh Perez'; const element = Hello, {name}; 5. class는 className으로 표기해야 합니다. 6. 주석은 {/* */} 형태로 작성해야 합니다.

설치 $ brew install yarn // homebrew를 사용한다면 $ npm install install yarn 업데이트 $ yarn self-update 생성 $ yarn init 패키지 생성 및 삭제 $ yarn add [package-name]@[version-or-tag] [option] $ yarn remove [package-name] Yarn - 처음 보는 자바스크립트의 새 패키지 매니저 얀(Yarn)은 자바스크립트의 새로운 패키지 매니저이다. 더욱더 빠르게 패키지를 인스톨하는 방법과 의존성 관리를 다양한 디바이스(across machines)에서 일관성 있게 하는 방법에 대해서 배워 보도록 하자. usecode.pw [NodeJS] yarn 을 설치하고 yarn 을 이용하여 패키..

props React의 props는 HTML의 attribute와 유사합니다. 예를 들어, "brand" attribute를 "Car" element에 추가해봅시다. const myelement = ; 그럼 컴포넌트는 argument를 props object 처럼 받습니다. 아래 코드는 컴포넌트에서 "brand" attribute를 사용하는 모습입니다. 부모 컴포넌트로 부터 전달 받은 props는 하위 컴포넌트에서 this.props 라는 구문으로 사용가능합니다. class Car extends React.Component { render() { return I am a {this.props.brand}!; } } 컴포넌트가 일반적인 자바스크립트의 함수라면, props는 함수의 입력값(input)이 됩니..

11화 디폴트 모드 네트워크: 멍 좀 때리게 내버려 둬요 Sleep, memory, neuroscience and DMN | “딸! 공부 안 하고 뭐해?” “내일이 기말고사라서 잠시 멍 좀 때리고 있겠습니다” (그림 출처 : 구글) 디폴트 모드 네트워크에 대해 뇌과학 연구자들의 관심이 뜨겁습니다. 디폴트 모드 네트워크 Default Mode Network(이하 DMN)가 대체 뭐길래? 그전에 잠시, 수많은 연구들을 통해 이제는 거의 과학적으로 입증되었다고 할 수 있는 ‘수 brunch.co.kr

컴포넌트(Component) 컴포넌트는 UI를 구성하는 독립적이고 개별적인 아주 작은 개체(entity)입니다. 이러한 컴포넌트들은 각각의 코드와 구조, API가 있습니다. 컴포넌트들을 모아서 UI(User Interface)를 구현하고 UI들은 사용자에게 View라는 형태로 제공됩니다. 컴포넌트의 장점은 코드를 재사용 가능하다는 것입니다. 컴포넌트의 종류는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉘어 집니다. 함수형 컴포넌트 function App(props) { return Hello, {props.name}; } 클래스형 컴포넌트 class App extends Component { render() { return Hello {this.props.name}; } } 컴포넌트의 이름은 항상 대문자로 ..

리액트가 필요한 이유 Javascript를 이용하여 DOM을 변경하게한 경우에 만약 사용자에 의한 인터렉션이 많은 웹 페이지라면, 처리해야할 이벤트도 많아지고, 관리해야 할 상태값도 다양해지고, DOM도 다양해 질 것이기 때문에 DOM 업데이트와 이벤트 핸들러 간의 관계가 매우 복잡해질 것이다. 그래서 Ember, Backbone, AngularJS 등의 프레임워크가 만들어졌다. 이러한 프레임워크는 자바스크립트의 특정 값이 바뀌면, 특정 DOM의 속성이 바뀌도록 연결을 해준다. 이로 인해, 업데이트 하는 작업을 간소화할 수 있었다. 하지만 React는 위의 프레임워크들과는 달리 어떠한 상태가 바뀌었을 때, 그 상태에 따라 DOM을 어떻게 업데이트 할 지 규칙을 정하는 것이 아니라 아예 화면에 보여지는 V..

View 예전에 JS가 너무 하기 싫어서 React부터 하다가 결국 JS를 해야한다는 사실을 깨닫고 좌절했던 기억이 난다...ㅋㅋ React를 처음 접해본 것은 아니지만.. 그래도 React로 제대로 구현한 것은 처음이다. 마지막 강좌 따라하고 실행해보다가 오류발생해서 유투브에 댓글 올렸는데 하트받아서 기분이 좋았다ㅎㅎ 아직은 그냥 쌩판 HTML+JS 조합보다 코드 정리나 시각적인 면에서 불편하긴하다. 하지만 코드 재활용성과 서버 사이드 렌더링(SSR) 이 두가지가 얼마나 뛰어난지는 잘 알겠다. 앞으로 독자적인 작품을 만들 수 있도록 노력해야겠다. 일단 이때까지한 개념들을 바로 잡고 다음 단계로 넘어가자.