CategoryLearn Programming (86)

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

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

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

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함수는 동일한 길이의 결과값..

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

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] 6. React 이벤트 처리

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

[React] 5. State와 Life Cycle

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);위와같은 코드 였습니다.이 단순 무식한? 코드를 캡슐..

[React] 4. Component 와 Props란?

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..

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

렌더링 요소 - 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이 아니..

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

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] 1. 리액트 시작하기

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

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

목차목차Canvas로 벽돌깨기 만들기들어가기 전Canvas를 처음 접하신다면...1. 색이 있는 원을 그리기2. 움직이는 공 만들기3. 폐달 만들어 주기4. 폐달을 움직이기 (키보드 & 마우스)5. 벽돌 추가 하기6. 마무리마치며참고Canvas로 벽돌깨기 만들기들어가기 전이 포스트는 Billmill.org의 Canvas Tutorial중 벽돌깨기 튜토리얼을 기반으로 작성되었습니다. 원작자에게 수정 등을 허락받은 포스트입니다.Thanks Bill :)목차 및 내용 중 다른 부분이 있을 수 있으며 원 포스트를 보고싶으신 분은 아래 주소를 이용해 주세요.Billmill.org - Billmill GitHub자 이제 Canvas와 Javascript, jQuery를 사용하여 벽돌깨기를 만들어 보겠습니다.Canv..

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

퍼블리싱을 위한 HTML5, CSS3, JQuery 필수구문 정리퍼블리싱에는 자바스크립트의 클로저나 객체지향, 함수형 프로그래밍 등에 대해서 고민할 필요는 없습니다.하지만 맨 바닥에서 시작 할 수는 없는 노릇..!정말 기초적인 부분은 안다는 가정하에 퍼블리싱에 필요한 기술들을 리마인드 혹은 배워봅시다.이번 포스트에서는 실무에서 많이 사용되며 꼭 알아둬야 하는 필수 구문들에 대해서 정리해 보았습니다.HTML5HTML5의 새로운 태그들HTML5가 나오면서 시멘틱 태그들이 추가 되었습니다.기존에 사용하던 div 태그에 의미를 부여한 태그입니다. 이와 같이 사용하던 부분들을 이제 시멘트 태그로 와 같이 사용할 수 있게 되었습니다. header : 문서의 헤더 부분 nav : 문서의 네비게이션 구조 부분 figu..

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

관리하기 쉬운코드 작성하기 최근의 웹앱은 수천 줄의 자바스크립트로 이루어져 있습니다. 다른사람의 코드를 관리하는데도 많은 시간을 보내므로 관리하기 쉬운 코드를 만들어야 합니다. 이번포스트에서는 그런 주제를 다룹니다. 관리하기 쉬운 코드란? 이해하기 쉬움 직관적임 적용하기 쉬움 확장하기 쉬움 디버그하기 쉬움 코드 표기법 코드 표기법을 정하는 것입니다. 자바스크립트는 특히 느슨한 데이터타입을 채택했기 때문에 다른 언어보다 이런점이 중요하게 작용합니다. 일반적인 코드 표기법에서 지켜야 할 것을 알아 보겠습니다. 가독성 관리하기 쉬운코드는 가독성이 좋아야 합니다. 그렇기 때문에 들여쓰기와 주석은 많은 부분을 차지 합니다. 함수와 메서드 : 각 함수나 메서드에는 그 목적을 반드시 주석으로 남겨야 합니다. 메서드에..