2024-05-05

목차

1. 종합소득세 신고 기준과 외주 수익 관련 Q&A
2. NextJS 특강 소개 및 도서 제공
3. React useState와 비동기성 문제 해결 팁
4. React setState 동기 vs 비동기 논쟁
5. React 컴포넌트 내 CSS 작성 방식 취향
6. 챗봇 서비스에 대한 시장 의견
7. 리액트 렌더링 최적화와 무한 스크롤 개선 방법
8. React useEffect가 실행되지 않는 문제 질문과 해결법
9. React Router 사용 시 주의사항
10. 소규모 주제별 자유 토론 및 의견 교환

1. 종합소득세 신고 기준과 외주 수익 관련 Q&A

• 외주로 번 수익이 2800만원 이하일 경우 기본적으로 종합소득세 신고 의무는 없음.
• 다만, 매달 꾸준히 수익 발생 시 신고가 필요할 수 있음.
• 근로소득과 합산해 연간 총소득이 기준을 넘으면 신고해야 함.
• 국세청에서 신고 대상자에게는 카톡 알림이 오므로, 알림이 없으면 아직 신고 의무가 없다고 볼 수 있음.
• 세무 관련 질문은 세무/노무/법무 전문 커뮤니티(예: 아하)에서 자세한 답변을 얻을 수 있음.

종합소득세 신고란?
개인이 사업, 근로, 기타 소득을 합산해 소득세를 신고하는 절차임. 외주 수익도 기타 소득에 포함됨.

2. NextJS 특강 소개 및 도서 제공

• 다음 주 목요일에 SSR(Server Side Rendering)과 API 생성, Vercel 배포까지 다루는 유료 강연(3만원) 예정.
• 참석자에게 도서(약 2만6천원 상당)를 증정.
• 다음 버전(14)의 최신 기능 중심 강의이며 도서는 NextJS 13버전 기준.
• 자세한 정보는 링크(http://bit.ly/3Qr3knU) 참고.

3. React useState와 비동기성 문제 해결 팁

• useState는 값을 즉시 변경해주지 않고, 상태 업데이트가 비동기적으로 일어남.
• 예를 들어, setFileId 호출 직후 fileId 값을 확인하면 여전히 초기값이 보일 수 있음.
• 변경된 값을 반영하려면 useEffect를 dependency 배열에 상태 값을 넣어 상태 변화를 기다려야 함.
• 상태를 즉시 사용해야 하는 경우는 일반 변수 사용을 고려할 수 있음.

React 상태 업데이트 특징
useState의 상태 변경은 React가 렌더링 사이클 내에서 처리하기 때문에 즉각적이지 않음. 이는 성능 최적화와 컴포넌트 재렌더링 목적 때문임.

4. React setState 동기 vs 비동기 논쟁

• setState 함수 자체는 호출 즉시 실행되지만, 실제 상태 반영과 렌더링은 비동기적으로 처리됨.
• React 내부에서는 업데이트가 큐(Queue)에 쌓이고, 배치(batch)로 처리됨.
• 이 과정 때문에 'setState는 비동기'라고 표현하나, 엄밀히 말하면 함수 실행은 동기임.
• 이 차이를 이해하는 것이 React 상태 관리의 핵심임.
• 클로저(closure) 개념과 연관지어 동기/비동기 여부에 대한 토론가 활발히 이루어짐.

5. React 컴포넌트 내 CSS 작성 방식 취향

• CSS를 컴포넌트 내부에 JS/TSX로 작성하는 방법과 별도 CSS 파일로 분리하는 방식 모두 사용됨.
• 작성 위치는 개발자 취향과 프로젝트 특성에 따라 다름.
• 어떤 개발자는 CSS 없이 HTML 구조만 이용하기도 하며, 다른 이들은 CSS-in-JS 방식을 선호함.
• "use css" 스타일은 필요한 스타일만 명확하게 적용하는 뜻으로 해석됨.

6. 챗봇 서비스에 대한 시장 의견

• 카카오톡 챗봇 등 외부 챗봇 서비스는 이미 대중화되어 다소 식상한 감이 있음.
• 그러나 접근성 측면에서 카톡 챗봇만큼 좋은 대안이 많지 않음.
• 새로운 서비스 기획 시 챗봇 연계의 위치와 차별성을 고려하는 것이 중요함.

7. 리액트 렌더링 최적화와 무한 스크롤 개선 방법

• 무한 스크롤에서 기존 배열을 계속 업데이트할 때마다 렌더링 발생해 성능 저하 가능.
• 렌더링을 무조건 줄이는 것보다 적절한 메모이징(React.memo, useMemo 등) 적용 권장.
• 가상화(virtualization)나 윈도잉(windowing) 기법으로 렌더링되는 DOM 수를 제한 가능.
• 데이터가 적을 경우 윈도잉 효과가 미미할 수 있어 상황에 맞게 선택할 필요 있음.

가상화란?
화면에 보이는 부분만 렌더링해 메모리 사용과 렌더링 시간을 줄이는 기술임. 예: react-window, react-virtualized.

8. React useEffect가 실행되지 않는 문제 질문과 해결법

• <Reservation /> 컴포넌트 내 useEffect가 실행 안되는 경우
• 원인으로는 컴포넌트가 실제로 렌더링되지 않거나, 라우팅 설정 문제 가능성 있음.
• useEffect는 컴포넌트가 마운트될 때 실행됨으로, 컴포넌트 출력 여부 확인 필수.
• React Router에서 <Route> 태그 사용 시 self-closing 태그(/ 사용)나 path 속성 설정 문제도 원인 될 수 있음.
• CRA(Create React App) 프로젝트 환경에서 라우터 설정 정확히 검토 필요.
• 문제 상세에 대해 더 많은 코드 확인과 라우터 구조 점검 권장.

9. React Router 사용 시 주의사항

• <Route> 태그는 path나 element 등 필수 속성이 빠지면 동작하지 않을 수 있음.
• JSX에서 시작태그와 닫는 태그 중 잘못된 작성 방식(></Route 대신 />) 중요.
• Next.js와 CRA의 라우터 차이를 이해하고 환경에 맞는 라우팅 구조를 짜는 것이 필요함.
• 편리한 시니어 개발자들도 기본 라우팅 문법을 엄격히 지킴.

10. 소규모 주제별 자유 토론 및 의견 교환

• 러스트(Rust) 언어와 파이썬 비동기 처리, 컴포넌트 내 상태 관리, 렌더링 배칭 기능에 관한 다양한 의견.
• 개발자들 사이에서 "러스트 말기" 등 유머 섞인 대화로 긴장 완화.
• 질문뿐 아니라 최신 기법과 경험담 공유 활발.
• 활기찬 분위기에서 유용한 팁과 노하우가 오감됨.

면접팁⚡

• React의 useState 상태 업데이트가 비동기적임을 설명하고, 이를 해결하기 위한 useEffect 활용 방법을 구체적으로 이야기할 수 있어야 함.
• React Router의 기본 사용법과 자주 발생하는 오류(태그 닫힘, path 누락 등) 문제를 알고 있는지 확인 받을 수 있음.
• 종합소득세 신고 기준 등 세무 상식도 업무 외 기술 커뮤니케이션에서 도움이 됨.
• 성능 최적화 부분에서 가상화와 메모이징 개념을 논리적으로 설명 가능해야 함.

링크🔗

• NextJS 특강 신청: https://bit.ly/3Qr3knU
• React setState 비동기성 설명: https://velog.io/@jay/setStateisnotasync
• React Router 관련 블로그: https://m.blog.naver.com/pjt3591oo/222690257837