본문 바로가기

공부107

PostMessage 알아보기 개발 중 브라우저 창끼리 데이터를 주고 받아야 하는 상황이 생겼다.이를 구현하기 위해 방안을 찾아보던 결과, GPT가 제시한 방안이 PostMessage를 사용하는 것이었다.사용법 및 용도에 대해 간단히 복습 겸 메모해보기로.PostMessage란?Window 창 사이 Cross-Origin 통신을 할 수 있게 해주는 메서드다.즉, 별도의 Cross Origin 설정을 하지 않더라도 안전하게 서로 다른 출처 간 통신이 가능하다! 개발 상황  PostMessage를 사용하여 구현하기로 한 상황은 대충 아래와 같았다. 아래의 상황을 재현하기 위해 간략하게 구현해보기로 한다.웹 A에서 특정 메뉴를 통해 웹 B를 새 윈도우로 띄운다.이때 웹 A는 웹 B가 필요로 하는 데이터를 보내주어야 한다.웹 B는 웹 A가 .. 2024. 10. 20.
크롬 개발자 도구 코드 붙여넣기 이슈 개발을 하던 와중, 코드에 바로 도입하기 전 확인차 크롬의 개발자 도구 콘솔을 사용해 넣으려던 코드를 실행하려 했었다. 그런데 갑자기 아래와 같은 에러가 뜨며 입력한 코드가 실행되지 않는 현상이 발생했다.Warning: Don't paste code into the DevTools Console that you don't understand or haven't reviewed yourself.(하략) 여태까지는 이런 적이 없었는데? 싶어서 어떻게 해결하는지 알아봄과 동시에, 왜 갑자기 이런게 뜨기 시작했는지? 간단히 알아봤다.크롬의 Self-XSS 경고Self-XSS란?  XSS(Cross Site Scripting) 공격은 웹페이지에 부적절한 악성 스크립트가 실행되는 공격이다. 예를 들어, 사이트 내.. 2024. 9. 8.
위상 정렬 알아보기 위상 정렬(Topological Sorting)이란?방향 그래프의 정점들을 방향을 거스르지 않도록 나열하는 것.각 정점에 순서를 매기고, 그 순서를 거스르지 않도록 정점들을 정렬하는 것을 의미한다. ex) 선수 과목 구조(과목마다 먼저 들어야 하는 과목의 순서가 정해져 있음)여기서 순서란, 그래프의 정점 순서를 가리킴.ex) 정점 v1과 v2이 v1 → v2 방향으로 연결되어 있으면, v1이 선행된다고 본다.위상 정렬에 사용될 그래프는 순환이 없어야 함(비순환 방향 그래프여야 함). 알고리즘Kahn 알고리즘자신을 향하는 간선(즉, 자신으로 들어오는 간선)이 없는 정점을 찾는다.이러한 정점이 여러 개라면, 그 중 아무거나 한 개를 고른다.해당 정점을 그래프에서 제거한다.남은 그래프에서 정점이 더 이상 존재.. 2024. 8. 31.
최소 스패닝 트리(Minimum Spanning Tree) 알아보기 +) 그 전에 스패닝 트리란?※ 그래프 내 모든 정점을 포함하는 부분 그래프. 최소 스패닝 트리란? (Minimum spanning tree)혹은 Minimum Weight Spanning tree (최소 가중치 스패닝 트리)라고도 불림.가중 + 무방향 그래프의 모든 정점을 연결하면서 사이클을 이루지 않음 + 그래프를 이루는 모든 가중치의 합이 최소인 트리를 말함. 특징그래프 내 N개의 정점이 있다고 할 때, 각 스패닝 트리는 N-1개의 간선을 가진다.한 그래프 내에는 여러 개의 최소 스패닝 트리가 존재할 수 있다.만약 그래프 내 모든 간선의 가중치가 같다면, 모든 스패닝 트리는 항상 최소의 가중치 합을 가진다. 알고리즘프림 알고리즘주어진 그래프에서 한 정점을 선택하여 트리를 만듦.그래프의 모든 간선이 .. 2024. 8. 4.
[Vite] Vite 알아보기 근래에 Vite에 대해 이런저런 추천을 받기도 했고, 실제로 Vite로 된 프로젝트를 경험해본고로 상당한 인상을 받았기에... Vite에 대해 알아보고자 한다.Vite란?※ 발음은 '비트'다! 공식 사이트에서 친절하게 발음 예시도 제공해준다. 빠른 개발 환경을 위한 프론트엔드 툴  기존에 오랜 시간 사용되던 Webpack 등의 번들러의 문제점은 무겁고 느리다는 것이다.특히 프로젝트의 규모가 커질수록 이런 문제가 더더욱 두드러진다.이는 곧 개발상의 불편함을 야기한다.번들러 (Bundler): 웹의 이런저런 소스들(JS 코드, CSS 같은 asset들)을 브라우저가 사용할 수 있는 정적인 파일들로 만들어주는 도구. 위의 문제를 해결하기 위해, 브라우저가 지원하는 ES Modules + 네이티브 언어로 된 도.. 2024. 7. 14.
[Electron] Electron에서 코드 변경사항 빠르게 적용하기 (feat. electron-reload) Electron을 사용하며 불편했던 것 중 하나는, 웹 개발을 하던 때와 달리 자동으로 변경사항이 적용되지 않는다는 것이었다. 때문에 코드를 고치고, 이미 열려있는 Electron 창을 닫고, 커맨드 창에서 다시 Electron을 실행하는 불편함이 있었다.이를 개선하기 위한 방법을 알아보고, 실제 적용해본 내용을 공유한다.electron-reload 적용하기  Electron에 자동 리로드를 추가할 때 자주 거론되는 방법. 공식 문서에서 설명하는 사용방법도 비교적 간단하다. 간단하다면 간단한데, 나는 프로젝트에서 타입스크립트를 사용하고 있어서 이런 저런 추가 설정을 더했고, 만족스럽지 못한 부분이 있다. // 설치npm install electron-reload   npm 등으로 라이브러리를 설치하면 e.. 2024. 6. 30.

티스토리툴바