2023-11-07

목차

1. 게임용 커스텀 어셈블리어 컴파일러 이야기
2. Immer 라이브러리 사용 빈도와 Redux 불변성 관리
3. Next.js next.config.js 수정 및 활용 팁
4. React 배열 타입 (string[] vs Array<string>) 논쟁
5. React 상태관리 설계: 탑다운(Top-down)과 바텀업(Bottom-up) 방식
6. React 및 Vue의 단방향 vs 양방향 데이터 바인딩 이해
7. React 함수형 컴포넌트와 클래스형 컴포넌트 차이점
8. GitHub Pages 라우팅 이슈 & CORS 문제 해결 팁
9. React에서 라이브러리 ESLint 설정 및 추천 플러그인
10. React Query Suspense 사용 경험 및 실무에서의 장단점

1. 게임용 커스텀 어셈블리어 컴파일러 이야기 🎮

• 자바스크립트를 게임용으로 커스텀한 "블록 어셈블리어" 형태로 컴파일하는 CLI 도구를 제작 중.
• 게임 맥락에 맞게 동작하나, 실제 저수준 어셈블리어와는 상당히 다르며 "한 명령씩 처리"하는 문법으로 설계됨.
• 동적 로직 (배열, 포인터), 반복문, 함수 콜스택 등 핵심 기능 구현 예정이나 아직 작업 중.
• GitHub 리포지토리 참고:
  • 컴파일러: https://github.com/mlogjs/mlogjs
  • Watch 모드(게임용): https://github.com/Sharlottes/mlogJsWatcher
  • 개발환경 템플릿: https://github.com/Sharlottes/mlogJsWatchTemplate
• 참고: 어셈블리어는 CPU가 직접 실행하는 저수준 코드, 이 프로젝트는 영향만 받았으며 완전히 동일하지 않음.

2. Immer 라이브러리 사용 빈도와 Redux 불변성 관리 🧊

• 질문: 현업에서 Immer 많이 쓰나요?
• 대답: Redux에서 불변성 관리를 도와주는 유용한 라이브러리지만, 회사와 개인에 따라 다름.
• 불변성(immutable data): 상태를 직접 변경하지 않고 매번 새로운 상태 객체를 만들어내는 방식.
• Immer는 불변성 관리를 쉽게 하기 위해 내부적으로 불변 데이터를 마치 변경하는 것처럼 처리함.

3. Next.js next.config.js 수정 및 활용 팁 ⚙️

• next.config.js 내 옵션은 많지만, 실제로는 필요 시점에 맞춰 필요한 옵션만 수정하는 편.
• 주로 문제 발생 시 설정(ex. appDir 활성화, SWC 컴파일러 설정 변경, 특정 라이브러리 지원) 적용.
• 자주 쓰는 설정: 이미지 도메인 등록, 프록시 설정, output standalone 플래그 등.
• 설정을 무턱대고 바꾸기보다 공식 문서와 필요에 따라 접근 권장.
• 예시로는 Vercel 스타일 가이드 eslint 플러그인을 활용한 설정 공유됨.

4. React 배열 타입 (string[] vs Array<string>) 논쟁 📚

• 두 표기 모두 타입스크립트에서 배열을 의미하지만 내부적으로 다르게 동작하지는 않음.
• string[] 은 간단하고 자주 쓰이고 Array<string>은 가독성이 좋다는 의견도 있음.
• 유니언 타입 같이 복잡한 경우 가독성 측면에서 Array<Type>가 편할 때 있음.
• 핵심: 상황에 맞게 선택하면 되며, 큰 차이 없이 개발자 기호나 팀 컨벤션 반영 추천.
• 관련 참고 글: https://tkdodo.eu/blog/array-types-in-type-script

5. React 상태관리 설계: 탑다운(Top-down)과 바텀업(Bottom-up) 방식 🔄

• 탑다운: 기획과 디자인을 기반으로 상태를 설계하며 견고하지만 보일러플레이트가 많고 귀찮음.
• 바텀업: 쉬운 난이도, 무지성 설계 가능하지만 기획과 달라질 수 있고 유지보수가 어려워질 수 있음.
• 결론: 설계 능력이 있어야 바텀업을 제대로 쓸 수 있으며, 주니어나 경험 적으면 탑다운 추천.
• 실제 회사에서는 바텀업 방식을 활용하지만 고민과 리팩토링이 필수.
• 단순히 상태관리 라이브러리가 바텀업을 의미하지는 않음.

6. React 및 Vue의 단방향 vs 양방향 데이터 바인딩 이해 🔄⬇️⬆️

• 단방향 데이터 바인딩: 데이터는 부모에서 하위 컴포넌트로 내려가며, 상위 컴포넌트가 명시적으로 상태 변경 콜백을 전달.
• 양방향 데이터 바인딩: 뷰에서 직접 변경된 값이 자동으로 모델에 반영되어, 상태와 UI가 자동 동기화됨.
• React는 단방향을 지향하며, 상태 변경은 명시적으로 처리함(setState, 훅 등).
• Vue는 v-model을 통해 양방향 바인딩을 지원하며, 내부적으로 input 이벤트 감지해 상태 업데이트 수월.
• 양방향은 편하지만 디버깅과 버그 발생 가능성 증가, 복잡한 구조에 취약할 수 있음.
• SolidJS 등 신진 프레임워크도 양방향과 비슷한 기능 제공 중이나 신중한 사용 권고.

7. React 함수형 컴포넌트와 클래스형 컴포넌트 차이점 ⚛️

• 함수 컴포넌트는 자바스크립트 함수로 구현, 선언적이며 Hooks를 통해 생명주기 관리가 가능.
• 클래스 컴포넌트는 ES6 클래스로 구현하며 componentDidMount 같은 생명주기 메서드를 명령형으로 사용.
• 함수 컴포넌트는 코드가 간결하고 성능이 좋다는 평가가 많음(특히 React 16.8 이후).
• 최신 트렌드는 함수 컴포넌트이며, 클래스 컴포넌트 지원은 있지만 신규 프로젝트에서는 비선호.
• 면접 시: 차이점과 함수 컴포넌트가 Hooks로 어떻게 라이프사이클을 대체하는지 설명하길 추천함.

8. GitHub Pages 라우팅 이슈 & CORS 문제 해결 팁 🛠️

• GitHub Pages 사용 시 페이지 새로고침 시 404 오류 발생하는 문제는 SPA 라우팅 기반 트러블.
• 해결 방법:
  • 해시 라우팅(Hash routing) 사용
  • Jekyll 기능 끄기 (.nojekyll 파일)
  • 대체 호스팅 서비스(Cloudflare Pages, Vercel 등) 사용 권장
• 백엔드 CORS 문제는 헤더 설정으로 보통 30초 내 해결 가능하며, 3일 이상 걸리면 문제 있음.
• NGINX나 Apache 서버 환경에서 CORS 헤더 적절히 설정 필요.

9. React에서 라이브러리 ESLint 설정 및 추천 플러그인 🧹

• Next.js 13 + TypeScript 환경에서 많이 사용하는 ESLint 플러그인:
  • @vercel/style-guide 패키지 안에 Node, Browser, TypeScript, React, Next용 설정 포함
  • import 정렬, 콘솔 경고, 이름 케이스 규칙 등 커스텀 가능
• 비동기 코드 관련 lint 설정 (@typescript-eslint/no-misused-promises, no-floating-promises) 중요.
• 팀 규칙에 맞춰 규칙 조정과 공유 추천.

10. React Query Suspense 사용 경험 및 실무에서의 장단점 ⏳

• Suspense는 리액트에서 비동기 처리를 선언적으로 다루는 기능으로, React Query도 experimental 기능 지원 중.
• 장점: 로딩, 에러 핸들링 분리, UI 관리가 깔끔해짐, 프로젝트가 커질수록 이점 증가.
• 단점:
  • 숙련도 요구가 높으며, 팀 모두가 충분히 이해하고 있어야 함.
  • UX 요구사항과 실무 상황에 따라 적합하지 않을 수도 있음.
  • 경험 부족 시 문제 해결과 리팩토링에 시간 소요 많음.
• 현장에서 도입 시 기술 담당자가 리드하는 것이 중요.

면접팁⚡

• React 함수형 vs 클래스형 컴포넌트 차이 질문 대비:

  • 함수 컴포넌트는 훅을 이용해 선언적으로 상태와 생명주기를 관리.
  • 클래스 컴포넌트는 생명주기 메서드를 통해 명령형으로 상태를 관리.
  • 최신 프로젝트는 함수 컴포넌트를 선호.
  • 단순한 코드 차이뿐 아니라 설계 철학 차이임을 설명하길 추천.

• React 배열 타입 관련 질문 대비:

  • string[]과 Array<string>은 기능적으로 동일.
  • 간단할 때 string[], 복잡할 때 Array<T>가 가독성이 좋음.
  • 팀 컨벤션과 코드 일관성 중요.

• Next.js config 수정 및 활용 팁:

  • 무조건 수정하지 말고 필요 발생 시 참고 문서 보고 적절히 수정하길 권장.

• 양방향/단방향 데이터 바인딩 이해:

  • 데이터 흐름 및 디버깅 난이도 차이 이해
  • React는 단방향, Vue는 양방향 기본 지원.

링크🔗

• 게임용 어셈블리어 프로젝트:
  https://github.com/mlogjs/mlogjs
  https://github.com/Sharlottes/mlogJsWatcher
  https://github.com/Sharlottes/mlogJsWatchTemplate

• 배열 타입 관련 글:
  https://tkdodo.eu/blog/array-types-in-type-script

• ESLint Vercel 스타일 가이드 플러그인 예시
  (내부 설정 코드 본문 참고)

• React 공식 문서 한글 비공식 번역:
  https://react-ko.dev

• React Query useController Hook:
  https://react-hook-form.com/docs/usecontroller

• React Query Suspense 관련 한국어 글 및 사례(커뮤니티 공유 참고)

• GitHub Pages 라우팅 해결법:
  https://www.bloomberg.com/news/articles/2023-11-07/wework-goes-bankrupt-capping-co-working-company-s-downfall (위워크 파산 뉴스 포함, 맥락 참고용)
  https://github.com/yeonjuan/dev-blog/blob/master/JavaScript/speeding-up-the-javascript-ecosystem-the-barrel-file-debacle.md (배럴 파일 관련 최적화 글)

• React 공식 문서:
  https://ko.react.dev/