분류 전체보기 검색 결과

해당 글 777건

모바일 웹을 제작할 때 주의할 점들

앱을 설치를 해야하지만 웹을 설치하지 않아도 된다. 그 때문에 많은 스타트업이 초기에 모바일 웹을 제작하곤 한다. 필자도 여러번 모바일 웹을 제작해보았는데 다음과 같은 문제점을 겪어보았다. 앞으로도 더 늘어갈 것 같은데, 우선은 아래와 같이 정리할 수 있다. - QA는 브라우저가 아닌 실제 모바일 기기에서 테스트할 것 브라우저 크기 조정을 통해서 테스트해보는 것은 모바일 기기에서 테스트하는 것과 다르다. 반드시 유저에게 노출되는 실제 환경과 흡사한 환경에서 테스트해보자. - input의 타입에 따라 다른 키보드를 출력하므로 유의할 것 https://stackoverflow.com/questions/51660812/best-settings-for-html-input-type-number-for-mobile..
미분류/Tip 2021. 12. 11. 02:46

서핏(surfit)같이 유저의 new tab을 가로채보자

웹서비스를 제공하는 스타트업이라면 브라우저를 열자마자 자신의 서비스로 곧바로 redirect되었으면 하는 생각이 있을 것이다. 진짜 리텐션은 몰라도 단순 유저 재접속 횟수를 늘리는데에는 이것만큼 좋은게 없다. (외부 장표에 넣을 마사지된 데이터 읍읍...) 그래서 과거 네이버는 죽일 기세로 "시작 화면을 네이버로 등록하시겠습니까?"를 묻곤하였다. 요새도 그런가? (네이버 안 씀) 여기서는 chrome extension을 설치한 사용자에 한해서 브라우저를 열 때 특정 페이지를 보여주도록 하는 기능을 다뤄보겠다. 국내 기업 중 Surfit이 이 기능을 잘 활용하고 있고 해외의 사례로는 daily.dev를 들 수 있다. (이 두 서비스 모두 extension을 설치하도록 잘 유도하고 있는데, 이건 UX에 관련..
웹 전반, 브라우저/Chrome Extension 2021. 11. 30. 17:59

custom hook에서의 Array vs Tuple 반환

다음과 같이 열고 닫음을 처리하는 커스텀 훅이 존재한다고 가정하자. import { useState, useCallback } from 'react' const useToggle = (initialState: boolean) => { const [state, setState] = useState(initialState) const toggle = useCallback(() => { setState((state) => !state) }, []) const open = useCallback(() => setState(true), []) const close = useCallback(() => setState(false), []) return [state, open, close, toggle] } export..
React, Next, Redux/🚀 React with Hooks 2021. 11. 29. 10:45

IndexDB (2) : 좀 더 indexDB를 사용해보자.

indexDB promise wrapper 우선 idb를 사용하자. 기존 IDB를 사용하면 콜백 패턴의 depth가 너무 깊어져서 코드 가독성이 좋지않아진다. 구글 web.dev에서도 추천한 녀석이다. ... 작성중 ref) https://pks2974.medium.com/typescript-%EC%99%80-%EC%83%9D%EC%84%B1-%ED%8C%A8%ED%84%B4-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC-58945ab5f2ce https://www.happykoo.net/@happykoo/posts/183 indexDB에 대해서 상당히 자세하게 알려주는 영상이다. Good https://www.youtube.com/watch?v=6fK1K28eoUA&list=PLy..
웹 전반, 브라우저/Web API 2021. 11. 28. 02:24

IndexDB (1) : 간단한 개념을 알아보고 사용해보자

IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API입니다. IndexedDB API는 인덱스를 사용해 데이터를 고성능으로 탐색할 수 있습니다. Web Storage(localStorage나 sessionStorage)는 적은 양의 데이터를 저장하는데 유용하지만 많은 양의 구조화된 데이터에는 적합하지 않은데, 이런 상황에서 IndexedDB를 사용할 수 있습니다. - https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API 결국 Web Storage보다 많은 양의 데이터를 저장하는데 더 적합한 저장소라는 것이다. 단순히 get, set만 지원하는 것이 아니라 좀 더 DB스럽게 사용할 수 있고 용량도..
웹 전반, 브라우저/Web API 2021. 11. 28. 02:13

Angular 산책하기 (1) : angular-cli 설치와 appModule

기본만 살펴보면 Nest.js와 상당히 비슷하다고 알 수 있따. (Nest.js아 Angluar에 영감을 받아 만들어졌지만 필자는 Nest를 먼저 맛 본 관계로...) 설치 angular-cli 설치 npm install -g @angular/cli 버전확인 ng version ng new [projectName] ng generate 꼴로 필요한 코드들의 scafold를 만들어주는데 아주 유용함. 게다가 Module에 자동으로 주입까지 해 줌. https://angular.io/cli/generate ng generate [options] ex - ng generate component header 줄여서 ng g c header ex- n g c header/logo header 경로 아래 logo라..
🛡️ Angular/🛡️ Angular 2021. 11. 22. 22:21

From neutrino v9 to Webpack v4 이전

교체 이유 neutrino를 교체하고자 하였으니, 저희가 사용 중인 neutrino 9버전에서는 typescript presets이 존재하지 않는다는 것을 알게 되었습니다. 뿐만 아니라 neutrino로 비롯한 매우 다양한 문제가 있었다. 1. neutrino-eslint를 사용하여 우리가 필요한 별도의 eslint 추가 구성을 하기에 불편했다. + 추가로 prettier-standard라는, lint와 formatter를 합친 지옥 같은 녀석이 neutrino와 맞물려 매우 불편했다. 2. webpack 코드를 구성해야 하는데 netrino는 이를 black box로 처리하여 커스텀하기 불편했다. + typescript 마이그레이션하는데 neutrino typescript plugin이 없었다. web..
🎁 Module bundler/📖 Webpack 2021. 11. 21. 17:45

css convention에 대해서

세상에서 제일 어려운 언어는 C도 아니고 Rust도 아니고 CSS이다. 디버깅할 수 없고, 왜 작동하는지, 왜 이상하게 작동하는지 알 수 없다.또한 프로젝트의 규모가 커질 때마다 마구 잡이로 설정된 CSS는 시간을 잡아먹는 녀석이 된다. 원활한 협업을 위해서 필자가 다니는 회사에서는 아래와 같은 CSS 규칙을 따르고 있다. * 아무 규칙도 없이 나열한 것이 아니다. 가장 큰 범주에서 가장 작은 범주로 내려가는 순서로 CSS 속성을 선언하고 사용하려는 의도 하에 작성된 규칙들이다. 속성 선언 순서는 레이아웃과 관련이 큰 것에서 시작하여 레이아웃과 무관한 것 순서로 선언한다. default 값은 선언하지 않는다. ex - flex-direction은 기본적으로 row이기 때문에 굳이 선언하지 않아도 된다. ..
웹 전반, 브라우저/HTML, CSS 2021. 11. 20. 22:36

WebGL이란 무엇인가?

WebGL은 3D를 그리기 위한 도구가 아니다. WebGL이란 벡터 객체를 개별 픽셀값으로 raterization하는 라이브러리이다. raterization라 함은 포토샵에서 많이 들어보았겠지만, 연속적인 값을 밭갈퀴로 긁듯이 픽셀로 만드는 것을 의미한다. 우리가 흔히 말하는 '화질구지'도 연속적인 벡터값을 raterization한 후 크게 확대해서 발생하는 일이다. WebGL의 표준 관리는 Khronos Group에서 하고 있어서 webgl 스펙을 다음 링크에서 확인할 수 있다. webgl 스펙 : https://www.khronos.org/registry/webgl/specs/ webgl과 별개로 opengl 관련 위키도 제공하고 있어 명확한 개념 이해에 유용한 정보가 많다. https://www.k..
📈 js 그래픽/WebGL과 three.js 2021. 11. 15. 16:54

ArrayBuffer, Typed Arrays, DataView : raw binary data를 핸들링해보자

typed array? es6에서 도입된 녀석이다. js의 배열은 raw binary data를 다루지 못했기 때문에 Typed Arrays(형식화 배열)가 도입되었다. 웹에서 영상, 음성, 파일과 같은 binary를 자주 다루게 되면서 여러 값을 담을 수 있고 크기가 가변적인 array보다 좀 더 효율적인 typed array가 필요해진 것이다. 뿐만 아니라 딥러닝에서의 이진 데이터 인코딩/디코딩, GPU 메모리로 데이터를 전달할 때도 typed array를 사용한다. 웹에서 ML하려면 typed array 합시다. 그리고 이름이 배열이고, length 속성을 통해서 byte를 얻을 수 있지만 유사 배열입니다. 따라서 Array.isArray()를 통해 체킹해보면 false를 반환하며 배열이 proto..
Programming Language/🟨 Javascript 2021. 11. 15. 15:09