Enact 컴포넌트의 호환

Enact 컴포넌트의 호환_20190220 Enact 컴포넌트의 호환 상호 운용성(Interoperability)은 Enact팀에게 매우 중요합니다. 오픈소스 프레임워크로서, Enact 컴포넌트를 다른 프로젝트에서 사용할 수 있다는 점과 광범위한 자바스크립트 생태계의 컴포넌트들을 Enact와 함께 사용할 수 있다는 점이 중요합니다. 결론은 Enact가 폐쇄된 생태계가 아니라는 것 입니다. 단순히 React 앱을 작성하는 통일된 방법일 뿐 입니다. CodeSandbox 에서 구동중인 Enact Moonstone UI 라이브러리 이와같이, Enact는 다른 React 라이브러리와 잘 동작하며, npm에서 많은 컴포넌트들을 가져와 Enact 프로젝트에서 사용할 수 있습니다. 가장 일반적인 통합 시나리오 두 가지는, Enact CLI를 이용하여 외부 패키지를 사용하거나, create-react-app 같은 다른 빌드 시스템에서 Enacgt 컴포넌트를 사용하는 것 입니다. Enact에서 외부 패키지 사용하기 Enact 개발을 처음 시작했을때 create-react-app 은 존재하지 않았습니다. React를 사용하여 작업하는 것을 단순화하려는 우리의 목표를 위해 Enact CLI 도구를 만들게 되었습니다. 이 도구는 현재 create-react-app이 동작하는 방식과 유사합니다. Enact 프로젝트를 쉽게 생성, 테스트 및 유지관리 할 수 있습니다. Enact CLI는 앱 개발자가 구성해야 하는 Webpack, Babel, ESLint, Jest 등의 무수히 많은 도구를 모두 처리합니다. 우리는 이러한 모든 것들이 원활하게 함께 동작하기위한 노력을 기울였습니다. CLI는 Typescript 템플릿 을 포함하여 많은 수의 템플릿 을 지원합니다. 템플릿으로 부터 작업하는 것은 새로운 앱을 시작하는 좋은 방법입니다. 간단한 npm install 만으로 대부분의 패키지를 Enact 에서 사용할 수 있습니다. Webpac

ReactEurope 2018

이미지
ReactEurope 2018  주요 주제 및 샘플코드, 컴포넌트 소개 ReactEurope은 프랑스 파리에서 열리는 React 개발자 행사입니다. 2016년부터 시작하여 올해로 세번째 이며, 1000여명 이상 꽤 큰 행사입니다. 이번에 좋은 기회가 생겨 참석할 수 있었네요. 본 포스팅에서는 이 행사에서 다룬 세세한 기술적 내용보다는, 여기에서 소개된 컴포넌트의 간략한 정보와 링크, 그리고 주요 아젠다에 대한 샘플코드를 소개하도록 하겠습니다. 전체 내용은 아래 참고링크 란 - 유투브 채널 - 의 링크를 들어가면 보실 수 있습니다. | 한줄요약 "Suspense" 2016년 Hoc, 2017년 Render Prop을 거쳐 올해는 온통 Suspense 이야기네요. | 샘플코드  Repo https://github.com/FormidableLabs/react-europe-workshop   git 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-router redux mobX styled-component etc

Hello Enact #2 - CSS 추가하기

Hello Enact #2 - CSS 추가하기 지난 시간 Hello Enact! #1기본 에서 만든 앱에 약간의 스타일을 입히겠습니다. React 에서 CSS class를 정의하고 이어서 CSS modules를 살펴 보겠습니다. React 에서 CSS Class CSS 클래스는 앱에 시각적 효과를 입히는 기본적인 도구 입니다. 컴포넌트에 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는 모듈화에만 촛점을 맞춤으로써, 다른 툴이나 방법

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에 빈 스트링을

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.js package.json 파일을 디렉토리 안에 포함시키고, main 프라퍼티가 모듈 js파일을 가르키도록 하세요. 모듈의 package.json 파일 대부분의 모듈에서 package.json 파일은 main 프라퍼티만 사용 합니다. 이 파일은 package descriptor file 에서 정의하는 어떤 프라퍼티라도 가질 수 있습니다. ./src/App/package.json 파일을 만들고 내용을 다음과 같이 채워 넣읍시다. { &

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 파일을 포함하는 디렉토리 입니다.