2025-04-05

목차

1. JavaScript 이벤트 핸들링 방법
2. iOS 배터리 광탈 이슈 토론
3. React 내 HTML 내 onClick 이벤트 처리 방법
4. React useEffect와 cleanup 함수 동작 원리
5. 환경변수 사용법 (Next.js, Vite)
6. AWS EC2 서버 프로세스 관리 팁
7. AI 챗봇 클로드 vs 챗GPT 비교
8. 기타 개발 관련 소소한 질문 및 답변

1. JavaScript 이벤트 핸들링 방법

• 기존 HTML에서 onClick 속성보다는 <script> 태그 안에서 셀렉터를 이용해 이벤트 핸들러를 등록하는 방식 권장
• 이렇게 하면 코드 유지보수가 쉬워지고, 이벤트 로직을 별도로 관리할 수 있음
• 예를 들어, document.querySelector('.button').addEventListener('click', 함수) 방식 사용 권장

2. iOS 배터리 광탈 이슈

• 최근 iOS에서 배터리가 크게 빨리 소모되는 문제가 사용자들 사이에서 화제
• 배터리 게이트 문제와는 달리, 일부러 성능을 낮추는 것은 아니지만 배터리 누수가 심각함
• WiFi 켜면 백그라운드에서 앱들이 소모가 더 심해지는 현상 관찰됨
• iOS는 사용자가 업데이트 선택을 못 하고 강제로 최신 버전만 설치 가능해 문제 해결이 어렵다는 의견
• 안드로이드 사용자들도 배터리 광탈 문제를 겪는 경우가 있으나 정도는 제각각임
• 배터리 성능은 초기 구매 시와 비교했을 때 많이 떨어진 상태여서 교체도 고려해야 함

3. React 내 HTML 내 onClick 이벤트 처리 방법

• React에서는 JSX 내부에 직접 onClick={함수}를 주로 사용함
• 하지만 서버에서 온 데이터 안에 <button onClick="함수()"> 같이 문자열 형태로 이벤트가 포함된 HTML이 있다면, React에서 이를 그대로 실행하는 것은 불가능
• React의 dangerouslySetInnerHTML을 써 HTML만 삽입 가능하지만 JS 이벤트 핸들러는 연결 안 됨
• 따라서, 문자열 HTML 내 이벤트를 작동시키려면 별도의 DOM 조작 후 이벤트 등록이 필요하거나 React 방식으로 컴포넌트화해야 함

4. React useEffect와 cleanup 함수 동작 원리

• useEffect는 컴포넌트가 마운트될 때 실행되는 함수와 cleanup 함수를 반환할 수 있음
• cleanup 함수는 주로 컴포넌트 언마운트 시 실행됨
• 단, useEffect의 의존성 배열에 값이 있을 경우, 해당 값이 변할 때도 cleanup 함수가 실행되고 새 이펙트 함수가 실행됨
• React Strict Mode에서는 초기 마운트 시 의도적으로 이펙트 함수와 cleanup 함수가 여러 번 실행되어 헷갈릴 수 있음
• 요약: 마운트 시 이펙트 함수가 실행되고, 언마운트 또는 의존성 변경 시 cleanup 함수가 실행됨

5. 환경변수 사용법 (Next.js, Vite)

• Next.js에서 .env 파일 내 환경변수를 사용하려면 변수명 앞에 NEXT_PUBLIC_ 접두어를 붙여야 클라이언트에서 접근 가능
• Vite는 VITE_ 접두어를 동일하게 요구함
• 환경변수를 올바르게 설정하지 않으면 process.env가 undefined 상태가 될 수 있음
• TypeScript 설정 파일(tsconfig.app.json)에서도 환경변수 경로나 타입 정의에 문제가 있을 수 있으니 주의 필요

6. AWS EC2 서버 프로세스 관리 팁

• EC2에서 Spring Boot와 Next.js 서버를 동시에 운영할 때 둘 다 갑자기 꺼지는 문제 발생 가능
• 로그 확인은 두 서버 각각의 로그 파일과 EC2 시스템 로그(/var/log/syslog 등)를 확인
• 재부팅 후 자동 시작을 원하면 sudo systemctl enable 서비스명 명령으로 서비스 자동 실행 설정
• 서비스가 멈추는 원인은 메모리 부족, 프로세스 충돌, 시스템 오류 등 다양하니 로그 기반 원인 분석 필수

7. AI 챗봇 클로드 vs 챗GPT 비교

• 개발 관련 코드 작성이나 질문에 대해 챗GPT 외에 클로드(Claude)도 인기
• 일부에서는 클로드가 코드 작성에 더 낫다는 의견도 있음
• 클로드 무료 사용 횟수 제한이 있으므로 사용 시 참고 필요
• 이미지 처리 기능 등 AI 기능을 더 다양하게 써보고 싶은 경우 클로드도 고려할 만함

8. 기타 개발 관련 소소한 질문 및 답변

• 게임이나 웹툰 등 일상 대화 중에도 개발 관련 질문 자연스럽게 주고받음
• 리액트 강의 듣는 중 이해가 어려운 부분은 스크립트 실행 순서, 클린업 함수 실행 타이밍 등 구체적으로 질문하여 도움받음
• 손쉽게 .env 파일 변수 설정하는 법, TypeScript 설정 관련 문제도 공유
• 디스코드(Discord) 개발자 커뮤니티 운영 중이며 다양한 개발 주제 논의

면접팁⚡

React useEffect 관련:

• useEffect의 cleanup 함수가 언제 실행되는지 명확히 답변할 수 있어야 함
• Strict Mode에서 useEffect 함수가 두 번 실행되는 이유 설명 가능하면 좋음
• 이벤트 핸들링 시 JSX 내 직접 onClick과 DOM 조작 후 이벤트 연결 방식 차이 이해 필요

환경변수 관리:

• 환경변수 보안과 접근 범위 설정 방법 (NEXT_PUBLIC_, VITE_ 접두어 등) 숙지

서버 관리:

• 서버 서비스가 비정상 종료 시 로그 확인 방법과 서비스 자동 실행 설정 경험 언급

링크🔗

• React 공식 Docs - useEffect Hook
• Next.js 환경변수 설정 - Next.js Environment Variables
• Vite 환경변수 가이드 - Vite Env Variables
• AWS EC2 공식 문서 - EC2 User Guide
• 클로드 챗봇 - Claude AI
• iOS 배터리 관리 관련 기사 (검색 키워드: 아이폰 배터리 게이트)