웹 프런트엔드 개발

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는 모듈화에만 촛점을 맞춤으로써, 다른 툴이나 방법...

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