※ 이 블로그는 개인 기록 용입니다. 2018년 목표는 ROKU 개발자가 되야지!왜 ROKU 를 개발하는가?나는 이전에는 스마트폰(Android) Application 개발을 했고, 이후에는 OTT 개발을 하고 있습니다.스마트폰을 개발하다가 OTT 개발을 시작하니 당연하다고 생각한 부분에 어려움을 많이 겪었습니다.1. 안정성(AOSP, Android TV 기준) 스마트폰과 다르게 OTT는 동영상 시청(HLS 등)을 하면서 UI 조작, 그리고 영화 포스터처럼 Image Load, 엄청나게 긴 실행 시간, 도중에 한번이라도 정지도 할수 없습니다. 이게 쌓이다 보면 당연히 느려질 수 밖에 없죠. 물론 개발을 엄청 잘 관리 했다면 그나마 좋을지 모르겠습니다. 하지만 언급한 상황등을 모두 처리할 정도로 개발한 다..

MS가 이래도 되나? Monaco Editor vscode(Visual Studio Code) 를 사용하보신 분들은 알겠지만, 실제 vscode 는 Web 기반으로 만들어 졌다는게 믿어지지 않을 정도로 Editor 부분에 Redering 기능이 정말 빠르다는 것을 알 것 입니다. 유튜브 등에서도 Atom 과 비교된 실험한 영상이 많았습니다..(현재는 Atom도 많이 좋아졌습니다 일부 기능은 더 좋고요) 그런대 이런 엄청난 Editor를 Open Source로 공개한 MS가 정말 대단하네요!사용하는 방법도 절대 어렵지 않습니다! 나중에 기회가 된다면 Web기반 IDE를 만들때 꼭 저도 Monaco Editor를 사용해보고 싶네요! link : https://microsoft.github.io/monaco-..

따라서 하신다면 https://hippoman.tistory.com/14 이전 포스팅을 봐주세요. Web에서는 흔히 VirtualList 라고 부르며, 안드로이드에서는 RecyclerView, Recycle ListView 라고 한다. 왜 이런 VirutalList 등을 사용해야 하는지는 브라우저에 동작 방법을 이해하고 있다면, 쉽게 알 수 있습니다.(NAVER D2 참고!) 만약 Scroll에 Row에 해당되는 Dom이 20,000개 정도라면, 이걸 단순 화면에 for...문으로 그리면 정말 말도 안돼며, 최적화 한다고 500개씩 로드 했다(Lazy) 하더라도 그건 초기 그리는 속도만 향상될 뿐이지, 전체적인 성능에는 큰 도움이 되지 않습니다. 오늘은 Mobx 를 사용해서 이런 VirtualList 를..

Tistory 에 코딩을 추가할때 diagrams 을 추가하는 하는 경우가 많다. (전 Markdown 으로 글을 입력합니다) 그치만 실제 tistory 에는 markdown - mermaid 로 입력한다면 단순 글자로 나옵니다. Mermaid 에 대한 설명 : https://hippoman.tistory.com/9 Markdown 에 다이어그램(Diagram) 넣기 개발자 일을 하다보면 문서 작성하는 일이 정말 많다.(MS Word, MS Excel, MS Project, MS PowerPoint... 등) Markdown(MD) 이 생기고 나서는 하루도 Markdown 을 사용하지 않는 일이 없을 정도로 매우 많다. Mark.. hippoman.tistory.com 당연히 사이에 넣어준다. 적용 완료..

현재 게시물은 이전 포스팅에 이어서 작성된 내용입니다. https://hippoman.tistory.com/13 Redux 를 실무에서 사용하다보면 Middleware에 기능을 상당히 많이 사용하게 됩니다. Middleware 를 많이 사용하는 이유는 간단하게 아래 Flowchart 구성대로면, Store 는 View 에게 전달하고, View는 다시 Action 을 호출한다. 즉, View = Controller 가 되는 대 참사가 됩니다. flowchart LR Action --> Dispatch --> Store --> View -->Action 매우 안좋은 코드 예 Redux Store 에 Login 정보가 변경되는 상태를 View 내부에서 useEffect를 이용해 상태를 확인해 다른 페이지로 변..

SPA 로 개발하면, page 등 이동시 데이터를 변경 해줘야하는 일이 많다. 물론 page state/params 등을 이용하면 간단하게 상태 등을 전달할 수 있지만, Redux가 있다면 훨씬 유용하게 사용할 수 있습니다. 이번 포스팅은 2번으로 놔눠 작성할 예정입니다. 현재 예제는 이전에 포스팅한 https://github.com/shingidad/hello-vite-react 를 기반으로 작성했습니다. CRA나 Vite 를 기반으로 작성되있습니다. yarn add react-router-dom connected-react-router typesafe-actions redux react-redux react-router yarn add history@^4.10.1 yarn add -D @types/r..

Typescript로 프로젝트를 만들면 tsc 속도가 마음에 들지 않고, esbuild 가 속도가 워낙 좋다보니 etcs 라는 패키지를 발견해서 적용해봤다. 프로젝트 주요 적용 사항 eslint prettier babel nodemon path alias 속도는 우선 너무 만족 스러웠다. 1. 기본 javascript 모듈만 사용후 싱글 파일로만 실행 import http from 'http'; const PORT = process.env.PORT || 3000; const server = http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/plain' }); res.end('Hello World'); }); serve..

vite 이 cra 보다 빠른건 당연하다. 그 이유는 vite에 번들은 Esbuild 으로 개발되있기에 속도가 빠를 수 밖에 없다. STEP-1 : Project Init hello-vite 로 프로젝트를 만듭니다. npm init vite@latest hello-vite --template react-ts 결과 npx: 6개의 패키지를 2.587초만에 설치했습니다. Scaffolding project in /Users/kimdonghyun/Workspace/Private/2_Study/hello-vite... Done. Now run: cd hello-vite npm install npm run dev hello-vite 폴더로 이동 cd hello-vite STEP-2 : module Install ..