분류 전체보기
-
[JS] 간단한 Javascript 문제Dev/JS 2019. 8. 28. 22:22
Facebook Javascript 커뮤니티에 다음과 같은 문제가 올라왔습니다! 이 그룹에는 Javscript에 대한 흥미로운 글이 많으니 가입하시는 것을 추천드립니당~ const adverb = "Just" name = 'Javascript' const adverb_result = delete adverb const name_result = delete name console.log(adverb_result) // ? console.log(name_result) // ?정답은 아래와 같습니다! console.log(adverb_result) // false console.log(name_result) // truedelete 연산자의 특성을 알면 쉬운 문제인데요, delete 연산자는 객..
-
[JS]Shallow CompareDev/JS 2018. 7. 3. 10:23
Shallow Compare import import shallowCompare from 'react-addons-shallow-compare'; //ES6 var shallowCompare = require("react-addons-shallow-compare"); //ES5 Overview React.PureComponent가 소개되기 전에, React와 ES6에서는 shallowCompare이 PureRenderMixin과 함수적으로 동일한 기능을 담당했었습니다. 만약 React 컴포넌트의 render 함수가 "pure"( 동일한 state와 props로 동일한 결과를 렌더링할 때를 말합니다.) 이면, 이 helper함수를 성능향상에 사용할 수 있습니다. Example : export class S..
-
[React.js]Derived State를 언제쓸까?Dev/JS 2018. 7. 2. 14:35
Derived State를 언제 쓸까? getDerivedStateFromProps 는 하나의 목적을 위해서만 존재합니다. 이것은 컴포넌트가 내부 state를 변화가 일어난 props값으로 업데이트 할 수 있게 해줍니다.리액트 블로그의 이전 포스트에서 몇개의 예제를 올려놓았습니다. 예를 들어 현재 스크롤 위치를 오프셋을 기반으로 기록하거나, 외부 데이터들을 props를 통해 로딩할 때가 있습니다. 일반적인 룰에 따르면, derived state는 적게 사용되야 합니다. derived state를 사용하여 마주할 수 있었던 거의 모든 문제 상황들은 두가지 방법을 통해서 줄일 수 있습니다. 먼저, 1. props로 오는 값을 무조건 state로 업데이트 하는 방법, 혹은 2. state와 props가 매치되..
-
[JS] React.js JSX 없이 React 사용하기Dev/JS 2018. 6. 3. 16:44
React Without JSX JSX는 React 를 사용하는데 필수 조건이 아닙니다. JSX를 사용하지 않고 React를 쓰면 컴파일 설정을 하지 않을 때특히 더 편리함을 느낄 수 있습니다. 여러 JSX 요소들은 단지 구문에 설탕정도로 여겨집니다. 예를 들어 React.createElement(component, props, ...children) 을 부를 때 처럼 말이죠. 그래서, JSX를 사용하면서 할 수 있는 모든것을 plain Javascript 만으로도 할 수 있습니다. 예를 들어, 이 코드는 JSX로 사용된 코드 입니다. class Hello extends React.Component { render() { return Hello {this.props.toWhat}; }} ReactDOM...
-
[JS] React.js Portal 알아보기Dev/JS 2018. 6. 3. 16:34
Portal Portal은 상위 컴포넌트의 DOM 계층을 구조 외부에 있는 DOM의 하위 항목으로 렌더링 하는 좋은 방법을 제공합니다. ReactDOM.createPortal(child, container) createPortal의 첫번째 인자인 child 는 요소, 문자열 또는 Fragment 와 같은 렌더링이 가능한 React의 하위 요소 입니다. 두번째 인수 container은 은 DOM 요소를 말합니다. Usage 일반적으로, 컴포넌트의 render 메소드에서 요소를 반환하면 가장 가까운 부모 노드의 자식으로 DOM에 마운트됩니다. render() { // React는 새로운 Div를 마운트 하고 자식요소에 렌더링 합니다. return ( {this.props.children} );} 하지만, 때..
-
[JS] React.js Fragment 알아보기Dev/JS 2018. 6. 3. 16:05
Fragments React의 패턴은 Component가 여러 요소를 반환하는 것이 일반적입니다. Fragements 를 사용하면 DOM 노드에 추가하지 않고 하위의 목록을 그룹화 할 수 있습니다. render() { return ( );} 새롭게 짧은 구문도 나왔지만, 아직 많은 툴에서 지원하지 않고 있습니다. Motivation 일반적인 패턴은 아래와 같이 컴포넌트가 자식리스트를 반환하는 것 입니다. class Table extends React.Component { render() { return ( ); }} 는 HTML이 정상적으로 동작하기 위해 여러개의 요소들을 반환해야 합니다. 만약 부모 div가 의 render() 안에서 사용되었다면, HTML는 정상적으로 동작하지 않을 것 입니다. 다음과..
-
[JS] React.js Context API 알아보기Dev/JS 2018. 6. 3. 15:46
Context 일반적인 React 어플리케이션에서 데이터들은 prop를 통해 하향식(부모 -> 자식) 으로 전달이 됩니다. 하지만,어플리케이션 내에 많은 컴포넌트들이 특정 타입의 props(예를 들어 locale 설정, ui 테마) 를 받기 위해서는 좀 번거로울 수 있습니다.그래서 Context 는 트리 레벨을 통해 prop를 전달하지 않으면서 컴포넌트 끼리 값을 공유하는 방법을 제공합니다. Context를 언제 사용하느냐? Context는 현재 인증된 사용자, 테마, 또는 기본 설정 언어와 같은 React 의 여러 컴포넌트에 대해서 '전역' 으로 여겨질 수 있는 데이터들을 공유하도록 설계되었습니다. 예를 들어 아래 코드에서는 Button 컴포넌트의 스타일을지정하기 위해 'Theme' props를 수동으..
-
[JS] SPA를 구현할 수 있는 Mithril.js 소개Dev/JS 2018. 6. 3. 14:08
Mithril.js ? Mithril은 SPA를 구현할 수 있는 모던 클라이언트사이드 자바스크립트 프레임워크 입니다. Mithril은 용량이 작고, 빠를 뿐더러, 라우팅과 XHR 유틸을 지원합니다. Mithril은 VImeo, Nike 와 같은 회사에서 사용하며, 오픈소스 플랫폼입니다. 만약 여러분이 어느정도 개발을 할 줄 알거나, Mithril이 다른 프레임워크들과 어떻게 다른지 궁금하다면 이 document를 참고하시면 될 것 같습니다. Getting started 이 포스팅에서는 Mithril을 쉽게 사용하기 위한 방법을 제공하고 있습니다. 튜토리얼이라고 해서 별로 없을 것 같지만, CDN을 사용하고, 라우팅 및 XHR이 포함된 API 거의 대부분을 사용하고 있습니다. 그럼 HTML 파일을 만들어 ..