전체 글

📡 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 사용 방법 함수형 컴포넌트에..

📑 [React] 이벤트 핸들링

오늘은 리액트(React)에서 이벤트 핸들링(event handling)에 대해 알아보겠습니다. 이벤트 핸들링은 사용자가 웹 애플리케이션과 상호작용하는 중요한 방식입니다. 리액트에서는 이벤트를 다루는 방식이 HTML과 약간 다르기 때문에 이를 이해하고 올바르게 사용하는 것이 중요합니다. 이 글에서는 리액트에서 이벤트 핸들링을 어떻게 하는지, 예제와 함께 살펴보겠습니다.   리액트에서의 이벤트 핸들링   리액트의 이벤트 핸들링은 HTML의 이벤트 핸들링과 유사하지만, 몇 가지 중요한 차이점이 있습니다  이벤트 이름이 소문자 대신 캐멀 케이스(camelCase)를 사용합니다.이벤트 핸들러는 문자열이 아닌 함수로 전달됩니다.  이벤트 핸들러 사용 방법 리액트에서 이벤트 핸들러를 사용하는 기본적인 방법은 다음과..

📑 [React] Props

오늘은 리액트(React)의 핵심 개념 중 하나인 props에 대해 알아보겠습니다.  props는 리액트 컴포넌트 간의 데이터 전달을 담당하며, 이를 통해 컴포넌트들이 재사용 가능하고 더 유연해집니다. 이 글에서는 props가 무엇인지, 어떻게 사용하는지, 그리고 주의할 점에 대해 자세히 설명하겠습니다.  Props란 무엇인가?  props는 'properties'의 줄임말로, 컴포넌트 간의 데이터 전달을 위해 사용되는 객체입니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용되며, 자식 컴포넌트는 전달받은 props를 읽기 전용으로 사용할 수 있습니다. 이는 단방향 데이터 흐름(one-way data flow)을 보장하여 애플리케이션의 상태 관리를 용이하게 합니다.    Props 사용 방..