웹 전반, 브라우저 검색 결과

해당 글 48건

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

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

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

css convention에 대해서

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

clipboard API와 붙여넣기 이벤트에 대해서

paste 이벤트와 클립보드 검사는 다른거다! paste 이벤트에서 읽어온 클립보드 데이터 (pasteEvent.clipboardData) - 웹에서 저장한 이미지의 이름은 무조건 name: "image.png"임. 크로 브라우저 기준으로, 이미지를 클립보드에 복사하면 이름은 무조건 image.png, MIME type도 image/png임. - 반면 로컬에서 복사한 이미지들은 이름 그대로 잘 저장함. 특정 이벤트와 상관없이 클립보드에서 읽어온 데이터 (navigator.clipboard) - 마찬가지로 웹에서 복사한 이미지는 image/png를 반환합니다. 단, paste 이벤트와 다른 점은 text/html과 image/png를 같이 반환한다는 것입니다. - 자신의 로컬 환경에 있는 이미지 복사 =>..
웹 전반, 브라우저/Web API 2021. 8. 7. 16:35

Iframe 태그와 origin이 다른 iframe 내부 dom tree 조작에 대해서

회사에서 다른 origin을 가진 iframe 내부 dom tree에 접근해야할 일이 생겼는데, 이 때 시도해 본 여러가지 방법에 대해서 적겠습니다. 결론은 "안된다"는 겁니다. 왜 안 되는지에 대해 적어보고자 합니다. iframe과 내부에 있는 html을 단순히 확인하는 것은 가능합니다. 그러나 iframe 내부에 있는 google doc을 조작하는 것은 보안상의 문제로 불가능합니다. 그럼에도 불구하고 시도해본 것들은 다음과 같습니다. 시도 1) contentWindow을 사용하여 접근하려는 경우 contentWindow란 부모 window에서 임베디드된 을 참조할 때 사용되는 메서드입니다. https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameEle..
웹 전반, 브라우저/HTML, CSS 2021. 7. 11. 13:28

chrome extension 만들기 (manifest v3 기준)

Chrome Developers Build the next generation of web experiences. developer.chrome.com 크롬 익스텐션을 만들기 위한 정보 소스들은 chrome developer 페이지에 존재한다. 여기에서 extension 부분 문서를 살펴보면 되는데, 생각보다 양이 컴팩트해서 한번 주욱 읽고 한 포스트에 정리해보고자 한다. 2021.01.19년 기준으로 Manifest 버전 3이 되었으니 해당 버전을 기준으로 작성합시다. 문서를 읽어보니 v3으로 바뀌면서 전까지 사용했던 background pages를 사용하지 않고, service worker를 사용하는 것으로 바뀌었다고 합니다. (In Manifest V3, the Chrome extension pla..
웹 전반, 브라우저/Chrome Extension 2021. 5. 10. 05:38

Gamepad API와, 게임 클라이언트 개발에서 웹개발의 역할

Gamepad API 자체는 성의없다고 할 정도로 너무... 적습니다. 어쨌든 게임 개발에서 웹이 차지하고 있는 이유를 공부해보았습니다. 게임에서 로비(그러니까, 게임 일시 정지나 캐시샵 같은) 관련 작업은 html/css/js 스택으로 구성하는 일이 꽤나 있다. 바닐라 js는 아니고, angular나 react와 같인 프론트 프레임웤도 사용하고 상태 관리인 redux까지 합쳐서 웹 스택을 그대로 가져간다. 하긴, 어차피 빌드하면 다 js인데 ㅋㅋ 그리고 이 웹을 s3에 올리던지, 그냥 게임 내에서 임베드해서 웹페이지를 가져오던지 한다. 이 로비에서 이루어진 작업은 또 서버와 통신하는 등의 작업을 수행한다. 로비에서 뭐 캐쉬 아이템 구매를 했다던지, 로그인을 했다던지 등... 게임에서 어케 웹 UI를 올..
웹 전반, 브라우저/Web API 2021. 4. 28. 21:42

swiper 그만 하고 glide 합시다

glidejs.com/docs/ Glide.js | A dependency-free JavaScript ES6 slider and carousel A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more glidejs.com Dependency-free + ~23kb (~7kb gzipped) with every functionality included. 안 쓸 이유가 없다. 무엇보다 react-swiper가 약간 buggy하다는 평도 오카방에서 돌더라. 무엇보다 지금까지 carousel은 외부 패키지를 쓰지 않고 전부 내가 직접 만들어..
웹 전반, 브라우저/HTML, CSS 2021. 3. 9. 01:39

FileReader로 브라우저에서 file 다루기

developer.mozilla.org/ko/docs/Web/API/FileReader FileReader - Web API | MDN FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 developer.mozilla.org FileReader는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는 File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다. 쉽게 말해 클라이언트단에서 file이랑 blob 사용할 수 있게 해준다는 겁니다. canvas..
웹 전반, 브라우저/Web API 2021. 2. 9. 17:48