Debugging an Enact App with VS Code

-

Debugging an Enact App with VS Code

VS코드를 이용하여 Enact App 디버깅 하는 방법에 대해 Medium Enact 페이지에 포스팅을 하였습니다.
https://medium.com/enact-js/debugging-an-enact-app-with-vs-code-17a11049fd8d

댓글

댓글 쓰기

이 블로그의 인기 게시물

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 모듈로 제공되며 설치는 다음과 같이
자세한 내용 보기

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 파일을 포함하는 디렉토리 입니다.
자세한 내용 보기

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
자세한 내용 보기