Kendrick's Blog

Forms우리가 일반적으로 알고 있는 Forms이란 아래와 같은 것 이죠 Name: submit을 클릭하면 form의 지정된 url로(없으면 현재페이지로) 이동 될 것입니다.만약 특정 기능을 수행하게 하고 싶다면, 자바스크립트 기능을 추가해서 처리 할 수 있겠죠.이번 포스트에서는 React에서 input, textarea, select등의 요소를 어떻게 제어할지 알아보겠습니다.Controlled ComponentControlled Component는 State에 따라서 값을 갱신하는 컴퍼넌트입니다.value에 할당된 state값을 직접 갱신하고 전달하기 때문에 기본적으로 권장하는 컴퍼넌트 사용방식입니다.Uncontrolled ComponentComponent에서 제어를 관리하지않는 Component입니다..

List & Key목록을 View에서 표현할 때 주로 List를 사용합니다.Foreach나 For를 사용해서 Element를 만들어 주는게 보통인데 과연 React에서는 어떤식으로 사용을 할까요?React에 대해서 알아보기 전!우선 자바스크립트의 map에 대해서부터 알아 보도록 하겠습니다.자바스크립트 map()const numbers = [1, 2, 3, 4, 5];const doubled = numbers.map((number) => number * 2);console.log(doubled) //[2, 4, 6, 8, 10] map과 forEach는 거의 동일한데 다른 점은 같은 길이의 배열이 나오냐 안 나오냐의 차이가 있습니다. 위 예제를 예로들면 doubled변수에 map함수는 동일한 길이의 결과값..

지나간 2016년한 해가 벌써 이렇게 빠르게 지나갔습니다.2016년 초, 인생 계획을 세우면서 다시 블로그를 시작했습니다.나프다에 Interactive Developer 편이 그 시발점이었던 것 같네요. 김종민 씨를 통해서 많은 영감을 받고 계획에 맞게 한발한발 전진했습니다.영어는 기초도 안 되어있기에 기초부터 차근히, 학점은행으로 어설프게 학사 취득, 그리고 이 블로그도 포함되어 있었습니다. 2012년에 만들어서 JAVA와 Linux 관련 포스트 살짝 올려놨다가...휴면계정으로 있었습니다.그렇게 3년의 공백을 깨고 다시 블로그를 시작 했습니다. 사실 Medium이나 Brunch등을 고려했으나...적절한 블로깅 서비스가 없어서 티스토리로 정착하게 되었습니다. 다시 블로그를 시작하려니 별다른 주제도 떠오르..

Getting RealGetting Real은 저번 Book Reviews의 포스트인 '똑바로 일하라'의 전신과 같은 문서입니다.물론 상세한 내용은 차이가 있지만 큰 궤는 같이합니다.왜냐구요? 똑바로일하라를 쓴 37Signals가 이전에 작성한 문서라서요. 호우..!이 문서는 37Signals의 철학을 잘 담고 있습니다.똑바로 일하라 리뷰 - 바로가기Getting Real은 인터넷에 공개된 문서입니다.네, 책은 아니고 37Signals에서 공개한 페이지에서 보실 수 있습니다.참고로 김정현(ikspres), Peter Kim, Jungmin Seo 이분들이 번역과 오타수정을 해주셔서 한글로 편하게 보실 수 있습니다.보러가기뻔한소리? 실제 적용 불가능한 계획?이라고 생각하시는 분들이 많을 것 같습니다.목차 ..

React에서의 조건부 렌더링조건부 렌더링이란 React render시 특정 조건에 따른 동작을 하게 하는 것입니다.사실 그냥 if문 사용과 다를게 없습니다. 이해하기 어렵지 않으실겁니다 하하아래 소스를 참고해보면render() { const isLoggedIn = this.state.isLoggedIn; let button = null; if (isLoggedIn) { button = ; } else { button = ; } return ( {button} );}isLoggedIn 메서드에 따라서 LogoutButton일지 LoginButton 일지 button변수에 할당해 줍니다.그 후 return 시 {button}으로 넣어주면 렌더링 시 isLoggedIn여부에 따라 다른 컴퍼넌트가 노출되겠죠?..

React에서의 이벤트 처리React에서는 이벤트를 함수에 연결해줍니다. DOM에 onclick을 사용해서 처리하는 것과 비슷하게 사용합니다. 주의해야 할 특징으로는 아래와 같이 있습니다.이벤트는 camelCase를 사용합니다. (onclick X -> onClick O){}(이벤트처리기)로 함수이름를 전달합니다.이벤트 사용아래 코드 보시면 그 차이를 한눈에 보실 수 있습니다.//Javascript onclick event Activate Lasers //React onClick Event Activate LasersDOM에 onclick을 사용하듯이 리액트에서는 onClick에서 전처리기를 통해 함수명을 전달해 줍니다.이벤트 취소또다른 차이로는 이벤트 취소가 있습니다.자바스크립트에서 a태그 사용 시, ..

State와 LifeCycle오늘은 Status와 생명주기에 대해서 알아보려고 합니다.하지만 그전에 지난 소스를 클래스화 하는것 부터 시작해 봅시다.지난 포스트 중 시간이 바뀌는 소스가 기억나시나요 3번 렌더링 요소 포스트입니다 내용은 아래 링크로 보실 수 있습니다.소스보기 데모보기tick메서드를 호출해서 계속 렌더링 시켜주는 소스였죠?function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') );} setInterval(tick, 1000);위와같은 코드 였습니다.이 단순 무식한? 코드를 캡슐..

Components와 PropsCompoenet란컴퍼넌트는 각 부분을 재사용 가능한 조각으로 UI를 나눈 것과 같습니다.리액트에서의 컴퍼넌트는 자바스크립트 함수와 같습니다. 컴퍼넌트는 input으로 Props를 받고 화면에 표시할 element를 반환해 줍니다.Welcome이라는 컴퍼넌트를 만들어 보겠습니다function Welcome(props){ return Hello, {props.name}}: for ES6class Welcome extends React.Component { render() { return Hello, {this.props.name}; }}두 코드는 props를 받고 React의 Element를 반환한다는 점에서 동일한 기능을 하는 컴퍼넌트 입니다.Component 렌더링우선 W..

렌더링 요소 - Rendering Elements우리는 이전 포스트를 통해서 JSX를 이용해 렌더링 요소를 만들어봤습니다.const element = Hello, world;네 이겁니다DOM에 Element를 렌더링ReactDOM을 사용하면 Elements를 DOM에 렌더링 할 수 있습니다. ReactDOM.render();을 이용해서 넣어줍시다!id: root가 있네요const element = Hello, world;ReactDOM.render( element, document.getElementById('root') // root에 element를 렌더링 시켜줍니다. );ReactDOM은 필요한 것만 업데이트 한다.ReactDOM은 변경되는 부분이 있다면 그 부분만 변경합니다.일반적인 DOM이 아니..

JSX란?JSX의 단어 유래부터 알아봅시다. Javascript + XML을 합쳐서 탄생한 기존 자바스크립트의 확장 문법입니다.그렇다면.. 두가지를 합쳐서 얻는 장점은??개발자가 자바스크립트 내부에 마크업 코드를 작성해 줄 수 있게 해줍니다. 단순히 XML만 아니라 변수나 프로퍼티의 바인딩 기능도 제공합니다JSX 한번 봅시다.ReactDOM.render( Hello, world!, document.getElementById('root'));이전 포스트를 보시면 Render 부분에서 위와 같은 코드를 보셨을 겁니다.h1태그 부분을 따로 변수로 저장해서 아래와 같이 쓸 수 도 있습니다const element = Hello, world!; ReactDOM.render( element, document.getE..

React 시작하기React로 사이트를 간단하게 만들어도 잘 이해가 되지 않거나 하는 부분이 있어서 시작부터 해보자 하고 작성하는 포스트 입니다.아래 두 내용을 듣고 영감을 받아서 시작하게 되었습니다. React가 당신을 슬프게 하나 React 배우는 법유익한 내용이니 한번 보고 오시면 좋을 듯 합니다.들어가며저 글들을 보고 내린 결론은 바로..!Redux? Flux? 이런거 신경쓰지 말고 페이스북 문서에서 제공하는 기본적인 기능부터 접근을 하자!네 그렇습니다. 벌써 웹팩이니 걸프니 뭐니 여러고민 하지 않고 기초 부터 시작해보도록 하겠습니다. (물론 어느정도 HTML이나 자바스크립트에 대한 지식은 있으셔야 합니다. 여기서 초보는 React 초보..! 정말정말 기초부터 하시는 분들은 About Javasc..

목차목차4차 산업혁명, 인공지능 그리고 웹인사말 & 축사Keynote.1 4차혁명(인공지능)과 웹Keynote.2 자유롭고 느슨한 웹을 동경하는 일에 대하여 - 김국현패널토의35년차 개발자가 바라본 웹 개발의 현재와 미래Bringing Web Services to IoT IoTivity NodeAutomotive WebAngular1 + ES6 - 한장현Universal Rendering (React.JS 중심)ReactiveX + Meteor 종단간 암호화 구현사례Electron 이해하기후기4차 산업혁명, 인공지능 그리고 웹W3C HTML5 Conference 2016 주제 4차 산업혁명, 인공지능, 그리고 웹.. 이름이 깁니다. W3C 주최의 컨퍼런스에 다녀왔습니다.인공지능, VR, 웹의 미래에 대해..