개발자들이 남긴 기록..

야근 문화와 근무 환경 이야기
리액트 기반 개발 블로그 및 개츠비(Gatsby) vs 넥스트(Next.js)
M3 맥북 및 애플 신제품 발표 소식
프로미스(Promise) 개념과 비동기 처리 이해
GitCopilot 및 코드 스타일 자동 완성 관련 팁
마이크로 프론트엔드(Micro Frontends)와 대형 서비스 사례
SSR, SSG, 서버드리븐UI(Server Driven UI) 성능 최적화 고민
면접 관련 질문과 팁
VSCode에서 스프링 부트 사용 후기
상태관리 라이브러리(리덕스 등) 면접 대비 조언

1. 야근 문화와 근무 환경 이야기

야근에 대한 인식은 사람마다 크게 다름
새벽 12시까지 일해야 야근이라 생각하는 사람도 있고, 20분 늦게 퇴근하는 걸 야근이라고 여기는 경우도 있음
회사 업무와 연봉 인상 등에 대한 불만도 일부 존재
반차 사용법과 눈치 보는 문화에 대한 경험 공유

2. 리액트 기반 개발 블로그 및 개츠비(Gatsby) vs 넥스트(Next.js)

기존 리액트 프로젝트에 마크다운(blog post) 기능을 넣으려다 개츠비(Gatsby)가 거론됨
개츠비는 보통 새 프로젝트로 시작하는 경우가 많음, 기존 CRA(create-react-app) 프로젝트에 바로 추가하기 어려움
공식 문서의 포팅 가이드 공유 (https://www.gatsbyjs.com/docs/porting-from-create-react-app-to-gatsby/)
넥스트.js(Next.js)와 Contentlayer 조합도 인기, 성능 좋고 유연함
블로그/개발 기록용으로는 넥스트가 취업에도 강점이 많으니 한번 경험해볼 만함

설명: Gatsby와 Next.js는 둘 다 React 기반 정적 사이트 생성기이지만, Gatsby는 정적으로 미리 페이지를 생성하는 데 특화, Next.js는 SSR(Server-Side Rendering) 및 SSG(Static Site Generation)를 모두 지원해 유연함이 장점임.

3. M3 맥북 및 애플 신제품 발표 소식

M3 시리즈 맥북프로가 발표됨 (14인치 기준, 동작 성능 대폭 향상)
일부는 가격 대비 성능에 만족, 일부는 빨리 m1/m2 맥북 업그레이드 고민 중
애플 발표 영상과 관련 사이트 공유
발표는 짧았고, 아이패드 신제품 발표는 없었음
컬러 옵션 및 디자인 공감, 신규 색상 적용된 맥북 사용자들도 있음

4. 프로미스(Promise) 개념과 비동기 처리 이해

프로미스는 JavaScript에서 비동기 처리를 쉽게 하기 위한 객체
"약속"이라는 의미로, 비동기 작업의 완료 또는 실패 상태를 나타냄
프로미스 본체(new Promise(() => {}))는 동기적으로 실행되지만, 실제 결과 처리(then, catch 등)는 비동기로 처리됨
async/await는 프로미스를 보다 직관적으로 사용할 수 있게 함
비동기가 뭔지 혼동하는 경우가 많으며, 비동기 처리의 순서와 흐름을 약속해주는 기능임

설명: 비동기 처리는 시간이 걸리는 작업(예: 네트워크 요청)을 메인 실행 흐름을 막지 않고 처리함. 프로미스는 이런 작업이 완료됐을 때 어떻게 처리할지 약속하는 객체로, 콜백 헬(중첩된 콜백 구조)을 깔끔하게 해결함.

5. GitCopilot 및 코드 스타일 자동 완성 관련 팁

GitCopilot은 프로젝트 전체 코드를 학습하지 않고, 현재 열린 코드 주변 몇 줄을 보고 추천함
프로젝트의 특정 코드 스타일(들여쓰기, 변수명 규칙 등)을 완벽히 자동 맞춤하지는 않음
코드 스타일 유지 및 강제는 ESLint, Prettier 같은 도구를 사용해야 효과적임
Copilot은 반복적이고 단순한 코드 작성에 유용하며, 통합 개발환경(IntelliSense)과 비슷한 역할 수행

6. 마이크로 프론트엔드(Micro Frontends)와 대형 서비스 사례

쿠팡, NHN 같은 대형 서비스는 팀별로 서로 다른 프레임워크(React, Angular, Vue 등)를 사용하는 경우가 있음
이들을 하나로 묶는 전략 중 하나가 마이크로 프론트엔드(Micro Frontends, MFA)
MFA란 큰 애플리케이션을 여러 개의 독립적 작은 프론트엔드 앱으로 나누어 개발·배포 하는 것을 의미함
협업과 유지보수 면에서는 이점 있지만, 관리 및 빌드가 복잡해지고 레거시 코드 호환 문제가 발생하기도 함
iframe 활용 등 여러 방법으로 복잡한 레거시 시스템을 처리하는 사례도 존재

7. SSR, SSG, 서버드리븐UI(Server Driven UI) 성능 최적화 고민

SSR(Server-Side Rendering)은 서버에서 HTML을 미리 렌더링해 초기 로딩 속도를 개선
SSG(Static Site Generation)는 빌드 시점에 정적 페이지를 생성해 빠른 배포 및 로딩 제공
Server Driven UI는 서버에서 UI 구성을 내려주어 앱이 동적으로 조립되도록 하는 방식
특히 어드민 페이지 같은 대량 양산형 서비스에 유용, 특정 몰·서비스별 변경도 서버에서 관리 가능
성능 이슈(첫 화면 로딩 시간, FCP, LCP)를 줄이기 위한 캐싱 전략과 번들 크기 최적화가 중요
어떤 렌더링 전략이든 사용자 및 서비스 환경에 맞게 선택해야 하며, 모든 서비스에 한가지가 최선은 아님

8. 면접 관련 질문과 팁

면접 질문으로는 리액트 기본, 개발 역량, 인적성, 타입스크립트, AWS 등이 주로 등장
프로젝트에서 본인이 담당하지 않은 부분 질문도 받을 수 있으니 어느 정도 이해는 하는 게 바람직함
상태관리 라이브러리(리덕스 등) 사용 경험 여부가 중요할 수 있으나, 모른다고 무조건 불이익은 아님
상태관리는 왜 사용했는지 그 필요성을 설명할 수 있으면 긍정적 평가
비동기 처리, 프로미스, useEffect, ref 등의 개념도 자주 물음
면접 전 시행착오를 통해 질문 난이도와 형식을 파악하는 게 좋음
사직서, 반차, 야근 문화 등 직장 생활 관련 현실적인 고민도 공유됨

9. VSCode에서 스프링 부트 사용 후기

VSCode에서도 Java Spring Boot 개발 가능하나, IntelliJ 대비 일부 기능(인텔리센스, 리팩토링 등)이 약함
간단한 백엔드 작업이나 학습용으로 괜찮지만, 생산성 높은 대규모 개발에는 IntelliJ 권장
VSCode는 가볍고 설정만 잘 하면 충분히 사용할 수 있다는 의견

10. 상태관리 라이브러리(리덕스 등) 면접 대비 조언

신입 개발자가 리덕스를 모르더라도 내가 상태관리를 왜, 어떻게 했는지 설명할 수 있다면 좋은 인상
상태관리는 프론트엔드 애플리케이션에서 여러 컴포넌트 간 공유되는 데이터를 효율적으로 관리하고, 예측 가능한 상태변화를 도모하는 핵심 개념
면접관 입장에서는 단순히 사용 여부가 아니라 상태관리 필요성을 인지하고 대안을 고민해봤는지를 중요하게 평가함
상태관리 외에도 기본 CS 지식과 개념 이해가 중요하다는 의견 다수

면접팁⚡

면접시 자신이 직접 담당하지 않은 부분도 기본적인 개념은 숙지하고 답변할 준비하기
상태관리, 비동기 처리(Promise, async/await), 타입스크립트 기본 개념은 필수
코드 스타일 자동화(ESLint, Prettier) 도구 경험 유리
면접 질문 예상과 답변 연습은 여러 차례 경험 후에 감 잡기 시작됨
밤샘 야근보다는 꾸준한 자기관리, 좋은 커뮤니케이션 태도가 플러스요소
프로젝트 경험은 솔직하게, 그러나 자신 있게 설명할 것

링크🔗

Gatsby 공식 포팅 가이드: https://www.gatsbyjs.com/docs/porting-from-create-react-app-to-gatsby/
애플 이벤트(한글 자막 포함): https://www.apple.com/apple-events/event-stream/
마이크로 프론트엔드 개념 설명: https://velog.io/@kylexid/%EB%A7%88%EC%9D%B4%ED%81%AC%EB%A1%9C%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%95%84%ED%82%A4%ED%85%8D%EC%B3%90
JavaScript Promise 개념 정리(MDN 추천)
Vercel Fonts 관련: https://vercel.com/font
VSCode Java Spring Boot 셋업 문서: https://code.visualstudio.com/docs/java/java-spring-boot
Barrel Files 문제 정리: https://flaming.codes/ko/posts/barrel-files-in-javascript
Google 서비스 폐기 모음(레전드): https://killedbygoogle.com/
토스 개발 블로그: https://github.com/yeonjuan/dev-blog/blob/master/JavaScript/speeding-up-the-javascript-ecosystem-the-barrel-file-debacle.md
Kakao Server Driven UI 소개: https://devblog.kakaostyle.com/ko/2021-12-16-1-server-driven-ui

2023-10-31

목차