react2024-02-28
목차
- 코드 품질과 마인드셋
- 리액트 프로젝트 디자인 협업
- 장비(키보드, 모니터, 책상) 이야기
- 사업자와 직장인 중복 4대 보험 이슈
- 휴대폰 배터리 교체와 사용 경험
- JWT 인증 및 Next.js에서 보호 라우트 구현
- React 텍스트 에디터 스타일 파싱 문제
- Firebase API 호출 방식 및 보안
- 면접과 코딩 테스트 이야기
- Slack 봇 권한, Twitch, AI 및 기타 잡담
1. 코드 품질과 마인드셋 💻
- 핵심: 코드는 세상에서 가장 중요하고, 자기 코드가 제일 좋다고 생각하는 긍정적인 마인드가 필요하다는 의견이 오갔음.
- 설명:
코드 품질 판단 기준은 매우 주관적임.
초보자는 잘 작성된 코드를 많이 보고 구글링하는 습관을 갖는게 중요함.
잘 만들어진 오픈 소스를 참고하거나 동료의 코드를 보는 것도 좋은 학습 방법임.
- 의견:
테스트가 통과되고 잘 돌아가는 코드가 가장 좋은 코드.
문제 발생 시 스트레스는 감수해야 하는 상황임.
2. 리액트 프로젝트 디자인 협업 🎨
- 질문: 디자인팀으로부터 어떤 방식으로 디자인을 받아야 쉽게 협업할 수 있는가?
기존 jQuery 환경에서 CSS와 HTML을 받아 슬라이드 다운 등의 애니메이션을 이벤트 핸들러로 구현해주고 있었음.
- 답변 및 팁:
- 디자인팀이 JSX 형식까지 알려주기 어려우면, 직접 변환하는 게 편할 수 있음.
- jQuery 이벤트 핸들러 대신 React의 'onClick' 등 이벤트 프로퍼티로 직접 구현하는 방향 권장.
- 협업 시 Figma 같은 디자인 툴에서 디자인 소스를 받는 것이 가장 현명함.
- 디자인팀과 기술팀 간에 명확한 소통과 역할 분담이 중요.
3. 장비 이야기: 키보드, 모니터, 책상, 의자 🖥️⌨️
- 키보드
- 로지텍 G715 등 기계식 키보드 추천이 많음.
- 텐키리스(숫자키 없는 형태)나 87키 배열을 선호하는 추세.
- 커스텀 키보드(스위치, 재질 변경 가능) 시장이 발달, 10만원대부터 좋은 제품 가능.
- 풀 알루미늄 키보드는 통울림 감소와 내구성에서 높은 평가.
- 모니터
- 24인치 여러 대 혹은 43~48인치 대형 모니터를 4분할로 쓰는 경우가 많음.
- 넓고 큰 화면은 멀티태스킹에 도움됨.
- 책상 / 모션데스크(높이 조절책상)
- 모터 품질과 안정성이 중요.
- 가격대: 입문형 데스커 책상은 50~60만원대, 제대로 된 모션데스크는 80만원 이상이 현실적.
- 책상 공간은 최소 1600x700~800mm 이상 권장.
- 의자
- 허먼밀러와 같은 고급 의자가 인기가 있으나 중고 구매하거나 가격 대비 선택 중요.
4. 사업자 등록 후 직장인으로 취업 시 4대 보험 문제 ⚖️
- 질문: 개인 사업자 등록 후 직장인이 되었을 때 4대 보험 가입 관련 문제 유무.
- 답변:
- 개인 사업자와 직장인 신분이 동시에 있어도 4대 보험 각각 가입 가능함.
- 별도 법적 제재는 없으나 보험료 납부 및 혜택 등에 대한 세심한 관리 필요함.
5. 휴대폰 배터리 교체 및 사용 경험 📱
- 경험담:
- 배터리 교체 주기는 보통 2년, 오래 사용할 계획이라면 정기적 교체 권장.
- 아이폰 12 프로 사용자는 4년 가까이 쓰면서도 배터리 90% 유지 경험 공유.
- 의견:
- 최신형 모델은 발열, 충전 문제도 고려 필요.
- 색상과 디자인 취향도 구매 의견에 영향.
- 배터리 교체로 성능 효과 개선 사례 존재.
6. JWT 인증 및 Next.js에서 보호 라우트 구현 🔐
- 상황:
클라이언트에서 JWT 토큰의 유효성을 어떻게 검사하고, Next.js에서 인증이 필요한 페이지 접근 시 처리 방법 문의.
- 답변 및 팁:
- 토큰 자체를 완벽히 클라이언트에서 검증하기 어렵고 불필요한 경우가 많음.
- 보통은 토큰 존재 유무만으로 인증 상태를 판단하고, 서버 API 호출 시 401/403 에러 처리로 인증 실패 감지.
- Next.js 미들웨어를 사용하면 SSR 과정에서 인증 검사 후 리디렉션이 가능해 UX 개선 가능.
- Refresh 토큰 활용과 API 기반 인증 갱신 전략이 필요함.
7. React 텍스트 에디터 스타일 파싱 문제 ✍️
- 문제:
텍스트 에디터에서 HTML 문자열을 받아 React JSX 형태로 변환할 때, class → className 및 style 문자열 → 객체 형식 변환 필요.
- 해결 방법:
- 직접 정규식으로 치환할 수도 있으나 위험함.
- dangerouslySetInnerHTML 사용 가능하지만 보안상의 위험(스크립트 삽입 등) 있음.
- sanitize-html 같은 라이브러리를 이용해 유해 스크립트 제거 후 안전하게 렌더링 권장.
- 참고:
React는 JSX 문법 규칙상 HTML 속성명과 다르게 다뤄야 하므로 변환이 필요함.
8. Firebase API 호출과 보안 문제 🔥
- 질문:
Next.js에서 Firebase getDoc, setDoc 같은 API를 클라이언트에서 직접 호출해도 되는지, 보안상 서버를 한번 거쳐야 하는지.
- 답변:
- Firebase 인증과 보안 규칙을 잘 설정했다면 클라이언트에서 직접 호출해도 무방.
- 인증정보(예: 비밀번호 등)가 클라이언트에 노출되면 안 됨.
- 보안이 걱정되면 Next.js API 라우트를 중간에 두어 호출하는 방식도 가능하지만, 불필요하게 복잡해질 수 있음.
9. 면접 및 코딩 테스트 이야깃거리 🎯
- 과제형 코딩 테스트를 코테라고 하는 경우가 많고, 알고리즘 문제만을 의미하지 않음.
- 테스트 코드 작성 여부는 회사나 과제 유형별로 다름.
- 최근 경력직도 연봉 삭감 분위기가 있고 AI 영향으로 취업 경쟁 심화 중임.
- "LGTM"(Looks Good To Me)의 의미와 쓰임새도 간단히 언급됨.
10. 기타 소소한 이야기 및 질문 🔄
- Slack 봇 권한: 맴버 권한이 제한적이라 봇 생성/관리 권한 주의 필요.
- VSCode 첫 빌드 시 "clip-path" 관련 ESLint 경고 문제: 설정 변화 또는 확장 프로그램 영향 가능성이 있으며, 수동 수정 필요 시 React 문법에 맞게 변환 권장.
- 마우스 추천: 매직마우스를 오래 쓴 경험 공유, 트랙패드도 좋은 선택.
- 재미있는 별명, 감정표현, 장비 구매 경험 담긴 유쾌한 대화 많음.
- 코딩 관련 자신의 마인드를 긍정적으로 가져가라는 조언이 반복.
면접팁⚡
- 코딩 테스트에서 알고리즘 문제뿐 아니라 실무 과제형 테스트도 많으니 준비 필수.
- JWT 토큰은 클라이언트에서 완벽 검증하기보다, 서버에서 권한 확인 후 상태에 따른 조치가 현실적.
- Next.js 미들웨어를 활용하면 서버 사이드에서 인증 상태 즉시 판단해 사용자 경험 개선 가능.
- 오픈 소스 코드를 자주 참고하고, 다양한 작성 스타일을 익히는 것이 좋음.
- 테스트 코드 작성 여부는 회사마다 요구가 다르므로 채용 공고 및 면접에서 사전에 확인 필요.
링크🔗