WEB64 [Chrome Extension] content scripts와 popup간 통신하기 - 4 2023.12.03 - [WEB/Chrome Extension] - [Chrome Extension] content scripts를 이용해 DOM 조작하기 - 3 [Chrome Extension] content scripts를 이용해 DOM 조작하기 - 3 2023.11.28 - [WEB/Chrome Extension] - [Chrome Extension] 데이터 저장하기, storage api - 2 [Chrome Extension] 데이터 저장하기, storage api - 2 2023.11.26 - [WEB/Chrome Extension] - [Chrome Extension] popup 만들기, 로컬 테스트, 디버 rbals0445.tistory.com 지난 3편과 이어집니다. content scr.. 2023. 12. 4. [Chrome Extension] content scripts를 이용해 DOM 조작하기 - 3 2023.11.28 - [WEB/Chrome Extension] - [Chrome Extension] 데이터 저장하기, storage api - 2 [Chrome Extension] 데이터 저장하기, storage api - 2 2023.11.26 - [WEB/Chrome Extension] - [Chrome Extension] popup 만들기, 로컬 테스트, 디버깅하기 - 1 [Chrome Extension] popup 만들기, 로컬 테스트, 디버깅하기 - 1 안녕하세요! 이번 글에서는 chrome extension을 이용해 프 rbals0445.tistory.com 지난 2편과 글이 이어집니다. 제가 의도한 chrome extension을 개발하려면 브라우저에서 Text를 다른 Text로 변경하는 .. 2023. 12. 3. [Chrome Extension] 데이터 저장하기, storage api - 2 2023.11.26 - [WEB/Chrome Extension] - [Chrome Extension] popup 만들기, 로컬 테스트, 디버깅하기 - 1 [Chrome Extension] popup 만들기, 로컬 테스트, 디버깅하기 - 1 안녕하세요! 이번 글에서는 chrome extension을 이용해 프로그램을 만들면서 사용법을 익혀보겠습니다. 하나의 프로그램이 완성될 때 까지 계속 이어서 작성될 예정입니다. Motivation Github에서 PR을 작 rbals0445.tistory.com 지난 글과 이어집니다. 이번 글에서는 유저가 extension에서 입력한 input, output을 저장하는 방법에 대해서 다룹니다. chrome extension에서 데이터 저장을 위해 storage api.. 2023. 11. 28. [Chrome Extension] popup 만들기, 로컬 테스트, 디버깅하기 - 1 안녕하세요! 이번 글에서는 chrome extension을 이용해 프로그램을 만들면서 사용법을 익혀보겠습니다. 하나의 프로그램이 완성될 때 까지 계속 이어서 작성될 예정입니다. Motivation Github에서 PR을 작성할 때 어떤것을 수정했는지 시각적으로 보여주면 편할때가 많습니다. text만 써놓게 되면 기존의 맥락을 모르기 때문에 리뷰하기가 어렵습니다. 하지만 table 같은것을 이용해 어떤 부분이 변경되었는지 보여주면 팀원들이 리뷰할때 더 편합니다. table 마크다운을 매번 복붙하기도 번거로워서 만들게 되었습니다. (매일 같은 공부 보다는 기분 전환을 위해 만든것이긴 합니다 ㅎㅎ) Sample 아직 추가해야할 기능은 많지만, 혼자 사용하기에는 무리가 없어서 글로 남기게 되었습니다. http.. 2023. 11. 26. [WEB] URL 길이와 SEO의 상관관계 알아보기 안녕하세요. 오늘은 조금 글이 짧습니다. 네트워크 책을 읽다가 문득 생각이 난 내용이 있어 정리합니다. URL 길이는 짧을수록 좋을까요? 길면 어떤 단점이 있을까요? 검색해보니 URL 길이가 길수록 SEO에 좋지 않다는 글이 좀 있었습니다. SEO 관련 회사들인 경우도 있었습니다. 하지만 글에 레퍼런스 문서가 없어서 신뢰하기 어려웠습니다. URL이 길면 SEO에 나쁜가요? Google Senior Search Analyst 'John Mueller'가 답합니다. 'No' 영상은 Reference에 남깁니다. URL 길이가 길수록 검색 품질이 나빠진다거나 상위에 랭크되지 않는 문제는 발생하지 않습니다. URL은 그냥 어떤 자원인지 식별하는 용도의 '식별자' (identifier)로만 사용합니다. 짧은 UR.. 2023. 10. 31. [JS] generator polyfill regenerator 살펴보기 - Generator 3 [JS] generator 살펴보기 - Generator 2 [JS] generator 살펴보기 - Generator 2 Generator 1편과 이어서 보신다면 더 좋습니다. https://rbals0445.tistory.com/142 [JS] iterable, iterator 살펴보기 - Generator 1 안녕하세요! 오랜만에 기술 포스트를 작성하네요. 이번 글은 시리즈처럼 작성될 예 rbals0445.tistory.com 이전 글과 이어서 보신다면 이해하기 더 좋습니다. 지난 글에서 generator에 대해서 알아봤습니다. 함수의 실행을 중간에 멈추고 이어서 다시 실행하려면 어떻게 코드를 만들어야 할까요? Babel에서 generator를 트랜스파일 하면 generator가 사용되지 않은 코드가.. 2023. 10. 30. [JS] generator 살펴보기 - Generator 2 Generator 1편과 이어서 보신다면 더 좋습니다. https://rbals0445.tistory.com/142 [JS] iterable, iterator 살펴보기 - Generator 1 안녕하세요! 오랜만에 기술 포스트를 작성하네요. 이번 글은 시리즈처럼 작성될 예정입니다. babel이 Generator를 transpile한 코드를 이해하고, 어떻게 작동하는지 이해하기 위해 필요한 지식들을 미 rbals0445.tistory.com 지난 글에서 Iteration protocol에 대해서 알아봤습니다. 이번 글에서는 generator에 대해서 소개합니다. 제너레이터 사용법, 메소드같은 기초적인 내용들은 mdn 같은 문서를 참고 부탁드립니다. 정의 "코드 블럭의 실행을 멈췄다가 다시 실행할 수 있는 .. 2023. 10. 17. [JS] iterable, iterator 살펴보기 - Generator 1 안녕하세요! 오랜만에 기술 포스트를 작성하네요. 이번 글은 시리즈처럼 작성될 예정입니다. babel이 Generator를 transpile한 코드를 이해하고, 어떻게 작동하는지 이해하기 위해 필요한 지식들을 미리 정리합니다. 개요 JS에서 spread operator(...) 또는 for...of를 통해서 배열, 문자열 등을 펼치고 순회할 수 있습니다. Map, Set도 순회가 가능하다는데 이걸 다 암기하거나 매번 실험 할까요?? 이렇게 해도 되긴 합니다. 하지만 브라우저가 어떻게 순회 가능하다고 판단하는지 이해한다면, 암기하지 않아도 되고 다른 코드를 이해할때 큰 도움이 됩니다. Iterable, Iterator protocol iterable, iterator protocol 자체는 브라우저에 내장되.. 2023. 10. 16. React가 이벤트를 관리하는 방식 - 3 (완) https://rbals0445.tistory.com/139 React가 이벤트를 관리하는 방식 - 2 https://rbals0445.tistory.com/138 React가 이벤트를 관리하는 방식 - 1 올해가 가기 전 리액트를 소스코드 레벨에서 분석해보는게 목표였습니다. 목표를 간단하게 잡고 분석을 해보자 했지만, 생각보다 모 rbals0445.tistory.com 지난 글에서 이벤트 발생시에 등록했던 이벤트 핸들러가 어떻게 작동하는지 알아봤습니다. 코드 분석을 하면서 얻게된 내용들을 최종적으로 정리할 예정입니다. 리액트에서 이벤트 버블링을 사용하면 안되는 이유? 약 반년전에 회사 소스코드에다가 이벤트 버블링으로 함수를 작성한적이 있었습니다. 당시에 작성하고나서 효율적으로 작성했군.. 하면서 PR.. 2023. 6. 19. React가 이벤트를 관리하는 방식 - 2 https://rbals0445.tistory.com/138 React가 이벤트를 관리하는 방식 - 1 올해가 가기 전 리액트를 소스코드 레벨에서 분석해보는게 목표였습니다. 목표를 간단하게 잡고 분석을 해보자 했지만, 생각보다 모르는게 너무 많더라구요. ㅎㅎ 거의 2~3주 동안 시간이 나면 rbals0445.tistory.com React에서 사전에 어떻게 native event와 매핑이 되고, 실제로 등륵은 어떻게 이루어지는지 알아보았습니다. 이번 글에서는 어떻게 이벤트가 실행되는지 알아보겠습니다. 화면에 모든 컴포넌트들이 렌더링 되고, 특정 엘리먼트를 클릭하면 이벤트는 어떻게 실행 될까요?? 이벤트 실행시키기 item 1 을 클릭해서 'click' event를 발생시킨 경우를 예로 들어보겠습니다. 코.. 2023. 6. 18. 이전 1 2 3 4 ··· 7 다음 728x90
