웹 프런트엔드 개발

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를 반환하는 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 - 기본 앞으로 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 파일을 만들고 내용을 다음과 같이 채워 넣읍시다. { ...