신입 개발자 1년, 100번 망한 순간들 (그리고 살아남은 방법)

# 내가 친 명령어
rm -rf node_modules/
# 실제로 친 명령어 (경로를 잘못 입력)
rm -rf /

// config.js - 절대 이러지 마세요
const AWS_ACCESS_KEY = "AKIAIOSFODNN7EXAMPLE"
const AWS_SECRET_KEY = "wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY"

-- 테스트하려던 쿼리
UPDATE users SET email = 'test@test.com' WHERE id = 123;

-- Ctrl+Enter를 너무 빨리 눌러서...
UPDATE users SET email = 'test@test.com';
-- WHERE 절을 안 쳤습니다. 전체 유저 15만명 이메일이 test@test.com으로...

// 내가 작성한 코드
const a = data.filter(x => x.b > 5)
const c = a.map(x => x.d)
const e = c.reduce((f, g) => f + g, 0)

// 시니어의 코멘트: "이게 뭐 하는 코드죠?"
// 나: "...음... 데이터를 필터링하고... 매핑하고... 더하는...?"

// 리팩토링 후
const activeUsers = users.filter(user => user.loginCount > 5)
const userScores = activeUsers.map(user => user.score)
const totalScore = userScores.reduce((sum, score) => sum + score, 0)

// 나쁜 예 - 내가 작성한 코드
// 유저를 가져온다
const u = getUser()
// 유저가 있는지 확인한다
if (u) {
  // 유저 이름을 출력한다
  console.log(u.name)
}

// 시니어: "주석이 왜 필요한가요? 코드만 봐도 아는데요?"

// 좋은 예 - 리팩토링
const user = getUser()
if (user) {
  console.log(user.name)
}

// 주석은 "왜"를 설명할 때만
// HACK: IE11 버그 때문에 setTimeout 필요
setTimeout(() => updateUI(), 0)

나: "작은 수정이라 괜찮겠지? 바로 머지!"

3시간 후...
팀장님: "프로덕션 에러율이 500% 증가했는데요?"
나: "...제가 오늘 올린 코드 때문인 것 같습니다"

# 절대 하면 안 되는 짓
git push origin main --force

# Slack 알림: "main 브랜치에 40개 커밋이 사라졌습니다"
# 팀원들: "???"
# 나: "죄송합니다!!!!!!"

# 실패 #18: 잘못된 브랜치에서 작업
# feature/login에서 작업하려 했는데 main에서 작업함
git branch  # 확인 안함
git commit -m "Add login feature"  # main에 바로 커밋

# 실패 #19: merge conflict 해결 못함
<<<<<<< HEAD
const API_URL = "https://dev.api.com"
=======
const API_URL = "https://prod.api.com"
>>>>>>> main
# 나: "이거 어떻게 하는 거죠...?"

# 실패 #20: rebase 하다가 히스토리 꼬임
git rebase main
# 500개의 conflict
# 나: "이제 어떡하죠...?"
git rebase --abort  # 백기 투항

// 내 코드의 95%
console.log('여기1')
console.log('여기2')
console.log('data:', data)
console.log('여기3')
console.log('result:', result)
console.log('여기4')
// ... 50개 더

// 시니어: "디버거 사용법 아세요?"
// 나: "...디버거요?"

나: "로컬에서는 완벽하게 동작합니다!"
팀장님: "그럼 왜 스테이징에서 안 돼요?"
나: "...이상하네요"

원인:
- 로컬: Mac, Node 18.0
- 스테이징: Linux, Node 16.0
- 파일 경로 대소문자 차이
- 환경변수 설정 다름

// 내가 작성한 코드
try {
  await saveUserData(data)
} catch (error) {
  // 에러 발생 시 그냥 무시
  console.log('에러 났는데 뭐 어때')
}

// 결과: 유저 데이터 저장 안됐는데 성공했다고 표시됨
// 고객센터 문의 폭주

// 올바른 방법
try {
  await saveUserData(data)
} catch (error) {
  logger.error('Failed to save user data:', error)
  // 에러를 상위로 전파하거나 적절히 처리
  throw new Error('데이터 저장에 실패했습니다')
}

// 내 코드
let i = 0
while (i < 10) {
  console.log(i)
  // i++ 를 까먹음
}

// 브라우저: (응답 없음)
// 나: "어? 왜 안 돼지?" (새로고침)
// 브라우저: (다시 응답 없음)
// 나: "...아"

// 100명의 유저 목록을 가져옴
const users = await getUsers() // 1번 쿼리

// 각 유저의 주문 정보를 가져옴
for (const user of users) {
  user.orders = await getOrders(user.id) // 100번 쿼리
}

// 총 101번의 DB 쿼리
// 로딩 시간: 30초
// 시니어: "이거 왜 이렇게 느려요?"

// 최적화 버전
const users = await getUsers()
const userIds = users.map(u => u.id)
const orders = await getOrdersByUserIds(userIds) // 2번 쿼리로 끝

const ordersMap = groupBy(orders, 'userId')
users.forEach(user => {
  user.orders = ordersMap[user.id] || []
})

// 총 2번의 쿼리
// 로딩 시간: 0.5초

// 실패 #29: 이벤트 리스너 제거 안함
window.addEventListener('scroll', handleScroll)
// 컴포넌트 언마운트 해도 리스너 살아있음
// 페이지 이동할 때마다 리스너 추가됨
// 결과: 메모리 폭발

// 실패 #30: 타이머 정리 안함
setInterval(() => {
  fetchData()
}, 1000)
// 컴포넌트 사라져도 계속 실행
// 100개 컴포넌트 = 100개 타이머 = 서버 부하

// 실패 #31: 대용량 배열 복사
const hugeArray = Array(1000000).fill({data: 'x'.repeat(1000)})
const copy1 = [...hugeArray]
const copy2 = [...hugeArray]
const copy3 = [...hugeArray]
// 브라우저: "메모리 부족"

// 실패 #32: 클로저로 메모리 잡아먹기
function createHandlers() {
  const cache = new Map()  // 이게 절대 해제 안됨
  return {
    add: (key, value) => cache.set(key, value),
    get: (key) => cache.get(key)
  }
}

// 3개월 전 내가 작성한 코드
function X(a, b, c) {
  return a ? (b || c) : (b && c)
}

// 오늘의 나: "이게 뭐하는 함수지...?"
// 원작자: 나
// 나: "과거의 나가 밉다"

나: @channel 이거 어떻게 하는 거예요? (오전 10시)
나: @channel 급합니다! (오전 10:05)
나: @channel 아무도 안 계세요? (오전 10:10)
나: @here 도와주세요!! (오전 10:15)

팀장님 DM: "channel 멘션은 정말 급할 때만 써주세요"

금요일 오후 6시 50분
나: "시니어님, 이거 좀 봐주실 수 있나요? 급해요!"
시니어: (퇴근 직전)
나: (다음주 월요일까지 기다림)

올바른 방법:
- 금요일 오후: 간단한 질문만
- 복잡한 질문: 오전 또는 화~목 오후
- 정말 급하면: "언제 여쭤보면 될까요?"

// 테스트 없이 기능 개발
function calculateDiscount(price, userLevel) {
  if (userLevel === 'VIP') return price * 0.7
  if (userLevel === 'Gold') return price * 0.85
  return price
}

// 프로덕션 배포
// 2주 후 발견: VIP 고객이 음수 가격으로 구매함
// 원인: 음수 가격 케이스 처리 안함
// 손실: 500만원

// 테스트 작성
describe('calculateDiscount', () => {
  test('VIP는 30% 할인', () => {
    expect(calculateDiscount(10000, 'VIP')).toBe(7000)
  })

  test('Gold는 15% 할인', () => {
    expect(calculateDiscount(10000, 'Gold')).toBe(8500)
  })

  test('일반 회원은 할인 없음', () => {
    expect(calculateDiscount(10000, 'Normal')).toBe(10000)
  })

  test('음수 가격은 에러', () => {
    expect(() => calculateDiscount(-100, 'VIP')).toThrow()
  })

  test('0원은 0원 반환', () => {
    expect(calculateDiscount(0, 'VIP')).toBe(0)
  })
})

// 수정된 함수
function calculateDiscount(price, userLevel) {
  if (price < 0) throw new Error('가격은 0 이상이어야 합니다')
  if (price === 0) return 0

  if (userLevel === 'VIP') return price * 0.7
  if (userLevel === 'Gold') return price * 0.85
  return price
}

// 커버리지 100% 달성!
function divide(a, b) {
  return a / b
}

test('나누기', () => {
  expect(divide(10, 2)).toBe(5)
})

// 프로덕션: divide(10, 0) → Infinity
// 나: "테스트는 통과했는데요...?"

// 실패 #43: 테스트가 프로덕션 코드보다 복잡
test('복잡한 테스트', async () => {
  const mockDB = new MockDatabase()
  await mockDB.connect()
  const mockUser = await mockDB.createUser({...})
  const mockSession = await createMockSession(mockUser)
  // ... 50줄 더
  // 나: "이거 맞게 한 건가...?"
})

// 실패 #44: 테스트끼리 의존성
test('유저 생성', () => {
  globalUser = createUser()  // 전역 변수 사용
})

test('유저 조회', () => {
  expect(getUser(globalUser.id)).toBeDefined()
  // 첫 번째 테스트 없으면 실패
})

// 실패 #45: 랜덤값으로 테스트
test('랜덤 테스트', () => {
  const result = Math.random() > 0.5
  expect(result).toBe(true)  // 50% 확률로 실패
})

// 위험한 코드
app.get('/user', (req, res) => {
  const userId = req.query.id
  const query = `SELECT * FROM users WHERE id = ${userId}`
  db.query(query)
})

// 공격자: /user?id=1 OR 1=1
// 결과: 모든 유저 정보 유출

// 안전한 코드
app.get('/user', (req, res) => {
  const userId = req.query.id
  const query = 'SELECT * FROM users WHERE id = ?'
  db.query(query, [userId])  // 파라미터 바인딩
})

// 위험한 코드
function displayComment(comment) {
  document.innerHTML = comment
}

// 공격자 댓글: <script>alert('hacked')</script>
// 결과: 모든 방문자에게 악성 스크립트 실행

// 절대 하면 안 되는 것
const user = {
  email: 'user@example.com',
  password: '1234'  // 평문 저장
}
db.save(user)

// 올바른 방법
const bcrypt = require('bcrypt')
const hashedPassword = await bcrypt.hash('1234', 10)
const user = {
  email: 'user@example.com',
  password: hashedPassword
}

// 위험한 코드
async function transferMoney(from, to, amount) {
  await decreaseBalance(from, amount)  // A 계좌에서 차감
  // 여기서 서버 다운되면?
  await increaseBalance(to, amount)    // B 계좌로 입금
}

// 결과: A 계좌 돈만 사라짐

// 올바른 방법
async function transferMoney(from, to, amount) {
  const transaction = await db.beginTransaction()

  try {
    await decreaseBalance(from, amount, transaction)
    await increaseBalance(to, amount, transaction)
    await transaction.commit()
  } catch (error) {
    await transaction.rollback()
    throw error
  }
}

// 100만 건의 데이터 업데이트
for (const user of allUsers) {  // 100만번 반복
  await updateUser(user)  // 각각 DB 쿼리
}

// 결과:
// - 20시간 소요
// - 중간에 타임아웃
// - 절반만 업데이트됨
// - 롤백 불가능

// 배치 처리
const BATCH_SIZE = 1000

for (let i = 0; i < allUsers.length; i += BATCH_SIZE) {
  const batch = allUsers.slice(i, i + BATCH_SIZE)
  await db.bulkUpdate(batch)  // 1000건씩 한 번에
  console.log(`Progress: ${i / allUsers.length * 100}%`)
}

// 1시간 안에 완료

// 하나의 파일에 모든 기능
// UserController.js (3000줄)
class UserController {
  async login() { /* 200줄 */ }
  async register() { /* 150줄 */ }
  async updateProfile() { /* 180줄 */ }
  async deleteAccount() { /* 120줄 */ }
  async sendEmail() { /* 90줄 */ }
  async uploadAvatar() { /* 140줄 */ }
  // ... 20개 메서드 더
}

// 나: "이거 유지보수가 왜 이렇게 힘들지?"

리팩토링 후:
/users
  /controllers
    - LoginController.js
    - RegisterController.js
    - ProfileController.js
  /services
    - UserService.js
    - EmailService.js
  /validators
    - UserValidator.js

// A.js
import { B } from './B.js'
export class A {
  useB() { return new B() }
}

// B.js
import { A } from './A.js'
export class B {
  useA() { return new A() }
}

// 결과: ReferenceError: Cannot access 'A' before initialization

// 모든 곳에서 접근 가능한 전역 변수
window.currentUser = null
window.isLoading = false
window.errorMessage = ''
window.userData = {}
// ... 50개 더

// 3개월 후
// 나: "이 변수 어디서 수정하는 거지?"
// 검색 결과: 73개 파일에서 사용중

금요일 오후 5시
나: "작은 수정인데 배포해도 되겠지?"

배포 버튼 클릭

오후 5:15 - 에러 알림 폭주
오후 5:30 - 서비스 다운
오후 6:00 - 전 팀원 호출
오후 8:00 - 핫픽스 배포
오후 10:00 - 서비스 복구

교훈: 절대 금요일 오후에 배포하지 말 것

// 데이터베이스 스키마 변경
ALTER TABLE users DROP COLUMN old_email;

// 배포 후
// 앱 에러: "Column 'old_email' not found"
// 나: "롤백하면 되지"
// 문제: 컬럼을 이미 삭제해버림
// 롤백 불가능

Phase 1: 새 컬럼 추가
ALTER TABLE users ADD COLUMN email VARCHAR(255);

Phase 2: 데이터 마이그레이션
UPDATE users SET email = old_email;

Phase 3: 코드 배포 (email 컬럼 사용)

Phase 4: 2주 후, old_email 컬럼 삭제

// 프로젝트 시작 1일차
나: "이 루프를 웹 워커로 돌리면 성능이 좋겠어!"

// 3일 후
나: "웹 워커 디버깅이 왜 이렇게 힘들지?"

// 1주 후
시니어: "이거 그냥 일반 루프로 해도 충분한데요?"
나: "..."

교훈: "Make it work, make it right, make it fast" - 순서 지킬 것

// 매번 DB에서 조회
app.get('/popular-posts', async (req, res) => {
  const posts = await db.query('SELECT * FROM posts ORDER BY views DESC LIMIT 10')
  res.json(posts)
})

// 인기 게시물은 거의 안 바뀌는데 매 요청마다 DB 쿼리
// TPS: 100 → DB 부하 심각

// 캐싱 적용
const cache = new NodeCache({ stdTTL: 300 }) // 5분 캐시

app.get('/popular-posts', async (req, res) => {
  const cached = cache.get('popular-posts')
  if (cached) return res.json(cached)

  const posts = await db.query('SELECT * FROM posts ORDER BY views DESC LIMIT 10')
  cache.set('popular-posts', posts)
  res.json(posts)
})

// DB 부하 95% 감소

// 실패 #78: 이미지 최적화 안함
<img src="photo.png" /> // 10MB 원본 이미지
// 로딩 시간: 8초
// 해결: 이미지 리사이징, WebP 변환

// 실패 #79: 번들 사이즈 관리 안함
import _ from 'lodash' // 전체 라이브러리 import
// 번들 크기: 5MB
// 해결: import { debounce } from 'lodash-es'

// 실패 #80: 불필요한 리렌더링
function App() {
  const [count, setCount] = useState(0)
  const heavyComputation = expensiveFunction() // 매 렌더링마다 실행
  return <div>{count}</div>
}
// 해결: useMemo 사용

나: "레거시 코드가 너무 복잡해요. 처음부터 다시 만들겠습니다!"
팀장님: "얼마나 걸릴 것 같아요?"
나: "2주면 충분합니다!"

2주 후: 30% 완성
4주 후: 60% 완성
6주 후: 80% 완성, 새로운 버그 20개 발견
8주 후: "차라리 기존 코드 수정하는 게 나았을 것 같습니다..."

교훈: 동작하는 코드를 버리지 말 것

// 기존 코드 (동작함)
function processData(data) {
  // 100줄의 복잡한 로직
}

// 리팩토링 (깔끔해 보임)
function processData(data) {
  return clean코드(data)
}

// 배포 후
// 기존 기능: 5개 중 2개 깨짐
// 나: "테스트가 없어서 몰랐습니다..."

// TODO: 이거 나중에 리팩토링 필요
// FIXME: 임시 코드
// HACK: 일단 이렇게
// XXX: 왜 이게 동작하는지 모르겠음

// 6개월 후
$ git grep "TODO"
// 147 matches

나: "나중은 영원히 안 온다"

{
  "react": "16.8.0",  // 현재: 18.2.0
  "express": "4.16.0",  // 보안 취약점 5개
  "lodash": "4.17.11"  // 3년 전 버전
}

// 1년 후 업데이트 시도
// 호환성 문제 발생
// Breaking changes 처리 = 2주 소요

# 매달 의존성 체크
npm outdated

# 마이너 버전 업데이트 (안전)
npm update

# 메이저 버전 업데이트 (신중히)
# 하나씩, 테스트하면서

나: "이거 2시간이면 됩니다!"

실제:
- 환경 설정: 1시간
- 예상치 못한 버그: 3시간
- 코드 리뷰 수정: 2시간
- 테스트 작성: 2시간
총: 8시간

교훈: 추정 시간 x 3 = 실제 시간

동시에 하려던 것:
- PR 리뷰
- 새 기능 개발
- 버그 수정
- 회의 참석
- 문서 작성

결과:
- 모든 것이 중도 반단
- 컨텍스트 스위칭으로 생산성 0
- 하나도 완성 못함

해결: 한 번에 하나씩

// 1년 내내 같은 패턴
app.get('/api/...', async (req, res) => {
  const data = await db.query(...)
  res.json(data)
})

// 새로운 것 배우기 꺼림
팀원: "GraphQL 써보는 거 어때요?"
나: "REST API가 편한데요..."

팀원: "TypeScript로 마이그레이션 하면 좋을 것 같아요"
나: "JavaScript로도 충분한데요..."

// 1년 후: 성장 정체

초반 (1-3개월):
나: "이거 왜 이렇게 하는 거예요?"
나: "더 좋은 방법 없나요?"
나: "이해가 안 되는데 설명해주세요"

중반 (6개월):
나: "아는 척 하자"
나: "모른다고 하면 무시당할 것 같아"
나: "혼자 찾아보면 되겠지"

결과:
- 잘못된 방향으로 3주 작업
- 이미 있는 기능을 다시 만듦
- 팀의 컨벤션 무시하고 개발

교훈:
모르는 것은 질문하는 것이 능력이다