s00jin 님의 블로그

[최종 코딩테스트 회고] 8기 프리코스 종료 - !

s00jin — Tue, 13 Jan 2026 16:25:10 +0900

프리코스 1차 합격

감격의 1차 합격 메일

떨어질 줄 알았던 프리코스에 1차 합격을 했다.

프리코스가 끝난 이후 번아웃이 와서 한동안 공부를 거의 하지 않았다. 그러다 보니 코딩 실력이 바닥을 찍은 상태였는데,

1차 합격 소식을 듣고 정신을 붙잡고 다시 공부를 시작했다.

최종 코테 후기에 기출을 많이 풀라는 이야기가 있어, 기출을 많이 풀었다.

기출을 5시간 타이머를 맞춰 풀어봤지만, 시간 내에 풀리지 않는 문제들이 많아 스스로에 대한 자신감이 많이 떨어졌었다.

최종 코딩테스트

이번 최종 코딩테스트는 이전 최종 코테들과는 조금 다른 방식이었다.

시험 시간은 코딩 테스트 4시간 + 소감문 작성 1시간으로 구성되어 있었고, 코테 문제는 프리코스 3주차 로또 미션이 변형된 형태였다.

기본 기능 구현 외에도 도전 과제로 새로운 기능을 추가하거나 리팩토링을 수행하는 선택지가 주어졌다.

처음에는 새로운 기능을 추가하는 방향을 고민했지만, 로또 기본 기능 구현에 예상보다 많은 시간을 사용하게 되면서

도전 과제는 리팩토링으로 선택하게 되었다.

이번 코테에서는 InputView와 OutputView가 제공되었고, 이 클래스들은 수정이 불가능했다.

특히 OutputView에서 로또들을 출력하는 메서드의 파라미터 타입이 List<List<Integer>>였다. 이 때문에 처음에는 Lotto 도메인을 따로 만들지 않고, Lottos에서 관리하던 List<Integer> 형태의 로또를 그대로 사용했다.

그런데 테스트에서 오류가 발생했다.

오류를 확인해 보니 sort 과정에서 문제가 발생한 것처럼 보였지만, 처음에는 정확한 원인을 알지 못했다.

구글링을 하며 원인을 찾아본 결과, List<Integer> 자체를 기준으로 정렬하려고 했던 구조가 문제였다는 걸 알게 되었다.

결국 Lotto 도메인을 새로 만들고, 로또 번호 정렬 책임을 Lotto 내부로 옮겼다.

그리고 OutputView에서는 List<Integer> 형태로 꺼내서 전달하도록 구현했더니 테스트를 통과할 수 있었다.

로또 기능 자체를 구현하는 데에는 약 1시간 30분 정도가 걸렸지만, 이 구조적인 오류를 해결하는 데에만 거의 2시간을 사용했다. 그 결과 새로운 기능을 추가할 시간은 부족했고, 남은 시간 동안은 프리코스 기간 동안 받았던 피드백을 떠올리며 리팩토링을 진행한 후 과제를 제출했다.

그래도 테스트는 전부 통과했다!

소감문 작성

이번에는 소감문 작성 시간이 별도로 주어졌다.

이전과 같은 방식일 거라고 생각해서 미리 소감문을 작성해 두었고, 이 시간에는 내용을 조금 더 보완해 추가로 작성했다.

그런데… 소감문에 정해진 형식이 있다는 걸 시험이 끝난 후에 알게 되었다.

이번 최종 코테 회고 글들을 보다가 그제서야 형식이 있다는 사실을 알게 되어 정말 당황했다.

시험을 볼 때 미션을 처음 읽고, “기본 기능 구현 후 도전 과제를 수행하라”는 안내를 보고 기본 기능 구현 부분만 먼저 집중해서 읽었다.

기본 기능을 다 구현한 뒤에 도전 과제 설명을 다시 읽었는데, 바보같이 그 아래에 소감문 형식에 대한 안내가 있는 줄은 전혀 몰라

스크롤을 더 내리지 않았다... 결국 그 부분을 끝까지 읽지 않은 채 자유형식의 소감문을 제출해버렸다.

액댐

나는 제주도에 살고 있어서 1차 합격 메일을 받자마자 비행기표를 끊었다.

하지만 시험 전날, 올라가는 항공편이 결항되었다는 문자를 받았다. 급하게 같은 시간대의 다른 항공편을 예매했는데,

편도 가격이 무려 10만 원이었다…^^

게다가 그날 저녁에는 강풍 주의보까지 떴다.

다행히 시험 당일에 타야 했던 비행기는 결항되지는 않았지만, 지연되었다.

강풍 때문에 비행기가 정말 많이 흔들렸고, 살면서 처음으로 비행기 멀미를 했다.

지연을 어느 정도 예상하고 비행기표를 끊어둔 덕분에 시험장에는 시간 내에 도착해 무사히 시험을 볼 수 있었다.

시험장은 지정석이었고, 나는 강의실 뒤 회의실 안에 배정되었다. 여기서도 작은 문제가 있었다. 코치님들이 시험 관련 안내를 강의실 앞에서 해주셨는데, 마이크 같은 장비 없이 안내를 진행하셔서 회의실 안쪽에서는 정말 거의 들리지 않았다. 그래서 분위기를 보며 눈치껏 행동했다..ㅎㅎ

시험이 끝나자마자 부모님께 끝났다고 연락을 드렸는데, 바로 전화가 왔다. 밤 비행기들이 결항되고 있다는 소식이었다.

예매해 둔 비행기는 결항되지 않아 공항으로 이동했지만, 공항에 도착해 보니 결항과 지연으로 수속장에 사람들이 가득 차 있었다.

결국 내 비행기도 지연되었다.

문제는 지연되어 늦게 출발한 이후였다. 제주도 상공까지 왔지만, 강풍으로 인해 착륙 시도를 하지 못했다.

착륙 직전 관제탑에서 착륙 불가 판정이 내려졌고, 비행기는 땅에 닿기 직전에 급상승했다.

그 이후 제주도 상공을 한참 동안 선회하다가 다시 착륙을 시도했다. 그 과정에서 비행기는 정말 심하게 흔들렸고, 주변 사람들은 하나둘씩 이어폰을 빼고 휴대폰을 덮은 채 창밖만 바라보고 있었다. 몇몇 분들은 비행기 모드를 끄고 연락을 돌리기도 했다.

결국 출발한 지 약 2시간 만에 제주도에 착륙할 수 있었다. (공항 제일 마지막 손님으로 착륙했다!! 그 뒤에 비행기는 다 결항되었다)

마무리하며

올해 해커톤을 진행하며 멘토님을 통해 우테코의 존재를 알게되었다.

우테코의 진행방식이 너무 매력적이였으며, 공부에 진심인 사람들이 모여 10 달 간 같이 공부한다는 것이 너무 재미있을 것 같았다.

그래서 이 사람들 사이에서 같이 시너지를 내며 성장하고 싶은 마음이 생겼다.

그렇게 취준과 인턴 준비를 다 미루고 우테코에 투자했다. 내 생각대로 프리코스만 했을 뿐인데도 배운 내용이 너무 많았다.

개발적으로도 정신적으로 많이 성장한 시간을 보낸것 같다.

이런 소중한 기회를 지원자 모두에게 준 우테코에게 정말 감사하다. 최종 합격을 할 수 있을지는 모르겠지만 (물론 너무 하고 싶다..ㅎㅎ)

이미 값진 경험을 얻은 것 같다.

최종합격 결과에 상관없이 이 과정만으로도 개발 인생의 터닝포인트가 될 것 같다.

[오픈미션] 리액트 공부 3

s00jin — Mon, 24 Nov 2025 18:30:28 +0900

서비스를 구현하면서 추가 공부한 내용입니다.

useState

리액트에서 “변하는 값”을 관리하는 기능.

const [timeLeft, setTimeLeft] = useState(7000);

timeLeft = 현재 값
setTimeLeft = 값을 변경하는 함수
setState가 호출되면 컴포넌트가 다시 렌더링됨

useRef

렌더링과 상관없이 값을 유지하는 저장소.

값 변경해도 렌더링되지 않음
렌더링해도 값이 유지됨
보통 setInterval ID, DOM 요소, 이전 값 저장 등에 사용

const timeRef = useRef(null);

useEffect

“특정 상황에서 실행되는 코드”를 넣는 공간.

useEffect(() => {
    console.log("마운트된 후 실행");
}, []);

의존성 배열(deps)에 따라 다음이 결정됨

deps	실행 시기
[]	처음 1번만 실행
[state]	state 값이 바뀔 때마다 실행
없음	모든 렌더링 이후 실행

useEffect(() => {
    // interval 생성
}, []);

→ 한 번만 실행됨

→ interval이 중복 생성되는 문제를 완전히 제거함

useCallback

함수를 메모이징하는 훅.

const capture = useCallback(() => {...}, [webcamRef]);

deps 안의 값이 바뀌지 않으면 ‘같은 함수’로 취급됨
렌더링 때마다 함수가 새로 만들어지는걸 막아줌
자식 컴포넌트에 props로 넘길 때 성능 최적화됨

setInterval과 clearInterval

setInterval

setInterval(() => {
    console.log("1초마다 실행");
}, 1000);

일정 시간이 지날 때마다 함수를 반복 실행
리턴값은 interval ID (숫자)

clearInterval

clearInterval(intervalID);

setInterval로 만든 반복 타이머를 종료
정확한 “interval ID”가 필요함
→ 그래서 useRef로 그 ID를 저장해두는 것

[오픈미션] 리액트 공부 2

s00jin — Mon, 24 Nov 2025 18:24:34 +0900

컴포넌트, JSX

리액트는 페이지 단위가 아닌 컴포넌트 단위로 나눠서 조합해서 구현함

import './App.css';

function App() {
  const name = "Soojin";
  const naver = {
    name: "네이버",
    url: "https://www.naver.com"
  }
  return (
    <div className="App">
      <h1 
        style={{
          color: "yellow",
          backgroundColor: "black",
        }}>Welcome, {name}
        </h1>
        <a href={naver.url}>{naver.name}</a>
    </div>
  );
}

export default App;

컴포넌트 만들기

component 폴더 만들고 그 안에 넣음

const Hello = () => {
    return <p>Hello</p>
}

export default Hello;

export default function Hello() {
    return <p>Hello</p>
}

위 아래 코드가 같은 것

import './App.css';
import Hello from './component/Hello';

function App() {

  return (
    <div className="App">
      <Hello />
    </div>
  );
}

export default App;

사용하는 곳에 임포트 해줘야함

import Hello from './component/Hello';

사용할때는 그냥 태그로 써주면 됨

<Hello />

Jsx는 하나의 태그로만 구성됨

import World from "./World"

export default function Hello() {
    return (
    <div>
        <h1>Hello</h1>
        <World />
    </div>
    );
}

위처럼 작성하면

이렇게 잘 표현됨

하지만 div 태그를 제거하면

import World from "./World"

export default function Hello() {
    return (
    <div>
        <h1>Hello</h1>
        <World />
    </div>
    );
}

이렇게 오류남

+ div가 아닌 빈 태그로 감싸줘도 됨

CSS 작성법

1. 인라인 태그로 작성

객체로 작성해야함 ⇒ 중괄호 안에 중괄호 하나 더 해서 작성

import World from "./World"

export default function Hello() {
    return (
    <div>
        <h1 style={
            {
                color : "blue",
                backgroundColor: "yellow"
            }
        }>Hello</h1>
        <World />
    </div>
    );
}

- 말고 카멜 케이스로 작성
숫자는 그냥 기입해도 되는데, px 붙는거는 따옴표로 감싸줘야 함

2. 일반 CSS 파일


import './App.css';
import Hello from './component/Hello';
import Welcome from './component/Welcome';

function App() {

  return (
    <div className="App">
      <Hello />
      <Welcome />
      <div className='box'></div>
    </div>
  );
}

export default App;

App.js

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

App.css

3. CSS Module 파일

.box {
  width: 200px;
  height: 100px;
  background-color: rebeccapurple;
}

Hello.module.css

import styles from "./Hello.module.css";

<div className={styles.box}></div>

Hello.js

컴포넌트별로 스타일이 자동 네임스페이스 처리됨
클래스 충돌 방지

이벤트 처리

1. 먼저 함수를 만들어 놓고 사용


export default function Hello() {
    function showName() {
        console.log("Mike");
    }
    return (
    <div>
        <h1>Hello</h1>
        <button onClick={showName}>Show name</button>
        <button>Show age</button>
    </div>
    );
}

2. 내부에 직접 함수 호출

export default function Hello() {
    function showName() {
        console.log("Mike");
    }
    return (
    <div>
        <h1>Hello</h1>
        <button onClick={showName}>Show name</button>
        <button onClick={() => {
            console.log(30);
        }}>Show age</button>
    </div>
    );
}

이 방식의 장점은 매개변수를 전달하기 쉬움

export default function Hello() {
    function showName() {
        console.log("Mike");
    }
    function showAge(age) {
        console.log(age);
    }
    return (
    <div>
        <h1>Hello</h1>
        <button onClick={showName}>Show name</button>
        <button onClick={() => {
            showAge(30);
        }}>Show age</button>
    </div>
    );
}

State

import { useState } from "react";

export default function Hello() {
  const [name, setName] = useState("Mike");

  function changeName() {
    setName(name === "Mike" ? "Jane" : "Mike");
  }

  return (
    <div>
      <h2>{name}</h2>
      <button onClick={changeName}>changeName</button>
    </div>
  );
}

state를 바꾸면 자동으로 화면도 다시 렌더링됨
state를 직접 수정해도 렌더링 X → 반드시 setState 사용

라우터 구현

npm install react-router-dom

라우터 설치

import { BrowserRouter, Route, Switch } from "react-router-dom";

App.js에 불러오기

import DayList from "./component/DayList";
import Header from "./component/Header";
import Day from "./component/Day";
import { BrowserRouter, Route, Routes } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
    <div className="App">
      <Header />
      <Routes>
        <Route path="/" element={<DayList />} />
        <Route path="/day" element={<Day />} />
      </Routes>
    </div>
    </BrowserRouter>
  );
}

export default App;

Link를 써야함 href 대신

import { Link } from 'react-router-dom';
import dummy from '../db/data.json';

export default function DayList() {
    console.log(dummy);
    return <ul className='list_day'>
        {dummy.days.map(day => (
            <li key={day.id}>
                <Link to="/day">Day {day.day}</Link>
            </li>
        ))}
    </ul>;
}

다이나믹 라우트 이용할때는 콜론 이용 (:)

import DayList from "./component/DayList";
import Header from "./component/Header";
import Day from "./component/Day";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import EmptyPage from "./component/EmptyPage";

function App() {
  return (
    <BrowserRouter>
    <div className="App">
      <Header />
      <Routes>
        <Route path="/" element={<DayList />} />
        <Route path="/day/:day" element={<Day />} />
        <Route path="*" element={<EmptyPage />} />
      </Routes>
    </div>
    </BrowserRouter>
  );
}

export default App;

이 경우 day라는 변수로 값을 받을 수 있음

그리고 day로 보내진 값은 useParams를 사용해서 이용

import dummy from "../db/data.json";
import { useParams } from "react-router-dom";

export default function Day() {
    const a = useParams();
    const day = Number(a.day);

    const wordList = dummy.words.filter(word => (
        word.day === day
    ));

    return <>
    <h2>Day {day}</h2>
    <table>
        <tbody>
            {wordList.map(word => (
                <tr>
                    <td>
                        {word.eng}
                    </td>
                    <td>
                        {word.kor}
                    </td>
                </tr>
            ))}
        </tbody>
    </table>
    </>
}

json-server 사용하기

npm install -g json-server

json-server --watch ./src/db/data.json --port 3001

참고 강의

https://www.youtube.com/playlist?list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-

React js 강좌

www.youtube.com

[오픈미션] 리액트 공부 1

s00jin — Mon, 24 Nov 2025 18:00:11 +0900

리액트 기초 강의를 정리한 내용입니다.

리액트는 페이지 전체를 한 번에 만드는 방식이 아니라

컴포넌트 단위로 조립해서 사용하는 방식

리액트 작업 환경 만들기

npx create-react-app my-app
// my-app 부분은 작업할 디렉토리

npx create-react-app .
// .은 현재 디렉토리를 의미

개발 시 서버 실행

npm start
// 리액트 실행

src/index.js 파일이 실행시 처음 실행되는 파일 (메인 파일 느낌?)

배포시 빌드

npm run build

사용하면 build 폴더 생김

npx serve -s build // -s 옵션은 build 폴더의 index.js로 시작하게 해주는 옵션

위 명령어 실행하면 index.js로 시작하는 서버 배포됨

컴포넌트 만들기

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>
      <header>
        <h1><a href="/">WEB</a></h1>
      </header>
      <nav>
        <ol>
          <li><a href='/read/1'>html</a></li>
          <li><a href='/read/2'>css</a></li>
          <li><a href='/read/3'>js</a></li>
        </ol>
      </nav>
      <article>
        <h2>WELCOME</h2>
        Hello, WEB!
      </article>
    </div>
  );
}

export default App;

만약 위 코드에서 header, nav, article이 각각 1억줄씩 있다고 생각하면 너무!~~ 어지러움

정리정돈을 해야함

정리정돈은 서로 연관된 것들을 모음 → 거기다 이름을 붙임

사용자 정의 태그 정의하기 = 컴포넌트 (컴퍼넌트)

앞글자는 무조건 대문자

import logo from './logo.svg';
import './App.css';
function Header() {
  return <header>
        <h1><a href="/">React</a></h1>
      </header>
}
function Nav() {
  return <nav>
        <ol>
          <li><a href='/read/1'>html</a></li>
          <li><a href='/read/2'>css</a></li>
          <li><a href='/read/3'>js</a></li>
        </ol>
      </nav>
}
function Article() {
  return <article>
        <h2>WELCOME</h2>
        Hello, WEB!
      </article>
}
function App() {
  return (
    <div>
      <Header></Header>   
      <Nav></Nav>
      <Article></Article>
    </div>
  );
}

export default App;

이렇게 Header() 만든게 컴퍼넌트

props (데이터 전달)

부모 -> 자식 컴포넌트로 값 전달할 수 있음

<Header title="React" />

컴포넌트에서는

function Header(props) {
  return <h1>{props.title}</h1>
}

import logo from './logo.svg';
import './App.css';
function Header(props) { // props 말고 다른 이름이 와도 됨. 하지만 다들 props라고 함
  console.log('props', props, props.title);
  return <header>
        <h1><a href="/">{props.title}</a></h1> // 리턴에 있는 html에서는 {} 중괄호로 감싸줘야 문자열이 아니라 표현식으로 취급
      </header>
}
function Nav() {
  return <nav>
        <ol>
          <li><a href='/read/1'>html</a></li>
          <li><a href='/read/2'>css</a></li>
          <li><a href='/read/3'>js</a></li>
        </ol>
      </nav>
}
function Article(props) {
  return <article>
        <h2>{props.title}</h2>
        {props.body}
      </article>
}
function App() {
  return (
    <div>
      <Header title="React"></Header>   
      <Nav></Nav>
      <Article title="Welcome" body="Hello, Web!"></Article>
      <Article title="Hi" body="React!"></Article>
    </div>
  );
}

export default App;

li의 값이 하드코딩이라 별로임

import logo from './logo.svg';
import './App.css';
function Header(props) {
  console.log('props', props, props.title);
  return <header>
        <h1><a href="/">{props.title}</a></h1>
      </header>
}
function Nav(props) {
  const lis = []
  for(let i=0; i<props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a></li>);
  }
  return <nav>
        <ol>
          {lis}
        </ol>
      </nav>
}
function Article(props) {
  return <article>
        <h2>{props.title}</h2>
        {props.body}
      </article>
}
function App() {
  const topics = [
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'js', body:'js is ...'}
  ]
  return (
    <div>
      <Header title="React"></Header>   
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, Web!"></Article>
      <Article title="Hi" body="React!"></Article>
    </div>
  );
}

export default App;

위에서 처럼 배열 lis를 만든 후 {lis} 해주면 리액트에서 자동으로 안에 요소들 해줌

배열 요소들을 하나씩 꺼내서 배치해줌

이벤트

onClick={(event) => {
  event.preventDefault();
  props.onChangeMode();
}}

event.preventDefault() : 기본 동작 막음
props.onChangeMode() : 부모에서 내려준 함수 실행

이벤트에서 특정 값을 전달하고 싶으면

props.onChangeMode(event.target.id)

event.target은 이벤트 발생한 DOM 요소

import logo from './logo.svg';
import './App.css';
function Header(props) {
  console.log('props', props, props.title);
  return <header>
        <h1><a href="/" onClick={function(event) {
          event.preventDefault();
          props.onChangeMode();
        }}>{props.title}</a></h1>
      </header>
}
function Nav(props) {
  const lis = []
  for(let i=0; i<props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a></li>);
  }
  return <nav>
        <ol>
          {lis}
        </ol>
      </nav>
}
function Article(props) {
  return <article>
        <h2>{props.title}</h2>
        {props.body}
      </article>
}
function App() {
  const topics = [
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'js', body:'js is ...'}
  ]
  return (
    <div>
      <Header title="React" onChangeMode={function() {
        alert('Header');
      }}></Header>   
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, Web!"></Article>
      <Article title="Hi" body="React!"></Article>
    </div>
  );
}

export default App;

화살표 함수로 변경해서 적용할 시

import logo from './logo.svg';
import './App.css';
function Header(props) {
  console.log('props', props, props.title);
  return <header>
        <h1><a href="/" onClick={(event) =>{
          event.preventDefault();
          props.onChangeMode();
        }}>{props.title}</a></h1>
      </header>
}
function Nav(props) {
  const lis = []
  for(let i=0; i<props.topics.length; i++) {
    let t = props.topics[i];
    lis.push(<li key={t.id}><a href={'/read/'+t.id}>{t.title}</a></li>);
  }
  return <nav>
        <ol>
          {lis}
        </ol>
      </nav>
}
function Article(props) {
  return <article>
        <h2>{props.title}</h2>
        {props.body}
      </article>
}
function App() {
  const topics = [
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'js', body:'js is ...'}
  ]
  return (
    <div>
      <Header title="React" onChangeMode={() => {
        alert('Header');
      }}></Header>   
      <Nav topics={topics}></Nav>
      <Article title="Welcome" body="Hello, Web!"></Article>
      <Article title="Hi" body="React!"></Article>
    </div>
  );
}

export default App;

State

const [mode, setMode] = useState('WELCOME');
const [id, setId] = useState(null);

mode가 바뀌면 자동으로 UI가 업데이트됨
React는 데이터가 바뀌면 화면을 다시 렌더링한다는 개념
주의 ) 입력값을 태그 속성값으로 넣을 때 문자로 변환 됨. (숫자도)

Create

새 배열을 만들고 추가해야함!!

setTopics([...topics, newTopic]);

여기서 ...은 topics를 그대로 복붙하는 것

Update

useState로 기존 값을 기본값으로 채움
onSubmit에서 업데이트 실행
create + read 같은 느낌임. 하이브리드 처럼 사용

Delete

“실제로 삭제”가 아니라,
해당 id를 제외한 새로운 배열을 만들어 교체하는 방식

참고 강의 및 자료

https://www.youtube.com/playlist?list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7

React 2022 개정판

www.youtube.com

빠르게 시작하기 – React

The library for web and native user interfaces

ko.react.dev

[오픈미션] Javascript 공부

s00jin — Mon, 24 Nov 2025 17:34:04 +0900

리액트 자신있게 들어가려고 했다..

하지만 난 HTML, CSS만 가능한 사람…

것도 기본 문법이랑 늬양스 정도만 아는…

그래서 급 드래프트로 자바스크립트 공부 먼저 했다.

근데 리액트 강의를 켰더니 자바스크립트를 알아야 한다고 한다..

(이런 사실도 몰랐던 엄청난 코린이….)

변수와 스코프

const

상수
선언 + 초기와 + 할당이 한번에 이루어짐
재할당 불가

let

변하는 값
한 번 선언된 변수를 다시 선언하면 에러
블록 스코프

var

한 번 선언된 변수를 다시 선언 할 수 있음 (재선언 가능)
선언하기 전에 사용 가능 (호이스팅)
하지만 할당은 할당된 위치 이후부터 가능
그전에 사용하면 undefined
함수 스코프

호이스팅

스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동 (할당 X)

변수의 생성과정

선언 단계
초기화 단계
할당 단계

var

선언 및 초기화 단계
할당 단계

let

선언 단계
초기화 단계
할당 단계

const

선언 + 초기화 + 할당

var : 함수 스코프

let, const : 블록 스코프

결론

이왕이면 var 말고 let, const 써서 예측 가능한 코드를 짜는게 좋다!!

브라우저 기본 함수

alert() → 단순 알림 느낌

prompt() → 사용자에게 값을 입력 받을 때 (문자열 반환)

인수 2개 가능
- 두번째는 기본값

confirm() - 확인/취소가 있는데 각각 true/false 반환

단점

스크립트를 강제로 일시 정지함
스타일링 불가능

형변환

String() → 문자형으로 변환 (대문자로 시작해야 함)

Number() → 숫자형으로 변환

Boolean() → 불린형으로 변환

프롬프트 입력 시 입력 값은 문자열이 됨

false

숫자 0
빈 문자열
null
undefined
NaN

주의사항

Number(null) → 0

Number(undefined) →NaN

Boolean(0) → false

Boolean(’0’) → true

Boolean(’’) → false

Boolean(’ ‘) → true

기본 연산자

거듭제곱: **
일치 비교:
- === 타입 + 값 모두 비교
- == 자동 형변환 → 1 == "1" → true

조건문

if / else if / else
switch
(case마다 break 필요)

반복문

for

for (let i = 0; i < 10; i++) {}

while

while (i < 10) { i++; }

do … while

한 번은 무조건 실행

break / continue

반복 제어

함수

function sayHello(name) {
	console.log(`Hello, ${name}`);
}

함수 선언문

sayHello();  // 호이스팅 가능

function sayHello() {
	console.log('Hello');
}

어디서든 호출 가능
인터프리터 방식이지만 코드를 실행하기 전 선언된 함수를 모아 먼저 실행해둠
= 호이스팅 방식

함수 표현식

let sayHello = funtion() {
	console.log('Hello');
}
sayHello();

코드에 도달하면 생성

화살표 함수

const add = (a, b) => a + b;

화살표 함수의 특징

자신만의 this 없음 → 외부 this를 가져옴

객체 Object

method: 객체 프로퍼티로 할당 된 함수

const superman = {
	name:'clark',
	age:33,
	fly:function(){  // funcion 키워드 생략 가능 :이것도 같이 생략 가능
		console.log('날아갑니다')
	}
}

화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음

화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져 옴

배열

let student = [’철수’, ‘영희’, … , ‘영수’];

배열은 문자뿐만 아니라, 숫자, 객체, 함수 등도 포함할 수 있음
length : 배열의 길이
push : 배열 끝에 추가
pop : 배열 끝 요소 제거
unshift : 배열 앞에 추가
shift : 배열 앞에 제거

반복문

for
for … of

let days = ['월', '화', '수'];

for(let day of days) {
	console.log(day);
}

for … in 이 아님 이건 배열에서는 비추

생성자 함수

보통 첫글자는 대문자로
new 연산자를 사용하여 호출

function User(name, age) {
	this.name = name;
	this.age = age;
	this.sayName = function() {
		console.log(this.name);
	}
}

let user1 = new User('Mike', 30);
let user2 = new User('Jane', 22);

user1.sayName(); // 'Mike'

computed property

const key = "age";
const user = {
  name: "Mike",
  [key]: 30
};

Object 메소드

assign() : 객체 복사

const newUser = Object.assign({}, user);

{} + { name : 'Mike', age : 30 } =

-----------

Object.assign({ gender:'male' }, user);

위처럼 초기값 주면
gender : 'male',
name : 'Mike',
age : 30,

이렇게 됨
초기값에 들어간 키가 같다면 뒤에 user에꺼를 덮어씀

------------------

const user = {
	name : 'Mike'
}
const info1 = {
	age : 30,
}
const info2 = {
	gender : 'male',
}

Object.assign(user, info1, info2)
이렇게 하면 user에 info1과 info2 합치는 것

{} 초기값 , user 가 초기값에 들어감

그래서 새로운 객체에 복사되는 것

Object.keys() : 키 배열 반환

const user = {
	name : 'Mike',
	age : 30,
	gender : 'mail',
}

Object.keys(user);
// ["name", "age", "gender"]

Object.values() : 값 배열 반환

const user = {
	name : 'Mike',
	age : 30,
	gender : 'male',
}

Object.values(user);
// ["Mike", 30, "male"]

Object.entries() : 키/값 배열 반환

const user = {
	name : 'Mike',
	age : 30,
	gender : 'male',
}

Object.entries(user); 

//
[
	["name", "Mike"],
	["age", 30],
	["gender", "male"]
]

Object.fromEntries() : 키/값 배열을 객체로

const arr = 
[
	["name" "Mike"],
	["age", 30],
	["gender", "male"]
];

Object.fromEntries(arr);

//
{
	name: 'Mike',
	age : 30,
	gender : 'mail',
}

Symbol

유일성 보장

const a = Symbol(); // new 붙이지 않음

const b = Symbol();

const c = Symbol(’id’); // 이렇게 설명 추가 가능

console.log(a) // Symbol() 출력

a === b // false

const id = Symbol('id');
const user = {
	name : 'Mike',
	age : 30,
	[id] : 'myid'
}

user 
// {name: "Mike", age: 30, Symbol(id): "myid"}
user[id] // "myid"

// 하지만 Object 메소드 사용시 키가 심볼형인 애들은 건너뜀
Object.keys(user); // ["name", "age"]
Object.values(user); // ["Mike", 30]
Object.entries(user); // [Array(2), Array(2)]

// 숨겨진 심볼 키를 보고 싶다면
Object.getOwnPropertySymbols(user); // [Symbol(id)]
Reflect.ownKeys(user); // ["name", "age", Symbol(id)]

Symbol.for() : 전역 심볼

하나의 심볼만 보장 받을 수 있음
없으면 만들고, 있으면 가져오기 때문
Symbol 함수는 매번 다른 Symbol 값을 생성하지만,
Symbol.for 메소드는 하나를 생성한 뒤 키를 통해 같은 Symbol을 공유

const id1 = Symbol.for('id');
const id2 = Symbol.for('id');

id1 === id2 // true

// 이름을 얻고 싶다면
Symbol.keyFor(id1) // "id"

// 만약 전역 심볼이 아닌데 이름을 알고 싶다면
const id = Symbol('id 입니다');
id.description; // "id 입니다"

// 다른 개발자가 만들어 놓은 객체
const user = {
	name: "Mike",
	age: 30,
};

// 내가 작업
// user.showName = function() {}; // 이렇게 하면 아래 사용자가 보는 메세지가 이상해짐
const showName = Symbol("show name");
user[showName] = function () {
	console.log(this.name);
};

user[showName](); // Mike

// 사용자가 접속하면 보는 메세지
for (let key in user) {
	const.log(`His ${key} is ${user[key]}.`);
}

// His name is Mike.
// His age is 30.

자바 자료형 총정리 | 기본형, 참조형, 래퍼 클래스

s00jin — Wed, 22 Oct 2025 16:44:20 +0900

자바 자료형

기본 자료형 (Primitive Data Type)
참조 자료형 (Reference Data Type)
래퍼 클래스 (Wrapper Class)

기본 자료형 | Primitive Data Type

변수가 “실제 값”을 가짐

타입 크기 표현 범위

	타입	크기	표현 범위
진위형	boolean	1bit	true / false
문자형	char	2바이트	0 ~ 65,535 (유니코드)
정수형	byte	1바이트	-128 ~ 127
정수형	short	2바이트	-32,768 ~ 32,767
정수형	int	4바이트	-2,147,483,648 ~ 2,147,483,647
정수형	long	8바이트	약 ±9.22×10¹⁸
실수형	float	4바이트	약 ±3.4×10⁻³⁸ ~ ±3.4×10³⁸
실수형	double	8바이트	약 ±1.7×10⁻³⁰⁸ ~ ±1.7×10³⁰⁸

참조 자료형 | Reference Data Type

데이터가 저장된 “주소 값”을 가짐

실제 값 X, 객체를 참조하는 데이터 타입

대표적인 참조 자료형

String, ArrayList, HashMap, HashSet, LinkedList, Queue, Stack 등
String, 클래스, 인터페이스, 배열, 열거 타입 등

래퍼 클래스 | Wrapper Class

기본 자료형을 ‘객체 (Object)’로 다루기 위해 객체화 시키는 클래스

→ 기본 타입의 객체화

	기본 자료형 (Primitive Type)	래퍼 클래스 (Wrapper Class)
진위형	boolean	Boolean
문자형	char	Character
정수형	byte	Byte
정수형	short	Short
정수형	int	Integer
정수형	long	Long
실수형	float	Float
실수형	double	Double

박싱과 언박싱

출처 http://www.tcpschool.com/java/java_api_wrapper

박싱 (Boxing)

기본 타입 → 래퍼 클래스

// Java 1.5 이상 버전부터 오토 박싱이 적용된다
int primitiveInt = 1;
Integer wrapperInteger = primitiveInt;

// 수동 박싱 시
int primitiveInt2 = 2;
Integer wrapperInteger2 = Integer.valueOf(primitiveInt2);

언박싱(Unboxing)

래퍼 클래스 → 기본 타입

// Java 1.5 이상 버전부터 오토 언박싱이 적용된다
Integer integer1 = 1;
int primitiveInt = integer1;

// 수동 언박싱 시
Integer integer2 = 2;
int primitiveInt2 = integer2.intValue();

	기본 자료형 (Primitive Type)	래퍼 클래스 (Wrapper Class)	언박싱 (Unboxing)
진위형	boolean	Boolean	a.booleanValue()
문자형	char	Character	a.charValue()
정수형	byte	Byte	a.byteValue()
정수형	short	Short	a.shortValue()
정수형	int	Integer	a.intValue()
정수형	long	Long	a.longValue()
실수형	float	Float	a.floatValue()
실수형	double	Double	a.doubleValue()

추가 메모

제너릭 타입 내에서 사용 가능 여부
기본 자료형 X, 래퍼 클래스 O

null 초기화 가능 여부
기본 자료형 X, 래퍼 클래스 O

참조 자료형 변수는 null로 초기화 가능

래퍼 클래스는 불변(Immutable) 객체

참고 링크

https://adjh54.tistory.com/119

[회고] 1주차 프리코스 회고

s00jin — Wed, 22 Oct 2025 00:08:45 +0900

출처 https://www.woowacourse.io/apply

우테코에 지원하며

이번에 우아한테크코스 8기에 지원했다. ~~사실 몇개월 전까지 우테코가 뭔지도 몰랐다..ㅎ~~

구름톤 유니브 대표를 맞게 되면서 지부 해커톤을 운영했는데, 이때 만난 멘토분께서 우테캠 출신이란걸 알게 되면서 우테코와 우테캠에 대해서 알게되었다.

그래서 내가 왜 우테코에 지원했냐?

바로 지금 내 자신은 껍데기만 요란하고 속은 빈 것 같아서 지원했다. 한마디로 얇고 넓은 지식???이라기엔 넓지도 않은 것 같다. 취업 준비를 하며 더더욱 빈 껍데기 같다는 걸 느끼게 되었다.

그래서 휴학도 한번 하지 않았고, 4년 꾸준히 학교를 다녔으니, 취업 준비에 너무 급급하지 않고, 이번 기회에 진득하게 약 1년을 바쳐 하고 싶은 공부를 하고 싶었다.

4년동안 학교를 쉬지않고 다닌 이유도, 정해진 공부가 아닌 하고 싶은 공부를 하고 싶어서다. 그래서 학교라는 곳을 탈출하고 싶었기에 쉬지않고 다녔다.

1주차 프리코스 과제를 하며

1주차 프리코스 과제를 처음 마주했을땐 생각보다 쉽다고 느껴졌다. 하지만 과제가 아닌 지켜야 할 규칙인 구글 자바 스타일 가이드와 커밋 컨벤션을 코드에 적용하는게 쉽지 않을 것 같다고 생각했다.

우테코에서 정해준 구글 자바 스타일 가이드와 커밋 컨벤션의 레퍼런스를 해석하고 공부하는데만 꼬박 3일이 걸렸다. 이것 또한 완벽하게 공부한게 아닌 큰 틀의 이해였고, 코드를 작성하며 꾸준히 레퍼런스를 참고했다.

과제는 문제 자체는 간단했다. 하지만 내가 느끼기에는 추상적인 부분이 많다고 느껴졌다. 근데 알고보니 문제에 답이 다 있었다. 문제를 하나하나 뜯어보며, 예외 상황을 분석했고, 문제를 구체화 해나갔다. 그 과정에서 단순한 기능 구현의 문제라도 생각해야할 예외 처리가 많다는 걸 배웠다.

1주차 느낀점

평소 팀 프로젝트를 할 때 기능 구현에만 급급하고 예외 처리는 신경 쓰지 않았다. 이번 1주차 과제를 하며, 예외 처리의 중요성을 느껴 반성하게 되었다. 그리고 커밋 또한 내가 생각했을 때 적당한 시기일 때 커밋을 했었는데, 이번에 기능 목록을 작성하고, 이 목록의 단위로 커밋을 진행하여, 체계적인 커밋 단위를 통해 협업 효율성과 코드 리뷰의 효율성을 높일 수 있을 것같다는 점을 깨달았다.

코드 리뷰를 주고 받으며

처음으로 제대로된 코드 리뷰 방법을 알고, 코드 리뷰를 주고 받았다.

우선 코드 리뷰를 하며 많은 것을 배웠다. 어떤 식으로 구조를 잡는게 좋은지, 역할을 분리하기 위해 메서드를 사용하여 코드 작성하기, Javadoc 작성하기 등 다른 사람의 코드를 리뷰하며 내 코드를 다시 돌아보게 되고, 반성하며 배우게 되었다.

또한 내 코드에 stream 사용해보기, 배열이 아닌 List 사용해보기 등의 리뷰를 받았다. 리뷰어 선생님들이 어떻게 하면 좋을지에 대한 코드까지 리뷰로 달아주셨다…(그저 경외감..✨)

멘토님들의 힘나는 글들

네오님의 1주 차 피드백 글에 있던 글이다.

우아한테크코스에서는 '완벽하게 해내는 것'보다 '새로운 시도를 멈추지 않는 것'을 더 중요하게 생각합니다. 도전은 단순히 어려운 문제를 푸는 행위가 아니라, 자신이 아직 모르는 영역에 한 발 더 내딛는 태도입니다.

미션을 수행하다 보면 예상치 못한 오류나 막히는 순간을 여러 번 겪게 될 것입니다. 그럴 때 포기하지 않고 문제를 끝까지 탐색해 보는 경험이 바로 성장의 출발점입니다. 하지만 얼마나 탐색해야할지, 얼마나 도전해야할지 막연할 수 있습니다. 그래서 작은 도전부터 시작해 보세요.

이번 1주차 과제를 하고 코드 리뷰를 받으며, 기존에 내가 잘 모르던 부분인 정규화와 스트림, 컬렉션들을 깨닫고, 하나씩 공부해 2주차에 적용해봐야겠다.

포비님의 글

뭐지? 난 구현 자체도 힘든데 OOP, TDD, MVC, DDD, AOP, 헥사고날 아키텍처 등등등 (포비 마음 속 생각: 벌써 저걸 잘하면 우테코가 아니라 취업하는게 낫지 않나?) 모두 처음 들어보는 용어들. 다들 너무 잘 하네. 난 힘들겠다. 그냥 포기해 버릴까?

앞으로도 삶을 살아가면서 비슷한 상황이 반복될 텐데요. 마음 속에서 이런 속삭임이 들린다면 어떻게 하면 좋을까요? 여러분은 이런 상황 속에서 어떤 선택, 어떤 마음 가짐으로 임하는 것이 좋을까요? 여러분이 이번 프리코스에서 진정 얻어가야할 것은 무엇일까요?

지난 번 토론하기에도 남겼던 글인데 다시 한번 남겨 봅니다. 성장은 프로그래밍 역량과 같은 하드 스킬 뿐만 아니라 소프트 스킬 역량도 있습니다. AI가 이렇게 빠르게 발전하고 있는 지금 시대는 소프트 스킬 역량의 중요성이 점점 더 높아지고 있는지도 모릅니다.

우리가 학창 시절에는 성적이라는 정량화된 평가 기준이 있기 때문에 성적에 따라 내가 성장하고 있음을 느낄 수 있는데요. 학교를 졸업한 후에는 성적과 같은 정량적인 기준이 없기 때문에 내가 잘 성장하고 있구나를 인식하는 것이 참 힘들고 어려운 일인 것 같아요. 하지만 사회 생활을 할 수록 현재 나의 상태를 인식하는 것(메타인지라 할까요?)은 더더욱 중요해 지는 것 같아요.

이번 프리코스 과정을 통해 여러분이 잘 성장하고 있는지를 어떻게 판단할 것인지에 대한 기준을 세우고, 이렇게 정한 기준이 맞지 않는다 판단하면 다른 기준을 세워보면서 나만의 기준을 찾아가는 것 또한 저는 성장이라고 생각해요.

성장이라는 것을 너무 하드 스킬(프로그래밍 역량)적인 부분에 한정하지 말고 성장을 바라보는 나의 기준, 어려운 문제를 접했을 때의 나의 마음가짐, 잘하는 주변 사람에게 흔들리지 않는 자세, 실패하더라도 도전하는 것과 같은 소프트 스킬과 같은 부분도 성장하는 것이라 생각해 보면 어떨까요?

포비님이 남겨주신 글이다.

처음 글을 시작할 때 나온 인용글이 1주차를 진행하며, 그리고 커뮤니티를 보며 느낀 내 마음 속 생각과 똑같다.. 하지만 1년을 바칠 준비를 하고 시작한 것이기에, 어떤 상황에서도 프리코스 과정 만큼은 후회 없을 정도의 열정을 쏟고 싶다. 그리고 1주차를 진행하며, 기존에 내가 공부해오던 방식과 습관에 대해 많은 반성을 했다. 이번 프리코스에서 겉핥기 식으로 공부하던 습관을 버리고, 기초부터 차근차근 쌓아가야겠다.

그리고 함께 공유하고 성장하는 즐거움을 배워야겠다..!

Git 커밋 메시지 정리본

s00jin — Sat, 18 Oct 2025 15:14:21 +0900

우테코 프리코스에서는 커밋 메시지를 준수해야한다고 한다..!

AngularJS Git Commit Message Conventions 의 커밋 메시지를 참고 작성하라고 하는데..

나는 영알못이라…. 원활한 미션 진행을 위해 나름의 번역을 통해 정리본을 만들었다.

커밋 메시지 목표

스크립트로 CHANGELOG.md 생성
중요한 커밋이 아닌 것들을 git bisect 로 무시
커밋 기록을 확인할 때 더 나은 정보 제공

CHANGELOG.md 생성

마지막 릴리즈 이후 모든 Subjects list (커밋 메시지의 첫 줄) 목록 출력:

git log <last tag> HEAD --pretty=format:%s

이 릴리스의 새로운 기능만 출력:

git log <last release> HEAD --grep feature

—grep feature
- 커밋 메시지 안에 feature을 검색 (즉, feature이 들어간 커밋들만 검색 후 출력)

—grep <검색어>
커밋 메세지들에서 검색어가 포함된 애들만 출력해주는 것 같다

중요하지 않은 커밋 식별

포매팅 변화 (공백/ 빈 줄 추가/ 제거, 들여쓰기)
세미콜론 누락
주석 등

변경 내역을 조회할 때 중요하지 않은 커밋 무시 = git bisect 사용

git bisect skip $( git rev-list --grep irrelevant <good place> HEAD )

‘irrelevant’ 라는 문구가 있는 커밋은 무시

커밋 메시지의 형식

<type>(<scope>): <subject>  # Subject line
<BLANK LINE>  # 빈줄
<body>  # Message body
<BLANK LINE>  # 빈줄
<footer>  # Message footer

Subject line, Message body, Message footer로 구분됨
- 각 부분은 빈 줄로 구분
대개의 경우 Subject line으로만 작성되기도 함
- Message body와 Message footer는 선택
한 줄에 100자를 넘기지 않아야 함

Subject line

변경 사항에 대한 간략한 설명이 포함됨

<type>

feat - 새로 추가된 기능
fix - 버그 수정
docs - 문서 관련
style - 포매팅, 세미콜론 누락 등
refactor - 리팩토링
test - 테스트 관련
chore - 그 외 자잘한 수정

<scope>

커밋 변경사항이 있는 위치를 지정하는 무엇이든 올 수 있음

ex) $location, $browser, $compile, $rootScope, $ngHref, $ngClick, $ngView 등

커밋이 영향을 주는 파일이나 기능 단위를 표현해도 됩니다 ex) login, signup, api, home, user-service, router 등

<subject>

명령형, 현재 시제 사용
- ✅ change, ❌ changed, ❌ changes
대문자로 시작하지 않기
끝에 . (마침표) 붙이지 않기

Message body (선택적 작성)

명령형, 현재 시제 사용
- ✅ change, ❌ changed, ❌ changes
변화에 대한 동기(이유)를 작성해야 함
이전과 변화 후의 차이를 기재

Message footer (선택적 작성)

주요 변경 내역과 어떤 이슈를 해결했는지 기재

Breaking changes

변경점, 변경 사유, 마이그레이션 지시(description of the change, justification and migration notes)가 언급되어야 함

예시

BREAKING CHANGE: isolate scope bindings definition has changed and
    the inject option for the directive controller injection was removed.
    
    To migrate the code follow the example below:
    
    Before:
    
    scope: {
      myAttr: 'attribute',
      myBind: 'bind',
      myExpression: 'expression',
      myEval: 'evaluate',
      myAccessor: 'accessor'
    }
    
    After:
    
    scope: {
      myAttr: '@',
      myBind: '@',
      myExpression: '&',
      // myEval - usually not useful, but in cases where the expression is assignable, you can use '='
      myAccessor: '=' // in directive's template change myAccessor() to myAccessor
    }
    
    The removed `inject` wasn't generaly useful for directives so there should be no code using it.

Referencing issues

해결된 이슈도 Closes#<이슈번호> 를 사용하여 기재

Closes #123

// 해결된 이슈 여러개
Closes #123, #234, #345

예시

feat($browser): onUrlChange event (popstate/hashchange/polling)

Added new event to $browser:
- forward popstate event if available
- forward hashchange event if popstate not available
- do polling when neither popstate nor hashchange available

Breaks $browser.onHashChange, which was removed (use onUrlChange instead)

fix($compile): couple of unit tests for IE9

Older IEs serialize html uppercased, but IE9 does not...
Would be better to expect case insensitive, unfortunately jasmine does
not allow to user regexps for throw expectations.

Closes #392
Breaks foo.bar api, foo.baz should be used instead

feat(directive): ng:disabled, ng:checked, ng:multiple, ng:readonly, ng:selected

New directives for proper binding these attributes in older browsers (IE).
Added coresponding description, live examples and e2e tests.

Closes #351

style($location): add couple of missing semi colons

docs(guide): updated fixed docs from Google Docs

Couple of typos fixed:
- indentation
- batchLogbatchLog -> batchLog
- start periodic checking
- missing brace

참고 링크

Git Commit Message Conventions

https://so-tired.tistory.com/325

버그가 발생한 커밋 찾기 (git bisect)

우아한테크코스 4기 프리코스 후기 (2) - Commit Log 컨벤션

[부하 테스트] 부하 테스트를 위한 기본 개념

s00jin — Thu, 18 Sep 2025 22:56:56 +0900

성능 테스트를 공부하면서 정말 맨땅에 헤딩하듯 삽질을 많이 했다.
혹시 나처럼 처음 시작하는 사람들에게 조금이라도 도움이 되길 바라며, 내가 정리한 내용을 공유한다.

이 글들은 내가 공부하면서 찾아본 자료들을 정리한 것이다.
특히 인프런 박재성님 강의가 가장 큰 도움이 되었다.

부하 테스트에 관심이 있다면 이 강의를 추천한다.
~~(솔직히 강의를 듣기 전에는 부하테스트 공부를 포기할까 고민했는데, 듣자마자 신세계였다. 강추!!)~~

부하 테스트를 하는 이유

내가 만든 프로젝트를 배포하기 전에, 이 서비스가 어느 정도의 부하를 견딜 수 있는지 알아야 한다.

예를 들어, 1초에 100명 요청도 못 버티는 서비스를 그냥 배포했다가 그 이상의 요청이 들어오면 서버는 바로 터질 것이다.

그래서 현재 서비스가 감당할 수 있는 트래픽 수준을 확인하고, 병목 구간을 찾아내 성능을 개선하는 과정이 필요하다.

테스트 → 병목 확인 → 개선을 반복하면서 점점 안정된 서비스를 만들어가는 것이다.

꼭 알아야하는 필수 개념 3가지

1. Throughput (처리량)

단위 시간(1초)당 시스템이 처리하는 트래픽 양

TPS (Transactions Per Second)

초당 처리되는 트랜잭션 수
예: 1초에 100개 → 100 TPS

RPS (Requests Per Second):

초당 처리되는 HTTP 요청 수

2. Latency (지연 시간)

요청을 보낸 시점부터 응답을 받기까지 걸리는 시간

3. Availability (가용성)

시스템이 정상적으로 서비스를 제공할 수 있는 가능성
장애 발생 확률이 높으면 가용성이 낮고, 적으면 높다.

가용성을 높이는 방법

서비스 장애 시간을 최대한 발생하지 않도록 한다.
장애가 나더라도 빨리 복구한다. (장애 발생 시간이 짧도록)
장애 시간을 줄이는 대표적인 방법 → 시스템 이중화

시스템 이중화

시스템 일부에 장애가 발생하여도 다른 시스템을 이용할 수 있게 만드는 것

ex) 일차선 도로에서 사고 발생 -> 도로 이용 불가
일차선 도로를 이차선 도로로 확장 -> 일차선에서 사고가 발생해도 이차선 이용 가능

그 외 개념

임계점

TPS가 점점 올라가다가 일정 수준에서 유지되는 지점이 임계점(병목 지점)이다.
이 지점 이후부터는 요청이 밀리고, 응답 시간도 늘어난다.

병목 지점

특정 자원이 한계에 도달해서 성능이 떨어지는 구간이다.

위 그림처럼 b-c 구간에서 차선이 줄어들어 정체(병목 지점)가 발생한다면, 전체 처리량(Throughput)은 결국 b-c 구간 처리량에 맞춰진다.

따라서 성능 개선을 하고 싶다면 a-b 구간이 아니라 b-c 구간을 개선해야 한다.

즉, 병목 지점을 찾아내고 그 부분을 개선하는 것이 성능 튜닝의 핵심이다.

실제 시스템에서는 A=사용자, B=서버, C=데이터베이스라고 생각하면 된다.

[동시성 문제] 더블 클릭과 네트워크 문제로 인한 동시성 문제 해결

s00jin — Thu, 18 Sep 2025 15:59:59 +0900

문제

해커톤 운영진으로 활동하던 당시 굉장히 좋은 백엔드 멘토님을 알게 되었다.

해당 백엔드 멘토님은 해커톤 진행 당시 밤을 새며 참가자들을 멘토링 해주셨는데, 쉬는 시간에도 쉬지 않고, 운영진들에게도 취업 멘토링을 해주셨다.

그래서 내 프로젝트와 포트폴리오도 멘토링 해주셨는데, 그때 해주신 질문이 스노우볼 효과로 여기까지 왔다.

멘토님이 해주신 질문은 이 프로젝트에 동시성 문제는 어떻게 해결했냐? 였다.

더 자세하게 말하자면, 프로젝트 모집 공고에 동시에 지원하거나 동시에 수락하면 동시성 문제는 어떻게 되냐?였다.

해당 프로젝트 아래와 같은 특징이 있다

단일 서버환경으로 구축
프로젝트 모집 공고에 지원자 수 제한이 없음
지원자 수락 또한 모집 공고를 올린 사용자 단 한명만 가능

이러한 특징 때문에 동시성이 발생하지 않을 거라 생각했다.

그래서 멘토님에게 내 생각과 함께 질문을 드렸다.

단일 서버 환경에서도 더블클릭이나 네트워크 문제로 동시성 문제가 발생할 수 있어요

생각지도 못한 부분의 문제였다.

더블클릭과 네트워크 문제로 인한 동시성 문제가 발생할거라곤 생각도 못했다.

자바는 단일 서버 환경이라고 해서 단일 스레드 환경이 아니다.
단일 서버에서도 멀티 스레도 환경으로 동작하기 때문에 위 같은 문제가 발생할 수 있던 것이다.

동시성 문제 확인

동시성 문제가 발생하는지 확인하기 위해 더미 데이터와 junit으로 멀티 쓰레드 환경을 만들어 테스트 해봤다.

첫 시도

정직하게 쓰레드를 2로 설정해서 테스트 했다.

2로 설정하여 테스트 하려고 하니 문제 상황을 재현하기 힘들었다.

보완

그래서 스레드 수를 20으로 늘려 극단적인 상황을 시뮬레이션했다.

@SpringBootTest
public class DoubleClickTest {

    @Autowired
    private ApplicationService applicationService;

    @Autowired
    private FieldRepository fieldRepository;

    @Test
    void doubleClickTest throws InterruptedException {
        Long applicationId = 4001L; // userA 지원서
        Integer status = 2; // 2 = 지원서 수락

        int threadCount = 20; // 더블클릭 상황을 극단적으로 표현 → 요청 20번
        ExecutorService executorService = Executors.newFixedThreadPool(threadCount);
        CountDownLatch latch = new CountDownLatch(threadCount);

        for (int i = 0; i < threadCount; i++) {
            executorService.submit(() -> {
                try {
                    // 일부러 동시에 부딪히게 지연
                    Thread.sleep(100);
                    applicationService.acceptApplication(applicationId, status);
                } catch (Exception e) {
                    System.out.println("예외 발생: " + e.getMessage());
                } finally {
                    latch.countDown();
                }
            });
        }

        latch.await();

        // 최종 Field 상태 확인
        // 1이 나와야 문제 없는 상황
        Field field = fieldRepository.findById(3000L).orElseThrow();
        System.out.println("최종 수락 인원(accept_member): " + field.getAcceptMember() +
                " / 정원(range_value): " + field.getRange());
    }
}

그랬더니 최종 수락 인원이 1도 아닌 20도 아닌 5가 나와버렸다.

테스트 후 기존 코드들을 다시 살펴봤다.

문제가 많아도 너무 많았다...

현재 로직에서는 정원을 넘으면 모집 상태가 모집 종료로 변하면서 프론트 딴에서만 지원 화면에 접근할 수 없는 상태이다
그래서 정상적인 사용자 흐름에서는 프론트 단에서 해결 가능하지만, 백엔드 관점에서는 문제가 될 수 있던거다.
그리고 transactional 애너테이션이 누락되어 있었다.

문제 해결 1. 정원 초과 검증 로직 추가

정원 초과에 대한 검증을 백엔드에서 처리하지 않던 기존 코드이다.

// 필드 조회
        List<Field> fields = fieldRepository.findByProject_ProjectId(project.getProjectId());

        fields.forEach(field -> {
            // 수락되면 필드의 현재 수락된 멤버 수 증가
            if (field.getDepartment().equals(projectMember.getDepartment())) {    // 지원한 분야랑 같은 분야 확인
                field.setAcceptMember(field.getAcceptMember() + 1); // 같으면 지원 수락 된 인원 1 증가

                // 모집 인원보다 모집된 인원이 크거나 같으면 분야 모집 상태 2(모집 완료)로 수정
                if (field.getAcceptMember() >= field.getRange()) {
                    field.setDepartmentMemberStatus(2);
                }
            }
        });

아래는 정원 초과 검증 로직을 추가한 코드이다.

// 필드 조회
        List<Field> fields = fieldRepository.findByProject_ProjectId(project.getProjectId());

        fields.forEach(field -> {
            // 수락되면 필드의 현재 수락된 멤버 수 증가
            if (field.getDepartment().equals(projectMember.getDepartment())) {    // 지원한 분야랑 같은 분야 확인
                // 정원 초과 검증 
                if (field.getAcceptMember() >= field.getRange()) {
                    throw new IllegalStateException("이미 정원이 가득 찼습니다.");
                }
                field.setAcceptMember(field.getAcceptMember() + 1); // 같으면 지원 수락 된 인원 1 증가

                // 모집 인원보다 모집된 인원이 크거나 같으면 분야 모집 상태 2(모집 완료)로 수정
                if (field.getAcceptMember() >= field.getRange()) {
                    field.setDepartmentMemberStatus(2);
                }
            }
        });

문제 해결 2. 동시성 문제 해결

우선 동시성 문제를 어떻게 해결할까 고민해서 나온 세 가지 방안이 있다.

synchronized를 사용해서 동시성 문제 해결
데이터 베이스 원자적 쿼리로 변경
비관적 락 사용
1. 데이터 수정 전 미리 해당 데이터에 접근 제한
2. 락으로 인한 성능 저하 발생 가능
낙관적 락 사용
1. 트랜잭션 충돌이 발생하지 않을거라고 낙관적으로 가정
2. 여러 트랜잭션의 동시 접근 허용 → 미리 락 X, 충돌이 발생하면 그때 처리
3. @Version을 사용하여 확인

간단하게 1번으로 할까 했지만, synchronized는 단일 서버 환경에서만 보장이 된다.

해당 프로젝트는 추후 멀티 서버 환경을 구현할 수도 있는 프로젝트라 후보에서 제외했다.

그리고 3, 4번 중 고민 후 비관적 락 방식을 선택했다.

선택 이유

정원 초과 같은 실패하면 안되는 상황에서는 충돌 자체를 차단하는 게 맞다고 생각했다.
낙관적 락은 재시도 로직까지 추가해야 해서 복잡도가 올라갈 것 같았다.

비관적 락 적용

package com.kakaotrack.pin.project.repository;

import com.kakaotrack.pin.domain.Field;
import jakarta.persistence.LockModeType;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.data.jpa.repository.Lock;
import org.springframework.data.jpa.repository.Query;

import java.util.List;

public interface FieldRepository extends JpaRepository<Field, Long> {

    // ㅂㅣ관적 락 처리
    @Lock(LockModeType.PESSIMISTIC_WRITE)
    @Query("SELECT f FROM Field f WHERE f.project.projectId = :projectId")
    List<Field> findByProject_ProjectId(Long projectId);
}

비관적 락 처리를 위한 @Lock 과 @Query를 추가해줬다.

그리고 다시 위에서 똑같은 설정으로 테스트 해줬다.

당연히 1이 나올 줄 알았지만, 0이 나왔다?!?!

아까 위에서 말한 @transactional 애너테이션 누락을 추가 안해줬다 ㅎㅎㅎ

// 지원서 수락
    @Transactional
    public void acceptApplication(Long applicationId, Integer status){
        // 지원서 조회
        Application application = applicationRepository.findById(applicationId)
                .orElseThrow(() -> new IllegalArgumentException("Application not found: " + applicationId));

        // 지원서 상태 변경 (2 = 수락)
        application.setStatus(status);

        // DB 저장
        applicationRepository.save(application);

        // 프로젝트 멤버 테이블 추가
        addProjectMember(application.getAppProject(), application.getAppMember(), application.getDepartment());
    }

추가해주고 다시 테스트 하니 동시성 문제가 해결되었다.