반응형

전체 글 116

Node.js 24.22.1 보안 업데이트 (CVE-2026-111497) 및 Vercel 대응 방법

2026년 10월 21일, Node.js에서 발견된 보안 취약점을 수정하기 위한 보안 패치 버전이 릴리스되었다. Node.js 24.x LTS 계열의 패치 버전은 24.22.1이다. Node.js security advisory: Brotli decoder RCE (CVE-2026-111497) | Vercel Knowledge BaseVercel WAF blocks known exploit patterns for CVE-2026-111497, but does not replace patching.vercel.com CVE-2026-111497Node.js를 사용하는 서버가 악의적으로 조작된 압축 데이터를 처리하다가 특정 조건에서 원격 코드 실행(RCE)으로 이어질 수 있는 취약점이 발견되었다. Brot..

Dev Note 2026.10.22

신기한 백엔드의 세계 - 2 : 직원과 사용자 테이블을 왜 따로 관리할까?

사내 일정 관리 프로그램을 개발하면서 또 하나 새롭게 알게 된 것이 있다. 프로젝트의 DB를 살펴보니 직원(Employee)과 사용자(User) 테이블이 따로 존재하고 있었다.직원 정보와 사용자 계정을 연결해야 이메일 관련 기능을 사용할 수 있는 구조였는데, 내게는 이 과정이 꽤 번거롭게 느껴졌다. 어차피 같은 사람의 정보인데 굳이 테이블을 두 개로 나눌 필요가 있을까? 하나로 합치면 훨씬 간단하지 않을까? 하는 생각이 들었다. 그런데 알고 보니 두 테이블은 관리하는 목적 자체가 달랐다. 직원(Employee)과 사용자(User)의 차이 구분 직원(Employee) 사용자(User) 목적회사의 인사 정보 관리시스템 계정 및 인증 관리주요 정보사번, 부서, 직급, 입사일, 퇴사일이메일, 비밀번호, 계정..

Dev Note 2026.10.21

신기한 백엔드의 세계 - 1 : 삭제 버튼을 누르면 DB에서도 삭제될까?

우리가 페이지에서 무언가를 삭제하면, DB에서도 0+0 삭제될까?단순히 삭제하면 끝이라고 생각했는데,사내 일정관리 프로그램을 개발하면서 소프트 삭제에 대해 알게 되어 간단하게 정리해보았다.하드 삭제DB에서 데이터를 실제로 제거임시 데이터, 불필요한 기록, 보존할 필요가 없는 데이터소프트 삭제DB에 데이터를 남겨두고 삭제 여부만 기록하는 방식게시글, 프로젝트, 문서, 업무, 댓글처럼 실수로 삭제했을 때 복구할 필요가 있는 데이터일정 기간 후 삭제처음에는 소프트 삭제하고, 30일 같은 보관 기간이 지나면 실제로 삭제하는 방식복구 기회와 데이터 정리를 모두 제공하고 싶은 서비스 사이트에서 삭제 행위를 하면 제품의 정책과 구현에 따라 다르다고 한다.실제로 자주 사용하는 서비스들 중에서 경우를 찾아보았다. 삭제해..

Dev Note 2026.10.20

내 티스토리는 검색되고 있을까? SEO 설정 시작해보기

안녕하세요, 히새입니다!이번 포스팅에서는 티스토리 블로그에 SEO를 설정해 본 과정을 정리해 보려고 합니다. 최근 포스팅했던 동네 치과의 AI 활용 사례를 보면서, 기술을 활용하는 방법이 생각보다 훨씬 다양하다는 걸 느꼈는데요.그러다 SEO와 GEO라는 개념에도 관심이 생겼습니다. 생각해 보니 그동안 블로그에 글만 작성했지,정작 내 글이 검색엔진에서 어떻게 발견되고 노출되는지는 한 번도 신경 써본 적이 없더라구요..? 그래서 이번 기회에 SEO부터 하나씩 설정해 보기로 했습니다!현재 티스토리의 SEO 설정 확인하기티스토리 관리자 - 꾸미기 - 스킨 편집 - HTMl 편집에 들어가 현재 설정을 확인해보았다.✅ 제목 (title) 설정✅ 모바일 화면 설정과 RSS 링크🔎 스킨 HTML에 meta descr..

Frontend 2026.10.16

대AI딸깍시대, 만드는 것보다 중요한 것은 어쩌면 발견하는 능력아닐까?

안녕하세요, 히새입니다!그동안은 코딩테스트 간단풀이나... 알게 되는 정보들을 정리하는 종류의 포스팅을 해왔는데요 대 딸깍 시대에 쏟아지는 서비스들을 보며 생각이 참 많이 들더라구요읽어주실 분이 없을지도 모르지만 이런 생각을 공유해보고자 오늘의 포스팅을 작성합니다. 올해 8월, "그늘로" 라는 서비스가 굉장히 화제였는데 올해 여름, 유난히 햇빛이 따가웠던걸로 기억합니다. 잠깐이라도 걸을 일이 있으면 열심히 나무 아래로 숨어서 걷고, 신호등도 멀찍이서 기다리고,이 정도 따가움이면 남자도 양산을 써도 괜찮은 것 같다,,는 회사 사람들의 말들을 들으며나무를 찾아다녔죠 그래서 그런지 이 서비스가 굉장히 인상 깊었습니다 실생활에서 내가, 높은 가능성으로 모두가 해결 할 생각조차 안해본 문제를 서비스화하다니!!!굉..

회고 · 일상 2026.10.15

Github Actions 를 사용하여 IDE 열지 않고 정보 업데이트 해주기!

안녕하세요, 히새입니다!오늘은 깃허브 액션을 사용해보려고 해요 제가 관리하는 사이트에 간헐적으로 기사를 업데이트 해줘야해서,코드에다가 명령어도 만들어두긴 했거든요..?pnpm article:add "기사 링크" --pr// 기사 그대로 추출 -> 이미지 다운로드 해서 파일 생성 -> 커밋 -> 푸시 -> pr 생성이런 코드에 이런 일을 해주는 그런... 이미 ! 반자동화가 된 상태였어요 그 런 데..!아니 IDE 들어가서 저 명령어 치는게 귀찮으면 어떡하죠?(IDE 없이 터미널에서도 실행할 수 있지만, 어쨌든 열어야하니까!!!) 뭘 어떡해.. 안들어가게 만들어야지 그래서 시작해본, 깃허브 액션으로 자동화하기!!! 기존 CLIL 명령어는 옵션 없이 실행하면 기사와 이미지만 생성, --push 와 --pr ..

Frontend 2026.10.07

React Router의 useLocation으로 페이지 간 데이터 전달하기

안녕하세요! 최근에 ai slop 정리하면서 css cascade 에 대해 알아보는 글을 작성했는데요, AI Slop 정리 - !important 남발을 줄위기 위한 CSS Cascade와 Cascade Layer오늘은 ai slop - !important 남발을 제거 중 공부하게 된 CSS Cascade 에 대한 포스팅입니다CSS Cascade 란?하나의 html 요소에 여러 css 규칙이 같은 속성을 지정하면 cascade 규칙에 따라 최종 스타일을 결정한h2s0.tistory.com 최근에 ai 를 활용하여서 제 아이디어들을 개발하고 있어요그러던 중 가장 작은 프로젝트들부터 코드를 좀 봐야겠다는 생각이 들어서https://quit.heeso.site/ 이거 코드를 조금 보고 있답니다,,! 임의의 ..

Frontend 2026.09.29

AI Slop 정리 - !important 남발을 줄위기 위한 CSS Cascade와 Cascade Layer

오늘은 ai slop - !important 남발을 제거 중 공부하게 된 CSS Cascade 에 대한 포스팅입니다CSS Cascade 란?하나의 html 요소에 여러 css 규칙이 같은 속성을 지정하면 cascade 규칙에 따라 최종 스타일을 결정한다.단순히 css 파일의 가장 아래에 있는 선언이 항상 적용되는 것이 아닌, 다음 순서로 우선순위를 판단한다. 1. `!important` 여부와 스타일 출처2. cascade layer 우선순위3. selector specificity4. CSS 작성 순서 Selector Specificity specificity는 selector가 대상을 얼마나 구체적으로 지정하는지를 나타내고, 다음 순서로 강해진다.div /* 요소 */.titl..

Frontend 2026.09.28

내가 보려고 정리해본 Next.js App Router를 볼 때 알아두면 좋은 기본 개념

Root LayoutNext.js App Router의 최상위 layout.tsx는 과 를 직접 작성한다. {children}lang="ko"는 브라우저, 검색엔진, 스크린리더가 문서의 주 언어를 판단할 때 참고한다.HydrationNext.js는 서버에서 먼저 HTML을 만들어 브라우저에 전달할 수 있다.서버에서 HTML 생성→ 브라우저가 HTML 표시→ React JavaScript 연결→ 클릭, 상태 변경 등의 기능 활성화이 연결 과정을 hydration이라고 한다.React + Vite와 Next.js의 실행 구조 차이일반적인 React + Vite:index.html→ main.tsx→ App.tsx→ React Router→ 현재 페이지Next.js App Router:Next.js 내부 진..

Frontend 2026.09.02

처음 프로젝트를 파악하는 과정! Next.js 기준

1) 기술 스택과 실행 방법 확인- package.jsonscripts→ dev / build / lint / test 같은 실행·검사 명령dependencies→ Next.js, React, TanStack Query, Supabase 등 사용 기술scripts로 실행, 검사 명령과 dependencies에서 사용 기술을 확인한다. 이 프로젝트가 무엇으로 만들어졌고 어떻게 실행하는가를 파악하는 것 2) src/app 에서 페이지 지도 확인Next.js App Router 에서는 app 디렉터리의 폴더 구조가 URL 구조와 연결된다. src/app/page.tsx → /src/app/products/page.tsx → /productssrc/app/products/new/..

Dev Note 2026.09.01
반응형