Dev/JS
-
[JS] Node.js v14의 새로운 JS Feature!Dev/JS 2020. 5. 13. 01:09
들어가기 전에 New JS Features in Node.js v14.0에서 정보를 얻어 번역하였습니다. 오역과 의역이 많을 수 있으니 이상하다 싶은 부분은 원래 문서를 참고해주시기 바랍니다. I got information from here and translated it. 두둥등장 Node.js v14.0 Node.js v14.0 버전이 이번주에 출시 되어서 Current 버전으로 릴리즈 되었습니다! 그말인 즉슨! 2020년 10월, 5개월 뒤면 LTS 버전으로 옮겨질 것이고 일반적으로 사용할 수 있을 것 입니다. Node.js v14.0 버전은 최신 JS 기능을 지원하는 V8 8.1을 사용하도록 업데이트 되었습니다. 그래서 이 포스팅에서는 업데이트된 기능들을 살펴보도록 하겠습니다. Optional ..
-
[JS] useEffect에 대한 짧은 가이드Dev/JS 2019. 8. 28. 22:31
들어가기 전에 이 글은 useEffect API에 대해 어느정도 익숙한 독자를 위한 글입니다. 그리고 오역과 의역이 많을 수 있으니 이상하다 싶은 부분은 원래 문서를 참고해주시기 바랍니다. A Complete Guide to useEffect - Dan Abramov 에서 정보를 얻어 번역하였습니다. I got information from here and translated it. 본문 우리는 Hooks를 사용하여 컴포넌트들을 작성하고 매우 만족합니다! 왜냐면 매우 편리하기 때문이죠 !! 하지만, useEffect를 사용하면서 뭔가 조각들이 서로 잘 어울리지 않고 놓치고 있는 느낌이 들지 않나요 ? 예를 들어 라이프 사이클과 관련된 그런것들 말이에요. 아래 질문들을 자신에게 한번 물어보세요. compo..
-
[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는 정상적으로 동작하지 않을 것 입니다. 다음과..