개발새발 로그

개발하면서 웹소켓을 사용할 일이 없다보니 이 기능이 어떻게 구현되는지 모르고 있었다.이번 기회에 웹소켓 로직을 보통 어떻게 작성하고 기본적인 실시간 채팅기능을 어떻게 만드는지 알아보려고 한다. 먼저 웹소켓과 우리가 쓸 Socket.io에 대해서 궁금한 점을 작성해봤다.📖http와 웹소켓의 차이웹소켓(WebSocket)은 클라이언트와 서버(브라우저와 서버)를 연결하고 실시간으로 통신이 가능하도록 하는 첨단 통신 프로토콜이다. 웹소켓은 하나의 TCP 접속에 전이중(duplex) 통신 채널을 제공한다. 쉽게 말해, 웹소켓은 Socket Connection을 유지한 채로 실시간으로 양방향 통신 혹은 데이터 전송이 가능한 프로토콜이다. 기존 HTTP는 단방향 통신이였다. 클라이언트에서 서버로 Request를 보..

어떤 코드를 짜면서 패턴이 있다면 그 패턴을 무조건 누군가가 개발한 패턴이라고 한다.그렇다면 해당 패턴을 모르고 사용하는 것은 앞뒤가 맞지 않는다고 생각됐다.그래서 리액트에서 사용되는 디자인 패턴 중 하나인 Container and Presentational Components Pattern을 알아보려고 한다. 현재 구글 검색을 하면 손쉽게 해당 패턴에 대해 알 수 있다.그래서 나는 해당 패턴에 대해 이해하고, 알아가는 과정을 포스팅하려한다. 📖Container and Presentational Components Pattern이란?간단하게 말해 비즈니스 로직으로 부터 뷰를 분리하여 관심사의 분리(SoC)를 강제하는 것이다. 먼저 아래 코드를 보자해당 코드는 TanstackQuery를 사용하면서 나도 ..

XSS, 크로스 사이트 스크립팅에 대해 알아보면서 프론트 쪽에서도 이러한 보안 위협을 방지해야겠구나 생각이 들었다.근데 개발하면서 사실을 보안에 대해 전혀 신경쓰지않고 있다.마치 테스트 주도 개발을 안하고 있는 것과 같달까..이번 기회에 XSS 보안 취약점을 어떻게하면 막을 수 있을까 찾아보면서 공부해보려한다.물론 리액트를 기반으로 찾아보았다. Next는 보안 헤더를 구성할 수 있다 해서 Next는 조금 간단한 건가? 싶어서 나중에 해보려고한다.  🚨HTML요소를 직접 렌더링하는 경우HTML 요소를 직접 렌더링하는 경우는 블로그나 노션에서 주로 사용한다.마치 아래와 같이 말이다.function App() { const html = `나는 제목이다.나는 제 목이다. 나는 본문이다. 나는 본 문이다. ..

성능최적화에 대해서 공부하면서 개발했던 프로젝트의 성능을 최적화해보면 어떨까? 생각하게 됐다.그래서 이전에 팀프로젝트로 진행했던 서비스를 lighthouse로 성능 측정을 해보면서 그 과정을 정리해보려고한다.  🛠️프로젝트 성능을 측정해보자위처럼 메인페이지를 성능측정해봤더니 처참했다.현재 문제는 아래와 같다.여기서 LCP가 가장 문제인 것으로 보인다.하지만 오늘은 "자바스크립트 줄이기" 부분만 해결해보려고 한다.  🤔자바스크립트 줄이기?말 그대로 불필요한 자바스크립트 코드를 줄이라고 하는 것이다.그래서 커버리지로 검사를 해보면 아래와 같이 빨간 것을 볼 수 있는데이게 사용하지 않는 자바스크립트 코드라고 한다.  🤔그럼 어떻게 줄여야할까?사실 줄이는 방법은 다양하다.그래서 나는 먼저 코드 스플리팅을 ..

Dependabot을 알게 되어서 이것저것 공부하다가내 프로젝트에는 어떤 취약점이 있을까 궁금해졌다.실제로 내가 진행 중인 개인프로젝트에도 취약점이 존재했고,이를 살펴보면서 해결해보려 한다! 🤔Dependabot?Dependabot은 깃허브에서 제공하는 강력한 기능 중 하나로의존성에 문제가 있다면 이에 대해 문제를 알려주고 가능하다면 해결할 수 있는 풀 리퀘스트까지 열어준다. 의존성에 대한 문제에 알기 위해서는  버전과 의존성에 대해서 알아야 한다.📖버전우리는 버전에 대해서 얘기할 때 개발자들 사이에서 암묵적으로 지켜지고 있는 유의적 버전(semantic versioning)에 대해서 알아야 한다.유의적 버전 체계는 개발자 커뮤니티에서 널리 받아들여지고 있으며, 다양한 소프트웨어 프로젝트와 라이브러리..

개인 프로젝트를 진행하면서 배포 후 테스트를 점검하기 위해 Vercel에 배포를 해야했다.진행하면서 생긴 문제를 해결하는 과정을 정리해보려고 한다.  😯공공 데이터에서 http만 지원한다고?이 부분을 전혀 생각하지 않고 배포를 했는데 아래와 같이 오류가 발생했다.Mixed Content: The page at ' [배포 주소] ' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint '[요청 주소'. This request has been blocked; the content must be served over HTTPS검색해보니 아래와 같은 오류를 뜻한다이는 웹 페이지가 HTTPS로 로드되었지만, 페이지 내에서 HTTP로 리..

NextJS app router를 살펴보면서 궁금한 점 몇가지 정리해보았다. 1. Route Handler는 무엇일까?공식문서에서는 "라우트 핸들러를 사용하면 웹 요청 및 응답 API를 사용하여 지정된 경로에 대한 사용자 지정 요청 핸들러를 만들 수 있습니다."  라고 표현하고 있다. 사용법을 보면 아래와 같다.// 경로 : api/post/route.tsexport async function GET() { const res = await fetch('https://data.mongodb-api.com/...', { headers: { 'Content-Type': 'application/json', 'API-Key': process.env.DATA_API_KE..

리액트에서는 이벤트 객체가 아닌 합성 이벤트라는 객체를 사용한다고 한다.리액트에서 이벤트를 처리할 때 이벤트 위임으로 처리한다고 한다. 이렇게 리액트에서는 이벤트를 기존과 다른 방식으로 처리하는 것 같다.이를 공부하면서 학습한 내용을 정리해보려고 한다.  📖합성이벤트🤔Event에 offsetX가 없다고..? 예전에 프로젝트를 진행하면서 Event객체를 사용할 때 문제가 하나 있었다.받아온 Event 객체에 내가 원하는 속성이 없다고 뜨는 문제였는데 그때는 그냥 "아~ 그렇구나" 하고 넘기고 해결했었다. 오늘은 그 문제를 한번 다시 갖고 와서 깊게 파고들려고 한다. 리액트에서 아래와 같이 작성하면 타입스크립트 오류가 뜬다. function handleClick(e: MouseEvent) { co..