본문 바로가기

분류 전체보기125

오블완 챌린지 참여 + 근황 일상 글을 올린지 어느덧 1년 반이 지났다! 연말이기도 하고 오블완 챌린지 참여도 할겸(ㅎㅎ) 일상글을 남겨본다.  올한해는 어떻게든 최소 달에 한 번은 게시글을 올려야겠다는 마음으로 틈나면 이런저런 주제로 글을 올렸었다. 이는 2023년에 블로그를 크게 관리하지 못했어서 라는 이유도 있었지만, 돌이켜보면 내가 접한 것들이 적지 않았을텐데 그것을 미리미리 정리하지 않아 제대로 된 기록으로 남기지 못했다는 생각이 들어서였다.   결과적으로 최소 한 달에 한 번씩 글올리기라는 다짐은 어떻게든 지켜내서, 나름 다양한(?) 주제로 글을 작성하는 데에 성공했다.   현재 이 블로그는 Google Search Console에 연결하여 조회수나 노출을 관리하고 있는데, 1년간 방문자 수가 많이 늘어난 것 같아 나름 .. 2024. 11. 8.
Hydration이란? 전에 Next.js를 공부할 때 hydration이란 단어를 접한 적이 있었다. 그런데 근래에 Zustand 공식문서를 훑어 보다가 Hydrate라는 단어를 또 접했다.둘이 같은 의미라기엔 정의가 미묘하게 달라서 헷갈리는 일이 없도록 간단하게라도 정리하기로.Next.js 에서의 Hydration사실 Next.js에서만 쓰는 개념은 아닌 것 같다.정확히는, SSR에서 언급되는 용어. (https://www.patterns.dev/react/server-side-rendering/)React 공식 문서에도 서버에서 생성된 컨텐츠를 처리하는 hydrateRoot 가 존재한다.https://react.dev/reference/react-dom/client/hydrateRoot  hydrateRoot – Reac.. 2024. 11. 7.
실시간으로 서버에서 데이터를 가져와보기 (feat. Polling/Websocket/SSE) 회사에서 다양한 프로젝트를 진행하며, 서버에서 실시간으로 갱신되는 데이터를 가져오는 작업을 몇 번 경험했다.그 과정에서 다양한 방식을 접하고 경험할 수 있었는데, 간단하게 복습 겸 정리해보기로.Polling 방식새로운 데이터를 받아오기 위해 API를 일정한 간격으로 계속해서 호출하는 것. 즉 클라이언트가 주기적으로 서버에 요청을 보낸다.setInterval 등으로 일정 간격을 두고 서버에 데이터를 요청하는 방식으로 구현하면 되기 때문에, 다른 방식들에 비해 비교적 구현이 간단하다.다만, 새로 가져올 데이터가 없더라도 무조건 요청을 보내기 때문에 비효율적이고 서버의 부담을 증가시킨다는 단점이 존재한다.또한, 갱신된 데이터를 제때제때 받아오는 방식이 아니기 때문에 실시간성이 떨어진다.   위에서 언급한대로 .. 2024. 11. 3.
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.

티스토리툴바