본문 바로가기

webOS

(12)
webOS: web app 개발일지(5) 지난 번에 이어서 calendar를 마저 보았다. onSelectChange = (data) => { this.setMonth(data.data);// reset dataContext this.props.onMonthChange && this.props.onMonthChange(); }; SelectList = (props) => { let popup = props.data.map((data) => { // return mapped array return ( { this.onSelectChange(e, data); // change dataContext if clicked }}> {data} ); }); return ( // return popup array {popup} ); }; onSelectCha..
webOS: web app 개발일지(4) react life cycle에 대해 간단히 정리했다. mount : 처음 render되고 component 생성 및 DOM 적용 constructor() / static getDerivedStateFromProps() / render() / componentDidMount() update : props, state re-render static getDerivedStateFromProps() / shouldComponentUpdate() / render() / getSnapshotBeforeUpdate() / componentDidUpdate() unmount : component DOM 제거 componentWillUnmount() Calendar.js를 마저 살펴보자. 1) import import..
webOS: web app 개발일지(3) 공식 홈페이지에 의하면 web app을 만들 때 다음 세 개의 파일은 반드시 필요하다. appinfo.json : metadata icon.png : icon image file index.html : main page appinfo.json은 앞서 한 번 살펴봤고, 이제 icon.png와 index.html을 살펴보자 2. icon.png 사실 이건 별로 살펴 볼 필요가 없다. 이렇게 생긴 아이콘 png 파일 세 개가 크기 별로 저장되어 있다. 3. index.html 기본적으로 index.html을 시작으로 web app이 만들어지게 되지만 위 앱은 enact 기반으로 만들어져서 구성이 좀 다르다. 실제 앱을 제작할 때 enact를 활용할 생각은 아직 없어서 간단하게 구조만 알아보았는데, 기본적으로 ..
webOS: web app 개발일지(2) react로 만들다가 어려운 부분이 많아서.. webOS sample app 종 calendar 만드는 reference app이 있어서 그거 먼저 뜯어 보기로 했다. webOS에서 어떤 방식으로 web app을 제작하는지 알 필요가 있다고 생각하기도 했다. 소스 코드는 https://github.com/webosose/samples/tree/master/ref-apps 여기서 확인할 수 있고, 앱 관련 설명은 https://www.webosose.org/samples/2022/02/18/calendar-using-enact-framework/#source-code 여기서 확인할 수 있다. 친절하게도 설치 방법도 나와 있는데, $ enact pack $ ares-package dist $ ares-ins..
webOS: web app 개발일지(1) webOS 활용해서 뭘 개발할 지 고민을 많이 했는데, 처음인만큼 간단한 것부터 시작해보고자 합니다. 요즘 잘 사용하는 어플 중에 BeReal 이라는 어플이 있다. 이런 식으로 매일 매일 있었던 일을 사진으로 남기는 어플인데, 맨 오른쪽 사진에 보이는 것처럼 매일의 로그가 남아 하루를 돌아보기에 정말 좋다. 위의 이미지는 공홈에서 가져온 건데, 실제 어플 안은 다음과 같다. 이런 식으로 매일 매일 기록을 남기는 어플이다. 사진을 찍을 때 정면, 후면 사진이 동시에 찍힌다! 친구 추가해서 인스타그램 느낌으로 친구가 올리는 사진도 볼 수 있다. 그런 소셜 미디어까지는 구현이 어렵지만, 위와 같이 사진 일기 느낌으로 매일을 남길 수 있는 앱을 만들어보고자 한다. 위의 이미지는 todomate라고 일정 정리하는..
# JavaScript JavaScript 공부한 내용 올립니다.(계속 추가할 예정) JavaScript Comments: // or /* */ Data type boolean – true / false null undefined number string symbol variables var Variable let Block variable(cannot be redeclared) const Block constant(cannot be reassigned) arithmetic operator + Addition - Subtraction * Multiplication ** Exponentiation / Division % Modulus(remainder) ++ Increment -- decrement Comparison opera..
# CSS CSS 관련 내용 올립니다.(계속 추가할 예정) CSS : 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어 1. Html style tag – selector and declaration 2. Style attribute style="color:black; text-decoration: underline;" property HTML class 접근 – 순서대로 적용 .CLASSNAME{} HTML id 접근 – 중복 불가 #IDNAME{} HTML 모든 components * Comments /* */ scroll behaviour scroll-behavior: smooth size – width width: LENGTH size – height Height: LENGTH background –..
# HTML 개발하면서 HTML 공부한 내용을 정리해 올립니다. (계속 추가할 예정) HTML : 웹 페이지 표시를 위해 개발된 마크업 언어 bold / underline / header ~ / ~ break paragraph / image video / / canvas / list / list with order Unordered list / Ordered list / title / meatadata head body / header / doctype html / hyperlink / CONTENT division / inline division / link small / input multi input / form / comments à CSS Class class=”CLASS1 CLASS2” – CSS .접근 ..
webOS(4): target device 설정과 sample web app 제작 1. CLI Command와 target device 설정 2. sample app packaging 해보기 지난 번에는 CLI 설치 과정까지를 살펴 보았습니다. CLI command를 살펴 보며 본격적인 web app 제작 과정을 살펴보겠습니다. 공식 홈페이지에 나와 있는 workflow는 다음과 같습니다. 앱 제작 - 패키징 - 설치 - 런치까지의 과정을 CLI command를 통해 나타내고 있습니다. 저는 다음 command를 통해 target device를 설정해 주었습니다. ares-setup-device CLI command에 대한 자세한 정보는 공식 문서에서 확인할 수 있습니다. https://www.webosose.org/docs/tools/sdk/cli/cli-user-guide/#cli..
webOS(3): web application과 CLI 설치 1. web application 2. CLI 설치 1. web application 이번 webOS 프로젝트를 해가면서 web application을 제작해가는 과정을 다룰 예정인데, webOS 커뮤니티를 참고하면 web application이 다시 built-in, external의 두 카테고리로 나뉘는 것을 볼 수 있습니다. 본격적으로 시작하기 전에 web application에 대해 간단하게 알아보도록 하겠습니다. web application은 간단히 말하면 웹 브라우저에서 인터넷을 통해 접속하여 사용할 수 있는 응용 프로그램입니다. 일반적인 웹페이지와 혼동될 수 있고 실제로도 명확한 경계는 불분명하지만, 정보 제공이 주목적인 웹사이트보다 사용자에게 서비스를 제공하고자 하는 목적이 더 크다고 볼 ..