목차
- 이미지 호스팅 서비스와 AWS S3 사용법
- 리액트 신입 개발자 채용 과정 및 클론코딩 문제
- 브라우저 기기 감지와 이벤트 처리 방법
- React 상태 관리와 useStateRef 라이브러리
- Tailwind CSS에서 동적 width 설정하기
- 옵셔널 체이닝과 과도한 if-else 중첩 문제
- Expo 앱 빌드 문제 및 디버깅 팁
- Vue에서 Next.js로 마이그레이션하며 겪는 어려움
- Next.js SEO 설정과 검색 노출 문제 해결
- 깃허브 대용량 파일 삭제 후 ‘좀비 파일’ 현상 해결법
1. 이미지 호스팅 서비스와 AWS S3 사용법
- EF가 이미지 호스팅 서비스를 문의함. 가비아는 월 1만원으로도 가능하다고 함.
- AWS S3는 파일 생성 후 올리기만 하면 되는 간단한 방식으로 많은 개발자가 사용함.
- S3는 아마존이 제공하는 클라우드 저장소 서비스로, 웹 서비스에서 이미지를 포함한 파일들을 안정적으로 저장하고 관리할 수 있음.
- AWS 콘솔에서 버킷 생성 후 파일을 올리면 URL을 통해 바로 접근 가능하며, 확장성 및 보안 설정도 가능함.
2. 리액트 신입 개발자 채용 과정 및 클론코딩 문제
- 신입 리액트 개발자 모집에 92명이 지원했으나, 최종 면접은 2명만 봤다는 이야기 공유.
- 팀장님은 "남이 한거 따라하는 게 아닌 자기 생각 있는 사람"을 원함.
- 클론코딩(기존 코드를 따라 만드는 작업)이 많아 자기 생각을 표현할 줄 아는 개발자를 찾음.
- 클론코딩은 입문자들이 코드를 이해하고 만드는 데 도움 되지만, 너무 의존하면 창의력과 문제해결 능력 향상에 한계가 있음.
- 면접 준비 시 단순 따라하기보다 이해하고 개념을 자기 방식으로 구현하는 연습이 중요.
3. 브라우저 기기 감지와 이벤트 처리 방법
- PC/모바일 감지를 위해 window.innerWidth를 활용하여 isMobile 변수를 설정하는 사례.
- 이벤트 리스너를 모바일과 PC에 따라 각각 다르게 등록/삭제하는 대신, 하나의 이벤트에 조건문 분기 처리하는 방법 추천.
- 이벤트 리스너는 등록 당시의 변수 상태만 알고 이후 변수 변경을 인지하지 못할 수 있으므로, 이벤트 내에서 현재 상태를 참조하는 구조가 필요.
- 최신 자바스크립트나 React에서는 상태 관리와 이벤트 핸들러 작성 시, 상태 변화가 즉시 반영되도록 해야 함.
4. React 상태 관리와 useStateRef 라이브러리
- React 클래스 컴포넌트의 인스턴스 변수와 functional 컴포넌트의 상태(state)의 차이가 논의됨.
- React에서 setState 함수 내에서는 이전 상태(prev state)를 확인할 수 있지만, 일반 변수는 그 개념이 없음.
- useStateRef 같은 라이브러리를 사용하면 상태를 레퍼런스처럼 참조하여 즉시 최신 상태 값을 읽을 수 있음.
- 이는 비동기 상태 변화가 많은 React에서 상태 일관성 유지에 도움이 됨.
5. Tailwind CSS에서 동적 width 설정하기
- Tailwind는 클래스명 기반 유틸리티 CSS 프레임워크라 인라인 스타일보다 클래스명으로 스타일 지정 권장.
- props로 px 단위 width 값을 받아서 인라인 스타일로 처리하는 경우가 있음.
- Tailwind는 동적 클래스 이름을 사용하는 경우 콘텐츠 설정에서 미리 해당 클래스를 명시해야 제대로 빌드됨.
- 보통 클래스명을 동적으로 생성하거나 슬라이싱 후 조건부로 사용할 때 이슈가 발생하므로, 공식 문서의 content configuration 참고 필수.
- 여러 개발자가 인라인 스타일과 클래스명 사용법에 대해 선호 차이가 있음.
6. 옵셔널 체이닝과 과도한 if-else 중첩 문제
- 옵셔널 체이닝(?.)을 많이 사용하는 사례와 지나친 중첩 if-else문 사용 문제 논의.
- 중첩 if 문은 가독성 저하, 유지보수 어려움을 초래함.
- 옵셔널 체이닝은 객체 안 값들이 없을 때 에러가 나는 걸 방지, 코드 간결성을 높여줌.
- 조건문이 너무 많으면, 가독성 좋은 early return, guard clause, 조건문 합치기 등을 활용 권장.
7. Expo 앱 빌드 문제 및 디버깅 팁
- Expo로 안드로이드 apk 빌드 후 앱 실행 시 바로 꺼지는 문제 발생(Expo Go에서는 정상 작동).
- adb 로그에 에러가 나타나지 않는 경우가 있어 디버깅 어려움.
- 해결 팁: Android 에뮬레이터, 실제 기기, Expo 개발 도구에서 차이가 있을 수 있으므로 각각 테스트.
- Expo 버전과 SDK 호환성 확인 필수, 빌드 전에 expo doctor 명령어로 문제점 사전 점검 권장.
- 커뮤니티나 공식 문서, Github 이슈에 같은 사례 검색하면 해결 방법 도움됨.
8. Vue에서 Next.js로 마이그레이션하며 겪는 어려움
- Vue2 코드를 잘 몰라서 Next.js 마이그레이션이 어렵다는 이야기가 나옴.
- 특히 Vue의 mixin, iframe 내 Next.js 호출 등 복잡한 구조로 인해 정책서(문서) 없이 진행하는 데 어려움 있다고 함.
- 코드 이해가 문제라면 Vue 기본 문법과 라이프사이클 공부 권장.
- 마이그레이션은 점진적 전환이나 완전 재개발 방식으로 나눠서 계획하는 것이 효율적임.
- 정책서 또는 명확한 설계 문서 없이 진행 시 누락 이슈가 생길 수 있으므로 문서화 작업 중요.
9. Next.js SEO 설정과 검색 노출 문제 해결
- 검색에 사이트가 노출 안 되는 문제에 메타 태그 설정 후 배포했으나 시간이 필요하다는 의견이 많음.
- SEO 검색 결과 노출은 크롤러가 사이트를 방문해 수집하는 시간이 걸림(보통 몇 시간~며칠).
- 구글 서치콘솔, 네이버 웹마스터 도구에 사이트 등록 및 재수집 요청 기능을 활용하면 빠르게 노출 가능.
- robots.txt, sitemap.xml 설정도 제대로 했는지 점검 필수.
- og 태그(Open Graph)는 SNS 공유용이고, 검색엔진 최적화에 직접적 영향 적음.
10. 깃허브 대용량 파일 삭제 후 ‘좀비 파일’ 현상 해결법
- 25MB 이상의 파일을 삭제했는데 깃허브에서 계속 보이는 현상에 대한 질문.
- 삭제는 Git History에도 반영되어야 하므로, 단순 폴더 삭제만으로는 히스토리 상 파일이 남아 있음.
- 이 경우 git filter-branch 또는 BFG Repo-Cleaner 같은 도구를 사용해 히스토리에서 아예 제거해야 함.
- 작업 후 강제 푸시(git push --force)가 필요하므로 협업 시 주의 요망.
- 깃허브는 캐시 따로 없으며 모든 이력은 저장되어 있어 완전 삭제는 별도로 처리해야 한다는 점 참고.
면접팁⚡
- 클론코딩을 넘어 자신의 아이디어와 문제 해결 과정을 보여줄 수 있어야 좋은 평가를 받음.
- 과도한 중첩 if문 사용을 지양하고, 옵셔널 체이닝이나 조건문 간소화 기법을 숙지할 것.
- React 상태 관리에서 prev state 활용 방법과 라이브러리(useStateRef) 도입을 이해하면 실력 어필에 좋음.
- 화면 크기 감지나 이벤트 분기 처리 시, 단일 이벤트 핸들러 내에서 조건 분기하는 방식을 설명해보자.
- SEO 질문 시, 도구 등록과 로봇 재수집 요청 및 적용 시간 인내가 필요함을 말할 수 있으면 긍정적임.
링크🔗
#AWS#React#TailwindCSS#TypeScript#Expo#Vue#NextJS#SEO#GitHub#개발팁