목차
- 폰트와 개발자 문화 이야기
- 인프라 면접 준비와 예상 질문
- 리액트 훅 도서 추천과 공부법
- SNS 메타데이터 문제와 Next.js 관련 팁
- 과제 전형 중 외부 도움 사용 여부
- AWS CloudFront & S3 CORS 오류 원인과 해결법
- 엘라스틱서치 및 파서(Parser) 개념 이해
- 커뮤니티 이벤트와 선물 게임 분위기
- 회사 복지와 근무 환경 토크
- 기타 유용한 도구 및 주제 공유
1. 폰트와 개발자 문화 이야기
- RM은 윈도우에서만 예쁜 Consolas 폰트를 칭찬함.
- 개발자들 사이에서 커밋을 자주 하라는 리더에 대한 고충 토로.
- 좋은 리더는 "직접 해보라"고 하며 부딪혀보는 성장을 권장한다는 긍정적인 평가.
2. 인프라 면접 준비와 예상 질문
- 인프라 면접 질문은 회사 도메인, 규모, 사용하는 장비(자체 vs 클라우드) 등에 따라 천차만별임.
- 따라서 회사에 맞게 맞춤 준비가 필요함.
- 일반적인 질문으로는 네트워크, 서버 관리, 보안 정책, 자동화 도구 활용 경험 등이 있을 수 있음.
인프라 면접 팁
- 면접 준비 시 회사가 어떤 인프라 환경을 쓰는지 미리 조사할 것.
- 클라우드 서비스(AWS, GCP 등) 경험은 큰 장점임.
3. 리액트 훅 도서 추천과 공부법
- XJ는 리액트 훅 관련 두 권의 책 중 어떤 것을 살지 고민함.
- SU, NA는 도서와 공식 문서 병행 학습을 추천함. 공식 문서는 최신 정보가 많아 기본부터 확실히 배우기에 좋음.
- 하지만 회사에서 지원해주는 도서라면 가성비 때문에 책을 사는 것도 좋은 선택.
- 오픈소스 프로젝트를 직접 보는 것도 실무 감각 형성에 유용하다 조언.
4. SNS 메타데이터 문제와 Next.js 관련 팁
- BC는 Next.js에서 동적 메타데이터 설정 함수(generateMetadata)가 크롬 개발자 도구에는 잘 보이나 SNS 공유 시 메타데이터가 안 뜨는 문제를 겪음.
- AO는 SNS 캐싱 문제 또는 클라이언트 사이드 렌더링(CSR) 문제일 가능성을 지적함.
- SNS(카카오톡 등)에서 캐싱된 메타데이터를 강제로 초기화하는 도구(예: https://developers.kakao.com/tool/clear/og)를 활용하길 추천.
- CSR이 문제라면 서버 사이드 렌더링(SSR) 방식으로 메타데이터를 제공해야 함.
- 메타데이터가 잘 반영되려면 use client가 있는 파일 구조도 체크 필요.
5. 과제 전형 중 외부 도움 사용 여부
- XM: 기업 과제에서 외부 도움(구글링, ChatGPT 등) 사용 가능성 문의.
- SU: 구글링은 일반적인 문제 해결 수단으로 허용될 가능성이 크나, GPT 같은 AI 도구는 직접 코드를 대신 작성해주기 때문에 제한될 수 있음.
- 과제에서 GPT 사용 여부가 제한되는 이유는 실제 실무 역량을 평가하기 위함임.
- 과제 후 인터뷰 단계에서도 답변과 실력 차이가 티 날 수 있음.
- 구글링은 적절히 활용하고, AI 코딩 도구 사용은 삼가는 것이 좋음.
6. AWS CloudFront & S3 CORS 오류 원인과 해결법
- QZ: 하나의 S3 버킷 내 여러 폴더 중 특정 폴더만 CORS 에러 발생.
- 문제는 특정 폴더의 파일에 CORS 관련 HTTP 헤더(Access-Control-Allow-Origin, 등)가 누락되는 상황에서 발생.
- EI: 404, 502 같은 에러 발생 시 CORS가 안 된 것처럼 보일 수 있으나 실제 상황은 다름.
- QZ는 상태 코드 200이 나오지만 헤더 일부가 사라짐을 확인.
- 해결 팁:
- CloudFront 무효화 정책을 정확히 적용해 캐시 문제인지 확인할 것.
- S3 버킷의 CORS 설정이 폴더별로 동일하게 적용되었는지 점검.
- 특정 파일 또는 폴더 권한 문제 가능성도 검사.
- SU: CORS 정책에 *로 적용하는 임시방편도 있지만 보안상 권장하지 않음.
CORS란?
Cross-Origin Resource Sharing(CORS)은 웹 브라우저가 다른 도메인에 요청을 보낼 때 보안을 위해 허용 여부를 서버가 미리 알려주는 정책입니다. 올바른 CORS 설정이 없으면 브라우저가 요청을 차단해 에러가 발생합니다.
7. 엘라스틱서치 및 파서(Parser) 개념 이해
- RM: 엘라스틱서치가 무엇인지 궁금해함.
- MI: 엘라스틱서치는 대용량 데이터를 빠르게 검색하기 위한 분산 검색엔진.
- EI: 파서는 소스 코드 등을 해석할 때 문자열을 토큰 단위로 나누고, 이 토큰들에 문맥(컨텍스트)를 부여해서 추상 구문 트리(AST)라는 구조로 변환하는 역할을 함.
- AST(Astract Syntax Tree)는 코드의 문법 구조를 트리 형식으로 표현해 줌.
- 인터프리터는 대체로 이 AST를 순차적으로 실행하여 동작함.
8. 커뮤니티 이벤트와 선물 게임 분위기
- 선착순, 퀴즈 선물 게임 등 즐거운 이벤트가 진행됨.
- 당첨자 발표와 참여 모습에서 커뮤니티 활성화 느낌이 강함.
- 이런 소소한 이벤트가 개발자 커뮤니티 내에서 유대감 형성에 도움.
9. 회사 복지와 근무 환경 토크
- AM: 점심, 저녁 식비 2만 원씩 지원받는다고 언급.
- 야근 출퇴근 시간은 상대적으로 양호한 10시 출근, 6시 퇴근 패턴.
- ZP, MI는 회사 복지를 유머러스하게 “없는 게 복지”라고 표현하기도 함.
- RM은 월급이 적다는 불만 토로.
- 회사 복지는 환경에 따라 다양하므로 본인 회사 상황을 잘 파악하는 게 중요함.
10. 기타 유용한 도구 및 주제 공유
- SU: 캡컷(CapCut) 웹 기반 동영상 편집기가 매우 편리하다고 추천.
- VR: 스크립트 언어 만드는 방법 공유(https://github.com/ICe1BotMaker/pong).
- SU: 샤드캔 UI(shadcn UI) 비평과 해부 글 공유(https://siosio3103.medium.com/shadcn-ui-%EC%9D%98-%ED%95%B4%EB%B6%80-ebd469c34614).
- 개발 커뮤니티에서는 다양한 신기술과 도구 정보를 활발히 나누고 있음을 알 수 있음.
면접팁⚡
- 인프라 면접 질문은 회사 환경, 클라우드 사용 여부에 따라 상이하므로 지원 기업의 인프라 환경을 먼저 알아볼 것.
- 과제 전형에서는 AI 도구 사용을 피하고 자신의 실력과 구글링으로 문제를 해결하는 게 좋음.
- Next.js 환경에서 메타데이터 문제는 SSR과 CSR 차이, 그리고 SNS 캐시 초기화 문제를 체크해볼 것.
- AWS S3와 CloudFront CORS 문제 시, 무효화 정책과 CORS 설정 일관성 체크가 중요함.
링크🔗
- 카카오톡 OpenGraph 캐시 초기화 도구: https://developers.kakao.com/tool/clear/og
- 샤드캔 UI 해부 글: https://siosio3103.medium.com/shadcn-ui-%EC%9D%98-%ED%95%B4%EB%B6%80-ebd469c34614
- 스크립트 언어 만드는 예제 GitHub: https://github.com/ICe1BotMaker/pong
- 기타 관련 유튜브(short): https://youtube.com/shorts/dW0aR054fb0?si=DLsAW06ejwyZOv6x
- 네이버 링크: https://naver.me/xxY73JkF
#React#AWS#CloudFront#S3#Nextjs#CORS#인프라면접#Git커밋#엘라스틱서치#개발스터디