개발자가 되고 싶은 새

CSS 스타일링 방식의 차이점 정리

CSS 스타일링 생태계 이해하는법- 어디에서 스타일을 작성하는가? - CSS 파일, JSX 클래스, JS/TS 객체- 언제 CSS가 생성/처리되는가? - 빌드타임, 런타- 스타일을 어떻게 관리하는가? - 전역 스타일, 지역 스타일, 유틸리티 클래스, CSS-in-JS 일반 CSS (Global CSS)가장 기본적인 스타일링 방식으로, .css 파일에 스타일을 직접 작성한다..button { background-color: blue; color: white; padding: 12px 20px;}function Button() { return 로그인;} 특징- CSS 클래스는 기본적으로 전역 범위를 가진다.- 서로 다른 컴포넌트에서 같은 클래스 이름을 사용하면 스타일 충돌이 발생할 수 있다.- C..

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..

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

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

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

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

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

안녕하세요! 최근에 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/ 이거 코드를 조금 보고 있답니다,,! 임의의 ..

오늘은 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..

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 내부 진..