ReactEurope 2018

이미지
ReactEurope 2018  주요 주제 및 샘플코드, 컴포넌트 소개 ReactEurope은 프랑스 파리에서 열리는 React 개발자 행사입니다. 2016년부터 시작하여 올해로 세번째 이며, 1000여명 이상 꽤 큰 행사입니다. 이번에 좋은 기회가 생겨 참석할 수 있었네요. 본 포스팅에서는 이 행사에서 다룬 세세한 기술적 내용보다는, 여기에서 소개된 컴포넌트의 간략한 정보와 링크, 그리고 주요 아젠다에 대한 샘플코드를 소개하도록 하겠습니다. 전체 내용은 아래 참고링크 란 - 유투브 채널 - 의 링크를 들어가면 보실 수 있습니다.
| 한줄요약 "Suspense" 2016년 Hoc, 2017년 Render Prop을 거쳐 올해는 온통 Suspense 이야기네요.
| 샘플코드  Repohttps://github.com/FormidableLabs/react-europe-workshopgit clone https://github.com/aweary/react-europe-workshop 아래 설명에 나오는 샘플코드의 main repo는 위와 같습니다. git clone으로 코드를 내려받고 각각의 위치에서  npm run start 혹은 yarn start 를 치면 앱이 실행됩니다.
| 주요 주제 그럼 이번 컨퍼런스에서 다룬 주요 주제를 하나씩 간략하게 다뤄보도록 하겠습니다.
Context샘플코드: https://github.com/FormidableLabs/react-europe-workshop/tree/master/exercises/context/solution React 16.3 부터 새로운 버전이 릴리즈 되었습니다. Prop Drilling의 어려움을 극복하기 위해 나왔으며 성능 저하의 걱정없이 적극적으로 사용해도 됩니다.
Context를 사용하는 대표 라이브러리는 다음과 같습니다.
react-routerreduxmobXstyled-componentetc... 사실은 다 씁니다. (Enact 에서도 많이 씁니다) 다음과 같은곳에서 Context를 …

Hello Enact #2 - CSS 추가하기

Hello Enact #2 - CSS 추가하기지난 시간 Hello Enact! #1기본에서 만든 앱에 약간의 스타일을 입히겠습니다. React 에서 CSS class를 정의하고 이어서 CSS modules를 살펴 보겠습니다.React 에서 CSS ClassCSS 클래스는 앱에 시각적 효과를 입히는 기본적인 도구 입니다. 컴포넌트에 clssName
prop을 이용해 CSS Class 를 적용합니다.<div className="customClass">Content</div> 아래와 같이 DOM에 비슷하게 렌더링 합니다.<div class="customClass">Content</div> JSX를 처음 접하는 분은 className이 아닌class를 써서 HTML에 적용되기를 기대하실 수도 있겠습니다만, JSX는 JavaScript로 트랜스파일 되고, class는 예약어 이기 때문에 똑같이 사용하는 것은 불가능 합니다. 상세 내용은 React 가이드 DOM Elements를 참고하세요.여러분은 하이픈으로 연결된 클래스 이름을 사용하고 싶을 수 있습니다만(custom-clss), 잠시 후 다룰 CSS Modules에서는 클래스 이름에 카멜케이스를 사용하기를 권장합니다. 자세한 사항은 링크의 Naming 부분을 참고하세요.간단한 응용 프로그램의 경우 전역 클래스 이름을 사용하는 것이 쉽습니다. 보다 복잡한 응용 프로그램의 경우 유지 보수 및 재사용 성을 개선하기 위해 CSS를 구성하는 방법이 필요할 것입니다. 이 문제에 대한 다양한 솔루션을 제공하는 몇 가지 방법론 (예 : Object-Oriented CSS (OOCSS), Block Element
Modifier (BEM)
) 및 사전 처리기 (예 : SASS,
Stylus, LESS)가 있습니다.CSS Modules는 모듈화에만 촛점을 맞춤으로써, 다른 툴이나 방법론과 잘 어울려 작동합니다. Enact 팀이 권장하는 방법입니다.CSS M…

JavaScript에서 false를 반환하는 값

JavaScript에서 false를 반환하는 value이제 기록을 해놓지 않으면 자꾸 잊어먹네요. 오늘은 제가 인터페이스 구현할때 자주 헷갈리는 null string("") 처리에 대해서 기록을 남겨 정리를 하려고 합니다. 왜 매번 쓸때마다 다시 찾아보는지 큰일이네요…false 로 변환되는 값은 다음과 같습니다.null;NaN;0;empty string("");undefined;empty string을 어떻게 체크할 것인가?그럼 이 중에서 empty string("", 또는 ‘’)을 어떻게 체크를 하면 될까요? 정답은 없지만, if 문에서 empty string은 false 처리가 된다는 것을 꼭 기억해 두고 개발을 해야 하겠습니다. (제게 하는 말입니다 -_-)여러분이 구현하는 인터페이스(함수)에서 파라미터를 받아 내부 변수에 설정하고 싶은데, 이 파라미터는 외부에서 불리는 값이므로 예외처리를 꼭 해야한다고 가정합시다.첫번째 방법 ! const myValue = !myProp ? 'default string' : myProp; 두번째 방법 == null const myValue = myProp == null ? 'default string' : myProp; 둘 사이의 차이점은?넘어오는 myProp 값이 empty string(param='';) 이라면, 첫번째 방법은 ‘default string’ 이 myValue에 어사인 될것이고, 두번째 방법은 '' 이 어사인 될것입니다.사용자가 의도적으로 empty string을 넣고 싶다면만약 사용자가 어떤 경우에 의도적으로 empty string을 넣고 그 값을 사용하고 싶다면 반드시 == null 체크를 해야 합니다.
그러면, 제가 자주 접하는 react 컴포넌트를 예로 들어 보겠습니다. 그 컴포넌트의 prop에 빈 스트링을 넘겨 리셋하고 싶은 케이스가 있습니다.<MyComponent myPr…

Hello Enact #1 - 기본

Hello Enact #1 - 기본앞으로 4회에 걸쳐 Hello Enact! 앱을 만들면서 기본을 배워보는 시간을 갖도록 하겠습니다. 1편에서 우리는 모듈을 만들고 앱이 어떻게 DOM에 렌더하는지 살펴보겠습니다. 그리고 앱을 패키징하고 실행해 보겠습니다.
아직 Enact 를 설치하지 않으셨다면, Enact 개발환경 설정 포스팅을 먼저 읽고, 본 튜토리얼을 따라하시기 바랍니다.사전 준비아래 명령으로 hello enact 프로젝트를 생성합니다.enact create tutorial-hello-enact src/views/MainPanel.js 파일은 본 튜토리얼에서 사용하지 않으므로 삭제합니다.App module 생성우리가 만드는 앱의 시작 위치는 ./src/index.js 에 있습니다. App 컴포넌트의 홈이 될 새로운 모듈을 만들겠습니다.CommonJS의 모듈은 하나의 파일을 직접 참조하거나 하나의 파일로 해석할 수 있는 디렉토리를 참조할 수 있습니다. Node.js 는 모듈 참조를 위한 룰을 정의하고 있습니다. webpack 은 모듈 해석을 커스터마이즈 하기위한 설정을 갖고 있습니다.Enact는 앱을 위한 모듈을 다음과 같은 방법으로 생성하기를 권장합니다:모듈을 위한 자신의 디렉토리를 만들고 그 안에 모듈을 위치시키세요. – e.g. ./src/App주요 로직과 동일한 이름의 소스파일 이름을 사용하세요. – e.g. ./src/App/App.jspackage.json 파일을 디렉토리 안에 포함시키고, main 프라퍼티가 모듈 js파일을 가르키도록 하세요.모듈의 package.json 파일대부분의 모듈에서 package.json 파일은 main 프라퍼티만 사용 합니다. 이 파일은 package descriptor file에서 정의하는 어떤 프라퍼티라도 가질 수 있습니다../src/App/package.json 파일을 만들고 내용을 다음과 같이 채워 넣읍시다. { "main": "App.js" } 모듈의 소스파일이…

Enact 개발환경 설정

Enact 개발환경 설정 Enact는 App 개발을 편리하게 도와주는 커맨드라인툴(Enact CLI)을 제공합니다. 이번 포스팅에서는 CLI를 이용하여 개발환경을 설정하는 방법을 소개합니다.
사전 준비 Enact 개발을 시작하기 앞서 몇 가지 software를 미리 설치해야 합니다. 가장 중요한 것은 Node JavaScript runtime 버전 6.4 이상입니다. 터미널창에서 node --version 명령으로 버전을 확인할 수 있습니다. 만약 설치되어 있지 않거나 예전버전이라면 위의 링크를 방문해서 설치해 주세요.
Enact CLI 설치 Enact CLI는 Enact 앱을 생성, 테스트, 패키지등을 할 수 있도록 명령어를 제공합니다. npm 을 사용하여 설치할 수 있습니다.
npm install -g @enact/cli 설치하고 나면 어디서든 enact 명령어를 실행할 수 있습니다. enact -v 명령을 통해 잘 설치되었는지 확인해 보세요.
enact 전체 명령어에 대한 자세한 내용에 대해서는 다음을 참고하시기 바랍니다. package README Enact App 구조 새로운 앱을 생성하는데 사용하는 enact create [<directory>] 명령입니다. [<directory>] 는 옵션이며 기본값은 현재 디렉토리 입니다. create 명령은 기본 디렉토리 구조와 앱 환경을 설정합니다.
디렉토리 구조 앱 디렉토리는 다음을 포함합니다:
README.md 앱을 생성하고 빌드하는데 필요한 유용한 팁들이 있습니다.package.json 앱을 정의하는 파일입니다. react 앱에서 사용하는 package.json과 동일할 목적을 갖고 있습니다.node_modules 외부 node module을 모두 포함하는 디렉토리 입니다. (@enact/core, react 등)resources localization 파일을 포함하는 디렉토리 입니다.src 여러분이 개발하는 모든 소스코드를 포함하는 디렉토리 입니다. JS파일과 CSS/LESS…

Enact 프레임워크를 오픈합니다.

Enact 프레임워크를 오픈합니다 An app development framework built atop React that’s easy to use, performant and customizable. Enact(인액트)는 palm 과 webOS 의 프레임워크인 Enyo를 전신으로 하는 새로운 웹앱 프레임워크의 이름입니다. 컴포넌트화, Virtual DOM, Package Management등 Web Front-end 개발을 위한 최신 트랜드를 적용하기 위하여 React를 렌더링 라이브러리로 도입하였으며, 새로운 구조에서 모든 컴포넌트를 새로 개발하였습니다. 1년여간 webOS TV 를 통해 검증을 거치고 드디어 오픈을 하게되어 매우 기쁩니다. (webOS 4.0의 일부앱은 이미 Enact로 개발이 되었습니다)
목표 Enact의 목표는 견고하고 유지 보수가 쉬운 App을 작성하기 위한 기본요소를 제공하는 것입니다. 이를 위해 focus management, 국제화(i18n), Accessibiltiy(a11y), linting, test 및 빌드를 위한 최상의 솔루션을 모았습니다. 이를 재사용 가능한 컴포넌트로 구성하여 제공합니다. Enact는 이러한 컴포넌트를 cli 툴을 통해 매끄럽게 결합하여 개발자가 구현에 집중할 수 있도록 합니다.
주요기능Focus Management: 4방향키 포커스 관리Multi-resolution 지원Internationalization: 다국어, 데이터포멧, RTL등UI 컴포넌트(moonstone): Storybook 참고Virtuallize된 List와 Grid 컴포넌트를 지원합니다.Accessibility: 컴포넌트 레벨에 aria property와 role 적용CLI Tool: Enact Application 생성, 빌드, 실행, 테스트등을 지원하며 Webpack, Babel, LESS, karma등을 사용합니다. npm 모듈로 제공되며 설치는 다음과 같이 입력하면 됩니다. npm install -g @enact/cl…