2020.01.22 오늘의 커밋. lit Element를 이용한 ERP UI 작성(1)

-개요-

팀원들과 함께 Web Component(lit-element)를 공부할때 동일한 환경에서 작업하고, 서로의 아이디어를 공유할 수 있는 개발환경이 필요해졌다.

 

제품은 빌드 없이, 독립적으로 동작해야 하고, 별다른 설정 없이 node가 아닌 tomcat 웹서버에서 정상적으로 동작해야 한다.

 

각각의 화면은 하나의 메뉴에서 접근 가능해야 하며, CSS+Template+Script가 묶인 하나의 html 혹은 js형태가 되어야 한다.

 

모든 화면은 컴포넌트 방식으로 다른 화면에 import가 가능해야 한다.

 

-요건-

1. tomcat에서 바로 돌아가야함

2. 메뉴 페이지에서 모든 화면에 접근 가능해야하고, 메뉴는 동적으로 변경되어야 함.

3. 각각의 화면은 Web Compornent(CSS+Script+Template가 되어야 함.

 

이렇게 간단하게 요건을 정의하고 시작해보자.

 

 

 

-개발환경 설정-

1. tomcat에서 바로 돌아가야함

2. 메뉴 페이지에서 모든 화면에 접근 가능해야하고, 메뉴는 동적으로 변경되어야 함.

3. 각각의 화면은 Web Compornent(CSS+Script+Template가 되어야 함.

 

이렇게 간단하게 요건을 정의하고 시작해보자.

 

설치는

 

lit-element.polymer-project.org/guide/start

Getting Started – LitElement

여기서 JavaScript starter project 를 받는다.

 

해당 디렉토리에서 터미널로 

 

cd <project folder>

npm install

 

 

이렇게 하면 기본적인 설치가 끝난다.

 

node 환경에서는 npm run serve 를 이용하여 서버를 실행할 수 있는데,

 

우리는 node가 아니라 tomcat에서 서버를 실행할 것이므로 필요없다.

 

 

우리는 그냥 프로젝트를 다운 받아서

 

톰캣을 설치하고 아래와 같이 서버를 설정해준다.

 

 

docBase에 설치한 프로젝트의 경로를, 다른 서버와 겹치지 않도록 포트와 Context Path를 설정해주고 서버를 실행해주면 된다.

 

 

 

하지만 서버를 실행해도 제대로 나오지는 않을것이다.

 

 

왜냐하면 import 로직이 잘못되어 있기 때문이다.

 

위 내용은 node 환경에서 node 모듈의 lit-Element를 자동으로 찾도록 동작한다.

 

하지만 tomcat은 그런게 없다. 따라서

 

 

이렇게 수동으로 해줘야 한다.

 

이는 node_modules의 lit-element 내부도 예외가 아니다.

 

 

위처럼 경로를 죄다 바꿔줘야 한다.

 

 

이렇게 바꾸고나면 비로소 정상적으로 lit-element 샘플이 동작한다.