dB's Codeshare

리액트에서 컴포넌트를 만드는 방법은 크게 두 가지가 있습니다. 클래스 기반 컴포넌트와 함수 기반 컴포넌트 입니다. ( React.createClass는 16에서 사라짐 ). 클래스 기반 컴포넌트(React.Component, React.PureComponent)는 동일하나 차이점이 있다면 shouldComponentUpdate를 포함/미포함 입니다. shouldComponentUpdate는 렌더링 이전 새로운 props와 state를 받았을 경우 실행됩니다. PureComponent는 shouldComponentUpdate 라이프사이클이 이미 적용된 컴포넌트 입니다. 예를들어, React.Component를 확장해서 컴포넌트를 만들면, shouldComponentUpdate 메소드를 사용하지 않으면, props, state 값이 변경됨에 따라 항상 리렌더링이 됩니다. 반면, PureComponent를 사용하면 내부 shallow level 단계에서 변경된 값이 있을 경우에만 리렌더링 됩니다. 얕은비교(shallow comparison)는 현재 props, state를 nextProps, nextState 객체와 비교하는 것입니다. 반복문을 통해 비교를 진행하며 각각의 객체의 key의 value값이 다르면 true를 반환합니다. 그렇기 때문에, JSON.stringify()와 같은 깊은비교(deep comparison)를 shouldComponentUpdate에서 사용하는 것은 권장하지 않습니다. shouldComponentUpdate(nextProps, nextState) { return this.state.value != nextState.value; } 깊은비교에 대해 좀 더 자세히 알아보도록 하겠습니다. 자바스크립트에서는 두 객체를 자동으로 비교하는 메소드를 제공하지 않습니다. 변수에 할당된 객체가 같은 객체를 참조하고 있다면 동일하다고 나옵니다. 원시값인 문자열, 숫자는 그 값을 비교하지만, 유사배열, 날짜, 객체는 참조값을 비교하기...

01. 기본개념 노드는 크롬의 V8 자바스크립트 엔진 위에서 실행됩니다. 엔진에 필요한 기능을 병렬로 실행하는 '스레드풀'과 이벤트를 받아 처리하는 '이벤트루프'를 기본구조로, 그 위에 네트워킹을 담당하는 소켓, http 라이브러리가 있습니다. 그 위에는 표준 라이브러리가 있으며 자바스크립트를 사용해서 라이브러리를 사용할 수 있습니다. Process 객체 : 프로그램을 실행했을 때 만들어지는 프로세스 정보를 다루고 있는 객체입니다. argv: 프로세스를 실행할 때 전달되는 파라미터 정보 env: 환경 변수 정보 exit(): 프로세스를 끝내는 메소드 console.log(process.argv.length); console.dir(process.argv); //result [ '/usr/local/bin/node', '/Users/naver/Desktop/nodejs/ch02_test2.js' ] node.exe 파일이 첫 번째 파라미터이고 실행된 자바스크립트 파일은 두 번째 파라미터가 됩니다. 노드를 설치하면 미리 정의된 내장모듈 사용이 가능합니다. 그 중에서 os 모듈, path 모듈 등이 있습니다. 파일 패스를 다루는 path 모듈은 아래와 같습니다. ( path 문서 ) console.log(process.argv.length); var path = require('path'); var directories = ["users", "mike", "docs"]; var docsDirectory = directories.join(path.sep); console.log(docsDirectory); var curPath = path.join('/Users/mike', 'notepad.exe'); console.log(curPath); 주소 문자열과 요청파라미터 : ur...

(참고내용) 리액트에서 모든 DOM 프로퍼티와 속성값은(이벤트 헨들러포함) 반드시 카멜표기법을 사요해야합니다. 예를들어, tabindex 는  tabIndex와 동일합니다. 예외가 있다면, aria-*, data-* 가 있습니다. 이번 포스팅에서 다룰 내용은 컴포넌트에 <br> 태그 사용법입니다. 정확히 말하면 html 문자열에 있는 newline(\n)을 <br> 태그로 전환하는 방법입니다. 기본적으로 리액트는 cross-site-scripting(XSS) 공격을 막기위해 렌더링 메소드 내부에 html의 문자열을 사용하면 렌더링이 되지 않습니다. 즉, 무조건 텍스트형태로 렌더링이 됩니다. 이러한 취약점을 알고도 사용을 원한다면 아래와 같은 dangerouslySetInnerHTML 방법이 있습니다. function createMarkup() { return {__html: 'First &middot; Second'}; } function MyComponent() { return <div dangerouslySetInnerHTML={createMarkup()} />; } 하지만 더 좋은 방법이 있습니다. 바로 Mapping을 통하여 문자열을 배열로 만들어 출력하는 방법입니다. 첫 번째 코드는 기본적인 사용법입니다. 두 번째 코드는 함수 유틸리티로 만들어 리액트 작업시 어디에서도 사용할 수 있도록 제작되었습니다. { data.split('\n').map( line => { return (<span>{line}<br/></span>) }) } export function getNewlinesApplied(html) { if (!html) return null const lines = html.split('\n') if (lines.length === 0) { return html ...

타입스크립트를 사용하면 React.Component 클래스를 확장하여 리액트 컴포넌트를 만들 수 있으며 props와 state의 타입을 정할 수 있습니다. 특별한 타입이 없을 경우 아래오 같이 작성합니다. 만약, props와 state를 사용한다면 interface를 만들어서 원하는 타입 설정이 가능합니다. export default class MyComponent extends React.Component<{}, {}> { public render() { return ( Hello World! ); } } 리액트에서 제공하는 propTypes를 사용할 수도 있지만, 타입스크립트의 interface를 적용하면 컴포넌트를 더욱더 깔끔하게 만들어 주며 코드의 가독성을 높여줍니다. 이는 객체 지향 프로그래밍(OOP) 언어인 Java, C# 등에서도 발견할 수 있습니다. interface IMyComponentProps { someDefaultValue: string } interface IMyComponentState { someValue: string } export default class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> { constructor(props : IMyComponentProps) { super(props); this.state = { someValue: this.props.someDefaultValue }; } public render() { return ( <div> Value set as {this.state.someValue} </div> ); ...

Data structures and types  Data types  Boolean  null  undefined  Number  String  Symbol  Object Object를 제외하고 나머지 6개의 데이터 타입은 원시형(primitives) 으로 객체와 메소드가 없으며 immutable 속성을 가지고 있습니다. undefined은 변수가 정의되어 있지만 아무 값도 할당 받지 않은 상태이며, null은 null값을 할당받은 것을 말합니다. 또 다른 차이점은 null은 객체타입, undefined은 undefined이 출력됩니다.  Primitive wrapper objects  원시타입형에서 properties에 값을 할당은 안되지만, 오류는 아닙니다. 이는 null과 undefined를 제외한, 나머지 원시값은 그 값들을 감싸는 primitive wrapper objects 때문입니다. 객체의 원시값을 가져올때는 valueOf() 사용가능합니다. var fred = "Fred Flintstone"; fred.favoriteFood = "Brontosaurus Steak"; // Outputs: undefined console.log(fred.favoriteFood); // 문자열 표현 let str1 = new String('str1') let str2 = 'str2' typeof str1 // 'object' typeof str2 // 'string' str1 instanceof String // true str2 instanceof String // false str1 instanceof Object // true str2 instanceof Object // false NaN typeof NaN === 'number' // true NaN === NaN // false NaN !=...

리액트 프로젝트에서 컴포넌트를 스타일링 할 때 자주 사용하는 방법으로는 아래 3가지가 있습니다. 이번 포스팅에서는 CSS 모듈에 대해 알아보도록 하겠습니다. 1. CSS Module 2. Sass 3. styled-components import withStyles from 'isomorphic-style-loader/lib/withStyles' import * as s from './Header.scss' import 된 Headers.scss 는 s 객체로 변환되며, key와 value값으로 클래스명에 접근하게 됩니다. { apply: "Businesses-apply-bc84", btn-choice: "Businesses-btn-choice-c57b", cell: "Businesses-cell-c929", root: "Businesses-root-c558" } 리액트에서 명명된 스타일 객체에 접근하려면 아래와 같이 사용할 수 있습니다. (자바스크립트 객체값 접근 방법). key값이 캐밥스타일(kebab-case)로 이루어져 있다면, 오류를 줄이고자 작은따옴표를 사용하는 것을 권장 합니다. <div className={s.item}></div> <button className={s['btn-wide']}></button> CSS 스타일 로더를 사용하는 이유는 CSS 랜더링 및 동일구조 앱 환경 최적화를 목표로 하고 있습니다. Isomorphic Javascript 앱은 클라이언트와 서버 사이드 모두에서 작동되는 것을 말합니다. 이러한 앱을 만들려면 가장 중요한 것이 바로 추상화입니다. 즉, 의존성을 제거하고 어디서든 사용할 수 있도록 각각의 기능과 역할에만 집중해야 합니다. CSS 스타일도 마찬가지 입니다. CSS Modules 좀 더 자세히 알아보기 CSS 모듈은...