Study159 React 살펴보기 #4 Redering ElementsElements는 React 애플리케이션을 만드는 가장 작은 구성요소이다. elements는 화면에 보여주고자 하는 것에 대한 표현이다.const element = Hello, world; 브라우저의 DOM elements와 달리 React elements는 일반적인 객체이며 생성하는데 비용이 적게 든다. React DOM은 React elements와 일치하도록 DOM을 업데이트한다.주의 : elements는 더 널리 알려진 개념인 “components”와 혼동할 수 있다. components에 대해서는 다음 장에서 설명할 것이다. Elements는 component가 어떻게 구성되는지를 알려주는 요소이며 따라서 다음 장으로 넘거가기 전에 이 장을 반드시 읽을 것을 권한다.. 2017. 2. 17. 아두이노 스마트 미러 만들기 #4 진짜를 만들어보자 - 4. RTC 모듈 연결과 LCD 출력 지난 시간에는 ESP8266 (ESP-01) 모듈과 ITEAD STUDIO의 4.3인치 LCD를 이용하여 인터넷으로부터 날씨 정보를 가져와 출력하는 작업을 해보았다. 비록 LCD 연결이 어렵기는 했지만 전체적으로 동작하는 데는 큰 문제가 없었다. 다만 하고자 했던 내용 중에 제대로 진행하지 못한 것이 인터넷을 이용하여 BMP 이미지를 불러온 후 LCD에 출력하는 부분인데 Wi-Fi 센서에서 이미지를 가져오는 방법을 잘 모르겠다…ㅠ.ㅠ 그리고 불만스러운 것이 openweathermap API가 보내주는 날씨 정보가 영 형편이 없다. 어느 순간부터 최고 기온과 최저 기온이 계속 동일하게 받아진다…-.- 아무튼 이번에는 날씨 정보 아래 큰 여백에 시계.. 2017. 2. 17. React 살펴보기 #3 앞서의 두 포스팅은 Quick Start에 있는 내용이었고 이번 번역할 JSX In Depth는 Advanced Guides에 있는 내용이입니다. 하지만 JSX를 한 번에 살펴보는 것이 좋을 것 같아 바로 이 JSX In Depth를 번역합니다.JSX 심화기본적으로 JSX는 단지 React.createElement(component, props, ...children) 함수에 대한 문법적인 편의성만을 제공한다. 아래 JSX 코드를 보자 Click Me 이 코드는 컴파일 후 다음과 같이 바뀐다.React.createElement( MyButton, {color: 'blue', shadowSize: 2}, 'Click Me' ) 만일 태그에 자식이 없다면 아래 코드와 같이 self-closing 태그(/>).. 2017. 2. 11. 선형회귀분석 함수 정리 선형회귀분석과 관련된 2가지 함수의 의미 정리이 글은 홍콩 과기대의 김성훈 교수님의 유튜브 강좌를 보고 제 나름대로 조금 더 이해를 하려고 풀어서 정리해본 글입니다.선형회귀분석 가설함수(Hypothesis function) 선형회귀분석의 기본적인 가설 함수 (Hypothesis function). 기존 데이터를 가장 잘 표현하는 직선을 결정하는 함수이며 이 직선은 W와 b를 변화시켜가면서 찾을 수 있다. 바로 이 최적의 W와 b를 찾는 것이 선형회귀분석의 목적이다. 그리고 이렇게 찾아진 W와 b를 함수에 대입하게 되면 기존의 데이터가 아닌 새로운 x값이 나타났을 때 그 새로운 x에 대한 y값을 예측할 수 있게 되는 것이다. 이 과정에서 가장 중요한 것은 기울기를 나타내는 W값이다. 즉, 전체적인 데이터가.. 2017. 2. 11. React 살펴보기 #2 JSX 소개 아래 변수 선언을 살펴보자 const element = Hello, world!; 조금은 우스꽝스럽게도 보이는 이 문법은 문자열도 아니고 그렇다고 HTML도 아니다. 이것은 JSX라고 불리는 javascript의 확장 문법이다. React를 이용하여 UI를 표현할 때 JSX를 사용하는 것을 권장한다. JSX는 템플릿 언어를 연상시키기도 하지만 javascript의 모든 기능을 사용할 수 있다. JSX는 React의 “elements”를 생성한다. “elements”를 DOM 구조에 렌더링하는 과정은 다음 장에서 살펴볼 것이고 여기에서는 React를 시작하는데 필요한 JSX의 기본적인 내용을 살펴볼 것이다. Embedding Expressions in JSX 중괄호({})를 이용하면 어떠한 j.. 2017. 2. 6. React 살펴보기 #1 React 개요 (이 글은 Till60 카테고리에 포함되었던 내용인데 글의 성격상 React 번역 부분만 따로 옮겨온 것입니다.) 아래 내용은 React 공식 홈페이지의 메인 페이지 내용을 의역한 것이다.React는 UI의 상호작용을 보다 쉽게 처리할 수 있는데, 변경된 데이터와 관련된 내용만을 업데이트 하고 렌더링 하는 방식으로 이를 효율적으로 수행한다. 이러한 방식은 결국 예측 가능한 코드를 만들 수 있게 하고 따라서 디버깅이 쉬워진다.자신의 상태를 관리할 수 있는 캡슐화된 컴포넌트를 만듦으로써 복잡한 UI를 쉽게 구성할 수 있으며이러한 로직을 자바스크립트로 작성하기 때문에 다양한 데이터 형식을 쉽게 전달할 수 있고 또 DOM에 의존하지 않고 상태를 유지할 수 있다.React는 특정한 기술 스택에 의.. 2017. 2. 6. 아두이노 스마트 미러 만들기 #3 진짜를 만들어보자 - 3. LCD 연결 및 Wi-Fi를 통한 날씨 정보 가져오기 우선 지난 포스팅에 언급한 waveshare사의 LCD 라이브러리에서 똑바로 선 형태의 폰트를 출력할 수 있도록 수정한 함수를 올린다. //display a char at the specified position on lcd. void TFT::lcd_display_char2(uint16_t hwXpos, //specify x position. uint16_t hwYpos, //specify y position. uint8_t chChr, //a char is display. uint8_t chSize, //specify the size of the char uint16_t hwColor) //specify the color.. 2017. 2. 5. TensorFlow(텐서플로우) 살펴보기 - 3 선형회귀분석 - 문돌이 식으로 해석하기~ 2 일단 지난 시간에 주저리주저리 별거 없이 지껄이다가 글이 너무 길어졌다. 오늘은 Jupyter에서 직접 코드를 수정하면서 ‘텐서플로우 첫걸음’에 실린 선형회귀분석 예제를 조금 더 상세하게 살펴보도록 하겠다. 일단 원래의 소스는 이전 글에서 Jupyter에 업로드 하는 방법을 설명하였으니 그대로 따라하면 볼 수 있을 것이다. 여기서는 데이터를 바꿔서 사용할 예정이다.데이터 적용하기 지난 글에서도 밝혔듯이 데이터를 찾는다는 것이 결코 만만한 일이 아니었다. 그나마 찾은 데이터도 이게 적절한 데이터가 맞는지조차 모를 지경이다…ㅠ.ㅠ 일단 데이터 중 변경된 부분은 ‘서울시 시민 행복지수 통계’ 데이터가 10점 만점을 기준으로 한 점수 데이.. 2017. 2. 4. TensorFlow(텐서플로우) 살펴보기 - 2 선형회귀분석 - 문돌이 식으로 해석하기~지난 번 Docker를 이용하여 텐서플로우를 설치해보았다. 일단 설치는 잘 되었고 부수적으로 Jupyter라는 웹 기반의 Python IDE도 알게 되었다. 그리고 일단 설치를 했으니 공부좀 해보자 하는 마음에 책을 한 권 e-Book으로 구매했다. “텐서플로우 첫걸음(조르디 토레스 지음, 박해선 옮김, 한빛미디어 출판)”이라는 책이었다. 0장 한국어판 서문과 1장 텐서플로우 기본 다지기를 어렵지 않게 넘기고 드디어 2장 에 다다르게 되었다. 2장의 내용은 텐서플로우를 이용하여 선형회귀분석을 하는 것이다. 선형회귀분석…선형…직진하다가…회귀…유턴하는건가…-.-? 아무튼 AI에 관심을 가지면서 많이 들어보던 용어인데 사실 수학 용어에 알러지 반응이 있어 이런 용어들이 .. 2017. 2. 3. 이전 1 ··· 8 9 10 11 12 13 14 ··· 18 다음 반응형
