이슈 npx create-react-app 를 사용해서 만든 앱으로 old Browser를 지원 하기 위해서 browser list버전을 아무리 내려 보아도 Uncaught TypeError: undefined is not a function 에러가 발생하는 현상이 나타났다. 한참 후에 알았는데 발생 사유는 Object.assign이 undefined 되어 있기 때문이다. 여기서 다루지 않는것 package.json에 있는 browserslist를 통해서 old browser를 설정하는 내용은 다루지 않는다. 해당 설정을 했음에도 undefined에러나 나는 경우를 여기에서 다룬다. 해결 방법 "react-scripts"의 버전을 의심해 보아야 한다. https://github.com/facebook/c..
문제점 2021.09.05 - [Web] - Vanilla javascript URL Router 만들기 (web components) 위에 포스트를 보면 다음과 같은 말을 했었습니다. url에 사용자가 직접 넣으면 오류가 날것이다. 해당 서비스 접근을 통해서 해당 url에 화면이 잘 나오는 것을 분명히 확인했는데 어떤 차이일까? 그것은 해당 url이 server에 request를 했느냐의 차이가 된다. 위에 언급했듯이 SPA는 기본적으로 여러개의 url page를 하나의 url로 call 하게 됩니다. 그러다 보니 request mapping을 browser url에 직접 넣게 되면 오류를 발생하게 됩니다. 그 이유는 해당 request를 받는 server쪽에서 url을 어떤 resource와 mapp..
Javascript로 개발을 하면서 generator 기능을 활용해볼 기회가 거의 없었는데, 고민해보니까 재미있는 Sample를 만들 수 있어서 포스트를 남겨 봅니다. 이 포스트를 보시는 분들도 Generator가 이렇게 쓰일 수도 있구나 하는 생각을 하실 수 있는 기회가 되었으면 좋겠습니다. 목표 Generator가 무엇인지 알아본다 Iterator가 무엇인지 알아본다 Generator를 이용해서 베스킨라비스 31 게임을 만들어 본다 Generator란? Generator는 iterable protocol과 iterator protocol을 따르는 일종의 데이터 생성 Object입니다. 벌써 부터 무슨소리인지 모르겠죠? 네, 저도 잘 모르겠습니다. https://developer.mozilla.org/..
Web Component를 주로 이용하게 되는 이유는 Single Page Application을 만들기 위한 용도이다. 사용자는 Page가 변경한다고 생각하지만 Page는 변경되고 있지 않다. 그러다 보니 사용자들에게 익숙한 Browser Navigation Button을 활용하기 어렵다. 이 부분을 해결하기 위해서 windows.history 객체를 통해서 browser url search bar에 url router를 만들어 보고자 한다. 우리가 만들어볼 페이지는 아래와 같다. 최초 접근시에는 root path를 기본으로 하고 각 box를 클릭하면, /page/ 디렉토리 밑에 각 box별 numbering 0에서 부터 3번까지 page를 통해서 page 전환 효과를 나타낼 예정이다. 그리고 back..
앞서 Vanilla javascript로 web component를 통해서 어떻게 Component화 하는지와 어떻게 상태관리를 할 수 있는지 알아보았다. 이제 library를 활용해서 상태관리(state management)를 해보고자 한다. 본 내용을 이해하기 위해서는 아래 내용을 꼭, 읽어 봐야한다. 2021.08.16 - [Web] - 기존 web site를 components 로 다시 만들기 (No State management) 앞서 만들어진 todo 웹사이트를 이용해서 redux를 적용하고자 한다. 기본 source는 아래 https://github.com/theyoung/webcomponents/tree/webComWithStateManagement/statementforwebcompone..
Web Component를 통해서 Vanillajs 기반 웹서비스를 만드는 방법을 배웠다. 2021.08.16 - [Web] - 기존 web site를 components 로 다시 만들기 (No State management) 이제 Statement를 통해서 Component를 관리 하는 방법을 알아보고자 한다. 본 내용은 위의 링크 내용의 연장이다. 관련 내용을 더 이야기 하기 전에 MVVM이란 무었인지 꼭 이해하길 바란다. 2021.08.20 - [Web] - MVC, MVP, MVVM 패턴의 이해 가장 유명한 Statement 관리 library는 redux이다. redux를 통해 어떤식으로 Statement가 관리 되는지 알아보자. https://redux.js.org/tutorials/funda..
MVVM 패턴이란? MVVM을 이해하기 위해서는 MVC -> MVP -> MVVM 순서대로 아키텍처 패턴에 대한 이해가 필요하다. MVC 패턴 https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller 가장 많이 사용되는 패턴으로 Spring MVC라는 Back-end framework이름이 있을 정도로 많이 사용된다고 생각하면 된다. 사용자가 controller(Action)를 통해서 Model을 변화시키면 View가 Update되게 된다. Business Logic이 Controller에 있을 수 있고 또한 View에도 있을 수 있다. Model에 있는게 사실 정석이지만 말이다. Business Layer를 Model이라고 부른다. 하지만..
Web Components가 무었인지에 대해서는 2021.08.14 - [Web] - Web component (Custom Elements, Shadow DOM, Template) 2021.08.14 - [Web] - Web Components Callback Methods & lifecycle 2021.08.14 - [Web] - Web Component Event Dispatching 하기 이 3개를 반듯이 이해 해야한다. 이것을 이해했다는 전제로 기존에 만들어진 Site를 어떻게 Web components화 하는지에 대해서 글을 쓰고자 한다. 여기있는 소스는 다음 Repository의 Source를 기반으로 했다. https://github.com/andy-piccalilli/vanilla-js-..
앞서 만든 Web Component로 부터 이벤트에 따른 변화를 알아야 한다면 어떻게 해야 할까? 가련 버튼을 클릭한 이벤트의 횟수를 외부에서 알아야 한다면? 두가지 방법이 있다. get 을 이용해서 public value를 알아 내는 방법 get timesClicked(){ return this.timesClicked; } 또 하나는 Event를 통해서 업데이트 된 Data를 알아내는 방법이다. 여기서 두번째 방법에 대해서 알아보고자 한다. Event Button component 설계 html tag에서 onchange라고 하는 event를 등록하면 event를 수신받을 수 있도록 만들어 준다. Event Button component 개발 export default class EventButton ..