목차
- 디자인 없이 프론트엔드 개발할 때 고민과 해결책
- 리버스 프록시와 리다이렉트 동작 원리
- UI/UX 역할 분담과 프론트엔드 개발자의 관점
- Next.js 컴포넌트 네이밍 및 구조 관리
- 스트림 통신 시 데이터 청크 문제
- 스타트업 프론트엔드 프리랜서 채용 공고 및 논의
- 실무 팁: useEffect vs 직접 상태 관리
- 개발자 모임 아이디어와 근황 토크
- 연말정산 간단 Q&A
- 무선 마우스 추천과 개인 취향 공유
1. 디자인 없이 프론트엔드 개발할 때 고민과 해결책 🎨
- 핵심: 디자인 리소스(피그마, 와이어프레임) 없이 개발 시 디자인 고민 때문에 구현이 지연되는 상황.
- 기본 설명: 디자인과 UI/UX는 보통 디자이너와 기획자가 맡는 부분이다. 프론트엔드는 보통 화면 구현과 비즈니스 로직에 집중.
- 의견:
- 프론트엔드 개발자가 UI/UX를 어느 정도 이해하고 있는 게 좋으나, 반드시 본인이 디자인을 해야 하는 것은 아니다.
- 팀 내 디자이너가 부족하면, 디자인 공부를 하는 것도 나쁘지 않으나 무조건 필요한 것은 아님.
- 디자인과 UI/UX의 경계는 명확하며, UI Kit 활용이 실무에서 도움된다.
- 조직 내에서는 디자인 역할 분담이 중요하며, 개발자가 UI/UX 전반을 모두 신경 쓰면 업무 과부하 우려가 있음.
2. 리버스 프록시와 리다이렉트 동작 원리 🔄
- 핵심: 리버스 프록시 환경에서 서버 간 리다이렉트(redirect)가 어떻게 동작하는지 질문.
- 설명:
- 리버스 프록시란, 클라이언트 요청을 받아서 내부 서버들(1번, 2번 서버 등)로 적절히 분배하는 서버를 의미함.
- 리다이렉트는 클라이언트가 응답을 받아 새로운 URL로 다시 요청을 보내는 동작임.
- 따라서, 1번 서버에서 2번 서버로 직접 요청을 하는 게 아니라, 클라이언트가 프록시를 통해 2번 서버에 다시 요청함.
- 팁:
- 리다이렉트는 클라이언트가 직접 처리함으로, 내부 서버끼리 직접 요청을 주고받는 게 아님.
- 프록시 서버가 요청을 제어하는 규칙에 따라 요청이 분배되므로, 리다이렉트 후에도 프록시를 거칠 수밖에 없음.
- 서버 간 데이터를 공유하거나 상태 유지가 필요할 때는 Redis 같은 중앙 캐시를 활용해 데이터 유실 방지.
3. UI/UX 역할 분담과 프론트엔드 개발자의 관점 🧑💻💡
- 핵심: UI/UX는 기획자와 디자이너가 주도해야 할 담당 분야이나, 프론트엔드 개발자는 기본적인 이해와 소통이 필요함.
- 설명:
- UI(사용자 인터페이스)와 UX(사용자 경험)는 제품 성공에 중요한 요소다.
- 기획자와 디자이너가 없어 프론트엔드가 혼자 맡는다? 업무 과다일 뿐 아니라 비효율적임.
- 디자이너가 만든 디자인이 완벽하지 않을 수 있으므로, 프론트 개발자의 의견 제시는 팀워크에 도움됨.
- 의견:
- 개발자 스스로 문제를 해결하고 의사결정에 참여하는 자세가 필요.
- 팀장과 원만한 조율과 협의가 중요하며, 그래야 업무가 원활해짐.
4. Next.js 컴포넌트 네이밍 및 구조 관리 📂
- 질문: Next.js에서 클라이언트 컴포넌트(예: 필터, 탭)를 별도 폴더 _components에 분리하는 게 좋은가?
- 답변 및 팁:
- 컴포넌트를 pages와 같은 레벨에 두기보다 전용 폴더를 만들어 관리하는 것이 보편적.
- _components 폴더를 사용하는 관행은 재사용성과 유지보수성에 유리함.
- 네이밍은 직관적이고, 역할에 맞게 명명하는 게 중요.
- 폴더 구조는 팀과 프로젝트 규모에 따라 조정 가능하니 팀 내 컨벤션 합의를 권장.
5. 스트림 통신 시 데이터 청크 문제 🧩
- 상황: Next.js 서버와 백엔드 서버 간 SSE(Stream Server Events) 통신 시 데이터가 한꺼번에 넘어오는 현상.
- 설명:
- 스트리밍은 데이터를 작은 청크(chunk)로 나누어 순차적으로 전달하는 방식.
- 프록시가 중간에 있으면 데이터가 버퍼링되어 한꺼번에 넘어올 수 있다.
- 해결 팁:
- 프록시 서버에서 스트림 버퍼링 설정을 조정하거나, 직접 스트림 처리를 지원하는 미들웨어 사용.
- HTTP 헤더 및 연결 관리에 주의해서 설정할 필요가 있음.
6. 스타트업 프론트엔드 프리랜서 채용 공고 및 논의 📢
- 공고 요약:
- 3개월 단기 상주 프리랜서 프론트엔드 개발자 모집 (React, Next.js, Typescript 필수)
- AI 채팅 상담, 결제 기능, 반응형 웹앱 개발 담당
- 월 250만원 (3.3% 세금 외주 형태), 4월 서비스 런칭 예정
- 근무지: 구로구청 인근, 자율 출퇴근, 복지 지원 포함
- 의견:
- 급여가 프리랜서 치고 다소 낮고 신입 혹은 인턴과 비슷하다는 반응.
- 스타트업 특성상 보상 조건이 좋지 않을 수 있으며, 꿈과 성장 기회 중시하는 지원자에게 맞춤.
- 채용 후 이직이나 조건 조정 가능성 있음.
- 조언:
- 스타트업은 조건 부족할 수 있으나 꿈과 비전에 공감하는 인재가 필요.
- 급여/보상 조건은 반드시 면접 과정에서 명확히 확인할 것.
7. 실무 팁: useEffect 대신 직접 상태 관리 방법 ⚛️
- 질문: useEffect로 부모 props(selectDay) 변경 시 상태 초기화하는 코드가 안티패턴인가?
- 답변:
- 단순히 props에 따라 상태를 조정한다면 반드시 useEffect를 쓸 필요는 없음.
- 상태가 아닌 계산값이라면 렌더 함수에서 직접 처리 가능.
- useRef를 사용해 이전 값과 비교하며 상태 변경도 가능.
- 기본 개념:
- useEffect는 부수 효과를 처리할 때 쓰지만, 종속성 배열에 불필요한 값이 들어가면 예기치 않은 재렌더링 발생.
- 상태 관리가 필요한 이유를 면밀히 따져보고 최소화하는 게 좋음.
8. 개발자 모임 아이디어와 근황 토크 ☕️🍷
- 한참 디자인 및 개발 이야기 끝나고, 개발자들이 강남 재즈바에서 5~6인이 와인챗(와인 마시면서 수다) 모임하면 어떨까라는 이야기 나옴.
- 코로나 이후 대면 모임 필요성, 스트레스 해소 목적.
- 참가비 3-5만원 예상.
- 또한, 각자의 야근과 프로젝트 일정, 신입 분들의 고충 공유가 오갔음.
9. 연말정산 간단 Q&A 💰
- 차감징수세액이 음수(-)면 돌려받는 것, 양수(+)면 납부하는 것.
- 2024년 기준 연봉 대비 지출 내역 따라 환급 가능.
- 절세를 위해 비과세 항목과 소득공제 항목 잘 챙기는 게 중요.
- 실제 업무 중 경험 많은 개발자들은 연말정산을 꾸준히 챙김.
10. 무선 마우스 추천과 개인 취향 🖱️
- Windows와 Mac 모두 호환 가능한 무선 마우스 추천 요청.
- 후보군: Logitech G304, 지슈라 등.
- Logitech G304는 가성비 좋고 무난한 선택.
- 지슈라는 손목 부담 덜어줘 작업에 편리하다는 의견 많음.
- 취향과 용도에 따라 선택 권장.
면접팁⚡
- 스타트업 프론트엔드 전담 개발자 면접 시, UI/UX 역할 구분에 대한 이해도와 현실적인 문제 대처 방법 질문 가능.
- 리버스 프록시와 리다이렉트 기본 개념 숙지 필수.
- React 컴포넌트 관리 및 상태관리 최적화에 관한 설명 준비.
- 실무에서 기획 및 디자인 부재 상황 대응 경험 공유는 큰 장점.
링크🔗
#프론트엔드#디자인#UIUX#리버스프록시#NextJS#React#스타트업#채용공고#상태관리#개발자모임