COMMIT.chat
View Bookmarks
react 썸네일react

2024-02-27

목차

  1. 토이 프로젝트와 개발 일지
  2. 자격증 선택 고민과 추천
  3. React 관련 질문과 팁
  4. Git 브랜치 작업 & 리베이스 활용
  5. 리액트 성능 최적화 및 useCallback
  6. 테스트 환경 구축 문제 (React, Jest)
  7. 프레이머 모션 (Framer Motion) 소개 및 활용
  8. 조건부 렌더링 vs CSS visibility 제어
  9. 면접 준비 및 취업 관련 이야기
  10. 개발 문화와 작업 환경 유머

1. 토이 프로젝트와 개발 일지 🎯

  • 개발자들은 토이 프로젝트를 하면서 주제가 자주 변경되는 모습이 흔함.
  • 예를 들어, 처음에는 웹 DOM 관련 프로젝트였으나 중간에 상태 관리 라이브러리를 만드는 것으로 바뀌기도 함.
  • 프로젝트 예시: 스와이퍼 기능을 구현, 랜덤으로 도시 10개를 배열에서 선정 후 비동기 요청으로 데이터 뿌리기.
  • 작지만 꾸준한 진행을 중요시하며, 매일 조금씩 작업하며 완성도를 높임.

2. 자격증 선택 고민과 추천 🎓

  • 오라클 OCP, SQLP, 리눅스 1급 중 어떤 자격증이 취업에 도움이 될지 문의.
  • OCP(Oracle Certified Professional): 데이터베이스 관리 분야 자격증으로 백엔드 관련 업무에 유리.
  • SQLP(SQL Professional): SQL 쿼리 작성과 데이터베이스 활용능력 검증.
  • 리눅스 1급: 서버 관리, 쉘 스크립팅, 리눅스 명령어 숙련에 도움됨. 실무에서 널리 쓰임.
  • 추천: 백엔드 업무를 목표로 하면 OCP가 강력 추천. 리눅스 자격증도 실무에 많이 도움 됨.
  • 자격증은 이력서 한 줄 추가 이상의 가치를 기대하기 보다는 기본 역량과 관심도를 보여주는 수단.

3. React 관련 질문과 팁 ⚛️

  • react-router-dom: React SPA(Single Page Application)에서 페이지 이동을 관리하는 라이브러리임.
    • DOM(Document Object Model)은 브라우저에 표현되는 HTML 구조를 뜻하지만, react-router-dom이 '직역' 의미를 가질 필요 없음.
    • SPA에서는 여러 페이지가 아니라 하나의 DOM 트리내에서 뷰(View)가 동적으로 전환됨.
  • useState 초기값이 undefined일 때와 빈 상태의 차이:
    • useState(undefined)와 useState() 적는 행위는 기본적으로 동일함. 초기값이 지정되지 않으면 undefined가 기본값임.
    • 다만 명시적으로 표현하는 것이 코드 가독성적 차이로 중요할 수 있음.
  • forwardRef와 useImperativeHandle:
    • React의 고급 Hook으로, 컴포넌트 내부의 ref 관리 및 부모 컴포넌트에서 자식 컴포넌트 메서드 제어를 가능하게 함.
    • 다만 사용법과 순서가 헷갈릴 수 있음. 공식 문서 참고 권장.
  • JSX 대신 createElement 사용 이유:
    • JSX 컴파일 전에 내부적으로 호출하는 함수이며, 조건부 컴포넌트 렌더링이나 특정 상황에서 동적으로 컴포넌트 타입을 바꾸어 렌더링할 때 유용.
    • 예: 부모 요소가 조건에 따라 <A> 또는 <B>로 바뀌어야 할 때.

4. Git 브랜치 작업 & 리베이스 활용 🔧

  • Dev 브랜치에서 작업한 커밋을 Main 브랜치 기반으로 옮기고 싶을 때 git rebase --onto main <커밋 해시> 명령으로 가능.
  • 리베이스는 커밋 이력을 깔끔하게 관리하는 데 유용하지만, 주의하지 않으면 다른 커밋까지 따라 붙을 수 있으니 헤드 기준을 정확히 지정할 것.
  • 깃허브 데스크탑 툴 사용 시 복잡한 커맨드 없이 시각적으로 간단히 브랜치 관리를 할 수 있음.

5. 리액트 성능 최적화 및 useCallback 🏎️

  • 컨퍼런스나 커뮤니티에서 흔히 “성능이 좋은 코드”는
    “최소한의 리소스로 사용자에게 불편 없이 화면을 제공하는 코드”라고 설명됨.
  • useCallback 훅: 특정 함수의 재생성을 막아 불필요한 렌더링 방지하는 데 쓰임.
  • 중요한 점은 "최적화가 필요한 상황에만 메모이제이션을 적용"해야 하며, 무분별한 사용은 오히려 성능에 악영향.
  • 개발자 도구(Lighthouse 등)를 활용해 실제 성능 지표(점수)를 확인하며 개선할 것.

6. 테스트 환경 구축 문제 (React, Jest) 🧪

  • React 컴포넌트 테스트 중 useNavigate() 오류: "Router 컴포넌트 내에서만 사용 가능" 메시지 발생.
  • 해결책: 테스트 시 컴포넌트를 <MemoryRouter> 등으로 감싸서 라우터 컨텍스트를 제공해야 함.
  • React Testing Library를 이용해 테스트 환경을 제대로 세팅하는 것이 중요.
  • Jest는 Node 환경으로 DOM API가 없으므로, React Router의 일부 훅이나 기능이 동작하지 않을 수 있음.

7. 프레이머 모션 (Framer Motion) 소개 및 활용 🎥

  • 프레이머 모션은 React 애니메이션 라이브러리로, 일상적인 애니메이션을 손쉽게 구현 가능.
  • 수학 공식(포물선 등)을 이용하거나, useSpring 훅으로 자연스러운 물리 기반 애니메이션을 만들 수 있음.
  • 프론트엔드에서 복잡한 모션 효과 없이도 매끄러운 UI/UX를 만들 때 유용.
  • 실무 적용 사례는 아직 적지만, 학습 목적으로 좋다고 평가됨.

8. 조건부 렌더링 vs CSS visibility 제어 🛠️

  • 조건부 렌더링이란 React에서 JSX 내 특정 조건에 따라 컴포넌트를 아예 렌더하지 않는 것.
  • 반면 CSS visibility 속성은 렌더는 하지만 보이지 않게 처리하는 방식임.
  • 성능 관점에서는 조건부 렌더링이 유리:
    • 불필요한 DOM 요소가 없으므로 브라우저가 재계산 및 리페인트를 줄임.
    • CSS로만 숨기면 렌더링과 리플로우가 계속 발생하므로 성능 저하 가능.
  • 따라서 중요한 성능 최적화 상황에선 조건부 렌더링 사용 권장.

9. 면접 준비 및 취업 관련 이야기 💼

  • 신입이 아닌 경력직 공고에서 3년 이상 경력 요구하는 경우가 많은데, 실제로는 조건 중 일부만 충족해도 지원하는 경우가 많음.
  • 우대 사항과 자격 요건을 충분히 이해하고, 자신 있게 면접에 임할 수 있을 때 지원할 것을 추천.
  • 개발자에서 인사팀 등 직무 전향 사례도 보이며, 본인의 적성과 진로 방향에 맞게 직군 변경 가능.
  • 기술 면접 준비는 기본적으로 자신이 만든 프로젝트와 경험에 대해 명확히 말할 수 있도록 준비할 것.

10. 개발 문화와 작업 환경 유머 😄

  • 개발자 대화에서 종종 일과 스트레스, 야근, 커피, 음료(제로 콜라, 사이다) 관련 유머 등장.
  • 무심코 하는 장난과 별명들이 문화로 자리 잡음.
  • 때때로 “초병님” “림에님” 같은 유니크한 닉네임과 모임 내 역할로 웃음 유발.
  • 함께 일하는 팀 분위기를 밝게 유지하며, 코딩 스트레스를 해소하는 모습도 볼 수 있음.

면접팁⚡

  • 기술 스택과 요구 사항을 정확히 파악하고, 자신이 부족하다고 생각되는 부분은 간단하게라도 공부하고 답변 준비.
  • 조건부 렌더링과 CSS 제어 차이점, React Hook 개념(useCallback, forwardRef 등) 설명 가능하면 좋음.
  • 테스트 환경 설정 경험은 현업 프론트엔드 개발 역량을 보여주기 좋은 소재.
  • Git rebase 개념과 이유를 질문받을 경우, 커밋 이력 관리와 협업 시 장점 위주로 설명하도록 준비할 것.

링크🔗

#React#Git#리액트테스트#성능최적화#자격증추천#프레이머모션#프론트엔드#면접팁#프로그래밍#토이프로젝트
이전 포스트

2024-02-26

2024년 2월 26일
다음 포스트

2024-02-28

2024년 2월 28일