react 썸네일react

2024-11-11

목차

  1. 폰트와 개발자 문화 이야기
  2. 인프라 면접 준비와 예상 질문
  3. 리액트 훅 도서 추천과 공부법
  4. SNS 메타데이터 문제와 Next.js 관련 팁
  5. 과제 전형 중 외부 도움 사용 여부
  6. AWS CloudFront & S3 CORS 오류 원인과 해결법
  7. 엘라스틱서치 및 파서(Parser) 개념 이해
  8. 커뮤니티 이벤트와 선물 게임 분위기
  9. 회사 복지와 근무 환경 토크
  10. 기타 유용한 도구 및 주제 공유

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. 기타 유용한 도구 및 주제 공유

면접팁⚡

  • 인프라 면접 질문은 회사 환경, 클라우드 사용 여부에 따라 상이하므로 지원 기업의 인프라 환경을 먼저 알아볼 것.
  • 과제 전형에서는 AI 도구 사용을 피하고 자신의 실력과 구글링으로 문제를 해결하는 게 좋음.
  • Next.js 환경에서 메타데이터 문제는 SSR과 CSR 차이, 그리고 SNS 캐시 초기화 문제를 체크해볼 것.
  • AWS S3와 CloudFront CORS 문제 시, 무효화 정책과 CORS 설정 일관성 체크가 중요함.

링크🔗

#React#AWS#CloudFront#S3#Nextjs#CORS#인프라면접#Git커밋#엘라스틱서치#개발스터디