OI7MI

Java - Mac M2 환경 설치 정리

OI7MI — Fri, 20 Feb 2026 14:59:18 +0900

전에 다녔던 학원에서 나만 맥북이라

Java와 Eclipse 설치, 환경변수 때문에 꽤 애먹었던 기억이 있는데,

한 번 해봤다고 이번엔 수월하게 설치할 수 있었다.

내 노트북은 맥북 에어 M2라서 Windows와 설치 파일이 다르다.

Mac M2는 ARM 계열 칩이기 때문에 반드시 AArch64 버전을 선택해야 한다.

1. Java 25 설치

아래 Oracle 공식 페이지에서 다운로드한다.

Download the Latest Java LTS Free

Subscribe to Java SE and get the most comprehensive Java support available, with 24/7 global access to the experts.

www.oracle.com

macOS 탭에서 ARM64 DMG Installer (jdk-25_macos-aarch64_bin.dmg) 를 받아서 설치한다.

x64 버전을 받으면 설치 시 오류가 나니 파일명에 aarch64 가 포함된 것을 꼭 확인하자.

설치 후 터미널에서 아래 명령어로 정상 설치 여부를 확인한다.

java -version

2. Eclipse 설치

아래 Eclipse 공식 페이지에서 다운로드한다.

Eclipse IDE 2025-12 R Packages | Eclipse Packages

548 MB 358,614 DOWNLOADS Tools for developers working with Java and Web applications, including a Java IDE, tools for JavaScript, TypeScript, JavaServer Pages and Faces, Yaml, Markdown, Web Services, JPA and Data Tools, Maven and Gradle, Git, and more. Cli

www.eclipse.org

Eclipse IDE for Enterprise Java and Web Developers 항목에서 macOS AArch64 를 선택해서 설치한다.

2026 방송대 컴퓨터과학과 입학기.

OI7MI — Mon, 26 Jan 2026 16:38:29 +0900

우당탕당 입학 기록

합격자 발표일 2026.01.22
등록금 납부 기간 2026.01.22 ~ 2026.01.27

드디어 기다리던 합격 발표 날.

설레는 마음으로 검색창에 '한국방송통신대학교'를 검색해 들어간 사이트에서 이름과 주민등록번호를 입력했다.

그런데 화면에 뜬 결과는 뜻밖에도 '불합격' ???????????

순간 심장이 덜컥 내려앉으며 오만가지 생각이 다 들었다. '설마 서류에 문제가 있었나?' 싶어 한참을 당황했는데

알고 보니 내가 들어갔던 곳은 엉뚱한 사이트(?) 엉뚱한 경로(?) 였다 ㅎㅎ.

사이트를 잘못 들어갔는데 왜 내 정보로 조회가 됐던 건지 지금 생각해도 미스터리하지만

입학 전 가슴 철렁했던 짧은 해프닝으로 웃어넘기기로 했다.

진짜 합격을 확인했으니, 이제 산 넘어 산이었던 등록금과 학자금 대출 문제를 해결할 차례다.

한국장학재단

x 서비스 이용자 등록/로그인이 필요한 서비스 입니다. 한국장학재단 각종 서비스를 이용하기 위해서는 로그인 후 이용이 가능합니다. 로그인을 원하지 않는 경우 '돌아가기' 버튼을 눌러주세요

www.kosaf.go.kr

학자금 대출

학자금 대출은 위 사이트에서 신청할 수 있다.

방송통신대학교는 자비로 등록금을 납부할 수도 있지만

학자금 지원구간에 해당한다면, 우선 학자금 대출로 등록금을 납부하고 사후에 국가장학금으로 상환받는 방식을 추천한다.

절차가 간편할 뿐만 아니라 초기 비용 부담을 줄이는 효율적인 방법이기 때문이다.

나는 우선 자비로 등록금을 먼저 납부했고, 이후 학자금 대출을 신청했다.

하지만 예상치 못하게 승인 거절 문구를 확인하게 되었다.

원인을 파악해 보니 '여신거래 안심차단 서비스'가 설정되어 있어 대출 진행이 막혀 있었던 것이다.

해야 할 일은 세 가지였다.

Step 1: 신한은행 방문 후 '여신거래 안심차단 서비스' 해지

Step 2: 학자금 대출 진행

Step 3: 학교 학생과에 연락하여 '기등록 처리' 요청 (이미 자비로 납부한 경우 필수)

하지만

서비스 해지 후 다시 신청을 시도했으나

'STP2(기신청 상태) 단계에서 유형 선택 불가'라는 오류 메시지가 반복되었다.

다음으로 안 넘어갔다.

시스템 오류로 답답한 마음에 결국 한국장학재단 고객센터로 전화를 걸었다.

상담원분께서 내 내역을 조회하시더니

등록금 납부 기한이 바로 내일까지인데 알고 계셨냐며

최대한 빨리 처리 도와드릴 테니 너무 걱정하지 말라고 다정하게 말씀해 주셨다.

마감이 코앞이라 조급했던 마음이 그 따뜻한 한마디에 사르르 녹는 기분이었다.

추운 겨울이었지만 덕분에 마음만은 무척 따뜻해졌다.

역시 해결이 안 될 때는 혼자 끙끙 앓기보다 전화 상담을 하는 것이 가장 빠르고 정확하다는 걸 다시 한번 체감했다.

전화 상담 후 두 시간도 채 지나지 않아 '학자금 대출 심사 승인' 안내 카톡이 왔다.

곧바로 대출 실행을 눌러 무사히 등록을 마칠 수 있었다.

예전 대학생 때 학자금 대출을 신청하려면 가구원 동의 절차부터 참 복잡해서 고생했던 기억이 난다.

그래서 이번에도 긴장하며 준비했는데 별도 절차 없이 바로 넘어가서 조금 놀랐다.

자퇴한 지 꽤 오랜 시간이 흘렀음에도 기존 정보가 유효한 것인지 신기하기도 하고 다행이다 싶었다.

등록을 마치고 나니 앞으로의 학교생활이 더 궁금해져서 여러 커뮤니티도 찾아보았다.

다행히 카카오톡 오픈채팅방이 활성화되어 있어 수강 과목을 선택하는 데 정말 큰 도움을 받았다.

또한 방송대 카페에는 중고 교재 거래나 실질적인 공부 정보가 많아서 앞으로도 자주 이용하게 될 것 같다.

선택경비는 따로 신청하지 않았고, 가장 중요한 교재는 카페 등을 통해 새 책 대신 중고로 알뜰하게 구매할 예정이다.

우여곡절 끝에 마친 등록인 만큼, 열심히 해야겠다는 생각과 함께 기분 좋은 떨림이 가득하다.

이번 학기 화이팅.

[React] TMDB API: 한 번의 요청으로 영화 상세정보와 유튜브 예고편 가져오기

OI7MI — Sun, 18 Jan 2026 02:21:31 +0900

1. 문제 상황: "데이터가 부족하다?"

기존에 사용하던 영화 상세 정보 API 호출 방식으로는 영화의 줄거리나 평점 정보는 가져올 수 있었지만

영화의 핵심 콘텐츠라고 할 수 있는 ‘예고편 영상’ 데이터가 포함되어 있지 않았다.

이를 어떻게 해결할 수 있을지 고민하던 중,
TMDB에서 제공하는 append_to_response 기능을 사용하기로 했다.

기존에 사용하던 API 호출 방식은 다음과 같다.

const url = `https://api.themoviedb.org/3/movie/${id}?language=ko-KR`;

여기에 유튜브 예고편 영상을 함께 가져오기 위해
아래와 같이 append_to_response=videos 옵션 추가

const url = `https://api.themoviedb.org/3/movie/${id}?language=ko-KR&append_to_response=videos`;

2. 예외 처리: "데이터가 항상 Trailer인 것은 아니다"

데이터를 분석해보니
한국어(ko-KR) 설정 시 예고편이 항상 Trailer 타입으로만 제공되지 않는다는 것을 알게 되었다.

경우에 따라 Featurette(제작기)나 Teaser로 들어오는 경우도 있었고,
이대로라면 예고편이 있음에도 불구하고 사용자에게 아무것도 보여주지 못하는 상황이 발생할 수 있었다.

그래서 사용자에게 ‘뭐라도’ 보여주기 위해 아래와 같은 영상 타입 우선순위 로직을 구현했다.

// 영상 타입 우선순위 로직

const video =
  results.find((v) => v.type === "Trailer") || // 1순위: 공식 예고편
  results.find((v) => v.type === "Teaser") ||  // 2순위: 티저
  results.find((v) => v.type === "Featurette") || // 3순위: 특별 영상
  results[0]; // 4순위: 그 외 첫 번째 영상

3. 보안 및 사용자 경험

유튜브 링크를 열 때는 window.open을 사용해 새 탭에서 열리도록 설정했다.
이를 통해 사용자가 서비스 페이지를 이탈하지 않으면서도 영상을 감상할 수 있도록 UX를 고려했다.

아래는 전체 코드다.

const showYouTube = () => {
  if (!movie || !movie.videos || movie.videos.results.length === 0) {
    alert("제공되는 YouTube 예고편이 없습니다.");
    return;
  }
  
  const results = movie.videos.results;
  const video =
    results.find((v) => v.type === "Trailer") || // 1순위: 공식 예고편
    results.find((v) => v.type === "Teaser") || // 2순위: 티저
    results.find((v) => v.type === "Featurette") || // 3순위: 특별 영상
    results[0]; // 4순위: 그 외 첫 번째 영상

  if (video && video.site === "YouTube") {
    window.open(`https://www.youtube.com/watch?v=${video.key}`, "_blank");
  } else {
    alert("YouTube 영상을 찾을 수 없습니다.");
  }
}
    
    
<button onClick={showYouTube}>예고편 보기</button>

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

마무리

API 데이터를 다룰 때 단순히 매뉴얼만 따라가는 것이 아니라,
실제 응답 데이터(results)의 구조를 console.log로 직접 확인하며
상황에 맞는 예외 처리를 해주는 과정이 얼마나 중요한지 배울 수 있었다.

[React] 별점(Star Rating) 라이브러리로 구현하기

OI7MI — Thu, 15 Jan 2026 20:10:17 +0900

숫자로만 표시되던 평점을 별점 UI로 표현하고 싶어 관련 라이브러리를 찾아보았다.
그 과정에서 아주 간편하게 별점 UI를 구현할 수 있는 라이브러리를 발견해 프로젝트에 적용해보았다.

특히 소수점(반쪽 별)까지 자동으로 처리해줘서 별도의 로직 없이도 자연스러운 평점 표시가 가능해 사용성이 좋았다.

결과

사용한 라이브러리

react-simple-star-rating

가볍고 설정이 단순함
소수점 별점 지원
클릭 가능한 별점 / 표시용 별점 모두 가능

라이브러리 설치

npm install react-simple-star-rating

별점 컴포넌트 생성

영화 API(TMDB)는 10점 만점 평점을 반환하기 때문에, 별점 UI(5점 만점)에 맞게 2로 나눠서 변환했다

import { Rating } from "react-simple-star-rating"; 

// 별점 컴포넌트 
const StarRating = ({ rating }) => { 
	return ( 
    	<Rating 
            initialValue={rating / 2} 	// 10점 만점을 5점으로 변환 
            readonly={true} 			// 클릭 비활성화 (표시 전용) 
            size={20} 					// 별 크기 
            fillColor="gold" 			// 채워진 별 색 
            emptyColor="gray" 			// 빈 별 색 
            allowFraction={true} 		// 소수점(반쪽 별) 허용 
         /> 
     ); 
}; 

export default StarRating;

다른 컴포넌트에서 사용하기

내가 사용한 TMDB API 데이터(vote_average)는 소수점이 매우 길게 나온다 (예: 7.834)

방식 A: movie.vote_average 그대로 넣을 때
- 라이브러리에 7.834라는 숫자가 그대로 전달
- 라이브러리는 내부 로직에 따라 이걸 7.8로 그릴 수도 있고, 그냥 8.0에 가깝게 꽉 채워버릴 수도 있다 ~~(반올림 기준이 모호함)~~
방식 B: Number(vote_average.toFixed(1))를 쓸 때
- 7.834가 강제로 7.8로 딱 잘린다
- 라이브러리에 정확히 7.8이라는 숫자만 전달되므로 내가 의도한 눈금만큼만 별이 칠해짐

import StarRating from "./StarRating"; 

<h4> 
	<StarRating rating={Number(vote_average.toFixed(1))} /> 
</h4>

TMDB의 10점 만점 평점 → 5점 만점 별점으로 자연스럽게 변환
7.8 / 8.3 같은 소수점 평점도 반쪽 별로 자동 표시
읽기 전용(readonly)으로 설정하여
사용자 입력이 아닌 정보 표시용 UI로 사용

정리

⭐ 별점 UI를 직접 구현할 필요 없음
⭐ react-simple-star-rating 하나로 빠르게 해결
⭐ 소수점 처리까지 자동으로 지원
⭐ 영화 사이트처럼 “평점 표시”가 필요한 프로젝트에 매우 적합

영화 평점 UI는 복잡할 것 같지만 라이브러리를 활용하면 코드 몇 줄로 깔끔하게 해결할 수 있다

[React] 리액트 <Link>와 HTML <a>의 차이점 (feat. CSS가 안 먹히는 이유)

OI7MI — Thu, 15 Jan 2026 18:22:03 +0900

React 에서 <Link>를 쓰는데, CSS에서는 왜 a로 스타일을 잡아야 하는가?

<Link>는 결국 <a> 태그로 변한다

<Link to={`/movie/${id}`}> 
	<img src={coverImage} alt={title} title={title} /> 
</Link>

브라우저가 실제로 이해하는 것은 <Link>가 아님 ❌

리액트는 빌드 및 렌더링 과정에서 <Link> 컴포넌트를 표준 HTML 태그인 <a>로 변환해서 브라우저에 전달한다

브라우저는 <Link>라는 태그를 모름
브라우저가 이해할 수 있는 것은 오직 HTML 표준 태그

그래서 개발자 도구로 보면 <Link>는 항상 <a> 태그로 렌더링되어 있다

그런데 왜 그냥 <a>를 안 쓰고 <Link>를 쓸까?

<a> 태그의 동작 방식

<a href="/movie/1">이동</a>

클릭 시 페이지 전체를 새로 요청
브라우저가 새 HTML을 다시 받음
화면이 깜빡이고
리액트 상태(state)가 전부 초기화됨

<Link> 태그의 동작 방식

<Link to="/movie/1">이동</Link>

페이지 새로고침 없음
주소창만 변경
필요한 컴포넌트만 교체 렌더링
상태 유지 + 부드러운 화면 전환

즉, 페이지 이동 방식이 완전히 다르기 때문!

CSS에서 a로 스타일을 잡아야 하는 이유

/* ✅ 정상 동작 */ 
.movie_card a { display: block;} 

/* ❌ 동작 안 함 */ 
.movie_card Link { display: block; }

CSS는 HTML 태그와 클래스만 인식
Link는 리액트 컴포넌트 이름
브라우저 입장에서는 이미 <a>로 변환된 상태

한 줄 요약

리액트의 <Link>는 브라우저에서 <a>로 렌더링된다
CSS에서는 반드시 a 태그로 선택해야 한다
새로고침 없는 SPA 이동을 가능하게 해주는 리액트 전용 링크

[React] SPA 페이지 이동: react-router-dom (Link, useParams)

OI7MI — Wed, 14 Jan 2026 03:31:08 +0900

리액트 라우터(React Router) : 페이지 이동 구현

리액트는 SPA(Single Page Application) 구조를 사용한다. 즉, 페이지를 이동하더라도 매번 서버로부터 새로운 HTML 파일을 받아오는 것이 아니라, 하나의 HTML 문서 위에서 URL 변경에 따라 렌더링되는 컴포넌트만 교체한다.

이때 URL 경로(path)에 따라 어떤 컴포넌트를 렌더링할지 매핑해 주는 라이브러리가 react-router-dom 이다.

이를 통해 브라우저 주소창의 변경을 감지하고, 새로고침 없이도 페이지 이동이 가능한 것처럼 동작하게 만들 수 있다.

1. 라이브러리 설치

npm install react-router-dom

2. 기본 구조

가장 먼저 Router로 전체를 감싸고, 그 안에 Routes와 Route를 배치한다.

Routes: 현재 URL과 일치하는 단 하나의 Route만 렌더링하기 위해 사용 (v5의 Switch에서 이름이 변경되었음)
Route: 특정 경로(path)와 그에 맞게 보여줄 컴포넌트(element)를 연결

3. 코드 적용

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Routes>
        {/* /movie 경로면 Detail 컴포넌트 렌더링 */}
        <Route path="/movie" element={<Detail />} />
        
        {/* / (기본 경로)면 Home 컴포넌트 렌더링 */}
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

요약하자면 결국 컴포넌트들은 현재 브라우저의 URL을 주시하고 있다가, 주소가 바뀌면 미리 약속된 컴포넌트로 화면을 갈아 끼우는 역할을 한다. 사용자 입장에서는 페이지가 이동하는 것처럼 느껴지지만, 실제로는 하나의 문서 내에서 효율적으로 컴포넌트만 교체되는 것이다.

<Link> 컴포넌트 : 새로고침 없는 페이지 이동

앞서 리액트가 SPA(Single Page Application)라고 설명했다.

하지만 우리가 평소에 쓰는 <a> 태그를 그대로 사용하면 리액트의 가장 큰 장점 중 하나가 무력화된다.

1. 왜 <a> 태그를 쓰면 안 될까?

보통 HTML에서 사용하는 <a href="...">는 클릭 시 브라우저 전체를 새로고침한다. 즉, 서버로부터 아예 새로운 문서를 처음부터 다시 받아오는 것. 이렇게 되면 리액트 앱이 들고 있던 데이터(state)가 초기화되고, 화면이 깜빡거리며 SPA의 속도 이점을 누릴 수 없게 된다.

2. <Link> 컴포넌트의 역할

react-router-dom에서 제공하는 <Link> 컴포넌트는 브라우저의 새로고침을 막아준다.

대신 브라우저의 주소창만 바꾸고, 리액트가 바뀐 주소에 맞는 컴포넌트만 가로채서 다시 그릴 수 있도록 도와준다.

3. 코드

먼저 라이브러리에서 Link를 불러온 뒤, to 속성에 이동할 경로를 적어준다.

import { Link } from "react-router-dom";

function Movie({ title, id }) {
  return (
    <div>
      <h2>
        {/* 클릭 시 /movie 경로로 이동하지만, 새로고침은 발생하지 않음 */}
        <Link to="/movie">{title}</Link>
      </h2>
    </div>
  );
}

useParams : 어떤 데이터를 클릭했는지 알아내는 법

페이지가 하나뿐인 상세 페이지(Detail) 컴포넌트가 어떻게 수많은 데이터 중 내가 클릭한 정보만 가져올 수 있을까?

그 비밀은 URL에 담긴 id 값에 있다.

1. 주소에 "변수" 자리를 만들기 (App.js)

먼저 라우터를 설정할 때, id가 들어갈 자리를 비워줘야 한다. 이때 사용하는 것이 콜론(:)

// :id는 "이 자리에 값이 들어올 건데, 그 값을 id라고 부를게"라는 약속.

<Route path="/movie/:id" element={<Detail />} />

2. 링크에 실제 ID 값 넣어주기 (Movie.js)

사용자가 제목을 클릭하면 실제 그 영화의 id를 주소창에 넣어줘야 한다. 백틱을 사용해 주소를 동적으로 만든다.

// id가 123이라면 주소는 /movie/123이 된다.

<Link to={`/movie/${id}`}>{title}</Link>

3. 주소창의 ID 값 추출하기 (Detail.js)

이제 상세 페이지에서 주소창에 찍힌 123이라는 값을 읽어와야 한다. 이때 사용하는 Hook이 바로 useParams 다.

import { useParams } from "react-router-dom";

function Detail() {
  const { id } = useParams(); // 주소창의 :id 값을 가져옴
  console.log(id); // "123" 출력
  
  return <h1>Movie ID: {id}</h1>;
}

❗️const { id } = useParams() 처럼 객체로 감싸는 이유는? useParams가 값을 "객체" 형태로 반환하기 때문이다.
❗️객체로 주는 이유는? 주소창에는 변수가 하나만 있을 수도 있지만, 여러 개가 있을 수도 있기 때문이다.

비교해보기

전체로 받기: const params = useParams() → params는 { id: "123" } 이라는 덩어리가 된다. 그래서 꺼내 쓸 때 params.id라고 복잡하게 써야 함!
구조 분해 할당: const { id } = useParams() → 객체 안의 id라는 키(key)를 가진 값만 뽑아서 바로 id라는 변수에 담아줌!

즉, const { id } = useParams()는 "useParams가 준 객체 안에서 'id'만 꺼낼게!"라는 뜻.

[React] API 호출 .then() 대신 async-await 처리

OI7MI — Tue, 13 Jan 2026 02:01:17 +0900

리액트에서 외부 데이터를 가져올 때 보통 fetch를 사용한다
예전에는 .then()을 활용한 체이닝 방식이 많이 쓰였지만
요즘은 가독성과 유지보수 측면에서 async/await 방식이 사실상 표준처럼 사용된다.

then() vs async-await

기존 방식→ .then() 체이닝

.then()을 계속 이어 붙이다 보면 코드가 점점 길어지고 비동기 흐름을 한눈에 파악하기 어려워진다

useEffect(() => {
  fetch(`https://yts.mx/api/v2/list_movies.json`)
    .then((response) => response.json())
    .then((json) => {
      setMovies(json.data.movies);
      setLoading(false);
    });
}, []);

개선된 방식→ async-await

비동기 로직을 별도의 함수로 분리하여 동기 코드(위에서 아래로 실행되는 코드)처럼 보이게 만든다

import { useEffect, useState } from "react";

function App() {
  const [loading, setLoading] = useState(true);
  const [movies, setMovies] = useState([]);

  const getMovies = async () => {
    try {
      const response = await fetch(
        `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year`
      );
      
      // fetch는 HTTP 에러를 자동으로 throw하지 않기 때문에 직접 체크
      if (!response.ok) {
        throw new Error("서버 응답 오류");
      }
      
      const json = await response.json();
      setMovies(json.data.movies);
      
    } catch (error) {
      console.error("데이터 로딩 실패:", error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    getMovies();
  }, []);

  return (
    <div>
      {loading ? <h1>Loading...</h1> : (
        <ul>
          {movies.map((movie) => (
            <li key={movie.id}>{movie.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

2. 비동기인데 왜 await로 기다릴까?

비동기를 공부하다 보면 이런 의문이 생긴다
“비동기는 안 기다리는 거라면서 왜 await(기다리다)를 쓰는 걸까?”
핵심은 '어디가 멈추느냐'의 차이다

전체(브라우저)는 멈추지 않는다 (비동기)
- getMovies 함수가 데이터를 가져오는 동안, 리액트의 다른 기능이나 브라우저의 스크롤, 클릭 이벤트는 멈추지 않고 정상 작동한다. 이것이 비동기 처리의 본질인 'Non-blocking'이다.
함수 내부에서는 순서가 필요하다 (await)
- 하지만 getMovies라는 함수 내부에서는 이야기가 다르다. 서버에서 응답(response)이 와야 JSON으로 변환을 하고, 변환이 완료되어야 State를 업데이트할 수 있다.
- await는 "비동기 작업이 완료될 때까지 '이 함수 안에서만' 잠깐 기다려줘"라고 명령하는 것.

정리하자면: 비동기 처리는 사용자가 느끼는 웹사이트 전체의 흐름을 멈추지 않게 하기 위해 사용하고, await는 개발자가 의도한 로직의 순서를 함수 내부에서 보장받기 위해 사용한다.

async-await 사용 시 주의할 점

async 함수는 항상 Promise를 반환한다
그래서 useEffect의 첫 번째 인자로 직접 async () => {}를 넣을 수 없다.
(별도 함수를 만들어 호출해야 함)

// ❌ 잘못된 예
useEffect(async () => {
  ...
}, []);


//   대신 비동기 함수를 선언한 뒤 호출
useEffect(() => {
  getMovies();
}, []);

초기값 설정
movies.map을 사용한다면 초기 상태값을 useState([])처럼 빈 배열로 설정해야 된다
데이터가 오기 전 undefined 에러를 방지할 수 있음 (즉 초기 상태값은 반드시 맞는 타입으로 설정한다)

const [movies, setMovies] = useState([]);

에러 처리
.catch() 대신 → try...catch문이 의미파악과 디버깅에 훨씬 유리할뿐만 아니라 예외 처리가 훨씬 직관적이다

정리

async/await는 비동기 코드를 동기 코드처럼 작성할 수 있게 해주는 자바스크립트의 강력한 문법이다.

이제 복잡한 .then() 체이닝 대신 가독성 좋은 async/await 패턴에 익숙해지면 React에서의 데이터 처리 흐름이 훨씬 명확해진다.

[React] useState 상태 업데이트와 배열에서 특정 항목 삭제하기

OI7MI — Fri, 9 Jan 2026 03:56:41 +0900

useState 상태 업데이트의 두 가지

1. 단순 값 전달 (Direct Update)

상태를 특정 값으로 완전히 대체하고 싶을 때 사용

setTodo("");

// 단순 값 전달 
// 입력이 끝난 후 input 상태를 빈 문자열로 초기화

동작 원리: 이전 상태값과 관계없이, 인자로 전달된 새로운 값을 즉시 상태로 반영
주요 용도: 입력 필드 초기화
1. 모달창 열기/닫기 (Boolean 값 변경)
2. 데이터 로딩 상태(Loading/Success/Error) 변경

2. 함수형 업데이트 (Functional Update)

이전 상태를 기반으로 새로운 상태를 생성할 때 사용

setTodos((prev) => [todo, ...prev]);

// 함수형 업데이트
// 최신 상태인 prev 배열을 가져와서 새 항목을 결합

동작 원리: set 함수의 인자로 콜백 함수를 전달. 이때 리액트는 콜백 함수의 첫 번째 인자로 가장 최신의 상태값(State)을 주입
주요 용도:
1. 기존 배열에 새로운 항목을 추가할 때 (To-do 리스트 등)
2. 이전 숫자 값에 특정 연산을 수행할 때 (Counter 등)
사용 이유: 비동기 업데이트 상황에서도 데이터가 꼬이지 않도록 최신 상태값을 안전하게 참조하기 위해 사용

✅ 요약 비교

구분	방식	특징
단순 값 전달	set(value)	이전 상태를 참조하지 않고 값을 변경
함수형 업데이트	set((prev) => newValue)	최신 상태를 인자로 받아 안전하게 업데이트

배열에서 특정 항목 삭제하기

상태가 배열일 때, 특정 항목만 제외한 새로운 배열을 만들어 업데이트하는 패턴을 사용하는데
filter 메서드를 활용해 깔끔하게 구현할 수 있다

const deleteBtn = (index) => {
  // 최신 상태(prev)를 복사하거나 직접 수정하지 않고 조건에 맞는 항목만 골라서 새로운 배열로 업데이트
  
  setTodos((prev) => prev.filter((_, itemIndex) => index !== itemIndex));
};

동작 원리:

filter : 클릭한 번호(index)와 일치하지 않는 항목들만 모아서 새로운 배열을 생성
_ (언더바): filter의 첫 번째 인자인 '값'은 사용하지 않고, 두 번째 인자인 '인덱스'만 사용하겠다는 자바스크립트 관례

사용 이유:

리액트의 상태는 원본을 직접 수정하면 안 되기 때문에, filter처럼 새로운 배열을 반환하는 메서드를 사용해 안전하게 상태를 교체함

전체 코드

import { useState } from "react";

function App() {
  const [todo, setTodo] = useState(""); // 입력창(input) 텍스트 수정 함수
  const [todos, setTodos] = useState([]); // 할 일 목록 배열(todos) 수정 함수
  const onChange = (e) => setTodo(e.target.value);

  const onSubmit = (e) => {
    e.preventDefault();
    if (todo === "") {
      return;
    }
    setTodos((perv) => [todo, ...perv]);
    setTodo("");
  };

  /** 
   * 삭제 버튼
   * setTodos를 사용하여 전체 목록 업데이트
   * filter를 사용하여 클릭한 index와 일치하지 않는 요소들만 남김
   */
  const deleteBtn = (index) => {
    setTodos((prev) => prev.filter((_, itemIndex) => index !== itemIndex));
  };

  return (
    <div>
      <h1>My To Dos {todos.length}</h1>

      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="Write your to do.."
          onChange={onChange}
          value={todo}
        />
        <button>Add To Do</button>
      </form>
      <hr />
      <ul>
        {todos.map((item, index) => (
          <li key={index}>
            {item} <button onClick={() => deleteBtn(index)}>삭제</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

[React] useEffect() 와 Cleanup 함수

OI7MI — Wed, 7 Jan 2026 20:10:51 +0900

useEffect란?

실행 시점을 내 마음대로 결정하게 해주는 함수

리액트 컴포넌트는 state가 변할 때마다 전체 코드가 다시 실행(Re-render)되는 특징이 있다.

하지만 서버에서 데이터를 받아오는 API 호출처럼

딱 한 번만 실행되어야 하거나, 특정 값이 변할 때만 실행되어야 하는 코드가 있다면?

이걸 내 마음대로 제어할 수 있게 해주는 게 바로 useEffect다.

useEffect(() => {
  // 1. 실행하고 싶은 코드 (첫 번째 인자)
}, [/* 2. 지켜볼 대상들 */]); // (두 번째 인자)

첫 번째 인자: 실행하고 싶은 코드(함수)
두 번째 인자: 리액트가 지켜볼 대상이 담긴 배열 (의존성 배열, [])

useEffect는 'Side Effect'를 위한 Hook이다

리액트에서 Side effect(부작용, 영향)란 렌더링 결과물과는 직접적인 상관이 없지만

컴포넌트 외부와 상호작용하는 작업들을 말한다

예시: 서버에서 데이터 받아오기(API), 수동으로 DOM 조작하기, 타이머 설정 등
특징: 이런 작업들은 렌더링이 다 끝난 뒤에 실행되어야 성능에 방해가 안 된다. 그래서 useEffect라는 Hook(훅)을 사용해서 실행 시점을 관리하는 것.

의존성 배열([])에 따른 마법

두 번째 인자인 배열을 어떻게 쓰느냐에 따라 실행 타이밍이 완전히 달라진다

컴포넌트가 처음 나타날 때 딱 한 번만 실행하고

그 뒤로는 어떤 일이 생겨도 실행하고 싶지 않을 때 두 번째 인자에 빈 배열을 넣어서 사용하고,

배열 안에 특정 변수를 넣어주면, 리액트가 그 값을 감시하다가 값이 바뀔 때만 코드를 다시 실행해준다.

빈 배열일 때 []

동작: 컴포넌트가 처음 화면에 나타날 때(Mount) 딱 한 번만 실행하고 다시는 안 함.
용도: API 딱 한 번만 호출하고 싶을 때 사용. 리액트한테 "지켜볼 게 아무것도 없으니까 처음 말고는 다시 실행하지 마"라고 알려주는 것.

특정 값이 있을 때 [keyword]

동작: 처음 나타날 때 + 값이 바뀔 때마다 실행.
용도: 특정 데이터가 변할 때마다 반응해야 하는 로직에 사용.

코드

import { useState, useEffect } from "react";

function App() {
  const [counter, setCounter] = useState(0);
  const [keyword, setKeyword] = useState("");

  const onClick = () => setCounter((prev) => prev + 1);
  const onChange = (e) => setKeyword(e.target.value);

  // 1. 처음 렌더링될 때 딱 한 번만 실행
  useEffect(() => {
    console.log("나는 한번만 실행돼요.");
  }, []);

  // 2. keyword가 변화할 때만 실행
  useEffect(() => {
    console.log(`나는 ${keyword} 가 변화할 때 실행돼요.`);
  }, [keyword]);

  // 3. counter가 변화할 때만 실행
  useEffect(() => {
    console.log(`나는 ${counter} 가 변화할 때 실행돼요.`);
  }, [counter]);

  // 4. 둘 중 하나라도 변화하면 실행
  useEffect(() => {
    console.log(`나는 ${counter}, ${keyword} 둘 다 변화할 때 실행돼요.`);
  }, [counter, keyword]);

  return (
    <div>
      <input type="text" placeholder="Search here..." value={keyword} onChange={onChange} />
      <h1>{counter}</h1>
      <button onClick={onClick}>click me</button>
    </div>
  );
}

useEffect 정리

의존성 배열	실행 타이밍
빈 배열 []	컴포넌트가 처음 나타날 때(Mount) 딱 한 번
값이 있는 배열 [a]	처음 나타날 때 + a가 변할 때마다
여러 개 있는 배열 [a, b]	처음 나타날 때 + a 혹은 b가 변할 때마다

useEffect는 무분별한 코드 실행을 막아주는 방어막이자, 내가 원하는 시점을 정확히 조준하는 트리거다.

Cleanup 함수란?

useEffect는 컴포넌트가 처음 나타날 때 코드를 실행할 수 있게 해주지만

반대로 컴포넌트가 화면에서 사라질 때(Destroy/Unmount) 코드를 실행하는 방법도 제공한다.

이걸 Cleanup 함수라고 부른다.

Cleanup 함수는 useEffect 안에서 함수를 return 하면, 그 리턴된 함수는 컴포넌트가 파괴될 때 실행된다

아래 두 코드는 같다

// 1
function Hello() {
  useEffect(() => {
    console.log("created :)"); // 컴포넌트가 나타날 때 실행
    
    return () => console.log("destroyed :("); // 컴포넌트가 사라질 때 실행 (Cleanup)
  }, []);

  return <h1>Hello</h1>;
}

// 2
function Hello() {
  function byFn(){
    console.log("destroyed");
  }
  function hiFn(){
    console.log("created");
    return byFn;
  }
  useEffect(hiFn, []);

  return <h1>Hello</h1>;
}

2. 작동 원리: 왜 return을 할까?

리액트의 이펙트 라이프사이클은 아래와 같이 흘러간다

리렌더링/생성: 컴포넌트가 화면에 그려짐.
이펙트 실행: useEffect의 첫 번째 인자인 함수가 실행됨.클린업: 다음 이펙트가 실행되기 전이나, 컴포넌트가 파괴될 때 이전에 return 했던 함수를 실행해서 청소함.

3. 두 코드는 왜 결과가 같을까?

두 코드는 작성 방식만 다를 뿐, 자바스크립트의 함수 리턴 원리를 이용한 같은 로직

첫 번째: 익명 함수를 바로 리턴함. (가장 흔히 쓰는 방식)
두 번째: hiFn을 실행하면 byFn이라는 함수 자체를 결과값으로 리턴함.

결국 리액트 입장에서는 어쨌든 나한테 함수 하나를 리턴해줬네? 그럼 나중에 파괴될 때 이거 실행해 줄게! 가 되는 것.

4. 언제 사용할까?

컴포넌트가 사라지는데 왜 코드를 실행해야 할까? 보통 '정리'가 필요할 때 쓴다.

타이머 제거:
setTimeout이나 setInterval을 켰다면 사라질 때 꺼줘야 메모리 낭비가 없다.

이벤트 리스너 해제:
윈도우 스크롤 감지 같은 걸 등록했다면 사라질 때 지워줘야 한다.

API 요청 취소:
데이터를 가져오다가 컴포넌트가 닫히면 더 이상 필요 없는 요청을 취소할 때 쓴다.

Cleanup 정리

Cleanup 함수: useEffect 안에서 return 하는 함수.
실행 시점: 컴포넌트가 파괴(Unmount)될 때, 혹은 다음 이펙트가 실행되기 직전에 실행됨.
의존성 배열이 []일 때: 컴포넌트가 아예 사라질 때 딱 한 번 실행됨.

[React] CSS Module 사용 이유와 사용 방법

OI7MI — Tue, 6 Jan 2026 20:21:43 +0900

리액트로 컴포넌트를 만들다 보면 가장 흔하게 겪는 문제가 스타일 간섭이다.

A 컴포넌트의 스타일이 이름이 같다는 이유로 B 컴포넌트까지 망가뜨리는 상황이다.

이런 클래스 중복 문제를 해결하기 위해 등장한 것이 바로 CSS Module이다.

컴포넌트 단위의 스타일 격리

일반 CSS는 파일이 달라도 클래스명이 같으면 전역적으로 적용되지만, CSS Module은 해당 컴포넌트 안에서만 유효하다.

사용법: .css 대신 .module.css 확장자로 생성
장점: 컴포넌트와 스타일을 하나의 세트로 묶어 관리할 수 있어 유지보수가 편해짐

스타일을 '객체(Object)'로 다루는 방식

기존 CSS가 HTML에 클래스명을 "문자열"로 적어넣는 방식이었다면, CSS Module은 스타일을 자바스크립트 객체로 취급한다.

import: import styles from "./Button.module.css"
적용: className={styles.title}
의미: 이제 스타일은 단순히 이름을 찾는 게 아니라, 특정 JSX 엘리먼트에 직접 주입하는 데이터가 된다. 오타가 나도 자바스크립트가 체크해주니 훨씬 안전함.

클래스 이름 중복 해결

스크린샷의 개발자 도구를 보면 CSS Module의 진가가 드러남!

상황: App과 Button 두 파일 모두 똑같이 .title이라는 클래스명을 사용했다.
결과: 리액트 빌드 시 App_title__YS7Xx, Button_title__1rPP- 처럼 고유한 해시값이 붙는다.
효과: 개발자는 클래스명이 겹칠까 봐 이름을 길게 지을 필요가 없다. .title이라고만 지어도 리액트가 중복되지 않게 관리해 준다.

✅ 요약

CSS Module은 클래스명 충돌을 원천 차단하고, 스타일을 컴포넌트에 종속된 객체로 관리하게 함으로써 '독립적인 컴포넌트'를 완성해준다.