전체 글

Biome.js

ESLint + Prettier, 이제 Biome 하나로 끝낸다요약: Biome은 Rust로 만들어진 초고속 JS/TS 툴체인으로, ESLint(린터)와 Prettier(포매터)를 단 하나의 도구로 대체한다.Biome이 뭔가요?프론트엔드 프로젝트를 세팅해본 사람이라면 이런 경험이 있을 것이다..eslintrc.json, .eslintignore, .prettierrc, .prettierignore ... 설정 파일만 4~5개ESLint랑 Prettier가 서로 충돌해서 저장할 때마다 포맷이 왔다갔다npm install 할 때 100개가 넘는 패키지가 줄줄이 딸려옴커밋 전 lint 돌리는 데 5~10초씩 걸림Biome은 이 고통을 한 방에 해결해주는 도구다.한 줄로 정리하면:Biome = ESLint + ..

Next.js, Nest.js

Nginx — 문지기 역할이에요. 외부에서 오는 요청을 받아서 URL에 따라 Next.js(프런트)로 보낼지, NestJS(백엔드 API)로 보낼지 나눠줘요. Next.js — 사용자가 보는 화면을 만들어요. React 컴포넌트로 UI를 구성하고, 필요한 데이터는 NestJS에 API 요청해서 받아와요. SSR(서버사이드 렌더링)도 지원해서 SEO에도 유리해요.App Router의 핵심 개념은 딱 하나예요."폴더 구조 = URL"app/dashboard/page.tsx 파일을 만들면 자동으로 /dashboard 주소가 생겨요. 별도 라우팅 설정 없이 폴더만 만들면 돼요.주요 파일 역할layout.tsx — 여러 페이지에 공통으로 들어가는 틀이에요. 헤더, 사이드바 같은 것. 한 번 만들면 하위 모든 페이..

📡 API의 개념과 사용법

웹 개발을 공부하다 보면 반드시 만나게 되는 용어 중 하나가 바로 **API(Application Programming Interface)**입니다.이 글에서는 API의 개념부터 실제 사용 예시인 카카오 책 검색 API, 그리고 jQuery AJAX로 API를 호출하는 방법까지 쉽게 설명해 드릴게요! 🖥 프론트엔드와 백엔드의 역할웹사이트의 게시판 기능을 예로 들어 볼까요?프론트엔드는 사용자에게 보이는 화면을 담당합니다.게시판의 틀, 제목의 위치, 텍스트의 색상·크기·애니메이션 등 시각적인 요소를 구성하죠.백엔드는 실제 데이터를 처리하는 부분입니다.예를 들어, 게시판 글의 제목, 본문, 작성자, 작성일, 조회수 같은 정보를 데이터베이스와 연결해 처리합니다. 🔄 프론트엔드가 백엔드와 통신하는 법만약 ..

jQuery 간단하게 사용하기

자바스크립트는 프론트엔드와 백엔드 사이에서데이터를 통신하게 해주는 중요한 역할을 합니다. HTML과 CSS로 만든 화면의 요소를움직이게 할 때도 쓰는 만능 언어입니다. 자바스크립트는 웹, 앱, 서버 등을 다룰 수 있는데,웹 브라우저에서 경고 창을 표시하거나 뒤로 가기, 앞으로 가기, 새로 고침을 할 수도 있고,주소 창도 변경할 수 있습니다. 이처럼 자바스크립트를 활용하면 브라우저를 조작하는 것뿐만 아니라 HTML, CSS도 바꿀 수 있습니다.특정 태그를 추가 또는 제거하거나 CSS를 변화시키는 것도 할 수 있습니다.쉽게 말해서 웹에서 할 수 있는 거의 모든 일을 자바스크립트로 구현 할 수 있습니다. 자바스크립트 함수를 직접 만들어서 사용하는 것 대신에, 라이브러리를 사용하여자바스크립트를 더 쉽게 사용할..

React에서 console.log가 두 번 찍히는 이유? 🧐

초보 개발자라면 누구나 한 번쯤은 React에서 console.log가 의도치 않게 두 번 출력되는 현상을 겪었을 겁니다. 예를 들어 컴포넌트가 마운트될 때 console.log("렌더링!")을 출력했는데, 콘솔에는 두 줄이 뜨는 경우 말이죠.오늘은 이 현상이 왜 발생하는지, 그리고 걱정해도 되는 건지 알아보겠습니다! 👀 현상 예시 import { useEffect } from "react";function App() { console.log("컴포넌트 렌더링!"); useEffect(() => { console.log("useEffect 실행!"); }, []); return Hello React;}export default App; 콘솔 출력컴포넌트 렌더링!컴포넌트 렌더링!useEffe..

검색 엔진 원리

🕸️ 검색엔진이 내 사이트를 어떻게 볼까?프론트엔드 개발자를 위한 SEO 기초와 검색 노출 준비웹사이트를 개발한 뒤 가장 하고 싶은 일 중 하나는**“내 사이트가 검색엔진에 잘 뜨도록 만드는 것”**입니다.저도 프론트엔드 개발자로서 포트폴리오 사이트를 만들고,"이제 meta 태그도 넣었고, HTML도 시맨틱하게 짰으니 곧 검색되겠지?"라고 생각했었는데요, 막상 검색해보면 안 나오는 경우가 많습니다.왜일까요?🔎 검색엔진은 어떻게 웹사이트를 찾을까?검색엔진(구글, 네이버 등)은 자동화된 프로그램인 **크롤러(Crawler)**를 통해웹사이트를 방문하고 정보를 수집합니다.🧭 전체 흐름 요약:robots.txt 파일 확인허용된 HTML 문서 방문meta 태그와 시맨틱 구조 분석링크를 따라 내부 페이지까지 ..

DNS

✅ 1. 도메인이란?**도메인(domain)**은 사용자가 웹사이트에 접속하기 쉽게 만든 사람이 읽을 수 있는 주소입니다.예: google.com, serin99.tistory.com실제 서버는 **IP 주소(예: 142.250.196.14)**로 존재하지만, 사람들이 기억하기 어려움.그래서 도메인이 필요함.도메인은 전화번호부에서 사람 이름 같은 것. 서버의 진짜 "전화번호(IP)"를 기억하지 않아도 됨. ✅ 2. DNS란?**DNS(Domain Name System)**는 도메인 이름을 IP 주소로 변환해주는 시스템.예: 사용자가 serin.dev 입력 → DNS가 이를 203.0.113.1 같은 IP로 변환 → 해당 서버로 접속이걸 **"도메인 이름 해석"**이라고 함.DNS는 일종의 "인터넷 전화번..

📑 [React] State

리액트(React)의 또 다른 핵심 개념인 state에 대해 알아보겠습니다. state는 리액트 컴포넌트에서 동적인 데이터를 관리하는 데 사용되며, 컴포넌트의 상태가 변경될 때마다 UI를 다시 렌더링합니다. 이 글에서는 state가 무엇인지, 어떻게 사용하는지, 그리고 주의할 점에 대해 자세히 설명하겠습니다.   State란 무엇인가?state는 리액트 컴포넌트의 동적인 데이터를 저장하는 객체입니다. 컴포넌트는 state를 통해 자신의 상태를 관리하고, 상태가 변경되면 리액트는 자동으로 컴포넌트를 다시 렌더링하여 UI를 업데이트합니다. 이는 컴포넌트의 데이터가 변할 때마다 수동으로 DOM을 조작할 필요 없이, 리액트가 효율적으로 UI를 관리할 수 있게 해줍니다.   State 사용 방법 함수형 컴포넌트에..