imysydesu 님의 블로그

React - 3

imysydesu — Thu, 16 Jul 2026 14:50:18 +0900

ex) 전체 페이지 중 여러 공간(헤더, 바디, 푸터)으로 나뉘어져 있다면 로그인을 할 때 모든 공간을 하나씩 업데이트 해줘야함 -> context를 사용하면 모든 컴포넌트에 공용적으로 데이터를 사용할 수 있음

createContext()

여러 컴포넌트가 함께 사용할 데이터를 저장할 공간 (context)을 만드는 함수
context가 없다면 부모가 자식에게 계속 props를 전달해야 함
Provider : 데이터를 넣는 역할, 데이터를 담아서 범위(태그)를 지정해주는 컴포넌트(태그)
useContext() : 데이터를 꺼낼 때 쓰는 Hook 함수

전역으로 공유할 Context 만들기(보통 외부 혹은 별도 파일에 설정)
export const UserContext = createContext(null)

데이터를 공유하고 싶은 범위의 최상위 부모 컴포넌트를 Provider을 태그처럼 사용해 감싸기(보통 시작 파일에 설정)
<UserContext.Provider value={user}> <ChildrenComponent /> </UserContext.Provider>

데이터가 필요한 자식 컴포넌트에서는 useContext 훅을 사용해 꺼내 쓰기
const user = useContext(userContext)

createBrowserRouter()

URL과 화면 컴포넌트의 연결 규칙을 만드는 함수

1. 라우팅 규칙 만듦

  const router = createBrowserRouter([
    {
      path: "/",
      element: <Home/>
    },
    {
      path: "/videos",
      element: <videos/>
    }
  ])

2. 라우팅 규칙을 React 어플리케이션에 적용

자동 임포트가 되지 않음 => npm i react-router-dom 설치

//라우터 만들기

const router = createBrowserRouter([

{

// /만 들어가면 root만 보여줌

path: "/",

element: <Root/>,

errorElement: <NotFound/>

에서 두 가지 방법으로 경로 들어가기

children: [

{index: true, element: <Home/>},

// 루트를 통과해 경로 이동 -> 메뉴 내용이 다 보임

{path: "videos", element: <Videos/>},

{path: "videos/:videoId", element: <VideoDetail/>}

]

{

path:"/videos",

element: <Videos/>

}

=> 첫 번째 방법 : children 안의 videos(중첩 라우팅)의 경우 Root화면과 Videos 화면이 동시에 보임

=> 두 번째 방법 : 완전히 독립된 videos이기 때문에 Root 화면이 사라지고 Videos 화면만 단독으로 보임

- 첫 번째 방법

=> 웹 사이트를 만들다보면 메인 홈, 비디오 목록 등 주소가 바뀌어도 상단 헤더, 사이드바, 하단 푸터는 그대로 고정되어있는 경우 많이 사용됨

- 두 번째 방법

=> 공통 헤더나 사이드바가 절대로 화면에 나오면 안 되고 화면 전체를 덮어씌워야 하는 특수한 페이지에 사용됨(로그인/회원가입 페이지 등)

CSS Module 방식

기존 : 모든 곳에 다 적용되던 일반 CSS

css Module: 특정 컴포넌트(파일)에만 고립시켜서 적용하는 기술

=> ex) 해당 CSS는 딱 이 JSX 파일 안에서만 작동함

ex) Home.jsx 파일이 있고 해당 파일에만 CSS를 넣고 싶다면
- 파일명을 만들 때 중간에 .module를 꼭 붙여서 만들어야함 => Home.module.css
- JSX 파일에서 불러올 때 객체 형태로 이름을 지어서 가져옴 => import styles from "./Home.module.css"
- 태그에 지정할 때 그냥 글자 "button"이 아니라 자바스크립트 변수처럼 지정해야 함 => <button className={styles.button}>버튼</button>

React에서 CSS 다루는 방법

그동안 사용한 방법은 파일 두개(jsx, css)를 번갈아보며 코딩했지만 이번 방법들은 자바스크립트/HTML 파일 안에서 CSS까지 해결함

styled-components

(스타일드 컴포넌트)

cmd -> npm i styled-components 설치 후 css 사용
개념: 나만의 맞춤형 디자인 태그(컴포넌트)를 만드는 도구
CSS 코드가 들어간 나만의 새로운 태그를 정의해서 사용함
ex)

import styled from 'styled-components'

const PinkButton = styled.button`
  background-color: deeppink;
  color: white;
  padding: 10px;
`;

export default function Home() {
  return <PinkButton>버튼1</PinkButton>
}

=> 해당 예시처럼 새로운 태그는 일반 태그와 동일한 느낌으로 사용됨

Tailwind CSS

(테일윈드)

cmd -> npm i tailwindcss @/vite로 설치
CSS 파일을 아예 만들지 않고 리액트가 미리 약속해 둔 수천 개의 클래스 이름들을 가져다 사용함
공식 사이트 : Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
=> 해당 사이트에 약속된 암호들이 적혀있음

=> bg-blue-500 : 배경색을 파란색(500 농도)로 칠함

rounded-xl : 테두리를 아주 둥글둥글하게 만듦

px-2 : 좌우(x축) 안쪽 여백(padding)을 2단계만큼 줌

React - 2

imysydesu — Wed, 15 Jul 2026 14:14:28 +0900

커스텀 훅을 이용한 데이터 페칭

useProducts.js라는 훅에서 데이터를 받아오는 로직을 처리
Products.jsx 컴포넌트에서는 그걸 가져와서 화면에 그려주는(UI) 작업

기존 파일 : Products.jsx(하단 코드)을 활용해 useProducts.js / Products.jsx로 나누기

import React, { useEffect, useState } from "react";

export default function Products() {

const [loading, setLoading] = useState(false)

const [checked, setChecked] = useState(false)

const [error, setError] = useState()

const [products, setProducts] = useState([])

const handleChange = () => setChecked((prev) => !prev)

useEffect(() => {

setLoading(true)

setError(undefined)

fetch(`data/${checked ? "sale_" : ""}products.json`)

.then((res) => res.json())

.then((data) => {

console.log("네트워크에서 데이터를 잘 불러옴")

setProducts(data)

})

.catch((e) => setError("에러가 발생함!"))

.finally(() => setLoading(false))

return () => {

console.log("데이터 처리 완료")

}

}, [checked])

if(loading) return <p>Loading 중...</p>

if(error) return <p>{error}</p>

return (

<label htmlFor="checkbox">세일상품보기</label>

<ul>

{products.map((products) => (

<h3>{products.name}</h3>

<p>{products.price}</p>

</article>

</li>

))}

</ul>

</>

)

}

useProducts.js

import {useState, useEffect} from "react";

//데이터 로직 담당

export default function useProducts({ salesOnly }) {

// useEffect를 가져다 프로덕트훅에 사용

const [loading, setLoading] = useState(false)

// 에러 여부

const [error, setError] = useState()

// 빈배열

const [products, setProducts] = useState([])

useEffect(() => {

// false인 로딩을 true로 바꿈

setLoading(true)

// 에러는 아무것도 들어가있지 않음

setError(undefined)

fetch(`data/${salesOnly ? "sale_" : ""}products.json`)

.then((res) => res.json())

.then((data) => {

console.log("네트워크에서 데이터를 잘 불러옴")

setProducts(data)

})

.catch((e) => setError("에러가 발생함!"))

.finally(() => setLoading(false))

return () => {

console.log("데이터 처리 완료")

}

}, [salesOnly])

return {loading, error, products }

}

Products.jsx

import React, { useState } from "react";

import useProducts from "../src/hooks/useProducts";

// 화면 ui 담당

export default function Products() {

const [checked, setChecked] = useState(false)

const { loading, error, products } = useProducts({ salesOnly: checked })

const handleChange = () => setChecked((prev) => !prev)

// 로딩, 에러 처리

if (loading) return <p>Loading 중...</p>;

if (error) return <p>{error}</p>;

return (

<label htmlFor="checkbox">세일상품보기</label>

<ul>

{products.map((product) => (

<h3>{product.name}</h3>

<p>{product.price}</p>

</article>

</li>

))}

</ul>

</>

)

}

React Developer Tools

리액트를 사용하는지 확인할 수 있는 확장 프로그램
컴포넌트 트리 보기
Props 확인
State 확인
Hooks 확인
Context 확인
컴포넌트가 다시 렌더링되는 이유 분석 가능
- React Developer Tools => 크롬 확장 프로그램 다운
- 리액트를 사용한 사이트와 사용하지 않은 사이트로 볼 수 있음(흑백 : 사용X / 컬러 : 사용O)
- f12 => components, profiler가 새로 생김

Elements 탭 VS Component 탭

	Elements 탭	Component 탭
확인	실제 HTML DOM	React 컴포넌트
주요 내용	CSS, HTML...	Props, State, Hooks...
목적	화면/스타일 분석	React 데이터 흐름 분석

useReducer

상태 변경 종류가 여러 개일 대 상태 변경 규칙을 하나의 함수로 관리하는 Hok 함수
기본 구조:
- const [state, dispatch] = useReducer(reducer, initialState)
- dispatch : 상태 변경 요청을 보내는 함수
- reducer : 상태를 어떤 방식으로 변경할지 정의한 함수
- initialStatev: 처음 사용할 초기 상태

useReducer의 전체 흐름

사용자가 버튼 클릭 -> dispatch 실행 -> action 객체 전달 -> reducer
새로운 상태 반환 -> React가 상태 저장 -> 컴포넌트 재랜더링

useCallback

함수 자체를 기억하는 Hook
React 함수형 컴포넌트는 랜더링 될 때마다 함수 전체가 다시 실행됨
따라서 컴포넌트 내부의 함수도 다시 만들어지게 됨

  function App() {
    const handleAdd = () => {
      console.log("추가")
    }
  }

=> 일때 App이 다시 랜더링되면 새로운 handleAdd 함수 객체가 만들어짐

(이전 handleAdd !== 새로운 handleAdd)

useMemo

값을 감싸는 Hook
계산 비용이 실제로 크고, 랜더링이 자주 발생하는 곳에 사용
함수가 아니라 계산된 결과값을 기억

const 기억된값 = useMemo(() => {
return 계산결과
}, [의존성])

=> [의존성]이 변경될 때 새로 계산되고, 의존성이 바뀌지 않다면 이전 결과를 기억해서 리턴함

React - 1

imysydesu — Tue, 14 Jul 2026 15:06:49 +0900

리액트(React)

UI를 구성하기 위한 자바스크립트 라이브러리
컴포넌트를 기반으로 화면을 효율적으로 재사용/관리할 수 있도록 설계뙨 프론트엔드 기술
전통적인 DOM을 직접 조작하는 대신, 가상 DOM(Virtual DOM)을 통해 변경된 부분만 최소 비용으로 업데이트 함(메모리를 조금 더 사용하긴 함)
SPA개발을 넘어 next.js같은 프레임워크와 함께 SSR/CSR/SSG/ISR 등 다양한 렌더링 전략을 지원하는 기술

SPA(Single Page Application)

하나의 HTML 페이지에서 모든 화면 전환을 처리하는 웹 애플리케이션 방식
기존의 MPA(Multi Page Application)처럼 페이지 이동 때마다 서버에서 HTML을 재요청하지 않고 처음 한 번만 HTML, CSS, JS를 받아오고 이후 화면 전환은 자바스크립트가 브라우저 내부에서 렌더링을 변경해 처리
페이지 이동처럼 보이더라도 실제로는 페이지가 다시 로드되지 않는 구조

리액트의 동작 원리

리액트는 UI를 컴포넌트 단위로 구성함
화면을 버튼, 카드, 리스트처럼 작은 단위의 컴포넌트로 쪼개어 만들고 각 컴퍼넌트가 자신의 상태와 렌더링 방식을 스스로 관리하도록 함으로 재사용성과 유지보수성을 극대화
상태가 바뀌면 새로운 Virtual DOM을 만들고, 이전 Virtual DOM과 비교 후, 이전 렌더링 때 만들어두었던 Virtual DOM과 어디가 어떻게 달라졌는지 계산
변경된 부분만 실제 DOM에 반영하여 렌더링 비용을 최소화 시킴
함수 Hook을 통해 상태 관리와 렌더링 사이클을 제어할 수 있음
함수형 컴퍼넌트에서 상태를 저장하고, 렌더링 시점 전/후에 실행할 로직을 등록할 수 있게 해주며 언제 어떤 조건에서 다시 렌더링해야 하는지 세밀하게 제어함

Vite

차세대 프론트엔드 개발을 위한 초고속 빌드 도구
기존 번들(Webpack 등)보다 훨씬 빠르게 개발 서버를 실행하고 파일 변경을 처리할 수 있는 도구
명령어
- npm create vite@latest 폴더명 -- --template react
- 터미널(cmd) -> 위 명령어 적기 -> Reate 선택 -> JavaScript + Reate Compiler 선택 -> ESLint 선택
- => 새로운 파일 생성됨(node_modules, public, src폴더 / .gitignore, eslint.config.js, index.html, package-lock.json, package.json, README.md, vite.config.js 파일)
- 터미널에 Local: http://사이트가 생성됨. 해당 링크 열면 실행 됨

.jsx

자바스크립트에 HTML 코드를 얹은 파일
자바스크립트 파일 안에서 변수나 함수를 쓰다가 갑자기 <div>같은 HTML코드를 섞어 쓸 수 있게 해줌
자바스크립트와 대부분 유사하지만 조금씩 함수 혹은 내장되어있는 키워드의 이름이 다를 수 있음

Hook 함수

useState

컴퍼넌트 안에서 값을 기억하고 그 값이 바뀌면 화면을 자동으로 다시 그려주는 Reate의 상태 관리 함수
값이 바뀌면 자동으로 화면이 다시 리렌더링 돰
- const [state값, state 바꾸는 함수] = useState(초기값)

useRef

리액트 컴포넌트 안에서 값을 기억해두는 상자
값을 바꿔도 리랜더링이 일어나지 않으며 컴포넌트가 다시 랜더링되어도 상자의 값을 계속 재사용할 수 있음
- const idInput = useRef()
- console.log(ref.current)

useEffect

추가 작업 또는 외부 시스템과의 동기화 작업을 할 때 사용하는 상태 관리 함수
ex)

  useEffect(() => {
    실행할 작업
  }, [의존성])   // [의존성] 바뀌면 Effect 다시 실행

  useEffect(() => {
    바뀔 작업
    return() => {
      바뀌기 전 데이터를 반환(이전 작업을 정리할 함수)
    }
  }, [의존성])

컴포넌트 함수 실행
jsx 생성 -> 컴포넌트가 처음 화면에 나타날 때(초기 mount)
userEffect 실행 -> user 설정: user값
user값이 변경되었을 때(useEffect 재실행)
컴포넌트가 화면에서 완전히 사라질 때(Unmount, userEffect 재실행)

메모 앱 만들기 - frontend

imysydesu — Tue, 7 Jul 2026 19:21:16 +0900

순서

1. 백엔드로 만들었던 js 파일 연결

2. html 생성

3. js 생성

4. css 생성

백엔드로 만들었던 js 파일 연결

- 기존 백엔드 js파일에 작성

const path = require("path")

app.use(express.static(path.join(__dirname, "public")))

차례대로

Node.js 내장 모듈인 path를 가져옴 => 파일 경로를 안전하게 만들어주는 역할
public : 연결할 프론트의 파일들이 담긴 폴더 이름
static : public 폴더 안에 있는 파일들은 브라우저가 직접 접근할 수 있게 해줌
path.join : 폴더/파일 경로 만들어주는 함수
__dirname : 현재 실행 중인 js파일(백엔드 파일)이 있는 폴더의 절대 경로

html 생성

- public 폴더 안에 들어있는 .html 파일 (파일명: index.html)

<!DOCTYPE html>

<head>

</head>

<body>

</div>

</div>

</body>

</html>

<link rel="stylesheet" href="./style.css"> : 이후 생성할 css 파일과 연결 (파일명 : style.css)
<script src="./app.js"></script> : 이후 생성할 .js 파일과 연결 (파일명: app.js)

js 생성

const memoInput = document.getElementById("memoInput")

const addBtn = document.getElementById("addBtn")

const memoList = document.getElementById("memoList")

html파일에서 만든 id 가져오기

메모 출력 기능(화면에 보여주는)

function renderMemos(memos) {

memoList.innerHTML = ""

memos.forEach((memo) => {

const li = document.createElement("li") // <li></li>

li.className = "memo-item" // <li class="memo-item"></li>

li.innerHTML = `

</div>

memoList.appendChild(li)

})

}

renderMemos(memos) : 받은 메모 배열을 HTML로 만들어 화면에 보여주는 함수
memoList.innerHTML = "" : 기존 메모 목록 초기화 (새로운 데이터를 다시 그리기 위해)
memos.forEach((memo) : 메모 개수만큼 반복한다는 의미
li.innerHTML = `` : 내부 HTML 작성 -> 수정 버튼, 삭제 버튼
memoList.appendChild(li) : 만든 li를 ul안에 넣음(memoList에 연결)

메모 불러오기

// 메모 불러오기

async function loadMemos() {

try {

const response = await fetch("/memos")

const data = await response.json()

renderMemos(data.memos)

}catch(error){

console.log("메모 조회 실패: ", error)

}

fetch("/memos") : 벡엔드 서버에 요청을 보냄 => 백엔드의 get 호출
response.json() : 서버가 보내주는 응답 데이터를 저장하는 변수 response을 자바스크립트 객체로 변환하는 코드
renderMemos(data.memos) : 가져온 메모 데이터를 화면에 표시하는 함수 호출

메모 추가하기

// 메모 추가하기

addBtn.addEventListener("click", async() => {

const text = memoInput.value.trim()

if(!text) {

alert("메모를 입력하세요")

return

}

try {

const response = await fetch("/memo", {

method: "POST",

headers: {

"Content-Type": "application/json"

body: JSON.stringify({text})

})

const data = await response.json()

memoInput.value = ""

renderMemos(data.memos)

}catch (error) {

console.log("메모 추가 실패", error)

}

})

addBtn : html 파일에서 만든 버튼
addBtn.addEventListener("click" : addBtn을 클릭했을 때 이벤트가 실행되는 코드
const response = await fetch("/memo" : 백엔드 js 파일의 post로 요청 보냄
method: "POST" : 요청 방식 지정. 기본 fetch는 GET이기 때문에 POST로 지정
headers : {"Content-Type": "application/json"} : 보내는 데이터 형식이 JSON 형식이라는 표시
body: JSON.stringify({text}) : 실제 데이터를 보냄
stringify() : 객체나 배열을 JSON 형태의 문자열로 변환하는 함수
renderMemos(data.memos) : 새로운 메모 목록 화면 출력

메모 삭제하기

// 메모 삭제

async function deleteMemo(id) {

const check = confirm("정말 삭제하시겠습니까?") // confirm 예, 아니오를 띄움

//console.log(check)

//console.log(id)

if(!check) return

try {

const response = await fetch(`/memos/${id}`, {

method: "DELETE"

})

const data = await response.json()

renderMemos(data.memos)

}catch(error){

console.log("메모 삭제 실패: ", error)

}

confirm : 예 아니오를 띄움, 삭제 버튼을 누를 시 보여짐
fetch(`/memos/${id}` : 백엔드의 delete 호출
method: "DELETE" : 요청 방식 지정. delete로 설정
renderMemos(data.memos) : 삭제 후의 새로운 메모 목록을 화면에 출력함

메모 수정하기

// 메모 수정

async function editMemo(id) {

const newText = prompt("수정할 내용을 입력하세요")

//console.log(newText)

//console.log(id)

if(!newText || newText.trim() === "") return

try {

const response = await fetch(`/memos/${id}`, {

method: "PUT",

headers: {

"Content-Type": "application/json"

body: JSON.stringify({text : newText})

})

loadMemos()

} catch (error) {

console.log("메모 수정 실패: ", error)

}

prompt : 수정할 내용을 입력받음(잘 사용하지 않음)
fetch(`/memos/${id}` : 백엔드의 put 호출
method: "PUT" : 요청 방식 지정. PUT 설정
body: JSON.stringify({text:newText}) : 수정할 내용을 JSON으로 변환해서 보냄
({text: newText})인 이유 : 객체를 만들어서 보내는데 이때 객체는 키:값 형태로 만듦
loadMemos() : 전체 메모 출력하는 함수 -> renderMemo 사용 시 수정된 부분만 출력됨

css 생성

body {

font-family: Arial, sans-serif;

background-color: #f4f4f4;

padding: 40px;

}

.container {

max-width: 600px;

margin: auto;

background: white;

padding: 20px;

border-radius: 10px;

}

h1 {

text-align: center;

}

.input-area {

display: flex;

gap: 10px;

margin-bottom: 20px;

}

.input-area input {

flex: 1;

padding: 10px;

font-size: 16px;

}

.input-area button {

padding: 10px 20px;

cursor: pointer;

}

#memoList {

list-style: none;

padding: 0;

}

.memo-item {

display: flex;

justify-content: space-between;

align-items: center;

background: #eee;

padding: 10px;

margin-bottom: 10px;

border-radius: 5px;

}

.memo-buttons {

display: flex;

gap: 5px;

}

.memo-buttons button {

cursor: pointer;

}

async : 비동기 작업을 위한 선언 키워드
await : 비동기 시 사용 가능. 비동기 작업이 끝날 때까지 기다리는 키워드

메모 앱 만들기 - backend

imysydesu — Tue, 7 Jul 2026 18:30:12 +0900

순서

필요한 모듈 불러오기
Express 서버 기본 설정
MongoDB 연결 준비
서버 시작 함수
메모 조회 API
메모 추가 API
메모 수정 API
메모 삭제 API

필요한 모듈 불러오기

const express = require("express")

const path = require("path")

const { MongoClient, ObjectId, ReturnDocument } = require("mongodb")

express : 서버를 쉽게 만들게 해주는 라이브러리, app.get() app.post() 등 사용 가능
path : 파일 경로를 다룰 때 사용
MongoClient : MongoDB에 연결하는 객체를 만들 때 사용
ObjectId : _id값을 다룰 때 사용

Express 서버 기본 설정

const app = express()

const PORT = 3000

app.use(express.json())

app.use(express.static(path.join(__dirname, "public")))

차례대로

Express 서버 객체 생성, 앞으로 모든 API를 이 app에 붙여서 사용
포트 번호 정하기. 서버를 3000 포트에서 실행하겠다는 의미
클라이언트가 제이슨 형식으로 보낸 데이터를 읽을 수 있게 해줌
public 폴더 안의 html/css/js 파일을 브라우저에서 접근 가능하게 함 -> 프론트와 연결하기 위함

MongoDB 연결 준비

const url = "mongodb+srv://ysy:Q98RsUCtfPH1Enjq@cluster0.smoslc0.mongodb.net/"

const client = new MongoClient(url)

const dbName = "memo"

let memoCollection

차례대로

MongoDB Atlas 접속 주소, 어떤 계정에 연결할지 적어둔 것(이 주소를 통해 실행 가능)
MongoDB와 연결할 준비 객체 생성, 실제 연결은 따로 해야함
사용할 DB 이름(memo) 지정
컬렉션 변수, memos 컬렉션을 담아둘 변수. DB 연결 후 실제 값이 들어감

서버 시작 함수

async function startServer() {

try {

await client.connect()

console.log("MongoDB 연결 성공!!")

const db = client.db(dbName)

memoCollection = db.collection("memos")

app.listen(PORT, () => {

console.log("서버 실행 중...")

})

} catch (error) {

console.log("MongoDB 연결 실패: ", error)

}

startServer()

MongoDB에 실제로 연결하는 함수를 만들고, 컬렉션을 가져오고, 서버를 실행하는 기능

await client.connect()로 MongoDB와 연결
const db = client.db(dbname) : memo 데이터베이스 가져오기
memoCollection = db.collection("memos") : memo컬렉션 연결
app.listen(PORT, () => {console.log("서버 실행 중..."} : 서버 실행
startSever()로 서버 실행 기능을 가진 함수 실행

메모 조회 API

app.get("/memos", async(req, res) => {

try {

const { keyword } = req.query

let filter = {}

if(keyword && keyword.trim() !== "") {

filter = {

text: { $regex: keyword.trim(), $options: "i" }

}

const memos = await memoCollection.find(filter).sort({ createdAt: -1 }).toArray()

res.json({

success: true,

count: memos.length,

memos

})

}catch(error) {

console.log("메모 조회 오류: ", error)

res.status(500).json({

success: false,

message: "메모 조회 중 오류가 발생!"

})

}

})

조회 : get
const {keyword} = req.query : url의 쿼리 문자열에서 keyword 값을 꺼냄
let filter = {} : 빈 객체이기 때문에 전체 조회를 의미
키워드가 있고 공백만 있는 키워드가 아닌지 확인 => 진짜 존재하는 키워드라면 filter에 검색 조건 삽입
$regex : 정규식 검색
$options: "i" : 대소문자 구분 없이 검색
=> filter에는 키워드의 앞뒤 공백을 제거하고 대소문자 구분 없이 검색해 조건에 맞는 것들을 넣음
memoCollecrion.find(filter) : filter 조건에 맞는 것들만 검색. {}라면 전체 조회
json 형태로 값을 보내는데 성공 여부, 검색된 메모의 수, 메모 목록을 보냄
실패했다면 catch(error)로 가 오류 코드 발생

메모 추가 API

app.post("/memo", async(req, res) => {

try {

// { text: "메모값" }

const { text } = req.body

if(!text || text.trim() === "") {

return res.status(400).json({

success: false,

message: "메모 내용을 입력해주세요"

})

}

const newMemo = {

text: text.trim(),

createdAt: new Date()

}

await memoCollection.insertOne(newMemo)

const memos = await memoCollection.find().sort({ createdAt: -1 }).toArray()

res.status(201).json({

success: true,

message: "메모가 추가되었습니다.",

memos

})

} catch (error) {

console.log("메모 저장 오류: ", error)

res.status(500).json({

success: false,

message: "서버 오류가 발생!!"

})

}

})

추가 : post
text를 req.body에서 꺼냄
메모 내용이 없거나 공백만 있으면 오류 반환
새 메모 객체를 만들고 앞뒤 공백을 제거한 텍스트와 새 날짜를 저장
await memoCollection.insterOne(newMemo) : MongoDB에 실제로 새 메모 객체 저장
저장 후 메모 목록을 최신순으로 다시 가져옴

메모 수정 API

app.put("/memos/:id", async (req, res) => {

try{

const { id } = req.params

const { text } = req.body

// id가 MongoDB ObjectId 형식인지 검사하고 아니면 400에러를 반환

if(!ObjectId.isValid(id)) {

return res.status(400).json({

success: false,

message: "올바르지 않은 메모 id 형식!!"

})

}

if(!text || text.trim() === "") {

return res.status(400).json({

success: false,

message: "변경할 메모 내용을 입력해주세요"

})

}

const result = await memoCollection.findOneAndUpdate(

{ _id: new ObjectId(id) },

{

$set: {

text: text.trim(),

updatedAt: new Date()

}

{

returnDocument: "after"

}

)

if(!result) {

return res.status(404).json({

success: false,

message: "해당 id의 메모를 찾을 수 없습니다"

})

}

res.json({

success: true,

message: "메모가 수정되었습니다. (PUT)",

memo: result

})

}catch(error){

console.log("메모 수정 오류(PUT): ", error)

return res.status(500).json({

success: false,

message: "메모 수정 중 오류가 발생!!"

})

}

})

수정 : PUT
:id : 수정할 메모의 id
const {text} = req.body : 요청 body에서 수정할 새 메모 내용 text를 꺼냄
(!text || text.trim() ==="") : 수정할 내용이 비어있거나 공백인지 검사
const result = await memoCollection.findOneAndUpdate : MongoDB에서 메모 하나를 찾아 수정하고 그 결과를 result에 저장
{ _id: new ObjectId(id) } : 수정할 메모를 찾는 조건. _id가 전달받은 id와 같은 문서를 찾고 ObjectId로 바꿔서 비교
이후 메모를 새 값으로 바꾸고 앞뒤 공백 제거, 수정된 시간을 updateAt : new Date()로 저장
returnDocument: "after" : 수정 후의 문서를 반환. 수정 완료된 메모 내용을 result로 받음

메모 삭제 API

app.delete("/memos/:id", async (req, res) => {

try {

const { id } = req.params

// ObjectId 형식 검사

if (!ObjectId.isValid(id)) {

return res.status(400).json({

success: false,

message: "id가 올바르지 않습니다."

})

}

// 삭제

const result = await memoCollection.deleteOne({

_id: new ObjectId(id)

})

if (result.deletedCount === 0) {

return res.status(404).json({

success: false,

message: "삭제할 수 있는 id가 없습니다."

})

}

// 삭제 후 전체 목록 조회

const memos = await memoCollection.find().sort({createdAt: -1}).toArray()

return res.json({

success: true,

message: "삭제 완료",

count: memos.length,

memos

})

} catch (error) {

console.log("삭제 오류:", error)

return res.status(500).json({

success: false,

message: "삭제 오류"

})

}

})

삭제 : DELETE
const { id } = req.params : URL 파라미터에서 삭제할 메모의 id를 꺼냄
if (!ObjectId.isValid(id)) : id가 MongoDB Objectid 형식인지 검사.
isValid : 어떤 값이 조건에 맞는지 확인하고 t/f로 반환하는 함수
const result = await memoCollection.deleteOne : 메모 1개를 삭제한 결과를 result에 저장
(result.deletedCount === 0) : 삭제된 문서 수가 0개인지 검사
const memos = await memoCollection.find().sort({createdAt: -1}).toArray() : 삭제 후 남은 메모 목록을 최신순으로 정렬해 하고 배열 형태로 가져옴

MongoDB

imysydesu — Mon, 6 Jul 2026 13:55:51 +0900

1 . MongoDB

MySQL 데이터베이스 시스템 중 하나
문서 지향 데이터베이스
관계형 데이터베이스와는 다르게 데이터를 테이블이 아니라 JSON 스타일의 BSON(Binary JSON) 형식의 문서로 저장
개발자가 유연하게 데이터를 저장하고 쿼리할 수 있도록 만들어짐
대규모 분산 데이터 환경에서도 잘 작동함
스키마가 없다는 특징을 가지고있음

=> ex)

{"no": 1, "userid":"apple", "userpw":"1111"}
{"no": 2, "userid":"banana", "userpw":"2222", "email":"banana@banana.com"}
{"userid":"오렌지", "hp":"010-1111-1111", }

위 세 개의 문서 중 어떤 걸 넣더라도 오류가 발생하지 않음

-> 스키마가 정해져있지 않기 때문

문서 지향 데이터베이스

데이터를 BSON 형식의 문서로 저장
키-값 쌍으로 이루어져있어 여러 종류의 데이터 유형을 포함할 수 있음

ObjectId

문서를 삽입하면 본인이 집어넣은 키-값 외에 _id: ObjectId('')가 생성됨
'' 안에 들어가는 영어와 숫자는 각 문서의 12바이트(24자리 16진수) 고유한 ID로 사용되는 데이터 타입임
SQL의 기본키와 비슷한 역할을 함
각 문서에 _id 필드를 기본적으로 생성하며 특별히 지정하지 않으면 자동으로 ObjectId 형태로 생성 됨

데이터베이스 선택 및 생성

use("데이터베이스명")
use는 사용한다는 의미이지만 Mongodb에서 use를 사용하면 데이터베이스 생성을 따로 할 필요 없이 새로 만들어서 사용해줌
사용 중 데이버베이스명에 오타가 난다면 또 새로운 데이터베이스를 생성하므로 주의가 필요함

insert

inserOne() : 문서를 1개만 넣는 메서드
insertMany() : 여러 문서를 배열로 저장해서 넣는 메서드

find()

문서를 조회하는 기본 메서드(전체 조회)
{} 는 조건이 없다는 뜻

=> db.컬렉션명.find({}) : 해당 컬렉션 전체 조회

Node.js - 2

imysydesu — Mon, 29 Jun 2026 15:56:19 +0900

1 . 게시물 작성

=> 어떤 순서대로 작성했는지 생각하기

기본으로 작성하는 내용

1 - 1 . 게시물 저장

ejs 파일

js 파일

=> 위에서 data 폴더에 posts.txt 파일을 만들어 저장한다 선언했으므로 해당 파일이 생성됨

=> 경로는 /posts이므로 접속 경로는 127.0.0.1:3000/posts임

=> 내용은(body) title과 content로 두 가지임 appendFile을 통해 기존 파일의 끝에 내용을 추가하며 리스트를 생성해냄

=> redirect() : 페이지를 이동 시킴, get으로만 가능

- 내용(title, content)을 추가할 때 오류가 나지 않았으면 /posts 경로로 페이지 이동

1 - 2 . 게시물 리스트

=> 게시물 저장에서 만든 내용들을 가지고 리스트를 생성

=> readFile()을 사용해 리스트를 읽어줌

1 - 3 . 게시물 작성

ejs 파일

js 파일

=> get만 사용 가능

마지막에 실행

2 . json요청

Express에서 JSON 데이터를 처리하는 흐름
클라이언트(요청) -> Express 서버 -> JSON 파싱 -> req.body로 접근 -> 로직 처리 -> JSON 응답

미들웨어 등록

post로 json 데이터 받기

json 응답 보내는 방법

유효성 검사

API 주소(URL) 구성 원칙

API 주소 : 단순한 경로가 아니라 리소스를 표현하는 구조적인 설계 요소
RESTful 설계 원칙에 따라 구성하는 것이 가장 일반적

/api/버전/리소스

api : API임을 명시
v1 : 버전 관리
users : 리소스(자원), 명사로 작성

RESTful (Representational State Transfer)

url과 http 메서드를 이용해 자원을 직관적이고 일관성 있게 설계하는 웹 api 방식

http 메서드
- GET : 조회
- POST : 생성
- PUT : 수정(put : 전체 수정, patch : 부분 수정)
- DELETE : 삭제

2 - 1 . 생성

2 - 2 . 조회

2 - 3 . 전체 수정

2 - 4 . 부분 수정

2 - 5 . 삭제

3 . 모듈

자바스크립트 모듈은 코드의 재사용성과 유지보수성을 높이기 위해 기능을 개별 파일로 분리하여 사용할 수 있도록 해주는 구조

CommonJS 방식의 모듈

ES6 방식의 모듈

4 . 라우팅

라우트

웹 애플리케이션에서 클라이언트가 요청한 URL 경로와 HTTP 메서드에 따라 서버가 어떤 동작을 수행할지를 정의하는 규칙

=> mjs 파일로 생성 : import 사용 가능

status

서버가 요청 결과를 어떤 상태로 처리했는지 알려주는 번호

1xx : 요청 처리 중 (잘 사용하지 않음)
2xx : 성공
- 200 : 요청 성공
- 201 : 데이터 생성 성공(수정 등)
3xx : 다른 주소로 이동
- 301 : 주소 변경
- 302 : 임시로 변경
4xx : 사용자 요청에 문제 발생
- 401 : 로그인 필요
- 403 : 접근 금지
- 404 : 페이지 없음
5xx : 서버 문제
- 500 : 서버 오류

5 . 라우트 활용(ES6 활용)

5 - 1 . mjs 파일 생성 (/routes/user.mjs)

5 - 2 . user.mjs 파일을 가져올 새 파일 생성

Node.js - 1

imysydesu — Fri, 26 Jun 2026 16:09:55 +0900

1 . 이론 정리

Node.js

브라우저 밖에서도 자바스크립트를 실행할 수 있도록 만든 서버 즉 자바스크립트 실행 환경
구글의 V8 엔진을 기반으로 동작함
웹 서버, API 서버, 실시간 채팅, 스트리밍 서비스 등 활용
npm (Node Package Manager)을 통해 수많은 오픈 소스 패키지를 쉽게 사용할 수 있어 빠른 개발이 가능함
프론트엔트와 동일한 언어(JavaScript)를 사용한다는 점에서 풀스택 개발에 매우 유리한 환경

프론트엔드, 백엔드 역할 차이

프론트엔드는 사용자가 직접 보고 상호작용하는 화면(UI)을 구현하는 영역
HTML/CSS.JavaScript를 사용해 버튼, 입력창, 화면 레이아웃, 애니메이션 등 사용자 경험을 담당
백엔드는 사용자의 요청을 받아 데이터를 처리하고 데이터베이스와 연결하여 저장/조회/수정/삭제 등의 로직을 수행하는 서버 측 영역

node.js 다운

node.js공식 사이트 : nodejs.org/ko버전 :
Latest LTS(안정성), Latest Release(최신 버전)

=> LTS로 다운(.msl) => 다 next 누르고 설치

설치 확인 여부 -> 터미널(파워쉘) -> node -v

패키지 매니저

Node.js 환경에서 필요한 라이브러리(패키지)를 설치, 관리, 업데이트할 수 있게 도와주는 도구
npm (Node Package Manager): node.js 설치 시 자동으로 같이 설치됨

Package.json

Node.js 프로젝트의 정보를 담고 있는 핵심 파일
패키지에 대한 설명서(프로젝트 이름, 버전, 필요한 패키지 목록, 실행 스크립트 등 다양한 정보를 담고 있음)

Package.json 만드는 법

터미널(cmd) -> npm init -> 패키지 이름 작성(엔터 칠 경우 파일 이름으로 설정됨)
생성된 파일 내용
{
  "name": "7_nodejs", : 프로젝트 이름(소문자로 작성, 공백 불가)
  "version": "1.0.0", : 프로젝트 버전
  "description": "", : 프로젝트 설명
  "license": "ISC",   : 사용하는 라이선스
  "author": "",       : 만든 사람 이름
  "type": "commonjs", : 프로젝트 방식
  "main": "index.js", : 진입점 파일
  "scripts": {        : 터미널에서 사용할 실행 명령어(ex: npm start, npm run dev)
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

웹 서버

사용자의 브라우저 요청을 받아 웹 페이지, 이미지, CSS, JavaScript 같은 파일을 전달해 주는 서버 프로그램 또는 시스템
사용자가 주소(URL)를 입력하면 웹서버는 해당 요청을 처리하고 필요한 파일이나 데이터를 응답으로 보내며 이 과정을 통해 브라우저에 웹사이트 화면이 표시됨

모듈

프로그램을 기능별로 나누어 독립적인 파일이나 단위로 구성한 것으로 코드의 재사용성과 유지보수를 쉽게 해주는 구조
특정 기능(계산, 인증, 데이터 처리 등)을 하나의 파일로 분리해 두면 다른 파일에서 필요할 때 불러와 사용할 수 있음
require() 또는 import를 통해 모듈을 가져올 수 있음

CommomJS vs ES6 모듈 차이

CommomJS
- node.js 기본 방식
- 모듈 가져오기 : require('파일')
- 모듈 내보내기 : module.exports 또는 exports.이름
- 확장자 : js
ES6
- ES6를 지원하는 브라우저 또는 nodejs 환경
- 모듈 가져오기 : import (이름) from '파일명'
- 모듈 내보내기 : export, export default
- 확장자 : .mjs

터미널(cmd)에서 .js 파일 실행시키기 : node 파일명
실행 중지 : Ctrl + C

2. http 모듈

웹 서버를 만들 수 있게 해주는 핵심 내장 모듈
클라이언트의 요청을 받고 응답을 반환하는 기능을 제공

Content-Type

서버가 브라우저에게 "지금 보내는 데이터의 형식이 무엇인지 알려주는 HTTP 헤더"
브라우저는 이 값을 보고 데이터를 어떻게 해석할지 결정

Content-Type 종류

text/html : html 문서
text/plain : 일반 텍스트
application/json : json 데이터
text/css : css파일
application/javascript : JavaScript 파일
image/png : PNG 이미지
image/jpeg : JPG 이미지
multipart/form-data : 파일 업로드

Header

인터넷에서 데이터를 주고받을 때 본문(내용)보다 먼저 전달되는 추가 정보 영역
"이 데이터가 무엇인지, 어떻게 처리해야 하는지"를 설명해 주는 안내문과 같음
브라우저가 서버에 요청을 보낼 때는 어떤 형식을 원하는지 로그인 정보가 있는지 같은 정보를 헤어에 담고 서버는 응답할 때 데이터 형식이 무엇인지 캐시 여부는 어떤지 등의 정보를 헤더에 담아 전달

3 . 요청 응답

3 - 1 . 경로 설정

HTTP 모듈에서 경로 설정(라우팅)은 사용자의 요청 주소를 나타내는 req.url과 요청 방식인 req.method를 확인하여 조건문으로 분기 처리하는 방식으로 이루어짐

3 - 2 . GET과 POST

GET
- 서버로부터 데이터를 조회할 때 사용하는 요청 방식
- 주로 게시글 목록 보기, 검색 결과 조회, 상세 페이지 열기처럼 데이터를 가져오는 데 사용
- GET 요청은 필요한 값을 URL 뒤에 ?key=value 형태의 쿼리 문자열로 함께 전달하며 주소창에 그대로 표시됨
- 요청이 POST에 비해 속도가 빠름
- URL를 입력해 실행 확인

POST
- 서버에 데이터를 전송해서 새로운 데이터를 생성하거나 기존 데이터를 변경할 때 사용하는 요청 방식
- 주로 회원가입, 로그인, 글 작성, 파일 업로드 등에 사용
- POST 요청은 데이터를 URL이 아니라 요청 본문(body)에 담아 보내기 때문에 주소창에 내용이 보이지 않음
- GET보다 보안성이 조금 더 높고 전송할 수 있는 데이터 양에도 제한이 거의 없음
- 폼과 폼을 통해 데이터를 보냄

3 - 3 . 쿼리 문자열

URL 뒤에 ?기호를 기준으로 붙는 추가 데이터 전달 방식
서버에 필요한 값을 함께 보내기 위해 사용
key=value 형태로 작성, 여러 개의 값을 보낼 때는 & 기호로 연결 (?name=김사과&age=20)
주로 GET 요청에서 사용되며 검색조건, 페이지 번호, 필터 값 등을 전달할 때 사용

3 - 4 . JSON

자바스크립트 객체 표기법을 기반으로 한 데이터 교환 형식
일반적으로는 서버와 클라이언트 간에 데이터를 주고받을 때 사용
구조는 키-값 쌍으로 이루어진 객체 형태나 배열 형태를 사용

3 - 5 . Code Runner

Extensions에서 다운
코드 러너 실행 : Ctrl + Alt + n
vs code에서 코드를 바로 실행시켜 주는 확장 프로그램

3 - 6 . nodemon

node.js 개발 시 자주 사용하는 유틸리티
Extensions에서 다운
소스 코드가 변경될 때마다 자동으로 서버를 재시작해주는 도구(저장+기존 실행 코드 종료
코드 실행 : npm run dev

nodemon 다운 시 버전
- npm install -g nodemon : 모든 프로젝트에서 사용 가능하나 권장하지 않음
- npm install --save-dev nodemon : 해당 프로젝트에서만 사용

기존에 있던 package.json 파일에 코드 추가

=> 11줄부터 15줄까지 작성

=> "dev" : "nodemon 파일명"

4 . 파일 입출력

fs(File System) 모듈을 사용해서 파일을 읽고 쓰는 작업 수행

파일 입출력 종류
- 동기 : try ~ catch문을 사용해 에러 처리를 해줘야 함
- 비동기 : 기본적으로 에러 처리가 되어있음, 비동기이기 때문에 출력(결과) 순서가 달라질 수도 있음

먼저 작성 : const fs = require("fs")

동기 방식으로 파일 읽기, 파일 쓰기

=> Sync가 들어가면 동기 방식

비동기 방식으로 파일 읽기, 파일 쓰기

=> 비동기 방식은 콜백 함수 사용

비동기 방식으로 파일에 내용 추가

비동기 방식으로 파일 삭제

5 . express

node.js 환경에서 가장 널리 사용되는 웹 애플리케이션 프레임워크
서버를 쉽고 빠르게 구축할 수 있도록 다양한 기능을 제공
기본적인 HTTP 모듈보다 훨씬 간단하게 라우팅 처리, 요청/응답 객체 관리, 미들웨어 설정, 정적 파일 제공, 템플릿 엔진 연결 등을 할 수 있어 개발 생산성을 크게 높여줌

설치 : npm install express
npm i express

const express = require("express")

=> 파이썬의 import와 같은 원리(express를 사용하기 위해 가져오는 코드)

const app = express()

=> 변수를 지정해 express 서버(객체)를 만들어줌

5 - 1 . 라우팅

클라이언트가 어떤 URL과 HTTP 메서드(GET, POST)로 요청을 보냈을 때 그 요청을 어떤 코드가 처리할지 연결해 주는 규칙

app.get("주소", (req, res) => { });

=> 라우터 기본 설정

5 - 2 . 미들웨어

요청(request)과 응답(response) 사이에서 중간에 실행되는 함수
클라이언트의 요청을 직접 처리하기보다는 가공/검사/추가 작업을 담당하는 역할을 함
요청 로그를 남기거나 JSON 데이터를 파싱 하거나 로그인 여부를 검사하거나 에러를 처리하는 기능들이 모두 미들웨어

정적 파일 미들웨어 등록

=> app.use(express.static("정적파일명"));

post 미들웨어 등록

=>app.use(express.urlencoded({extended: true})

5 - 3 . 정적파일

서버에서 별도의 처리 없이 그대로 클라이언트에게 전달되는 파일
CSS, HTML, JavaScript, 이미지, 폰트 파일 등이 대표적임
사용자의 요청이 들어오면 서버는 내용을 가공하지 않고 저장된 그대로 응답

5 - 4 . EJS

EJS(Embedded JavaScript)는 HTML 안에 JavaScript 코드를 삽입해 서버 데이터를 동적으로 렌더링 할 수 있게 해주는 node.js용 템플릿 엔진
<%=%>, <% %> 안에서 로직을 작성하여 사용
EJS 다운 : npm i ejs

값 출력

=> <h1><%=username%></h1>

조건문

반복문

forEach를 사용한 반복문

const path = require("path")

=> 파일 경로를 다루는 기능

app.set(설정이름, 설정값);

=> EJS 기본 설정

app.set("view engine", "ejs");

=> express에서 정해놓은 설정 이름 : view engine

=> html을 자동으로 만들어주는 템플릿 엔진

app.set("views", path.join(__dirname, "폴더명"));

=> views : express가 미리 정해둔 설정 이름(템플릿 파일)

=> __dirname : 현재 이 js 파일이 있는 폴더의 전체 경로

=> path.join : 안전하게 경로를 합쳐주는 함수

5 - 5 . 템플릿 엔진

HTML과 데이터를 결합해 동적인 화면을 만들어주는 도구
서버에서 전달한 값을 HTML 안에 삽입해 최종 페이지를 생성하며 반복문/조건문 같은 로직도 템플릿 내부에서 처리할 수 있음

셀레니움

imysydesu — Thu, 25 Jun 2026 14:10:17 +0900

1 . 셀레니움(Selenium)

파이썬 코드로 실제 웹 브라우저(Chrome, Edge 등)를 자동으로 제어할 수 있게 해주는 웹 자동화 라이브러리
일반적인 requests 크롤링은 서버에서 받은 HTML만 분석
Selenium은 브라우저를 직접 실행하여 버튼 클릭, 검색 입력, 스크롤, 로그인 등의 사용자 동작을 그대로 수행
JavaScript로 동적으로 생성되는 데이터까지 가져올 수 있음
따라서 멜론, 유튜브, 쇼핑몰처럼 JavaScript 렌더링이 많은 사이트의 크롤링이나 웹 자동화 테스트에서 많이 사용
보통 webdriver.Chrome()으로 브라우저를 실행하고 find_element()로 요소를 찾으며 click(), send_keys() 등을 통해 자동화 작업을 수행

파일 설치 : 터미널(cmd) -> pip install selenium 실행 ->python -m pip install selenium 실행

1 - 1. 셀레니움 예제

html 파일 코드

위 html 코드를 ipynb로 실행

=> time.sleep() : 프로그램 실행을 ()초 동안 멈추는 함수

셀레니움에서 주로 페이지가 로딩되거나 자바스크립트가 실행될 시간을 기다릴 때 사용

=> driver.quit() : 셀레니움이 실행한 브라우저 전체 종료 (세션 완전 종료)

find_elements()

셀레니움에서 HTML요소를 여러 개 찾을 때 사용하는 메서드
조건에 맞는 요소들을 리스트 형태로 모두 반환
여러 개의 이미지, 게시글, 테이블 행 등을 반복해서 크롤링할 때 자주 사용
다양한 선택자를 통해 찾음(By.ID, By.CLASS_NAME, By.CSS, By.XPATH 등)
리스트로 반환하기 때문에 for문으로 반복 처리하는 경우가 많음
요소를 찾지 못해도 빈 리스트 반환(오류 X)
반복 크롤링에서 안정적

find_element()

find_elements()와 비슷
조건에 맞는 하나의 요소만 찾음
요소를 찾지 못하면 에러 발생

1 - 2 . 멜론 아티스트 곡 리스트 크롤링

import 해주기

import time : 파이썬 기본 시간 관련 모듈, 주로 대기 용도로 사용
webdriver : 브라우저를 실제로 실행하는 핵심 객체
By : 요소 찾는 방법을 지정할 때 사용
keys : 키보드 입력을 자동화(엔터, 탭 등 키 입력 가능)
Options : 크롬 실행 설정 변경(창 없이 실행 등)
WebDriverWait : 특정 조건이 만족될 때까지 기다림
expected_conditions as EC : 무엇을 기다릴지, 조건 작성 (WebDriverWait와 같이 사용)

함수 작성

def melon_search_from_main(keyword): 멜론에서 keyword를 입력받아 검색을 자동으로 수행하는 함수

options.add_argument("--start-maximized") : 브라우저 창을 전체화면(최대화) 상태로 실행

-> 반응형 UI가 화면 크기에 따라 다른 태그를 사용하는 경우가 있어 요소 위치가 달라질 수 있음

wait = WebDriverWait(driver, 10) : 최대 10초 대기, 조건 만족 시 10초가 되기 전에 실행

-> time.sleep()은 조건 만족 시에도 지정한 시간 대기

until() : () 조건이 만족될 때까지 대기

presence_of_element_located : 요소가 DOM에 존재하기만 하면 됨(화면에 안 보여도 되고 클릭 여부도 상관없음)

search_box.clear() : 검색창에 있는 기존 입력값 삭제(초기화)

send_keys(keyword) : 검색어 입력

send_keys(Keys.ENTER) : 엔터키로 검색 실행

element_to_be_clickable : 클릭 가능한 상태가 될 때까지 대기

XPATH : 셀레니움에서 요소 찾는 방법 중 하나, HTML 경로로 찾기

-> XPATH 찾는 법 : 원하는 페이지 -> 개발자모드(f12) -> 요소 우클릭 -> 검사 -> 코드 우클릭 -> copy -> copy XPATH

XPATH

XML 또는 HTML 문서 내에서 특정 요소나 속성을 선택하기 위해 사용되는 경로 표현 언어
웹 크롤링이나 자동화 도구에서 주로 사용
요소를 효율적으로 찾을 수 있도록 도와줌
일반적인 XPath는 특정 위치나 속성을 기준으로 요소를 선택하는 상대적인 경로를 사용
full xpath는 루트 요소에서 시작하여 대상 요소까지의 절대적인 경로를 나타냄
절대경로이기 때문에 문서 구조가 변경되면 경로가 깨질 가능성이 높음

2 . 멜론 아티스트 곡 리스트 크롤링

import time

import pandas as pd

from selenium import webdriver

from selenium.webdriver.common.by import By

from selenium.webdriver.common.keys import Keys

from selenium.webdriver.chrome.options import Options

from selenium.webdriver.support.ui import WebDriverWait

from selenium.webdriver.support import expected_conditions as EC

def melon_search_from_main(keyword):

options = Options()

options.add_argument("--start-maximized")

driver = webdriver.Chrome(options=options)

wait = WebDriverWait(driver, 10)

data = []

try:

driver.get("https://www.melon.com/")

time.sleep(2)

search_box = wait.until(

EC.presence_of_element_located((By.ID, "top_search"))

)

search_box.clear()

search_box.send_keys(keyword)

search_box.send_keys(Keys.ENTER)

time.sleep(3)

song_tab = wait.until(

EC.element_to_be_clickable(

(By.XPATH, '//*[@id="divCollection"]/ul/li[3]/a/span')

)

song_tab.click()

time.sleep(3)

song_table = wait.until(

EC.presence_of_element_located(

(By.XPATH, '//*[@id="frm_defaultList"]/div/table')

)

rows = song_table.find_elements(By.CSS_SELECTOR, "tbody tr")

print("찾은 행 개수:", len(rows))

for row in rows:

try:

cols = row.find_elements(By.TAG_NAME, "td")

if len(cols) < 5:

continue

# 곡명 td

title_text = cols[2].text.strip()

title_lines = [

line.strip()

for line in title_text.split("\n")

if line.strip()

]

title = ""

for line in title_lines:

if (

"재생" not in line

and "담기" not in line

and "상세정보" not in line

and not line.startswith("Title")

title = line

break

# Title 줄이 더 정확한 경우 보정

for line in title_lines:

if line.startswith("Title "):

title = line.replace("Title ", "").strip()

break

# 아티스트

artist_text = cols[3].text.strip()

artist_lines = [

line.strip()

for line in artist_text.split("\n")

if line.strip()

]

artist = artist_lines[0] if artist_lines else ""

# 앨범

album_text = cols[4].text.strip()

album_lines = [

line.strip()

for line in album_text.split("\n")

if line.strip()

]

album = album_lines[0] if album_lines else ""

# 좋아요 수

like = ""

try:

like = row.find_element(

By.CSS_SELECTOR,

"button.like span.cnt"

).text.strip()

except:

pass

if title:

data.append({

"곡명": title,

"아티스트": artist,

"앨범": album,

"좋아요수": like

})

except Exception as e:

print("행 처리 오류:", e)

df = pd.DataFrame(data)

if not df.empty:

df.index = df.index + 1

file_name = f"melon_{keyword}_songs.csv"

df.to_csv(file_name, encoding="utf-8-sig")

print(f"CSV 저장 완료: {file_name}")

print(f"총 {len(df)}곡 수집 완료")

return df

finally:

driver.quit()

크롤링

imysydesu — Wed, 24 Jun 2026 16:21:28 +0900

1 . 웹 크롤링

크롤링

웹사이트의 HTML문서나 API 데이터를 자동으로 수집하여 원하는 정보를 추출하는 기술
ex) 사람이 직접 웹페이지를 열어 뉴스, 상품 정보, 댓글, 주가, 날씨 등을 확인하는 과정을 프로그램이 대신 수행

Requests

Python에서 웹 서버에 HTTP 요청을 보내고 응답을 받아오기 위해 사용하는 대표적인 라이브러리
웹 브라우저가 사이트에 접속할 때처럼 Python 코드에서도 웹페이지, 이미지, JSON 데이터 등을 서버로부터 가져올 수 있게 해 줌
웹 크롤링과 API 연동에서 가장 많이 사용되는 기본 도구 중 하나
requests.get()으로 웹페이지를 요청하거나, requests.post()로 데이터를 서버에 전송할 수 있음
응답 결과로 HTML 코드, 이미지 데이터, 상태 코드 등을 쉽게 다룰 수 있음

다운 : 터미널(cmd)에서 venv 상태로 python -m install requests 작성

BeautifulSoup

Beautiful Soup의 from bs4 import BeautifulSoup 코드는 Python에서 HTML이나 XML 문서를 쉽게 분석하고 원하는 데이터를 추출하기 위해 BeautifulSoup 클래스를 불러오는 코드임
여기서 bs4는 BeautifulSoup4 라이브러리를 의미, 웹 크롤링에서 가장 많이 사용하는 라이브러리 중 하나

다운 : 터미널(cmd)에서 venv 상태로 python -m install bs4 작성

find()

BeautifulSoup에서 HTML 문서 안의 특정 태그를 검색할 때 사용하는 함수
태그 이름, 클래스, 아이디 등 조건을 기준으로 원하는 요소를 찾음
조건에 맞는 첫 번째 요소만 반환

find_all()

find()와 동일하지만 조건에 맞는 요소를 전부 리스트로 반환함

requests, BeautifulSoup import 시키기

url 주소 : 위에서 사용한 html 예제 실행 가상 주소

HTML 코드 가져오기

HTML 분석

HTML의 h1, p 태그를 텍스트로 가져온 결과

open() 함수

파일을 읽거나 저장할 때 사용하는 함수
txt, csv, 이미지 파일 등을 열어서 데이터를 읽거나 저장
크롤링, 데이터분석, AI 개발 등 거의 모든 분야에서 사용

ex) 파일객체 = open("파일명", "모드", encoding="utf-8")

open() 함수 종류

"r" : 파일 읽기
"w" : 파일 새로 저장(기존 삭제 후)
"a" : 기존 파일 뒤에 내용 추가
"rb" : 이미지/영상 등 바이너리 읽기
"wb" : 이미지/영상 저장(파일 새로 생성)
"rt" : 글자로 된 파일(txt) 읽기 - "r"과 동일
"wt" : 글자(txt) 쓰기 후 새 파일 생성(기존 내용 삭제 후)

select()

Beautiful Soup에서 CSS 선택자 문법을 사용하여 원하는 HTML 요소들을 여러 개 선택할 때 사용하는 함수
태그명(h1), 클래스(.item), 아이디(#title) 등을 조합하여 원하는 요소를 탐색
조건에 맞는 모든 요소를 리스트 형태로 반환
반복문과 함께 사용할 수 있음

select_one()

select()와 동일하지만 값을 하나만 가져옴

예제 풀어보기

basicenglishspeaking 75개 topic 크롤링

=> 표 형태로 출력하기 위해 Data-Frame 사용

enumerate()

파이썬에서 리스트 또는 반복 가능한 것을 돌 때 인덱스 + 값을 같이 꺼내주는 함수
enumerate(이터러블, start=0)

다음 뉴스기사 크롤링

=> "User-Agent" : "Mozilla/5.0"은 사이트 -> 개발자도구(f12) -> 네트워크 탭 -> 페이지 새로고침(f5) -> 아무 요청이나 하나 클릭 -> Request Headers -> Headers 탭 -> User-Agent

raise_for_status()

HTTP 요청이 실패했으면 에러를 강제로 발생시키는 기능
성공한 경우 아무 일도 일어나지 않음
기본적으로 실패 시 동작이 멈춤 (try ~ catch문이 없으면 사실상 의미 없음)
try문 안에 있을 경우 except로 넘어감

robots.txt

웹사이트 운영자가 검색 엔진이나 크롤링 프로그램(봇)에게 “어떤 페이지는 접근 가능하고, 어떤 페이지는 접근하지 말아야 하는지”를 알려주는 규칙 파일
보통 사이트 주소 뒤에 /robots.txt를 붙여 확인 ( ex - https://example.com/robots.txt 형태)
이 파일에는 특정 경로를 수집 금지(Disallow) 하거나 허용(Allow) 하는 규칙이 작성되어 있음
검색 엔진이나 크롤러는 이를 참고하여 사이트에 과도한 부하를 주지 않고 운영 정책을 존중하며 데이터를 수집
다만 robots.txt는 강제 차단 시스템이 아니라 “권장 규칙”에 가까우므로 기술적으로 접근은 가능할 수 있지만, 실무에서는 반드시 robots.txt와 사이트 이용약관을 확인하고 서버에 무리를 주지 않는 범위에서 크롤링해야 함

벅스 아티스트 곡 리스트 크롤링

=> df.index = df.index + 1 : 기본적으로 인덱스는 0부터 시작하므로 인덱스를 1부터 시작하게 바꿈

=> to_csv() : Data-frame을 CSV파일로 저장하는 함수

to : ~로 바꾼다 혹은 내보낸다 라는 의미

get_text(strip=True)

BeautifulSoup 전용 기능
HTML 태그 안에 있는 텍스트만 깔끔하게 추출하는 함수