목차
- React Fragment vs <div> 태그 사용법
- 재택근무와 근무환경에 대한 개발자 의견
- RSA 암호화와 양자컴퓨터의 영향
- React에서 컴포넌트 렌더 후 scrollIntoView 이슈 및 해결 방법
- React Router 히스토리 관리 및 뒤로가기 문제
- TypeScript에서 Props 기본값 설정 방법
- 드래그 앤 드롭(DnD) 구현 경험 및 추천 라이브러리
- 결제 모듈 통합: 포트원(아임포트)와 PG사 역할
- JavaScript 호이스팅(hoisting) 개념 정리
- 면접 준비 및 연봉 협상 관련 경험 공유
1. React Fragment vs <div> 태그 사용법 🧱
- 핵심: React에서 <></> (Fragment)와 <div></div> 태그는 목적이 다르다.
- 설명:
- <div>는 실제 DOM에 렌더링 되는 HTML 요소. 스타일 지정, 레이아웃 구성 등에 사용됨.
- <></>는 여러 자식을 그룹화하는 용도로, 불필요한 DOM 요소를 생성하지 않아 마크업이 깔끔해짐.
- 의견:
- Fragment는 불필요한 div 중첩으로 인한 스타일 문제를 줄이기 위해 사용됨.
- 일반적으로 꼭 필요할 때만 <div>를 사용하고, 그렇지 않으면 Fragment를 추천함.
- 사용법에 정해진 정답은 없으나 용도에 따라 구분하는 것이 좋음.
2. 재택근무와 근무환경에 대한 개발자 의견 🏠💻
- 재택과 출근을 상황에 따라 선택하는 개발자가 많음.
- 컴퓨터 작업은 주로 데스크탑 환경, 커뮤니케이션은 폰으로 하는 경향 있음.
- 재택근무 시 업무 효율이 높아질 수 있다는 의견도 있음.
- 출퇴근 자유로운 근무환경을 희망하는 분위기 있음.
- 실제 출퇴근 여부에 대한 농담과 직장 생활 현실도 다뤄짐.
3. RSA 암호화와 양자컴퓨터의 영향 🔐⚛️
- RSA 방식은 현재 널리 사용되는 공개키 암호화 기법.
- 양자컴퓨터가 발전하면 RSA를 빠르게 푸는 것이 가능해질 전망.
- 이에 따라 새로운 암호화 방식들이 개발되고 경쟁 중임.
- 개발자는 앞으로 암호화 알고리즘의 변화를 예의주시할 필요가 있음.
4. React에서 컴포넌트 렌더 후 scrollIntoView 문제 및 해결 방법 ⏳📜
- 상황: map으로 생성된 컴포넌트 각각이 렌더 직후 scrollIntoView 실행 필요.
- 문제: 고성능 기기에서는 잘 작동하지만 저사양 기기에서 성능 저하와 끊김 발생.
- 해결 팁:
- useEffect 내에서 바로 호출하지 말고, useCallback과 callback refs를 활용하여 렌더링 완료 시점에 정확히 동작하게 조절할 것.
- setTimeout 같은 임의 지연은 끊김 현상을 유발하므로 가급적 피할 것.
- 참고 링크: https://velog.io/@cnsrn1874/%EB%B2%88%EC%97%AD-callback-refs-%EC%82%AC%EC%9A%A9%EC%9C%BC%EB%A1%9C-useEffect-%EB%B0%A9%EC%A7%80%ED%95%98%EA%B8%B0
5. React Router 히스토리 관리 및 뒤로가기 문제 ↩️🛠
- 안드로이드 웹뷰에서 뒤로가기 시 특정 페이지 히스토리가 쌓이지 않아 문제 발생.
- 브라우저 히스토리는 기본적으로 삭제 불가능(과거 기록은 시스템에서 관리).
- 해결책:
- React Router v6에서는 unstable_useBlocker 같은 훅을 활용해 뒤로가기 이벤트를 제어.
- 페이지 내에서 조건에 따라 뒤로가기 동작을 막거나 리다이렉트 처리 가능.
- router.replace 메서드는 히스토리를 쌓지 않고 이동 가능.
- 참고: 브라우저 확장 기능을 통해서 히스토리 삭제 가능하나 일반 웹 앱에서 불가능함.
6. TypeScript에서 Props 기본값 설정 방법 🎯
-
interface 자체로는 기본값 지정 불가(타입 선언 목적).
-
컴포넌트 내에서 Props 기본값 설정 권장 방법:
- 함수 파라미터 기본값 지정
- 또는 defaultProps 사용 (클래스 컴포넌트 포함)
-
간단한 예제:
tsx interface Props { name?: string; }const Component = ({ name = 'default' }: Props) => {...}
-
객체를 이용해 상태별 클래스를 관리하는 패턴도 추천됨(삼항 연산자보다 관리 용이).
7. 드래그 앤 드롭(DnD) 구현 경험 및 추천 라이브러리 🤹♂️
- 직접 DnD 구현 경험자와 라이브러리 활용 의견 교환.
- 대표 라이브러리: react-beautiful-dnd (편리하지만 커스텀 어려운 부분도 존재).
- 직접 구현 시 장점은 자유로운 커스터마이징, 단점은 구현 난이도 및 유지보수 부담.
- 복잡한 경우 그룹 선택, 소팅 등 확장 기능 고려 필요.
8. 결제 모듈 통합: 포트원(아임포트)와 PG사 역할 💳
- PG사(Payment Gateway)는 다양한 카드사 및 결제 수단을 관리, 직접 모듈 호출 필요.
- 포트원(구 아임포트)은 여러 PG사의 API를 통합하는 커넥터 역할을 함.
- 개발자는 포트원 API만 호출해도 다양한 결제 수단 지원 가능, 통합 개발 용이.
- 비슷한 솔루션으로 부트페이 등이 있음.
- 토스페이 등 다른 대형 PG사도 검토 대상.
9. JavaScript 호이스팅(hoisting) 개념 정리 🪝
- 변수와 함수 선언이 실행 전에 메모리에 올라가는 현상.
- var 변수는 선언과 초기화(undefined) 단계까지 호이스팅 됨.
- let, const는 선언만 호이스팅되며 초기화는 실행 시점에 이루어짐(Temporal Dead Zone 존재).
- 함수 선언은 전체가 호이스팅되어 코드 최상단에서 참조 가능.
- 이를 이해하면 의도하지 않은 오류를 방지할 수 있음.
10. 면접 준비 및 연봉 협상 관련 경험 공유 💼💰
- 신입 개발자 초봉 현실과 과장된 광고에 대한 토론 → 신중한 기대 설정 필요.
- 경력 면접 시 잡플래닛 평점 확인 후 실제 면접에서 최종 판단 권장.
- 이직 준비 중 반차 사용 여부, 면접 스케줄 조율 팁
- 연봉 협상 시 객관적인 근거 마련 및 열린 마음으로 협상 진행 권장.
- 스타트업과 대기업 지원 경험 공유 및 취업 전략 공유.
면접팁⚡
- 면접 전 잡플래닛 같은 사이트 평점 참고하되, 반드시 면접에서 직접 분위기 파악할 것.
- 이직 준비 시 반차는 상황에 맞게 사용하되 과도한 사용은 눈치 받을 수 있음.
- React 컴포넌트에서 서버 컴포넌트와 클라이언트 컴포넌트 구분 이해 필수.
- React Router 뒤로가기 이벤트 차단/관리 방법 숙지 필요.
- TypeScript에서 interface는 타입 선언이며, 기본값 설정은 함수 매개변수 또는 디폴트 프로퍼티 사용.
링크🔗
- React Fragment 설명: https://ko.reactjs.org/docs/fragments.html
- scrollIntoView callback refs 활용: https://velog.io/@cnsrn1874/%EB%B2%88%EC%97%AD-callback-refs-%EC%82%AC%EC%9A%A9%EC%9C%BC%EB%A1%9C-useEffect-%EB%B0%A9%EC%A7%80%ED%95%98%EA%B8%B0
- React Router unstable_useBlocker 사용 예: https://reactrouter.com/en/main/hooks/use-blocker
- MDN Web Docs - Browser History API: https://developer.mozilla.org/en-US/docs/Web/API/History
- JavaScript 호이스팅 개념: https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
- 아임포트/포트원 결제 모듈 개요: https://www.iamport.kr/
- react-beautiful-dnd: https://github.com/atlassian/react-beautiful-dnd
- Stack Overflow - React Router history.clear: https://stackoverflow.com/a/55477824
#React#TypeScript#JavaScript#ReactRouter#암호화#재택근무#개발면접#프론트엔드#결제모듈#호이스팅