2024-03-23

목차

1. 국제 이슈와 배경 설명
2. 봄철 날씨 이야기와 개발자 일상
3. Git 브랜치 관리 기본 개념과 활용
4. 환경변수 관리 및 빌드 타임 vs 런타임 구분
5. TypeScript 사용 및 실무 적용 현황
6. JWT 토큰 만료 처리와 보안 관점
7. Storybook과 Next.js 연계 사용 및 주의점
8. Vue.js와 React 비교: 장단점과 개발자 의견
9. Masonry 레이아웃 및 이미지 효과 구현
10. 연봉 협상과 커리어 고민 조언

1. 국제 이슈와 배경 설명 🌍

• 러시아와 체첸 공화국 간의 과거 극장 테러 사건 배경 공유.
• 체첸은 옛날에는 반러시아 성향, 러시아의 공격으로 결국 친러 국가가 됨.
• 우크라이나 상황이 체첸과 비슷한 길을 걷는 것 아니냐는 우려.
• IS는 중동 지역에서 거의 소멸상태며, 최근엔 중앙아시아 지부에 국한.
• 홍해 지역 예멘 후티 반군(시아파)와 러시아, 중국 연대 뉴스가 나옴.
• 수니파성향 IS가 러시아에 도발한 것일 가능성 제기.

배경설명

• 시아파와 수니파는 이슬람교 내 두 주요 분파로, 종교적 차이 외 정치·군사 상황에도 영향 미침.
• 체첸 독립투쟁은 러시아 내 소수민족 자치권 문제와 연결되며, 그 여파가 극단적 테러로 나타난 사례.

2. 봄철 날씨와 개발자들의 일상 이야기 🌸

• 도쿄에서 벚꽃 필 시기임에도 아침에 눈이 와서 날씨가 매우 춥다는 대화.
• 서울보다 기온이 더 낮은 경험 공유.
• 세차와 차량 이야기, 꽃구경 가고 싶다는 일상 킬링 타임 대화도 오갔음.
• 전염병 관련 루머와 치사율 정보 공유 중, 마스크 착용 강조됨.

참고

• 기상이변으로 계절과 맞지 않는 날씨가 발생할 수 있어 외출 시 날씨 확인이 필수.

3. Git 브랜치 관리 기본 개념과 활용 🧑‍💻

• 질문: 원격 저장소에 main과 develop 브랜치가 존재할 때, 각 브랜치별로 폴더를 나눠 관리해야 하는지?
• 답변: 브랜치는 폴더를 나누기 위해서가 아닙니다.
• 브랜치는 코드 변경점의 분기를 위한 기능이며, develop 브랜치에서 작업한 내용은 develop 브랜치 내에서 버전 관리 됨.
• main 브랜치로 전환하면 develop이 갈라진 시점의 상태를 보여줌.
• 따라서 폴더를 따로 받거나 관리할 필요 없이 한 저장소 내에서 브랜치를 전환해 작업함.

초보자 참고

• Git 브랜치는 독립된 작업 공간을 만드는 것이 아니라, 같은 프로젝트의 시간대별 복사본처럼 생각하면 됨.
• merge 작업을 통해 브랜치 간 변경 사항을 합칠 수 있음.

4. 환경변수 관리 및 빌드 타임 vs 런타임 🔧

• React Vite 환경에서 API secret key는 빌드 타임에 주입되어야 함.
• API_BASE_URL이나 구글 태그 아이디 등 런타임 환경변수는 .env 파일에서 관리 가능하며 보통 gitignore에 포함하지 않는 경우 많음.
• 빌드 타임과 런타임 환경변수는 구분해서 관리해야 하므로, 빌드 시점에 필요한 변수는 별도의 비밀 저장소(secrets)로 관리하는 것이 권장됨.

설명

• 빌드 타임 환경변수는 앱 컴파일 시점에 코드에 주입되므로 공개되면 안 됨.
• 런타임 환경변수는 앱이 실행될 때 불러오므로 보안이 상대적으로 낮음, 보통 공개 가능한 값들이 사용됨.

5. TypeScript 사용 및 실무 적용 현황 📘

• 최근 프로젝트들은 TypeScript(이하 TS)를 기본으로 사용하는 추세로, 연동이 용이함.
• 타스는 코드 안정성 향상과 유지보수에 도움을 줌.
• React 개발 시 TS 필수인 경우가 많으며, 입사 시에도 TS 활용 능력을 요구하는 사례가 대다수임.
• 하지만 AI 툴이 코드 자동 생성하는 부분에 대해서는 여전히 직접 공부가 필요하다는 의견 존재.

초보자 팁

• TS는 자바스크립트에 타입을 도입해 코드 안전성과 가독성을 높임.
• 실무에서 문제 예방과 협업 효율을 위해 도입 추세임.

6. JWT 토큰 만료 처리 및 보안 고려 🔒

• 질문: JWT 토큰 만료 시간을 백엔드가 주는 게 좋은지, 앱에서 토큰 내부 만료시간을 해석하는 게 좋은지?
• 답변:
  • 클라이언트(앱)에서 만료시간을 확인하는 건 사용자 편의를 위한 참고사항일 뿐임.
  • 보안적으로 만료 검증은 반드시 백엔드에서 처리해야 함.
  • 토큰 만료 시 자동 재요청 로직은 클라이언트에 구현하되, 백엔드는 항상 토큰 유효성 체크해야 함.

설명

• JWT(Json Web Token)는 사용자 인증에 쓰이는 토큰으로 자체에 만료시간(exp)이 포함됨.
• 클라이언트가 만료시간을 확인할 수 있으나, 신뢰성은 서버가 검증하는 게 필수.

7. Storybook과 Next.js 연계 사용 🚀

• Storybook은 UI 컴포넌트 개발 도구로, Next.js app router와 조합 가능 여부 문의.
• 답변: 전혀 별개 라이브러리는 아니지만 잘 연동하려면 버전 호환을 확인해야 함.
• 최신 Storybook 베타버전 대신 안정된 4.7 버전 사용 권장.
• Next.js 13 app directory 사용 시 스토리북 어떻게 연동할지는 추가 학습 필요.

참고

• Storybook은 컴포넌트를 독립적으로 개발·테스트하는 툴로, UI 개발 효율을 크게 높임.

8. Vue.js와 React 비교: 장단점과 개발자 의견 ⚔️

• Vue는 러닝커브가 낮고 편의 기능이 많이 내장되어 있어 생산성 측면에서 장점 있음.
• Vue는 템플릿과 스크립트를 명확히 분리해 유지보수에 유리. React는 더 유연하지만 초보자가 익히기 어려울 수 있다는 평가.
• Vue의 v-if, v-model 같은 지시자 구문은 직관적이라 많이 선호됨.
• React는 더 많은 생태계와 범용성 강점 보유.

비유

• React는 자바의 서블릿, Vue는 JSP 같은 느낌이라고 표현.

9. Masonry 레이아웃 및 이미지 리스트 효과 구현 🔳

• Pinterest와 같은 이미지 리스트 레이아웃은 'Masonry 레이아웃'이라 불림.
• 이미지 간격이 일정하지 않고 자연스럽게 빈 공간 없이 쌓이는 것이 특징.
• MUI(Material UI) 라이브러리에서 Masonry 컴포넌트 제공.
• 애니메이션 효과(키프레임)를 추가해 클릭 시 이미지 펼치기 등 인터랙티브한 기능도 가능.

팁

• Masonry 레이아웃은 Grid 방식과 달리 칼럼마다 각기 다른 높이의 아이템을 나열해 공간 활용을 극대화함.

10. 연봉 협상과 커리어 고민 💼

• 1년차 입장에서 첫 연봉 협상 시 권장 인상률은 10~15% 정도.
• 회사 상황, 본인의 성과, 담당 프로젝트 등 고려하여 협상 금액을 명확히 제시하는 것이 좋음.
• 퍼센트 증감률 대신 절대 금액을 명확히 말하는 전략도 있음.
• 회사 재정 상황이나 협상 분위기에 따라 동결될 수도 있으니 기대치 조절 필요.
• 장기적으로는 연봉 협상이 커리어 전환 및 다음 회사 연봉 결정에 큰 영향을 줌.
• 때에 따라 돈보다 회사 문화, 성장 가능성, 배우는 기회가 우선순위가 될 수 있음.

조언

• 협상은 자신의 가치와 성과를 구체적으로 전달하는 것이 핵심.
• 미래를 위한 투자라고 생각하고 무조건 올리려고 시도해 보는 것이 좋음.

면접팁⚡

• TypeScript 활용 경험은 리액트 개발자 면접에서 거의 필수 질문으로 다뤄짐.
• JWT 인증 로직 보안을 잘 이해하고, 클라이언트/서버 역할 분담을 설명할 수 있어야 함.
• Git 브랜치 전략과 merge 개념을 명확히 알고 있으면 협업 능력 측면에서 좋은 인상을 줄 수 있음.

링크🔗

• React Masonry 레이아웃 (MUI) : https://mui.com/material-ui/react-image-list
• Masonry 레이아웃 관련 참고 글 : https://wit.nts-corp.com/2022/10/26/6595
• VRM (Pixiv Open Source) : https://github.com/pixiv/three-vrm
• Tldraw (그림→코드 변환, GPT-4 필요) : https://tldraw.com