✨ 첫 취업 1주차 후기

출근이라니!
거의 1년 2개월만에 출근을 하게 되어 그런지 너무 긴장이 되어 잠이 오지 않았다. 출근해서 이런저런 설명도 듣고, 나는 macOS가 아니라 Windows 환경에서 작업을 해야한다는 살짝은? 아쉬운🥹 이야기를 듣게 되었다. 내 맥북이,,,, 쓸모 없어지다니,,, 잉잉ㅠㅠ 개발 환경은 처음부터 맥북만 사용했어서 그런지 첫째날은 컴퓨터에 익숙해지는데 시간을 쓴 것 같다. 커맨드 키와 한영키 찾으려고 자꾸 손이 키보드를 배회했다. (지금은 이제 맥북에서 컨트롤 키 위치를 누르고 있음;;ㅋㅋㅋ)

회사에서는 Cursor AI를 지원해주셨는데, 처음 써보는 것이라 신세계였다ㅎㅎ 원래 입사전에 써보려고 하다가 클로드 결제한게 끝나면 써야지 했는데 회사에서 지원을 해준다니!! 회사 짱!!ㅋㅋㅎ 그리고 엄청 비싼 레오폴드 키보드도 사주셨다. 생일 선물로 받았던 키보드가 레오폴드라 원래 그걸 쓰고 있다고 말씀드리니 알겠다고 하시며 바로 결제해주시던 사수님,, 왕감동란🥚

내가 나름 친화력은 좋은 편이지만, 새로운 환경에 아예 처음보는 사람들과는 긴장을 많이 하기도 해서 이번 주 내내 혼자 뚝딱거렸다. 내가 이상해보이는 그런,,, 말이나 행동도 한 것 같고,,, 여튼 그랬다. 저 그렇게 엄청 많이 이상한 사람은 아니에요ㅠㅠ

여튼 나는 부트캠프때부터 꿈이 "좋은 사수"가 있는 곳에 가서 많이 배울 수 있으면 좋겠다는 것이었는데 정말 내가 무슨 복이 이렇게 있는지... (올해 운 다 쓴 것 같다😙) 사수님이 1부터 100까지 다 알려주시고, 기죽지 말라고 칭찬도 엄청 해주셨다. 사수님 말씀 한마디 한마디에 감동을 받아서 이번 주 내내 엄마, 아빠, 친구들에게 하루종일 자랑했다. 부모님은 내가 퇴근해서 오면 얼른 오늘은 어떤 재미있는 일이 있었는지 물어보실 정도로 나보다 더 신이 나계셨다ㅋㅋㅋ 그만큼 정말 좋은 사수님을 만났고, 같이 회사에 계시는 분들 다 일에 대한 열정과 애사심이 넘쳤다. 제일 좋았던건 원래 어린이집에서는 점심시간이 헬이었는데, 지금은 여유롭게 나가서 김치찌개도 먹고, 제육덮밥도 먹고, 국밥도 먹고,,, 햄보케~~~ 한식과 고기 러버인 나에겐 이곳이 천국✨ 대표님도 항상 유머러스 하시고, 열심히 하는 사람을 격려해주시는게 느껴져서 정말 좋았다. 나두 빨리 밥값하는 사람이 되고 싶다!

그렇게 부푼 꿈을 가졌으나 현실은 녹록치 않았다🥲 첫 프로젝트 이후에는 그래도 깃으로 애먹어본적이 많이 없었는데, 무슨 시작하자마자 깃 때문에 미쳐버릴뻔 했다. rebase를 알고는 있었는데 어떤 상황에 어떻게 사용해야 하는지는 명확한 개념이 없어서 깃이 꼬일까봐 아예 써본 적이 없었다. 그러다 보니 이 HEAD가 어떻게 움직이는지,,, 브랜치가 어떻게 그려지는건지 감이 잡히지 않았고, 열심히 하겠다고 큰소리 치고 들어와서는 깃 때문에 아무것도 못하는 내 모습에 자존감이 와장창 깨졌다. 긴장도 되고 그래서 말씀해주시는걸 다 제대로 흡수하지도 못하고, 사수님 시간을 너무 많이 빼앗는 것 같아서 똑같은 걸로 물어보는 상황이 너무 죄송해 죽을뻔 했다.

감사하게도 내가 그렇게 죄송해할 때마다 괜찮으니까 바로바로 물어보라고 말씀해주시고,,, 하여튼 사수님 자랑할게 너무 많다. 특히 자바스크립트의 달인이시고, 어떻게 공부하는지도 하나하나 알려주셨다. 내가 공부하는걸 되게 좋게 봐주시고, 열심히 하려는 마음을 알아주셔서 감사했다.

일주일밖에 되지 않았지만,, 힝구
나도 나중에 사수님 같은 어른이 되어서(이미 다 늙긴했지만 어른이 된다는건 나이와 다른 그런 의미 먼지 알져) 새로 들어오는 후배가 있다면 친절하게 제대로 알려줄 수 있는 사람이 되고 싶다는 생각을 했다.

내 꿈은 사수님이에요.

📖 이번주 새로 알게된 것과 사수님의 과제

사수님이 공부해보라고 했던 내용을 일주일 동안 모아서 블로그에 정리해보려고 한다. 지금도 이미 빌런인데, 주말에라도 열심히 따라잡기 위해 노력해야지!!ㅠㅠ

✔️ 허스키와 Git Hooks

오늘 프로젝트 셋팅을 해보면서 처음으로 허스키 훅을 직접 작성해보았다. 내가 적용했던건 허스키의 pre-commit과 pre-push 였는데, 이미 전 프로젝트에서 사용했던 것을 그대로 가져와서 사용한거라 크게 어려운 것은 없었다. 다만 윈도우와 호환이 될 수 있게 몇 가지 설정이 더 필요했다. 이건 사실 커서가 너무 알잘딱으로 잘해줘서 시키는 데로만 했더니 잘 됐다ㅎㅎ;; (다음에는 어떻게 적용한건지도 좀 봐야겠다)

그리고 데일리 스크럼하면서 사수님에게 말씀드리니 깃허브에도 pre-commit 등이 있으니 한 번 공부해보는 것도 좋을 것 같다고 하셔서 살펴보았다.

👀 Git Hooks란?

Git은 다른 많은 버전 관리 시스템처럼, 특정 중요한 작업이 발생했을 때 사용자 정의 스크립트를 실행할 수 있는 기능을 제공하는데 이를 Git Hooks라고 한다. 훅은 크게

• 클라이언트 측 훅: 커밋, 머지 등 로컬 작업 시 실행됨
• 서버 측 훅: 원격 저장소로 푸시할 때 등 네트워크 작업 시 실행됨 // 주로 정책 강제나 자동화 용도

이렇게 두 가지로 있으며 이를 통해 다양한 자동화 작업을 수행할 수 있다고 한다.

깃 훅이라는 개념을 잘 모르고 다른 친구들이 허스키를 쓰자고 하니까 냅다 써버렸는데, 생각보다 다양한 기능이 정말 많았고 이를 좀 더 편하게 사용하게 해주는게 허스키라는 라이브러리였다는 것을 배웠다. 커밋 관련 훅도 있고, 이메일 워크플로우 훅 등도 있어서 깃 작업에 대해 수많은 것들을 할 수 있다는 걸 알게 되었다.

✔️ 깃관련 공부

사수님이 깃관련한 슬라이드를 공유해주셔서 읽어보면서 내가 조금 불분명하게 알고 있는 부분을 찾아보았다.

깃은 리눅스에서 만들어졌는데, 비선형적인 개발을 위해서 만들어졌다고 한다.

• rebase: 브랜치 내에 결과물이 순차적으로 반영되는것 처럼 보여서 커밋 히스토리를 최대한 직선으로 만들 수 있다. 그런데 rebase는 로컬에서만 하는게 좋다고 한다,,

• reflog: Git 사용 중 커밋을 잃어버릴 경우 유용하게 사용할 수 있다.

👀 fetch & pull 의 차이

fetch

git fetch는 로컬 Git에게 원격 저장소에서 최신 메타데이터 정보를 확인하라는 명령을 전달한다. 단 fetch는 원격 저장소에 변경사항이 있는지 확인만 하고, 변경된 데이터를 로컬 Git에 실제로 가져오지는 않는다.

pull

git pull은 원격 저장소에서 변경된 메타데이터 정보를 확인할 뿐만 아니라 최신 데이터를 복사하여 로컬 Git에 가져온다.

👀 rebase & reset

진짜 이것때문에 정말,,, 고생이란 고생을,,, (물론 나말고 사수님이ㅠ) 하도 못알아들어서 그림 그려서 설명을 이틀 내내 해주셨다ㅠㅠ

rebase

일단 리베이스 하는 법

• 브랜치 파서 자유롭게 코딩 ㄱㄱ
• 작업 종료시 머지해야하는 브랜치(ex: develop)에 PR 올리기
• 일단 git fetch (최신화 된 내용이 있는지 확인)
• 내가 머지해야하는 브랜치 (ex: main, develop)에 git rebase -i origin/develop
• 내가 리베이스 할 때 필요한 커밋인지 확인 후 필요하지 않은 커밋은 d 두 번 눌러서 삭제
• conflict 있으면 해결 후 git rebase --continue
• 내가 작업한 브랜치로 git push

리베이스는 내가 작업하던 브랜치의 진입점을 가장 최신 커밋에서 시작하게 해주는 것이다.

이렇게 시작점 바꿔줌.

reset

나는 "커밋을 되돌린다" 라고 알고 있다고 말씀드렸는데, 그렇게 정의해버리면 잘 활용을 못할 것 같다고 하며 계속 내게 굳어진 개념을 바꿔주려고 하셨다. 사수님은 "내가 가고 싶은 상태로 초기화 (동기화)한다" 라고 생각하라고 알려주셨다. 예를 들어 내가 로컬의 develop 브랜치를 굳이 다른 커밋들을 가져오고 싶지 않으면
git teset -hard origin/develop 을 사용하면 리모트 develop 브랜치로 동기화 시킬 수 있다.

✔️ nvm 사용법과 필요한 이유

nvm이란 Node Version Manager의 약자로, 여러 버전의 Node.js를 설치하고 관리할 수 있는 도구이다. 프로젝트마다 다른 버전의 노드 버전을 사용할 수도 있는데, 프로젝트 디렉토리 내에 .nvmrc 파일을 찾고, 파일에 명시된 Node.js 버전으로 자동 변경 시켜준다.

✔️ Ant-design

Ant-design은 UI 라이브러리 중 하나로 중국에서 만들어졌다. 사수님이 즐겨쓰시는 라이브러리인 것 같았다. 나도 이걸로 로그인 페이지를 하나 만들어(?) 보았는데 생각보다 정~말 빠르고 쉽고 간편하게 사용할 수 있어서, 디자인이 따로 있지 않을 때 사용하면 좋을 것 같았다.

프로젝트 셋팅할 때 헷갈렸던 부분 중 하나는

https://ant.design/docs/react/use-with-next

여기서 설치하고 Registry.tsx 프로바이더를 만들 때 antd를 설치하고, @ant-design/nextjs-registry 이 registry도 설치해야 한다는 점이었다. (제대로 안읽어서 그런가봄ㅠ) 프로젝트 셋팅을 했는데, 사수님이 antd는 설치 안하셨냐고 물어보시길래 설치해서 쓰고 있는걸 보여드리니 내가 registry만 설치해서 쓰고 잇었던 것이었다..🥹 (antd-registry만 설치했는데도 컴포넌트가 잘 불러와져서 몰랐다)

사수님이 설명해주시길, 예전에 레지스트리가 없을 당시에는 이것 저것 설정해야 하는게 많았는데 이걸 설치하여 프로바이더로 적용해줌으로써 그 귀찮은 작업이 없어진 것이라고 알려주셨다. 그리고 프로젝트 빌드를 할 때 노드 모듈에 antd가 없으면 제대로 빌드되지 않을 수 있다고도 알려주셨다. 아직 내가 빌드될 때 어떤 방식으로 되는지, 노드 모듈이 하는 역할이 뭔지 정확히 모르고 있었는데 그런것도 점차 알게되며 한참 멀었다고 생각했다..ㅎ 아는게 뭐지 나;;

✔️ middleware와 Proxy, next.config.ts

cors 에러가 나서 해결을 어떻게 해야하는지 여쭤봤는데, next에서 정말 쉽게 처리해주는 방법이 있다는 것을 알려주셨다. next.config.ts에서 rewrites를 사용하면 되는 것이다!!

https://nextjs.org/docs/app/api-reference/config/next-config-js/rewrites
Rewrites는 URL 프록시(proxy)처럼 동작하며, 사용자가 실제로는 다른 경로로 이동했음에도 불구하고 주소창(URL)은 바뀌지 않도록 만들어줍니다.

module.exports = {
  async rewrites() {
    return [
      {
        source: '/about',
        destination: '/',
      },
    ]
  },
}

예를 들어 /about 요청을 내부적으로 /about-us로 처리하되, URL은 그대로 /about으로 보이게 할 수 있다. 나는 다국어 기능도 사용하고 있어서 locale: false 옵션도 사용했었다. 저걸 설정해주고 버셀 배포에서 오류가 난 적이 있는데,

rewrite이 문제라고 뜨길래 일단 주석처리를 해두고 머지를 했다. 이유를 안찾아보고, (브랜치 머지하라고 하셨는데 계속 못하고 있어서 왜 났는지 깊이 생각 안했다ㅠㅠ) 그냥 주석처리 한 것을 보시고 에러 읽는 법을 다시 알려주셨다.

빌드 에러를 expand 해보니 이렇게 이유가 작성되어 있었고,
'destination does not start with /, http://, or https:// for route {"source":"/api/:path","destination":"undefined/:path","locale":false}'

바로 왜 이 에러가 났냐고 물으신다면!!!

버셀에 .env에 설정한 주소를 안넣음..ㅋㅋ...ㅋㅋㅋ... 심지어 웃긴게 그날 사수님이 이거 알려주실 때도 얼굴이 화끈거렸는데 이거 쓸 때 또 까먹어서 "아 머였지!!!!!!!!" 이러고 있었음

👀 proxy란?

클라이언트(브라우저 등)와 서버 사이에 중간 다리 역할을 해주는 것이다.

✅ 1. API 요청을 다른 서버로 대신 전달

• 로컬에서 개발할 때, 프론트엔드 서버가 localhost:3000, 백엔드 서버가 localhost:8000일 수 있다.
• 브라우저에서 CORS 문제를 막기 위해 프론트가 백엔드에 직접 요청하는 게 아니라,
  프론트가 프록시 서버에 요청 ➡️ 프록시가 백엔드로 전달한다.

✅ 2. 보안, 로깅, 캐싱 등 다양한 목적

• 요청을 감시하거나 수정할 수도 있다.
• 실제 서버 주소를 숨기고 보안성을 높일 수도 있다.
• 데이터를 미리 저장해 캐싱으로 속도를 높일 수도 있다.

📦 프론트 개발에서 흔한 프록시 설정들

환경	프록시 설정 위치	설명
Vite	vite.config.js	/api → 다른 주소로 전달
CRA (React)	package.json의 proxy 필드	개발 중 백엔드와 연결
Next.js	rewrites 또는 미들웨어 활용	경로 바꿔서 API 연결

✔️ pnpm / yarn / 모노레포

너무 길어져서 따로 뺐다ㅎㅎ

패키지 매니저에 관하여,, 🔗

✔️ electron 이란?

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required.

Electron은 JavaScript, HTML, CSS를 사용해서 데스크탑 애플리케이션을 만들 수 있는 프레임워크이다. Chromium과 Node.js를 자체 실행 파일 안에 내장함으로써, 하나의 JavaScript 코드베이스만으로 Windows, macOS, Linux에서 모두 작동하는 크로스플랫폼 앱을 만들 수 있게 해준다고 한다.

현 회사에서 이 기술을 사용하고 있어서 언젠가는 배워야 하는데,, 일단 뭔지 궁금해서 이런거구나 정도만!ㅎㅎ

✔️ Service란

데이터베이스 프로그래밍에서도 서비스라는 단어가 사용된다.
데이터베이스 프로그래밍에서는 사용자의 입력을 받거나 결과를 출력하는 부분과 직접적으로 DB 처리를 하는 부분, 그리고 둘 사이에서 데이터를 가공하는 역할을 맡는 부분을 계층적으로 엄격하게 분리하여 코드를 작성하는 경우가 많은데, 이때 데이터를 가공하는 역할을 맡는 부분을 서비스라고 부른다. 정확히는 서비스 계층, Service Layer라고 표현한다.
[출처][IT 용어] 서비스 (Service) |작성자 꼼꼼한 재은씨

보통 백엔드에서는 서비스 폴더를 만들어서 함수를 작성하는 경우가 많은데, 프론트엔드에서는 흔치 않아서 어떻게 작성해야할지 감이 오지 않았다. 이것도 사수님이 그림 그리면서 설명해주셨는데ㅎㅎ (완전 눈높이 교육)

사수님이 Node.js, NestJS를 쓰시면서 이 방식이 좋은 것 같아 사용하고 있는 방법이라고 알려주셨다. zustand의 스토어는 DB 역할을 하고, store 파일 내에 위에 이야기 한 서비스 관련 로직들을 정의하는 함수들을 저장한다. 마지막으로 service 폴더에서는 api 관련 함수들을 정의해둔다.
service 폴더 내의 함수들이 위에 설명한 '서비스'와 맞지 않는 것 같아서 헷갈렸는데, store에 있는 공통된 상태를 사용하는 서비스 함수들을 스토어 폴더 내에 정의하느라 그렇게 됐다고 말씀해주셨다.

✔️ 국제화 기능

이건 뭐 라이브러리가 다 해주긴 했지만,, 생각보다 쉽고 재미있었다. 나는 next의 app router를 사용하고 있어서 next-intl 라이브러리를 사용했다.

https://next-intl.dev/docs/getting-started/app-router/with-i18n-routing
사용법은 매우 쉬움

여기서 조금 고민했던건 사수님이 메세지들을 모듈화하는 법을 찾아서 적용해봤으면 좋겠다고 알려주셨다. messages 폴더 내의 파일들이 json 파일들이라서 어떻게 모듈화 해야하나 고민하다가

export default async function getLocaleMessages(params: { locale: string }) {
  const locale = params.locale;
  const { title, loading } = (await import(`../messages/${locale}/home.json`))
    .default;
  const dashboard = (await import(`../messages/${locale}/dashboard.json`)).default;
  const login = (await import(`../messages/${locale}/login.json`)).default;

  const messages = {
    dashboard,
    Home: {
      title,
      loading,
    },
    Login: {
      login,
    },
  };
  return messages;
}

이런 함수를 작성해서

import { getRequestConfig } from 'next-intl/server';
import { hasLocale } from 'next-intl';
import { routing } from './routing';
import getLocaleMessages from './getLocaleMessages';

export default getRequestConfig(async ({ requestLocale }) => {
  // Typically corresponds to the `[locale]` segment
  const requested = await requestLocale;
  const locale = hasLocale(routing.locales, requested)
    ? requested
    : routing.defaultLocale;

  const messages = await getLocaleMessages({ locale });
  return {
    locale,
    messages,
  };
});

이렇게 사용될 수 있도록 만들었다. 원래는 이 파일 안에 저 getLocaleMessages 파일 내의 로직이 있었는데, 분리하는게 더 좋을 것 같다고 알려주셔서 적용했다.

✔️ 사수님의 공부법

• 알고리즘 공부하기
  꾸준히 알고리즘 공부를 하셨고, 특히 정렬 알고리즘을 for문과 if문 만으로 구현해보셨다고 한다. 이걸 잘하게 되면 감잡을 수 있다고ㅎㅎㅎ
  

• 잘 알려진 자바스크립트로 짜여진 레포 공부해보기
  ex) lodash
  이런 레포 들어가서 주석 읽지 말고 혼자 먼저 읽으면서 코드 문맥을 파악해보라고 하셨다. 난 ai한테 주석달라고 해서 읽어보는게 도움이 되는 줄 알았는데, 그것보다 아예 쌩으로 읽는 연습을 하는게 좋다고,,,ㅎㅎ

• 2년차쯤 벽을 만났을 때는 코드 리팩토링 해보기
  다른 사람의 코드를 보면서 리팩토링 해보는것도 벽을 넘는데 큰 도움이 되셨다고!!

ㅎㅎ완전 꿀팁이다🍯🐝

정리해보니까 생각보다 일주일 동안 배운게 정~말 많았다. 알려주시는 것들 최대한 흡수하기 위해 열심히 시간 갈갈 해야겠다!_!