2024-03-02

목차

1. 실업 수당과 알바 경험 공유
2. 온라인 코딩테스트 규정 및 팁
3. React useEffect 훅과 무한 렌더링 이슈 설명
4. CSS 라이브러리 비교 및 선택 고민
5. 스타일드 컴포넌트와 TailwindCSS 유지보수 논쟁
6. React 상태 끌어올리기와 컴포넌트 간 데이터 전달
7. 개발 환경 문제 해결 - 라이브 서버 및 브라우저 이슈
8. Jest 테스트 도입과 경험, 활용 조언
9. 커뮤니티 내 감성 및 소소한 이야기
10. 면접 준비 및 기술 질문 조언

1. 실업 수당과 알바 경험 공유

• 시럽 수당은 실업 급여를 친근히 부르는 말이며, 금액은 개인별로 차이가 있음 (예: 172만원 언급).
• 실업 수당 받으면서도 알바하고 싶지만 규정 때문에 어려움이 있음.
• 경제적 상황, 실업 급여 금액과 현실적인 선택에 대한 솔직한 대화가 오감.

2. 온라인 코딩테스트 규정 및 팁

• 회사마다 코딩테스트 규정이 다를 수 있음.
• 구글 검색, VSCode 같은 외부 도구 사용 가능 여부는 회사가 명시해야 확실함.
• 코딩테스트 플랫폼(예: CodeSignal)들은 사측에서 설정하는 옵션에 따라 다름.
• 모의시험 기능으로 환경 익힐 것 권장.

3. React useEffect 훅과 무한 렌더링 이슈 설명

• useEffect는 의존성 배열에 명시한 값이 변경될 때 콜백함수를 실행함.
• 의존성 배열 안의 함수(예: getData)가 계속 새롭게 만들어지면 무한 렌더링이 발생할 수 있음.
• 함수가 아닌, 함수가 참조하는 값이 변할 때만 실행되어야 함.
• 무한 렌더링 문제는 React에서 흔한 실수로, 함수의 참조 안정성(useCallback 활용)으로 해결 가능.

초보자를 위한 추가 설명
useEffect(() => { ... }, [dep])는 dep이 바뀔 때만 실행되도록 하는 훅입니다. 만약 dep이 매 렌더마다 바뀌는 함수라면 계속 다시 실행하며 무한루프가 발생합니다.

4. CSS 라이브러리 비교 및 선택 고민

• Panda CSS, Vanilla Extract(VE), TailwindCSS, Styled Components(emotion 포함) 등 다양한 라이브러리 언급됨.
• VE는 제로 런타임 CSS 라이브러리로 컴파일 시 CSS를 생성해 빠르게 동작하지만, 일부 버그가 존재.
• TailwindCSS는 아토믹 CSS 방식으로 클래스 기반이며 가독성은 떨어질 수 있지만 충돌이 없고 빠른 개발에 유리함.
• Panda CSS는 Chakra UI 진영의 라이브러리로 가능성은 있지만 아직 초기 단계 평가.

5. 스타일드 컴포넌트와 TailwindCSS 유지보수 논쟁

• 스타일드 컴포넌트는 CSS를 JS로 작성하며 컴포넌트 단위로 스타일을 관리해 CSS 충돌을 방지함.
• TailwindCSS는 클래스를 조합해 스타일링하며 CSS 중복 및 충돌 문제는 거의 없음.
• 유지보수 관점에서 의견 충돌:
  • 스타일드 컴포넌트는 가독성 및 컴포넌트 결합이 강점이지만, 작성자의 네이밍과 관리 방법에 따라 난잡해질 수 있음.
  • TailwindCSS는 클래스가 많아 가독성에 문제 있으나, CSS 추상화에 얽매이지 않고 빠른 개발에 적합.
• 핵심은 개발자의 사용 습관과 프로젝트 규모에 맞게 선택해야 함.
• 네이밍과 컴포넌트 설계가 유지보수의 성패를 좌우한다는 점 강조됨.

6. React 상태 끌어올리기와 컴포넌트 간 데이터 전달

• React는 단방향 데이터 흐름을 지향함(부모 → 자식).
• 자식 컴포넌트의 상태를 부모로 올리기 위해서는 부모에서 상태와 설정자를 관리하고, 이를 props로 내려줌.
• 자식에서 부모로 데이터 올릴 때는 콜백 함수를 props로 넘겨 호출하는 방법 사용.
• Vue와 달리 React는 직접적인 양방향 바인딩이 없으며, 단방향 흐름이 데이터 추적에 유리함.

초보자 팁
상태 끌어올리기(lifting state up)는 React에서 부모 컴포넌트가 상태를 관리하면서 필요한 데이터를 자식 컴포넌트에 전달하는 방법입니다.

7. 개발 환경 문제 해결 - 라이브 서버 및 브라우저 이슈

• TailwindCSS 코드를 추가 후 개발 서버에서 화면이 멈추거나 무한 로딩되는 문제 발생.
• 원인으로는 개발 서버 설정 문제, 중복 포트 사용, 혹은 스타일 코드 충돌 의심됨.
• 해결 방법:
  • 터미널에서 기존 서버 프로세스 종료하고 다시 실행.
  • 불필요한 확장 프로그램(라이브 서버 등) 제거.
  • 프로젝트 내 스타일 파일을 초기화 후 차근차근 다시 적용해 보기 권장.
• 크롬 브라우저 완전 종료 방법은 작업 관리자에서 프로세스 종료.
• 오류 확인 시, 브라우저 개발자 도구(F12)에서 콘솔 로그 체크가 필수.

8. Jest 테스트 도입과 경험, 활용 조언

• Jest는 JavaScript/TypeScript 테스트 프레임워크로, 프론트엔드보다 백엔드에서 주로 활용됨.
• 초보자가 처음 사용 시 Typescript 설정(ts-jest 등) 및 테스트 구조 이해가 어려울 수 있음.
• Jest 적용은 도메인 핵심 로직부터 단계적으로 커버리지 쌓는 것을 추천.
• 커뮤니티에선 Cypress, QAWolf 등 e2e 테스트 도구도 각광받고 있음.
• 프론트엔드에서의 Jest 숙련은 도전적인 편이며, 필요에 따라 선택적으로 도입하는 경우 많음.

9. 커뮤니티 내 감성 및 소소한 이야기

• 개발자들끼리 운동(풀업), 일상 공유, 사고 경험, 투자 이야기(비트코인) 등 친근한 소통 다수.
• 공부와 개발에 대한 동기 부여, 좌절감, 응원 메시지 활발함.
• 예비 창업, 불로소득 만들기, 멘탈 관리 등 현실적인 고민 공유.

10. 면접 준비 및 기술 질문 조언

• 이직 첫 면접에서 기술 질문은 브라우저, 네트워크, 자바스크립트, React를 중심으로 준비할 것 권고.
• 이력서 기반 질문에 대비해 경험한 프로젝트의 세부 내용을 잘 정리할 것.
• 블로그나 공개 자료가 있다면, 질문자가 의도를 파악하고 깊은 질문을 할 가능성 있음.
• 면접 준비 시, 기본적인 개념부터 실습 코드 예제까지 폭넓게 숙지하는 것이 중요.

면접팁⚡

• 온라인 코딩테스트 시 도구 사용 가능 여부를 사전에 문의할 것.
• React useEffect 의존성 배열 처리 방식 완벽 이해 필수. (무한 렌더링 방지)
• CSS 라이브러리 장단점과 유지보수 이슈를 자기 의견과 함께 설명할 수 있도록 준비.
• 컴포넌트 상태관리 및 데이터 흐름 구조 숙지와 함께 상태 끌어올리기 사례 준비.
• Jest 기본 테스트 작성법과 TS 적용법 간단히 알고 있으면 플러스.

링크🔗

• React useEffect 공식 문서: https://reactjs.org/docs/hooks-effect.html
• Panda CSS: https://panda-css.com/
• Vanilla Extract 소개: https://vanilla-extract.style/
• Tailwind CSS: https://tailwindcss.com/
• Jest 공식 문서: https://jestjs.io/
• CodeSignal 코딩테스트 플랫폼: https://codesignal.com/
• React 상태 끌어올리기 설명: https://reactjs.org/docs/lifting-state-up.html
• Google Kick Start 2024 이벤트: https://cloudonair.withgoogle.com/events/partner-kickstart-2024
• 단위 테스트 관련 블로그 추천: https://mitchell-up.github.io/mitchell-dictionary/blog/unit-test