React와 Next.js 중에 뭘 써야 하는데

React와 Next.js 중에 뭘 써야 하는데

React와 Next.js 중에 뭘 써야 하는데 아침부터 막힌다 출근했다. 오늘 새 프로젝트 킥오프. 팀장님이 말했다. "이번 건 Next.js로 갑시다." 어? 우리 지금까지 React 썼잖아. 뭐가 다른데.회의실에서 돌아왔다. 일단 노션 켰다. 'React vs Next.js' 검색했다. 아티클 100개 나온다. 다 읽을 수 없다. ChatGPT한테 물었다. "Next.js가 뭔가요?" 답: "Next.js는 React 프레임워크입니다." ...그래서? 사실 React도 헷갈린다 솔직히 말하면 React도 아직 헷갈린다. useEffect 의존성 배열. 빈 배열이면 한 번만 실행. 값 넣으면 그거 바뀔 때마다 실행. 맞나? 맞긴 한데 실전에서 쓰면 무한 루프 돌아간다. 왜 그런지 모른다. 선배가 "React 기본기부터 다시 보세요" 했다. 알겠다고 했다. 안 봤다. 이제 Next.js를 배워야 한다. React도 모르는데.점심시간. 편의점 갔다. 삼각김밥 2개. 유튜브 켰다. "Next.js 10분 완벽 정리" 10분이 아니다. 30분이다. 거짓말하지 마. 영상 보는데 모르는 단어 나온다. "SSR", "SSG", "ISR". ...뭔데. 선배한테 물어봐야 하는데 오후 3시. 선배 자리 옆 지나갔다. 물어볼까. 아니다. 바빠 보인다. 4시. 다시 지나갔다. "저기... 선배님." "응?" "Next.js랑 React 차이가 뭔가요?" 선배가 웃는다. "아 그거? 간단해." 간단하다는 말 들으면 간단한 적이 없다."Next.js는 React 위에 올라간 프레임워크야. 서버 사이드 렌더링 지원하고." "아..." "라우팅도 파일 기반으로 되고, API 라우트도 만들 수 있어." "네..." "근데 너 React Router 써봤어?" "네. 쓴 것 같은데요." "그거랑 비교하면 이해 빠를 거야." 안 빠르다. 블로그 읽기 시작 자리 돌아왔다. 구글 검색 시작. "React vs Next.js 차이" 첫 번째 글. 영어다. 닫았다. 두 번째 글. 한국어다. 읽는다. "React는 라이브러리, Next.js는 프레임워크입니다." 뭐가 다른데. 라이브러리랑 프레임워크. 또 검색한다. "라이브러리 vs 프레임워크" "라이브러리는 내가 호출, 프레임워크는 나를 호출." ...무슨 소리야. 세 번째 글. 그림 많다. 좋다. "CSR vs SSR" CSR은 Client Side Rendering. 브라우저에서 렌더링. SSR은 Server Side Rendering. 서버에서 렌더링. 그래서 뭐가 좋은데. "SSR은 SEO에 유리합니다." SEO가 뭔데. 또 검색. Search Engine Optimization. 검색 엔진 최적화. 아... 구글 검색 잘 되게 하는 거구나. 그럼 무조건 SSR 써야 하는 거 아냐? 아니래. 경우에 따라 다르래. 어떤 경우에. 예제 코드 보기 유튜브 다시 켰다. "Next.js 시작하기" 따라 한다. npx create-next-app@latest설치 중. 5분 걸린다. 완료. 실행한다. npm run devlocalhost:3000 열린다. 뭔가 나온다. 오... 신기하다. 근데 이게 React랑 뭐가 다른지 모르겠다. 코드 본다. app 폴더 있다. page.tsx 있다. 어? 우리 회사는 pages 폴더 쓰는데. 검색한다. "Next.js app directory vs pages directory" 아. 버전이 다르다. App Router랑 Pages Router. 둘 다 배워야 하나. 머리 아프다. 회의 시간 5시. 회의 시작. 팀장님: "Next.js로 하는 이유는 SEO 때문입니다." 아 그거 아까 봤다. 팀장님: "그리고 Image Optimization도 자동으로 되고요." 이미지 최적화? 그게 뭔데. 선배: "Font도 자동으로 최적화되죠." 다들 고개 끄덕인다. 나도 끄덕인다. 이해 못 했다. 팀장님: "신입님, 이번 프로젝트 메인 페이지 맡아보세요." "네... 네." 끝났다. 자리 돌아왔다. 멘붕이다. 다시 공부 시작 퇴근까지 2시간. 일단 Next.js 공식 문서 켠다. 영어다. 한국어 있나. 있다. 번역 이상하다. 그냥 영어 본다. 번역기 돌린다. "Getting Started" export default function Page() { return <h1>Hello, Next.js!</h1> }이건 React랑 똑같은데. 다음 페이지. "Routing" "Next.js uses file-system based routing." 파일 기반 라우팅. 뭔 소리야. 설명 읽는다. 아... app/about/page.tsx 만들면 /about 경로 생긴다. 오 신기하다. React에선 Router 설정 따로 했는데. <Route path="/about" component={About} />이렇게. Next.js는 그냥 파일 만들면 끝. 이거 하나는 편하네. 실습 시작 노션 닫는다. VSCode 연다. 새 프로젝트 만든다. create-next-app. 이번엔 제대로 본다. TypeScript? Yes. ESLint? Yes. Tailwind CSS? Yes. (쓸 줄 모르는데) App Router? Yes. 설치 완료. 폴더 구조 본다. app/ layout.tsx page.tsx public/ ...layout.tsx 연다. 뭔가 많다. RootLayout. children 받는다. 아... 이게 전체 레이아웃이구나. page.tsx 연다. 메인 페이지. 수정해본다. export default function Home() { return <h1>테스트</h1> }저장. 브라우저 새로고침. "테스트" 나온다. 된다! 기분 좋다. 뭔가 한 것 같다. 라우팅 테스트 폴더 만든다. app/test/page.tsx export default function Test() { return <h1>테스트 페이지</h1> }저장. /test 접속. 된다! 오... 이거 되게 직관적인데? React Router는 설정 파일 따로 만들어야 했는데. 이건 그냥 폴더만 만들면 되네. 좋다. 이해했다. 조금. dynamic route 해본다. app/post/[id]/page.tsx export default function Post({ params }: { params: { id: string } }) { return <h1>Post {params.id}</h1> }/post/1 접속. "Post 1" 나온다. /post/123 접속. "Post 123" 나온다. 오... React Router에선 useParams 썼는데. 여긴 props로 받네. 다르다. 근데 이해 간다. 데이터 fetching 막힘 다음. 데이터 가져오기. 블로그 글 봤다. "Next.js에선 async component 쓴다" 뭔 소리야. 코드 본다. async function getData() { const res = await fetch('https://api.example.com/data') return res.json() }export default async function Page() { const data = await getData() return <div>{data.title}</div> }어? component에 async? React에선 안 됐는데. useEffect에서 fetch 했는데. 혼란스럽다. 검색한다. "Next.js async component" "Server Component에서 가능합니다." Server Component? 또 새로운 개념. Client Component도 있대. "use client" 쓰면 Client Component. 안 쓰면 Server Component. ...뭐가 다른데. Server Component vs Client Component 블로그 3개 읽었다. 정리한다. Server Component:서버에서 실행 useState, useEffect 못 씀 데이터 fetching 편함Client Component:브라우저에서 실행 useState, useEffect 씀 상호작용 필요할 때아... 그러니까. 버튼 클릭, input 입력 → Client Component. 그냥 데이터 보여주기 → Server Component. 이해 간다. 조금. 근데 실전에서 어떻게 나누지. 모르겠다. 일단 넘어간다. 7시 퇴근 퇴근 시간. 가방 챙긴다. 오늘 배운 것:Next.js는 React 위 프레임워크 파일 기반 라우팅 Server Component, Client Component아직 모르는 것:언제 Next.js 쓰고 언제 React 쓰는지 SSR, SSG, ISR 차이 Image, Font 최적화 API Routes Middleware ...많다. 내일 또 배워야지. 집 가는 지하철. 앉았다. 인프런 켰다. "Next.js 완벽 가이드" 10분 듣다가 잤다. 집 도착 11시. 씻고 침대 누웠다. 노션 켠다. "오늘 배운 것" 적는다. 2024.01.15 - Next.js 기본 세팅 - 파일 기반 라우팅 - dynamic route - Server Component 개념내일 할 것:메인 페이지 디자인 보고 컴포넌트 나누기 데이터 fetching 방법 더 찾아보기 선배한테 SSR 물어보기노션 닫는다. 유튜브 켠다. 알고리즘 영상 본다. Next.js 관련 영상 뜬다. "Next.js 13 정복하기" 북마크 했다. 안 본다. 자야지. 근데 걱정된다. 내일 팀장님이 진행 상황 물어보면 뭐라 하지. "레이아웃 잡고 있습니다" 하면 되려나. 일단 자자. 내일 일은 내일. 며칠 뒤 수요일. 프로젝트 3일 차. 메인 페이지 반 완성했다. 아직 데이터 연결 안 했다. 하드코딩이다. 선배가 코드리뷰 남겼다. "여기 Client Component로 할 필요 없어요. Server Component로 바꾸세요." 아... 맞다. 버튼 없는데 "use client" 썼다. 습관적으로 썼다. React 하듯이. 수정한다. 또 리뷰 왔다. "Image 태그는 next/image 쓰세요." 아 그거 있었지. import Image from 'next/image'<Image src="/logo.png" alt="logo" width={200} height={100} />width, height 필수래. 모르고 안 썼다가 에러 났다. 수정 완료. 다시 올린다. 조금씩 이해 중 목요일. 오늘은 API 연결한다. fetch 써서 데이터 가져온다. async function getPosts() { const res = await fetch('https://api.example.com/posts') return res.json() }오... 된다. useEffect 없이 되네. 편하다. loading.tsx 만들었다. 로딩 화면 자동으로 나온다. error.tsx 만들었다. 에러 처리 자동. 신기하다. 이런 것도 되네. React에선 다 직접 만들었는데. 아직도 헷갈림 그래도 아직 모르는 거 많다. 캐싱이 어떻게 되는지. revalidate가 뭔지. generateStaticParams가 뭔지. 선배가 "공식 문서 보세요" 한다. 본다. 어렵다. 예제 코드 복사해서 쓴다. 이해는 나중에. 결론 결론 내린다. React vs Next.js 언제 쓰냐. 아직 모르겠다. 근데 조금은 알겠다.간단한 SPA → React SEO 필요 → Next.js 서버 로직 필요 → Next.js 빠른 프로토타입 → React이 정도? 맞는지 모르겠다. 선배한테 물어봐야지. 내일.어제도 오늘도 내일도, 모르는 건 당연하다. 일단 만든다. 에러 나면 고친다. 그게 배우는 거다.

유튜브 → 블로그 → 스택오버플로우: 나의 검색 순서

유튜브 → 블로그 → 스택오버플로우: 나의 검색 순서

유튜브 → 블로그 → 스택오버플로우: 나의 검색 순서 아침부터 에러 오늘도 출근했다. 슬랙 확인. 선배가 남긴 메시지. "이신입님, 어제 올린 PR 머지했어요. 근데 프로덕션에서 useEffect 무한루프 도는 것 같은데 확인 부탁드립니다." 심장이 멈췄다. 급하게 코드 열었다. 어디가 문젠지 모르겠다. 일단 로컬에서 돌려봤다. 멀쩡하다. 프로덕션은 왜 터진 거지. 검색 시작.1단계: 유튜브 일단 유튜브다. "리액트 useEffect 무한루프" 검색창에 친다. 영상이 수십 개 뜬다. 썸네일에 빨간 화살표 그려진 거 클릭. 10분짜리 영상. 한국어다. 좋다. 재생 시작. 인트로 30초 스킵. "안녕하세요 여러분~" 10초 더 스킵. 본론 나온다. 의존성 배열 설명. 아 이거 아는 건데. 계속 본다. 5분쯤 지나니까 내 상황이랑 비슷한 예제 나온다. 오. 이거다. 근데 끝까지 봐도 정확한 해결책은 안 나온다. 댓글 본다. "이 방법 말고 cleanup 함수 쓰는 게 나을 것 같은데요" cleanup 함수? 그게 뭔데. 다시 검색. "리액트 cleanup 함수" 또 10분짜리 영상. 본다. 이번엔 영어 영상이다. 자막 켠다. 대충 이해했다. 근데 내 코드에 어떻게 적용하지. 시간 30분 지남. 유튜브의 장점은 이거다. 일단 편하다. 누워서도 볼 수 있다. 출근길 지하철에서도 본다. 코드 치는 화면 보면서 따라 하면 된다. 개념도 영상으로 보면 이해가 빠르다. 근데 단점도 있다. 내 문제랑 정확히 일치하는 영상은 없다. 비슷한 것만 있다. 그래서 여러 개 봐야 한다. 그러다 보면 시간이 흐른다. 어느새 1시간. 선배가 지나간다. 모니터 얼른 가린다. 유튜브 보는 거 들키면 안 된다.2단계: 블로그 유튜브로 안 되면 블로그다. 구글 검색. "react useEffect infinite loop production" 한글로 검색했다가 결과 별로면 영어로 다시 검색한다. 첫 페이지에 벨로그 글 세 개. 티스토리 두 개. 미디엄 하나. 일단 벨로그부터 본다. 제목이 정확히 내 상황이다. "프로덕션에서만 발생하는 useEffect 무한루프 해결" 클릭. 들어간다. 글 읽는다. 코드 예시 있다. 복사한다. 내 코드랑 비교한다. 어? 비슷한데 살짝 다르다. 댓글 본다. "이거 저도 겪었는데 결국 strict mode 문제였어요." strict mode? 그게 뭔데. 다시 검색. "리액트 strict mode 무한루프" 티스토리 글 나온다. 읽는다. 아. Next.js는 기본으로 strict mode 켜져 있대. 그래서 개발 환경에서는 useEffect가 두 번 실행된대. 근데 프로덕션은 다르대. 이해했다. 근데 해결은 못 했다. 시간 1시간 지남. 블로그의 장점은 이거다. 검색하면 바로 나온다. 글이니까 빨리 읽을 수 있다. 코드도 복사 붙여넣기 쉽다. 내 상황이랑 비교하면서 볼 수 있다. 한국어 블로그 많다. 같은 고민 하는 사람들 많다. 댓글에 답 있을 때도 있다. 근데 단점도 있다. 글이 오래됐다. 2년 전 글이다. 리액트 버전이 다르다. 어떤 글은 틀린 정보다. 댓글에 "이거 옛날 방식이에요" 써 있다. 블로그마다 설명이 다르다. 누구 말이 맞는지 모르겠다. 결국 여러 글 읽어야 한다. 그러다 보면 헷갈린다. 점심시간 지났다. 밥 못 먹었다.3단계: 스택오버플로우 마지막 희망. 스택오버플로우. 영어로 검색한다. "useEffect infinite loop production only" 질문 글 나온다. 2015년. 오래됐다. 답변 10개. 첫 번째 답변 체크 표시 있다. 좋아요 234개. 읽는다. 영어다. 천천히 읽는다. 코드 예시 있다. 복사한다. 내 코드에 붙여넣는다. 에러 난다. 다시 본다. 아. 이 답변은 클래스 컴포넌트 기준이다. 나는 함수형 쓴다. 스크롤 내린다. 다른 답변 본다. "This answer is outdated. Use hooks instead." 댓글에 써 있다. 또 스크롤. 세 번째 답변. 좋아요 89개. 읽는다. 함수형이다. 코드 복사. 붙여넣는다. 돌려본다. 된다. 심장이 뛴다. 프로덕션 배포한다. 기다린다. 에러 안 난다. 해결했다. 시간 2시간 반 지남. 스택오버플로우의 장점은 이거다. 정확하다. 전문가들이 답한다. 여러 답변 비교할 수 있다. 좋아요 많은 거 보면 된다. 댓글에 최신 정보 있다. "이 답변은 옛날 거예요" 친절하게 알려준다. 비슷한 질문 링크도 있다. 따라가면서 보면 이해된다. 근데 단점도 있다. 영어다. 읽는 데 시간 걸린다. 질문 자체를 이해 못 할 때도 있다. 내가 모르는 용어 많다. 답변이 너무 전문적이다. "You should implement memoization with useMemo" 이런 거 나오면 또 검색해야 한다. 그래도 결국엔 여기서 답 찾는다. 유튜브랑 블로그에서 못 찾으면 마지막은 여기다. 내 검색 패턴 정리하면 이렇다.문제 생긴다 유튜브 검색 (20~30분) 대충 개념 이해 블로그 검색 (30분~1시간) 비슷한 사례 찾기 스택오버플로우 (1~2시간) 정확한 답 찾기 해결매번 이 순서다. 왜냐면 유튜브가 제일 쉽다. 영상 보면 이해된다. 근데 정확하지 않다. 블로그는 중간이다. 한글이라 읽기 편하다. 근데 정보가 들쭉날쭉하다. 스택오버플로우는 어렵다. 영어고 전문적이다. 근데 제일 정확하다. 그래서 쉬운 것부터 시작한다. 안 되면 어려운 걸로 간다. 효율적인지 모르겠다. 근데 내가 할 수 있는 방법은 이거다. 검색도 실력 요즘 깨달은 게 있다. 검색도 실력이다. 같은 문제인데 검색어를 어떻게 치느냐에 따라 결과가 다르다. "리액트 에러" 이렇게 치면 별로다. "react useEffect dependency array infinite loop" 이렇게 쳐야 한다. 영어로 쳐야 결과가 많다. 한글로 치면 한정적이다. 에러 메시지 그대로 복사해서 검색하는 것도 좋다. "TypeError: Cannot read property 'map' of undefined" 이거 그대로 복붙하면 관련 글 바로 나온다. 키워드를 정확히 쓰는 것도 중요하다. "안 돼요" 이러면 안 된다. "작동 안 함" 도 애매하다. "infinite loop" "memory leak" "type error" 이렇게 정확한 단어 써야 한다. 그리고 여러 소스를 봐야 한다. 유튜브 하나만 보고 끝내면 안 된다. 블로그 세 개는 읽어야 한다. 스택오버플로우도 답변 여러 개 비교해야 한다. 시간 걸린다. 근데 이게 공부다. 선배는 어떻게 하나 궁금했다. 점심 먹으면서 물어봤다. 선배한테. "저는 검색할 때 보통 어떤 순서로 하세요?" 선배가 웃었다. "나도 비슷해. 근데 요즘은 ChatGPT부터 물어본다." ChatGPT. 나도 쓴다. 근데 제대로 못 쓴다. "에러 났어요 어떻게 해요" 이렇게 물어보면 답이 애매하다. 선배는 다르게 쓴다. "에러 메시지랑 내 코드 다 붙여넣고, 뭘 시도했는지도 설명한다. 그러면 정확한 답 나온다." 아. 그렇게 쓰는 거구나. 나는 질문을 대충 했다. 그래서 답도 대충 나왔다. 질문을 잘해야 한다. 검색어도 그렇고 ChatGPT도 그렇고. 정확하게 물어봐야 정확한 답이 나온다. 당연한 건데 몰랐다. 시간이 아깝다 오늘 하루 검색한 시간 계산했다. 약 4시간. 실제 코드 짠 시간은 1시간. 검색이 4배 더 길다. 이게 맞나 싶다. 근데 다른 동기들도 비슷하다고 한다. "나도 하루에 검색만 서너 시간 한다." 다들 그렇다. 신입이니까 모르는 게 당연하다. 그래서 검색한다. 근데 언제까지 이럴까. 1년 차 되면 나아질까. 2년 차 되면. 선배들도 검색한다. 근데 속도가 다르다. 나는 한 문제에 3시간. 선배는 30분. 10배 차이다. 경험 차이다. 검색 실력 차이다. 나도 언젠가 빨라질까. 그러려면 지금 이 과정이 필요하다. 검색하면서 배운다. 시행착오하면서 는다. 아깝지만 어쩔 수 없다. 검색 기록 브라우저 히스토리 봤다. 오늘 하루만.react useEffect infinite loop (3회) useEffect cleanup function 사용법 (2회) react strict mode 끄기 (1회) next.js production build useEffect (2회) stackoverflow react hooks (5회) 리액트 의존성 배열 (1회) how to debug useEffect (1회)검색어만 15개. 열어본 페이지는 30개 넘는다. 유튜브 영상 4개. 블로그 글 12개. 스택오버플로우 6개. 그중에서 실제로 도움 된 건 3개. 효율 10%. 나머지 90%는 시간 낭비. 근데 그 3개 찾으려면 30개 봐야 한다. 검색은 원래 이런 거다. 쓸데없는 것도 보고 헤매다가 결국 찾는다. 지름길은 없다. 내일도 내일도 검색한다. 또 유튜브 보고 블로그 읽고 스택오버플로우 뒤진다. 이게 내 일상이다. 3개월 차 신입이 할 수 있는 거. 언젠가는 검색 없이도 코드 칠 수 있을까. 선배처럼 척척 해결할 수 있을까. 모르겠다. 근데 지금은 이렇게라도 한다. 검색하면서 배운다.오늘도 4시간 검색했다. 내일은 3시간으로 줄이고 싶다.

동기들과의 퇴근 후 맥주: '너네 회사 어때'

동기들과의 퇴근 후 맥주: '너네 회사 어때'

동기들과의 퇴근 후 맥주: '너네 회사 어때' 목요일 저녁 8시 회사 앞 이자카야. 동기 셋이 왔다. 나까지 넷. "야 오랜만이다." 사실 한 달 전에 봤다. 테이블에 앉자마자 누가 먼저랄 것도 없이 맥주 4잔 시켰다. 생맥주 4천원. 회사 근처라 비싸다.첫 잔 받자마자 준호가 말했다. "아 진짜 오늘 개빡쳤다." 시작됐다. 다들 힘들대 준호는 스타트업 다닌다. 프론트엔드 혼자래. 디자이너도 없대. "피그마 파일 받았는데 그냥 와이어프레임이야. 이게 디자인이냐고." "그래서?" "내가 색 다 정하고 버튼 다 만들었지." "...그럼 디자이너 너네?" "응. 나." 민수는 대기업 계열사 들어갔다. 부럽다고 했었다. 지금은 아니다. "우리 회사 jQuery 쓴다." "뭐?" "jQuery." "2024년에?" "레거시래. 건드리면 안 된대." 나는 웃었다. 민수는 안 웃었다.재희는 SI 갔다. 3개월에 한 번씩 프로젝트 바뀐대. 지금은 관공서 시스템 만든대. "어제 고객사 가서 IE 11 테스트했다." "IE?" "응. 아직도 쓴대." "미쳤네." "나도 그렇게 생각해." 치킨 나왔다. 다들 먹었다. 5분 동안 아무도 말 안 했다. 그냥 먹었다. '너네 회사 어때' 준호가 물었다. "너는 어때." 나? 나도 힘들지. "선배가 코드리뷰 10개 달았어." "오 꼼꼼하네." "근데 무슨 말인지 모르겠어." "..." "일단 수정했어. 뭘 수정한 건지도 모르고." 민수가 웃었다. "나도 그래." 재희가 고개 끄덕였다. "나도." 준호도 웃었다. "나도 사실 그래." 갑자기 분위기가 풀렸다. "아 진짜 모르는 게 너무 많아." 준호가 말했다. "CI/CD 구축하래. 뭔지도 모르는데." "나는 Redis 캐싱하래." 민수가 말했다. "그게 뭔데." "나는 SQL 최적화하래." 재희가 말했다. "인덱스가 뭔지도 모르는데." 나는 웃었다. "나는 useCallback 언제 쓰는지도 모르겠어." 다들 웃었다.위로가 되는 이유 사실 해결책은 없다. 우리 중 누구도 답을 모른다. 그냥 다들 힘들다는 걸 확인했다. 그게 다다. 근데 이게 위로가 된다. 나만 못하는 게 아니구나. 다들 모르면서 일하는구나. 선배들도 처음엔 이랬겠지. 그런 생각. "근데 재밌을 때도 있지 않아?" 민수가 물었다. 준호가 대답했다. "있지. 코드 돌아갈 때." "나는 배포 성공했을 때." 재희가 말했다. 나는? "에러 원인 찾았을 때?" 다들 고개 끄덕였다. 그 순간은 진짜 좋다. 3시간 동안 삽질하다가 원인 찾으면. 콘솔에 에러 안 뜰 때. 새로고침했는데 정상 작동할 때. 그때는 진짜. 개발자 한 보람 있다. 근데 그게 하루에 한 번 있을까 말까다. 단톡방은 활발하다 우리 넷 말고도 동기들 더 있다. 단톡방 인원 12명. 거기는 항상 누군가 하소연한다. "오늘 배포 롤백했다 ㅠ" "회의 3시간 했는데 결론 없음" "내일 발표인데 PPT 10장 남음" "아직도 회사임 ㅋㅋ" 그럼 누군가 답한다. "ㅋㅋㅋㅋ" "힘내" "나도" "우리 다 똑같네" 별거 아닌 대화다. 근데 이게 힘이 된다. 혼자 아닌 것 같아서. 회사에서는 혼자다. 선배들은 바쁘다. 동기는 없다. 물어볼 사람도 없다. 그냥 구글링하고. GPT한테 물어보고. 유튜브 보고. 혼자 해결한다. 근데 이 단톡방에서는. 다들 나랑 똑같이 허우적거린다는 걸 안다. 그게 위로다. 10시 반 맥주 3잔 더 마셨다. 치킨 다 먹었다. 계산은 각자 냈다. 1인당 2만원. "다음엔 언제 보지." "한 달 후?" "그때쯤 되면 또 한 명쯤 이직하겠네." 웃으면서 헤어졌다. 집 가는 지하철. 핸드폰 봤다. 단톡방에 준호가 썼다. "오늘 고마웠어 ㅋㅋ" 재희가 답했다. "나도" 민수가 답했다. "다들 힘내자" 나도 썼다. "ㅇㅇ 힘내"해결책은 없었다. 그냥 다들 힘들다는 걸 확인했다. 근데 그게 유일한 위로였다.

노션에 '오늘 배운 것' 적다가 3일 만에 포기한 기록

노션에 '오늘 배운 것' 적다가 3일 만에 포기한 기록

노션에 '오늘 배운 것' 적다가 3일 만에 포기한 기록 시작은 거창했다 유튜브 봤다. "주니어 개발자 성장 루틴" 이런 거. 다들 노션에 TIL(Today I Learned) 쓰래. 그게 뭔지도 몰랐는데 검색했다. "오늘 배운 것 기록하기" 쉬워 보였다. 일요일 밤 11시. 노션 켰다. 템플릿 만들었다. ## 2024.01.15 월요일### 오늘 배운 것 - ### 어려웠던 점 - ### 내일 할 것 - 깔끔하다. 이쁘다. 이제 나도 성장하는 개발자다. 월요일부터 시작이다.1일차: 완벽했다 월요일. 출근했다. 오늘부터 다 기록한다. 점심시간에 메모장 켰다. 선배가 알려준 거 적었다. "useCallback은 함수를 메모이제이션" "의존성 배열 비어있으면 처음 한 번만" "근데 useEffect랑 뭐가 다르지" 모르는 건 나중에 찾아보기로. 일단 적었다. 퇴근 후. 집 와서 노션 켰다. ## 2024.01.15 월요일### 오늘 배운 것 - useCallback은 함수 메모이제이션하는 거 - 리렌더링 될 때 함수 재생성 방지 - 의존성 배열에 들어가는 값 바뀔 때만 함수 재생성됨### 어려웠던 점 - useCallback이랑 useMemo 차이를 아직 정확히 모르겠음 - 언제 써야 하는지도 애매함 - 선배 코드 보면 다 쓰던데 나는 언제 써야 할지### 내일 할 것 - useCallback 공식문서 읽기 - useMemo도 같이 공부 - 작은 예제 만들어보기뿌듯했다. 이거다. 이렇게 하면 된다. 저장했다. 잘 시간. 내일도 쓴다.2일차: 괜찮았다 화요일. 오늘도 기록한다. 아침에 에러 났다. "Cannot read property of undefined" 2시간 걸렸다. 옵셔널 체이닝 안 써서였다. 점심 먹으면서 메모했다. "옵셔널 체이닝 ?. 쓰기" 오후엔 PR 올렸다. 선배가 코멘트 남겼다. "변수명 좀 더 명확하게" 수정했다. data → userProfileData 이것도 기록. 퇴근. 집. 노션. ## 2024.01.16 화요일### 오늘 배운 것 - 옵셔널 체이닝 (?.) 사용법 - undefined나 null일 때 에러 안 나고 undefined 반환 - 변수명은 구체적으로 (data 말고 userProfileData)### 어려웠던 점 - 에러 원인 찾는데 2시간 걸림 - console.log 10번 찍었는데 비효율적인 거 같음 - 디버깅 잘하는 법 배워야 할 듯### 내일 할 것 - 크롬 개발자도구 디버깅 기능 공부 - breakpoint 사용법 익히기오늘도 썼다. 2일 연속이다. 습관 만들기 21일이래. 19일 남았다. 할 수 있다. 3일차: 멈췄다 수요일. 출근했다. 피곤했다. 전날 새벽 2시에 잤다. 넷플릭스 봤다. 회의 3개. 점심은 라면. 오후에 급한 버그 수정. 퇴근 9시. 집 왔다. 11시. 씻었다. 침대에 누웠다. 노션 켜야 하는데. 뭐 적지. 오늘 배운 거. 버그 고쳤는데. 뭐가 문제였더라. 기억 안 난다. 내일 쓰면 되지. 내일은 덜 피곤할 거다. 잤다.4일차: 안 켰다 목요일. 출근. 회의. 점심. 코딩. 퇴근. 노션 생각 안 났다. 아니다. 생각났다. 근데 안 켰다. 어차피 어제 안 썼는데. 오늘 쓰면 어제 거 비어있잖아. 어색하다. 내일 주말이니까. 주말에 몰아서 쓴다. 5일차: 죄책감 금요일. 저녁에 동기들 만났다. 맥주 마셨다. 한 친구가 말했다. "나 요즘 TIL 쓰는데 좋더라" 나도 쓴다고 했다. 거짓말이다. 3일 전부터 안 썼다. 집 와서 노션 켰다. 비어있는 날짜들. 1월 17일: 비어있음 1월 18일: 비어있음 1월 19일: 비어있음 채워야 하나. 기억 안 난다. 그냥 닫았다. 주말: 포기 토요일. 침대에 누워서 생각했다. 노션 채워야 하는데. 일주일 치 몰아서 쓸까. 근데 뭘 배웠더라. 기억이 안 난다. 월요일엔 뭐 했지. 화요일은. 수요일. 다 똑같다. 코드 짜고. 에러 고치고. PR 올리고. 매일 배우긴 하는데. 정리는 못 하겠다. 일요일. 유튜브 봤다. "생산성 높이는 10가지 방법" 댓글 봤다. "저도 TIL 3일 만에 포기했어요 ㅋㅋ" "저는 1주일 버텼습니다" "노션 템플릿만 10개 만들고 안 씁니다" 다들 그렇구나. 2주 후: 새 도전 월요일. 선배가 물었다. "TIL 쓰냐" 아니요. "나도 옛날에 썼는데" "3일 만에 관뒀다" 선배도 그랬구나. "억지로 쓰지 마" "진짜 중요한 것만 메모해" "나는 그냥 슬랙 나한테 DM 보낸다" 그 방법도 있네. 노션 다시 켰다. 템플릿 지웠다. 새로 만들었다. 간단하게. ## 기록 - 날짜 상관없이 배운 것만오늘은 이거 하나. "옵셔널 체이닝 ?. 쓰면 편하다" 끝. 내일은 또 모르겠다. 쓸 수도 있고. 안 쓸 수도 있고. 그냥 그렇다. 1개월 후: 지금 지금 노션 봤다. 1월 15일. 1월 16일. 그 뒤로 3개 정도 더. 총 5개 적혔다. 한 달에. 실패한 건가. 모르겠다. 근데 그 5개는. 진짜 중요한 것들이다. "async/await은 Promise 문법 설탕" "map은 새 배열 반환, forEach는 undefined" "git rebase는 조심히" 이건 지금도 기억한다. 실제로 쓴다. 매일 쓰는 게 중요한 게 아니었다. 기억에 남는 걸 쓰는 게 중요했다. 결론 TIL 3일 만에 포기했다. 부끄럽지 않다. 완벽한 기록보다. 남는 게 있으면 된다. 5개 적었다. 5개 남았다. 그걸로 된 거다. 노션은 아직 열려있다. 언젠가 또 쓸 수도 있다. 아닐 수도 있고.완벽한 기록은 없다. 남는 거 하나면 충분하다.

'이거 제가 해볼게요'라고 했다가 후회하는 시간

'이거 제가 해볼게요'라고 했다가 후회하는 시간

'이거 제가 해볼게요'라고 했다가 후회하는 시간 오늘도 또 그랬다 오전 10시. 팀 데일리 스크럼. 선배가 물었다. "이거 누가 할 수 있어?" 나는 손을 들었다. "제가 해볼게요." 선배가 웃었다. "오, 좋아. 그럼 신입아 부탁해." 회의 끝나고 자리로 돌아왔다. 노트북 앞에 앉았다. ...뭐라고 했더라. 메모를 봤다. "API 연동 후 상태관리 리팩토링." 리팩토링이 뭐지. 아니, 안다. 코드 정리하는 거다. 근데 어떻게? 손이 떨렸다. 키보드를 쳤다. 지웠다. 다시 쳤다. 오늘도 시작됐다. 후회의 시간.왜 자꾸 그러는지 모르겠다 생각해봤다. 내가 왜 이러나. 선배가 물으면 일단 "해볼게요"가 나온다. 입에서 자동으로. 할 수 있는지 없는지도 생각 안 한다. 그냥 나온다. 머릿속에서는 경보가 울린다. '너 이거 못 하는데?' '이거 모르잖아?' 근데 입은 먼저 움직인다. "제가 해볼게요." 왜일까. 아마도 이유는 두 가지다. 첫째, 잘 보이고 싶다. 신입이니까. 일 열심히 하는 사람으로 보이고 싶다. 무능해 보이고 싶지 않다. 둘째, 거절을 못 한다. "저 이거 못 해요" 이 말이 안 나온다. 못 한다고 하면 실망시킬 것 같다. 그래서 일단 받는다. 생각은 나중에. 결과는? 지금처럼 책상 앞에서 식은땀 흘린다. 3시간째다. 진도는 10%.실제로 무슨 일이 벌어지나 구체적으로 적어본다. 월요일 오전 선배: "이거 간단한데, 드롭다운 컴포넌트 만들어줄래? 재사용 가능하게." 나: "네, 해볼게요." 월요일 오후 검색: "react reusable dropdown component" 결과: 20개 탭 열림 코드: 복붙 → 에러 → 다시 복붙 → 또 에러 화요일 선배: "어떻게 돼가?" 나: "거의 다 됐어요." (거짓말) 실제 진행률: 30% 머릿속: 패닉 수요일 야근 시작. 9시까지. 코드는 동작한다. 근데 왜 동작하는지 모른다. 복붙의 승리. 목요일 PR 올림. 심장이 두근거린다. 선배의 코멘트: "이 부분 useCallback 써야 할 것 같은데?" 나: useCallback이 뭐더라. 이게 반복이다. 매주. "제가 해볼게요" → 모르겠음 → 구글링 지옥 → 야근 → 동작은 하는데 이해는 못 함 → 코드리뷰 공포. 왜 이럴까. 왜 처음에 "저 이거 배우면서 해도 될까요?"라고 못 하나. 자존심? 아니다. 그냥 패턴이다. 나쁜 패턴. 최악의 순간들 기억나는 것들 적는다. 케이스 1: 테스트 코드 선배: "테스트 코드 좀 짜줄래?" 나: "네!" (테스트 코드를 한 번도 안 짜봤다) 결과: Jest 공식 문서 3시간 읽음 → 하나도 이해 못 함 → 결국 선배한테 "도와주세요" → 선배가 30분 만에 다 짜줌. 처음부터 모른다고 할 걸. 케이스 2: 타입 정의 선배: "이 API 응답 타입 정의해줄 수 있어?" 나: "할 수 있습니다!" (제네릭이 뭔지 모른다) 결과: 5시간 동안 any만 써서 완성 → 코드리뷰에서 "이거 타입 의미가 없는데요" → 선배가 다시 작성. 시간 낭비의 정석. 케이스 3: 성능 최적화 선배: "이 페이지 좀 느린 것 같은데, 최적화 좀 해볼래?" 나: "해보겠습니다!" (최적화를 해본 적이 없다) 결과: useMemo 막 갖다 붙임 → 더 느려짐 → 선배가 "뭐 한 거야" → 롤백. 민폐의 끝. 매번 이런다. 매번 후회한다. 근데 또 한다. 내가 이상한가.동기들도 그런가 궁금해서 물어봤다. 부트캠프 동기 단톡방에. "너네도 '해볼게요' 하고 후회해?" 답장이 왔다. 재민: "ㅋㅋㅋ 매일" 수진: "나 어제도 그랬음 ㅠㅠ" 민수: "형 그거 신입의 숙명임" 다들 그렇다. 재민이 보낸 메시지: "선배가 '이거 할 줄 알아?' 물으면 대답은 세 가지야.네 (거짓말) 네... (거의 거짓말) 아마도요 (완전 거짓말)"웃겼다. 근데 웃프다. 수진이 말했다. "나는 이제 '배우면서 해봐도 될까요?'라고 물어봐. 솔직하게." 현명하다. 나도 그래야 하는데. 민수는 달랐다. "형은 그냥 다 받아. 그래야 배워. 야근해도 돼." 극단적이다. 근데 이해는 된다. 결론: 다들 비슷하다. 신입은 다 이렇다. 위로가 됐다. 그래도 나만 이런 건 아니구나. 선배는 뭐라고 했나 용기 내서 물어봤다. 점심시간에 선배한테. "선배님, 제가 자꾸 '해볼게요' 하고 못 하는 것 같아요." 선배가 웃었다. "나도 그랬어." 진짜? "신입 때 무조건 다 받았지. 근데 반은 못 했어. 창피했어." 선배도 그랬다니. 신기하다. "그럼 어떻게 하셨어요?" "일단 받되, 바로 물어봐. '이거 어떻게 시작하면 되나요?' '이런 경우엔 어떻게 하나요?' 미리 물어보는 게 나중에 뒤집는 것보다 낫거든." 그렇구나. "그리고 진짜 모르는 건 솔직하게 말해. '저 이거 처음이라 시간 좀 걸릴 것 같은데 괜찮을까요?' 이렇게." 간단한데 왜 생각 못 했을까. "선배들도 다 알아. 신입이 뭘 모르는지. 티 안 내려고 해도 티 나거든. 차라리 솔직한 게 나아." 속이 시원했다. 선배가 말했다. "너무 자책하지 마. 배우는 단계야. 실수해도 돼." 고마웠다. 그날 오후부터 달라졌다. 모르는 거 바로 물었다. "이 부분 어떻게 하는 건지 모르겠어요." 선배가 5분 설명해줬다. 나는 2시간 삽질 안 했다. 효율적이다. 그래서 어떻게 할 건데 결론을 내려야 한다. 앞으로의 방침: 1. '해볼게요' 하기 전에 3초 생각한다진짜 할 수 있나? 얼마나 걸릴까? 도움이 필요한가?2. 조건부로 답한다"배우면서 해봐도 될까요?" "시간 좀 걸릴 것 같은데 괜찮으신가요?" "도중에 막히면 여쭤봐도 될까요?"3. 막히면 바로 물어본다2시간 삽질하지 않는다 30분 안 풀리면 슬랙 멘션 혼자 끙끙대는 게 민폐다4. 실패해도 괜찮다고 생각한다신입이니까 배우는 중이니까 완벽할 필요 없으니까이렇게 해보기로 했다. 며칠 지났다. 조금 나아졌다. 오늘 선배가 물었다. "이거 할 수 있어?" 나는 답했다. "해보고 싶은데요, 중간에 막히면 여쭤봐도 될까요?" 선배가 말했다. "그럼. 막히면 바로 물어봐." 마음이 편했다. 일은 절반 시간에 끝났다. 물어봤더니 쉬웠다. 왜 진작 이렇게 안 했을까. 마무리하며 여전히 "제가 해볼게요"라고 먼저 말한다. 근데 이제는 다르다. 할 수 있는지 먼저 생각한다. 조건을 단다. 도움을 요청한다. 후회는 줄었다. 야근도 줄었다. 스트레스도 줄었다. 완벽하진 않다. 가끔 또 옛날 버릇이 나온다. 일단 받고 나중에 패닉. 그래도 괜찮다. 배우는 중이니까. 신입이니까."해볼게요"와 "도와주세요" 사이의 적절한 균형, 그게 답이다.