CategoryLearn Programming (86)

[React] 9. React에서의 Forms (Controlled Component)

Forms우리가 일반적으로 알고 있는 Forms이란 아래와 같은 것 이죠<form>  <label>    Name:    <input type="text" name="name" />  </label>  <input type="submit"&nb..

[React] 8. React에서의 List 생성

List & Key목록을 View에서 표현할 때 주로 List를 사용합니다.Foreach나 For를 사용해서 Element를 만들어 주는게 보통인데 과연 React에서는 어떤식으로 사용을 할까요?React에 대해서 알아보기 전!우선 자바스크립트의 map에 대해서부터 알아 보도록 하겠습니다.자바스크립트 map()const numbers = [1, 2, 3, 4, 5];const&nb..

[React] 7. React에서의 조건부 렌더링

React에서의 조건부 렌더링조건부 렌더링이란 React render시 특정 조건에 따른 동작을 하게 하는 것입니다.사실 그냥 if문 사용과 다를게 없습니다. 이해하기 어렵지 않으실겁니다 하하아래 소스를 참고해보면render() {    const isLoggedIn = this.state.isLoggedIn;     let ..

[React] 6. React 이벤트 처리

React에서의 이벤트 처리React에서는 이벤트를 함수에 연결해줍니다.DOM에 onclick을 사용해서 처리하는 것과 비슷하게 사용합니다.주의해야 할 특징으로는 아래와 같이 있습니다.이벤트는 camelCase를 사용합니다. (onclick X -> onClick O){}(이벤트처리기)로 함수이름를 전달합니다.이벤트 사용아래 코드 보시면 그 차이를 한눈에 보실 수 있습니다.//Javascript onclick event&nbs..

[React] 5. State와 Life Cycle

State와 LifeCycle오늘은 Status와 생명주기에 대해서 알아보려고 합니다.하지만 그전에 지난 소스를 클래스화 하는것 부터 시작해 봅시다.지난 포스트 중 시간이 바뀌는 소스가 기억나시나요3번 렌더링 요소 포스트입니다 내용은 아래 링크로 보실 수 있습니다.소스보기데모보기tick메서드를 호출해서 계속 렌더링 시켜주는 소스였죠?function tick() {  const element =&n..

[React] 4. Component 와 Props란?

Components와 PropsCompoenet란컴퍼넌트는 각 부분을 재사용 가능한 조각으로 UI를 나눈 것과 같습니다.리액트에서의 컴퍼넌트는 자바스크립트 함수와 같습니다.컴퍼넌트는 input으로 Props를 받고 화면에 표시할 element를 반환해 줍니다.Welcome이라는 컴퍼넌트를 만들어 보겠습니다function Welcome(props){    return <h1>Hello,&..

[React] 3. 렌더링 요소 (Rendering Elements)

렌더링 요소 - Rendering Elements우리는 이전 포스트를 통해서 JSX를 이용해 렌더링 요소를 만들어봤습니다.const element = <h1>Hello, world</h1>;네 이겁니다DOM에 Element를 렌더링ReactDOM을 사용하면 Elements를 DOM에 렌더링 할 수 있습니다.ReactDOM.render();을 이용해서 넣어줍시다!<div id="r..

[React] 2. JSX에 대해서 간단하게 알아보자

JSX란?JSX의 단어 유래부터 알아봅시다.Javascript + XML을 합쳐서 탄생한 기존 자바스크립트의 확장 문법입니다.그렇다면.. 두가지를 합쳐서 얻는 장점은??개발자가 자바스크립트 내부에 마크업 코드를 작성해 줄 수 있게 해줍니다.단순히 XML만 아니라 변수나 프로퍼티의 바인딩 기능도 제공합니다JSX 한번 봅시다.ReactDOM.render(  <h1>Hello, world!</h1>,&nbs..

[React] 1. 리액트 시작하기

React 시작하기React로 사이트를 간단하게 만들어도 잘 이해가 되지 않거나 하는 부분이 있어서 시작부터 해보자 하고 작성하는 포스트 입니다.아래 두 내용을 듣고 영감을 받아서 시작하게 되었습니다.React가 당신을 슬프게 하나React 배우는 법유익한 내용이니 한번 보고 오시면 좋을 듯 합니다.들어가며저 글들을 보고 내린 결론은 바로..!Redux? Flux? 이런거 신경쓰지 말고 페이스북 문서에서 제공하는 기본적인 기능부터 접근을 하자!네 그..

[Canvas Tutorial] Canvas로 벽돌깨기 만들기 - Canvas Bricks Out

목차목차Canvas로 벽돌깨기 만들기들어가기 전Canvas를 처음 접하신다면...1. 색이 있는 원을 그리기2. 움직이는 공 만들기3. 폐달 만들어 주기4. 폐달을 움직이기 (키보드 & 마우스)5. 벽돌 추가 하기6. 마무리마치며참고Canvas로 벽돌깨기 만들기들어가기 전이 포스트는 Billmill.org의 Canvas Tutorial중 벽돌깨기 튜토리얼을 기반으로 작성되었습니다. 원작자에게 수정 등을 허락받은 포스트입니다.Thanks Bil..

퍼블리싱을 위한 HTML5, CSS3, jQuery 필수구문 정리

퍼블리싱을 위한 HTML5, CSS3, JQuery 필수구문 정리퍼블리싱에는 자바스크립트의 클로저나 객체지향, 함수형 프로그래밍 등에 대해서 고민할 필요는 없습니다.하지만 맨 바닥에서 시작 할 수는 없는 노릇..!정말 기초적인 부분은 안다는 가정하에 퍼블리싱에 필요한 기술들을 리마인드 혹은 배워봅시다.이번 포스트에서는 실무에서 많이 사용되며 꼭 알아둬야 하는 필수 구문들에 대해서 정리해 보았습니다.HTML5HTML5의 새로운 태그들HTML5가 나오면..

20. 자바스크립트 - 관리하기 쉬운코드 작성하기

관리하기 쉬운코드 작성하기 최근의 웹앱은 수천 줄의 자바스크립트로 이루어져 있습니다. 다른사람의 코드를 관리하는데도 많은 시간을 보내므로 관리하기 쉬운 코드를 만들어야 합니다. 이번포스트에서는 그런 주제를 다룹니다. 관리하기 쉬운 코드란? 이해하기 쉬움 직관적임 적용하기 쉬움 확장하기 쉬움 디버그하기 쉬움 코드 표기법 코드 표기법을 정하는 것입니다. 자바스크립트는 특히 느슨한 데이터타입을 채택했기 때문에 다른 언어보다 이런점이 중요하게 작용합니다..