어서와, 개발은 처음이지?

(안내) 이 글은 카카오 오픈빌더에 맞추어 새로 작성되었습니다. 카카오 오픈빌더와 외부 API 연동(feat.Nodejs)(안내) 2019년 초부터 카카오 플러스 친구 정책 변경으로 신규 가입자는 본 글에 작성된 방식으로 외부 API를 사용할 수 없고 카카오 i 오픈빌더를 통해서만 스마트 채팅 제작이 가능합니다. 본론에 들어가기 앞서, 카카오 플러스친구는 스마트 채팅이라는 자동 응답기능을 제공하는데요.관리자 페이지의 스마트 채팅 메뉴에 들어가면 FAQ형과 API형을 선택할 수 있습니다. FAQ는 10개 정도되는 질문과 그에 해당하는 답변을 관리자가 미리 입력하여 사용하는 간단한 형태입니다.이에 반해 API형은 챗봇 등에 연결하거나 cs분석을 위해 별도의 DB에 기록하는 등 고객의 대화내용에 따라 여러가지..

이 글은5.React Native 레이아웃 디자인 - 1부 flex와 width, height5.React Native 레이아웃 디자인 - 2부 배치(Flex Direction)와 정렬(justify content, align items)(현재글)5.React Native 레이아웃 디자인 - 3부 커스텀 버튼 5.React Native 레이아웃 디자인 - 4부 이미지 컴포넌트와 UI 마무리로 구성되어있습니다. 지난 글에서는 View의 width, height와 flex 속성을 이용하여 각 컴포넌트의 영역을 잡아봤습니다.이번 글에서는 지난 글에서 미처 다루지 못했던 레이아웃 배치와 정렬에 관한 내용을 다뤄보겠습니다. 1.Flex Direction 혹시 지금까지 진행해 오면서 컴포넌트들이 세로로만 쌓였다는걸..

이 글은5.React Native 레이아웃 디자인 - 1부 flex와 width, height(현재글)5.React Native 레이아웃 디자인 - 2부 배치(Flex Direction)와 정렬(justify content, align items)5.React Native 레이아웃 디자인 - 3부 커스텀 버튼 5.React Native 레이아웃 디자인 - 4부 이미지 컴포넌트와 UI 마무리로 구성되어있습니다. 지난 시간동안 JSX, 기본 컴포넌트, State와 Props등 React Native를 사용하기 위한 기초 지식들을 알아봤는데요.드디어 실전의 시간이 왔습니다! 이번 시간부터 레이아웃 잡는 법, 화면 이동(관리), 애니메이션, 모션 제어에 대해 순서대로 알아보겠습니다. 1.레이아웃 나누기 저는 앱..

파이썬 datetime 모듈을 이용해 날짜 계산하는 법을 알아보겠습니다. 파이썬은 datetime이라는 패키지 모듈을 지원하고 있습니다. 이 중 날짜는 datetime클래스를 통해 나타내고, 날짜의 차는 timedelta 클래스를 통해 나타냅니다. 1.날짜 생성 from datetime import datetime, timedelta time1 = datetime(2018, 7, 13, 21, 40, 5) print(time1) # 2018-07-13 21:40:05 날짜는 다음과 같이 datetime(년, 월, 일, 시, 분, 초, 밀리 초)로 초기화 할 수 있습니다. 위 time1은 2018년 7월 13일 21시 40분 5초를 나타내고 있습니다. 2.두 날짜의 차이 계산 from datetime im..

이 글은 4.React Native State와 Props - 1부(State)와 이어집니다 Props props는 커스텀 컴포넌트와 관계가 깊습니다. 썩 와닿는 예는 아니지만 이번엔 사용자 별로 버튼을 각각 만든다고 가정해봅니다. 거두절미하고 코드부터 보시죠 일단 프로젝트 안에 TestComponent.js라는 파일을 만들고, 아래 코드를 붙여줍니다. import React, {Component} from 'react'; import {StyleSheet, Button, View} from 'react-native'; import TestComponent from './TestComponent'; const datas = [ {id:"gdHong",count:0,color:"red"}, {id:"ksY..

이 글은 4.React Native State와 Props - 2부(Props)와 이어집니다 지난 글에서 JSX와 함께 State와 Props가 언급되었습니다. 리액트는 State와 Props라는 객체를 사용하여 화면에 표시되는 가변적인 값들을 관리합니다. State와 Props는 몇가지 특징을 가지고 있습니다. State와 Props의 특징 1. Props 혹은 State에 변경이 감지될 때마다 render()가 수행된다. (이는 리액트의 최적화와도 관련있습니다.) 2. State에는 현재 컴포넌트의 화면을 그리는 것과 관련된 대다수의 값들을 담는다. 3. 데이터의 흐름은 상위 컴포넌트에서 하위 컴포넌트로 단방향이다. 4. Props에는 상위 컴포넌트에서 전달받은 값이 담겨있으며 변경 불가능하다. 5...

지난 글에서는 프로젝트를 시작하기 앞서 init 프로젝트의 구조, 프로젝트 실행 시 디버그 서버 실행에 대한 내용을 간략하게 알아봤습니다. 이번 시간에는 App.js의 render() 함수에 XML처럼 들어가있는 JSX 문법과 기본 컴포넌트(Basic Component)를 알아보겠습니다. 1.JSX 우리는 이전에 App.js의 render() 함수에서 JSX를 본 적 있습니다. JSX는 의 모양으로, 컴포넌트를 열어주는 부분과 닫아주는 부분으로 이루어져 있습니다. * 태그를 열었으면 꼭 닫아주셔야 에러가 나지 않습니다. XML 혹은 HTML을 다뤄보셨다면 낯이 익으실텐데요. 만약 이러한 형식을 처음 접하신다면, 검색 혹은 이곳에서 간단하게 HTML을 체험해 보는게 좋을 것 같습니다. (코딩을 처음해..

지난 글에서 React Native 설치와, 기본 프로젝트 생성 및 가상 디바이스에서 실행하는 방법을 알아봤습니다. 그럼 본격적으로 디자인 작업에 들어가기 전에 지난번에 말씀드렸던 프로젝트 구조와 커맨드 창에 대한 간단한 설명, 디버깅에 대해 알아보겠습니다. 1. 커맨드 창 지난 글에서 react-native run-android 혹은 run-ios 명령을 통해 가상 디바이스에서 프로젝트를 실행해봤었죠? 이 명령어를 실행하면 새로운 커맨드 창이 등장하면서 뭔가 로딩되는 화면을 볼 수 있었는데요. 사실은 우리 프로젝트의 번들링 상황을 나타내는 것입니다. react-native는 코드 변경시, 안드로이드/iOS 개발 환경처럼 새롭게 빌드를 할 필요 없이 변경사항이 자동으로 적용됩니다. 실질적으로 우리의 개발..

지난 시간에는 꿀잼 리액트의 매력을 나열해봤습니다. 본디 React.js부터 시작하는게 순서가 아니겠나 싶지만 현재 React Native 프로젝트를 진행중이기 때문에 까먹지 않기 위해 React Native의 시작부터 디자인, 기능 개발과 릴리즈 버전 빌드에 대한 내용을 순차적으로 다뤄보겠습니다. 이번 시간에는 React Native를 설치와 실행하는 법을 알아보겠습니다.(설치한다는 표현이 맞을지 모르겠네요.) 이 글이 끝날때쯤 여러분은 Android앱과 iOS앱 둘다 만들 수 있는 개발자가 되는것이죠. (이제 연봉 협상할 때 안드 2700 ios 2700을 들걸 내가 4000을 받고 한방에 해주겠소! 하고 자신있게 말하세요) 미리 언급하자면 저의 React Native버전은 0.55이고, 공식문서는 ..

어쩌다 리액트를 시작하게 됐는지.. 저는 지난해 한 회사에 자연어 연구원으로 들어갔습니다. 좀 우리만의 기술을 연구하고 싶어서 들어왔는데, 뚜껑을 열어보니 연구는 개뿔~ 남의 연구 꽁무니만 따라가야 하는게 현실이였습니다. 몇번의 이직 시도와 퇴사를 고민했지만 회사 환경이 나아질거라는 말에 속아 최종 합격 받고도 거절했었는데 그때로 돌아가면 제 주둥이를 한 대 쳐주고싶네요. 아무튼 연구에 흥미를 잃었고, 최근에 결국 앱 개발로 보직을 옮겼습니다. 그리고 때마침 이번 제품(모바일 앱)의 프로토타입 작업을 전담하게 되었습니다.(와아아아!!) 아~ 그래? 내 알아서 하라 이거지? 여지껏 허송 세월을 보낸 스스로에게 새로운 스택을 선물하고자, hip한 마음으로 React Native를 골랐습니다. 파이썬쟁이가 득..