2025-02-19

목차

1. 재택근무와 프리랜서 수입 비교
2. React-query mutation 훅 분리와 후속처리 방법
3. ChatGPT와 VSCode 확장 프로그램 활용 경험
4. Figma SVG Export 문제와 해결 팁
5. 공통 컴포넌트 개발자의 역할과 급여
6. 서버 액션 파일 내 클래스 상태 유지 문제
7. 로그인 시도 제한(차단) 로직 논의
8. 접근성(A11y) 이슈: placeholder 발화 문제
9. Django 프레임워크 현황과 인식
10. 개발 현장 내 경쟁 문화와 마음가짐
11. Laravel + React (Inertia.js) 프로젝트 간 차이

1. 재택근무와 프리랜서 수입 비교 💸

• 재직 중일 때와 비교했을 때, 프리랜서나 재택근무 수입이 오히려 적다는 의견 多
• 출근하지 않는 만큼 출석 수당이 없고, 월급과는 근본적으로 구조가 다름
• 포괄임금제는 별개 논의이며, 프리랜서에게 월급제처럼 안정적 급여 지급이 쉽지 않음
• 회사에서 챙겨주는 금전적 혜택은 다시 회사로 복귀하도록 유도하는 압박 성격일 수도 있음

2. React-query mutation 훅 분리와 후속처리 방법 ⚛️

• mutation 훅을 분리하고, onSuccess/onError 등 후속 처리를 훅 내부에서 할지 컴포넌트 내부에서 할지 고민됨
• 여러 컴포넌트에서 공통 훅을 쓴다면, 후속 처리를 컴포넌트 쪽에서 하는 게 유연성 ↑
• UI 밀접한 후속 동작은 컴포넌트 내에서 처리하는 게 자연스러운 경우가 많음
• 공통 로직은 훅 내부, 특정 컴포넌트 실행 로직은 컴포넌트 쪽으로 적절히 섞어 쓰는 것을 추천
• useMutation에서 mutate 함수 호출 시 옵션으로 onSuccess/onError를 넘겨 처리하는 방법도 있음

초보자를 위한 부가 설명

React-query는 서버 상태를 효율적으로 관리하는 라이브러리임. mutation은 서버로 데이터를 변경 요청할 때 사용하는 기능임. onSuccess와 onError는 요청 성공/실패 시 실행되는 콜백으로, 변화를 반영하거나 에러 처리를 담당함. 수정을 분리하면 코드 재사용성과 유지보수가 좋아지지만, UI 동기화 필요성 때문에 적절한 위치 선정이 중요함.

3. ChatGPT와 VSCode 확장 프로그램 활용 경험 🤖

• GPT를 VSCode 내 확장 기능으로 쓰는 경우와 웹사이트에서 사용하는 경우 비교 중
• 프로그램 설치 없이 사이트 사용도 가능하지만, 개발자들은 코드 보조를 위해 확장 프로그램 설치 선호
• GitHub Copilot이 기본으로 설치되어 있으면, GPT 기반 클라우드 서비스와 비교해 어떤 게 나은지 고민하는 경우 많음
• 결론적으로, 편한 방법을 선택하되 유료 결제 여부 등 개인 필요에 따라 다름

4. Figma SVG Export 문제와 해결 팁 🎨

• 플러그인(SVG EXPORT 등)을 통한 SVG 추출 시, Path 값이 조금씩 달라지는 현상 보고
• 플러그인도 기본적으로 Figma API를 사용하므로, 결과 차이가 나는 것은 API 미사용 또는 후처리 때문일 가능성 큼
• SVG 아이콘을 React 컴포넌트로 사용할 때, width, height 속성을 주입해 크기 조절하는 법 고민
• SVG는 viewBox가 있어도 크기 고정이 되려면 width, height 속성이 필요함
• 컴포넌트에 전달되는 크기 값이 적용되지 않는 이유는 SVG 내부가 이를 받도록 설계되지 않아서일 가능성 높음
• fill, stroke 속성에 currentColor를 쓰면 부모 컴포넌트에서 색상 조작이 편리해짐
• 일괄 아이콘 추출은 Figma 기본 기능에서 드래그 후 내보내기 또는 스크립트 자동화 방법도 있음

초보자 설명

SVG(Scalable Vector Graphics)는 벡터 이미지 파일 포맷임. viewBox는 SVG의 내부 좌표 시스템을 정의하며, 외부에서 크기를 바꿀 때 중요함. width와 height가 없으면 이미지가 제대로 크기 조절 안 됨. React에서 SVG를 컴포넌트로 쓸 땐, 이 속성들을 제대로 활용해야 UI 일관성이 유지됨.

5. 공통 컴포넌트 개발자의 역할과 급여 💼

• 자사 솔루션 엔터프라이즈 BO 구축 시, CRUD 리스트, 폼, 팝업 같은 공통 컴포넌트 담당자 필요
• 인증, 미들웨어, 피그마 연동, 다국어 처리 등 공통 기능도 포함됨
• 중급 개발자 기준 2~3개월 정도 함께 일하며 품질 높임
• 정규직 급여는 월 400~500만 원 선 언급됨, 프리랜서 단가는 별도
• 공통 컴포넌트 설계 난도, 사내 템플릿화 여부에 따라 비용·시간 조율 가능

6. 서버 액션 파일 내 클래스 상태 유지 문제 🔄

• 서버 액션 함수 파일에서 클래스를 작성해 요청마다 상태(카운트 등)를 유지하려 했으나 초기화됨
• 이는 서버 액션이 호출될 때마다 새 인스턴스를 생성하는 구조라 당연한 결과
• 서버 액션은 상태 비저장성(stateless)을 기본으로 하며, 클래스 내부 상태 유지용으로 적합하지 않음
• 상태를 유지하려면 별도 DB나 캐시, 세션 스토리지 활용 필요

7. 로그인 시도 제한(차단) 로직 논의 🔒

• 5회 이상 로그인 실패 시 3분간 재시도 차단 로직에 대해 과한지 토론
• 일부는 3분보다 1분 차단이나 다른 타임아웃을 권장
• 기획자와 논의한 보안 정책에 맞춰 조율이 필요하며, 무작정 빼는 건 보안 취약점 초래 가능
• IP 차단, CAPTCHA 등 추가 보안 장치 병행 추천

8. 접근성(A11y) 이슈: placeholder 발화 문제 🦻

• 접근성 목적의 화면 낭독기 작동 시, placeholder 값 발화를 한 후 이상한 코드나 랜덤 문자열이 읽히는 현상 보고
• placeholder는 폼 요소 내 입력란에 힌트 문구를 제공해 사용자에게 도움이 됨
• 발화 이후 이상 문자열 감지는 자동 생성 필드나 내부 ID 값일 가능성 있으며, 접근성 점검 필요
• 해당 문제는 개발자 도구나 접근성 도구로 재현 및 확인 후, 불필요한 코드 제거 혹은 aria 속성 조절로 개선 가능

9. Django 프레임워크 현황과 인식 🐍

• Django를 맡게 된 프로젝트에 대해 최근 개발 트렌드와 떨어져 구식이라 느끼는 의견 존재
• Django는 파이썬 기반의 강력한 웹 프레임워크로, 여전히 많은 기업과 서비스에서 활발히 이용 중
• 요즘은 Next.js, Remix, SvelteKit 등 자바스크립트 프론트엔드 중심 프레임워크가 인기라 체감 차 있음

10. 개발 현장 내 경쟁 문화와 마음가짐 ⚔️

• 팀 내 경쟁이 심해 업무량 조절과 스트레스 문제 발생
• 서로 일을 빼앗기지 않으려 하거나 훨씬 빠르게 선점하는 문화
• 긍정적 시선으로 보면 업무 주도적 태도이나, 번아웃 위험도 높음
• 마음 건강을 위해 적절한 타협과 소통 중요

11. Laravel + React (Inertia.js) 프로젝트 간 차이 🔄

• React 단독 프로젝트에서는 react-router-dom의 <Link> 사용
• Laravel + React 조합(Inertia.js 이용 시)에는 @inertiajs/inertia-react의 <Link>를 쓰며, 경로 전송자 속성도 다름 (href 등)
• 라우팅과 상태관리 방법, 서버-클라이언트 상호작용 방식이 프레임워크마다 다름을 이해해야 함

면접팁⚡

• React-query mutation 훅 설계 시
  면접관이 후속처리(onSuccess/onError) 위임 위치를 물어본다면, 공통 함수의 재사용성과 컴포넌트별 UI 특성을 고려해 적절히 나누는 유연성을 강조하기 좋음.

• SVG 관련 질문 대비
  viewBox, width/height, currentColor 개념과 SVG를 React 컴포넌트로 변환 시 주의사항을 명확히 설명할 수 있으면 좋음.

• 서버 상태 관리 이슈
  서버 액션 함수가 무상태(stateless)임을 알고, 상태 유지가 필요한 경우 별도 저장소를 쓰는 이유와 구조를 설명할 수 있으면 신뢰감 상승.

• 로그인 보안 정책 논의
  로그인 실패 제한 로직에서 보안과 사용자 경험의 균형 잡는 방식을 사례와 함께 설명 가능하면 좋음.

링크🔗

• React-query 공식문서
• Figma SVG Export 관련 블로그
• Inertia.js 공식 사이트
• GitHub Copilot
• Django 공식 문서
• SVG 위키피디아
• React-router-dom Docs