COMMIT.chat
View Bookmarks
react 썸네일react

2024-03-27

목차

  1. 안티패턴과 자바스크립트 연산자 활용
  2. 외주 단가, 퍼블리싱 작업과 디자인 구현 노하우
  3. 쿠버네티스 도입과 관리 이슈
  4. 애플 맥북 Air vs Pro, 개발 환경과 장비 선택 고민
  5. Next.js 14의 라우팅과 레이아웃 관리
  6. React에서 배열 반복문과 중간에 루프 종료하기
  7. AI 코딩 도구(GPT, Copilot 등) 활용 후기 및 비교
  8. 협업툴(슬랙, 노션, 네이버 웍스 등) 추천과 경험 공유
  9. 개발자 연봉, 재택근무, 그리고 직장 고민 이야기
  10. 기타 기술 문의 및 팁

1. 안티패턴과 자바스크립트 연산자 활용

  • 질문: true ? null : <div></div>와 true && <div></div> 코드 사용 시 차이점과 문제점
  • 답변: 앞의 삼항연산은 결과가 항상 null이라 안티패턴이며, 후자의 && 조건부 렌더링이 통상적임.
  • 설명:
    • 자바스크립트에서는 조건부 표현식으로 삼항 연산자와 논리 AND(&&)가 자주 쓰임.
    • false && <컴포넌트>는 false를 반환해 컴포넌트가 렌더링 안됨.
    • 그러나 true ? null : <컴포넌트>는 항상 null 반환, 불필요한 코드임.
  • 이런 코딩 패턴은 가독성과 유지보수에 악영향을 미칠 수 있어 주의 필요.

2. 외주 단가, 퍼블리싱 작업과 디자인 구현 노하우

  • 외주 단가 정보는 커뮤니티, 구인구직 사이트 참고 가능.
  • 디자인을 받은 후 구현(퍼블리싱) 작업은 보통 정적 작업에 해당.
  • 모션 프레임(motion frame)을 넣는 등의 동적 효과 추가는 개발 난이도 상승 요소.
  • 퍼블리셔가 디자인을 디테일하게 해석해 구현해야 하는 경우가 많고, 일명 '노가다' 작업이 많음.
  • Tip: 모션이나 인터랙션 요소가 많을 땐 디자인 센스를 넘어서 많은 경험과 노하우 필요.

3. 쿠버네티스 도입과 관리 이슈

  • 온프레미스(On-premise, 자사 서버) 환경에서 파이썬 앱이 많아지면서 관리 어려움 발생.
  • 쿠버네티스(Kubernetes)는 컨테이너 오케스트레이션 툴로, 서비스 확장 및 관리에 유용.
  • 쿠버네티스란?
    • 컨테이너화된 애플리케이션을 자동 배포, 스케일링, 관리를 지원하는 오픈소스 시스템.
    • 클러스터 환경에서 앱을 효율적으로 운용 가능.
  • 인력이나 전문 지식이 필수이며, 충돌 문제(예: nginx와 k3s 충돌) 해결이 필요함.
  • 학습 방법으로는 단계별 쪼개기, 디버깅, 리팩토링 권장.

4. 애플 맥북 Air vs Pro, 개발 환경과 장비 선택 고민

  • 프론트엔드 개발용으로 MacBook Air 와 MacBook Pro 중 고민 많음.
  • Air는 가벼움과 휴대성 강점, Pro는 모니터 확장성 및 팬 등 발열 제어 면에서 차이.
  • M3 칩 기반 Air도 클램 모드(덮개 닫고 외장 모니터 사용 시) 최대 2대 외장 모니터 지원.
  • 성능 체감 포인트:
    • 일반 코딩, 웹 개발엔 Air도 충분.
    • 영상 편집, 빌드 속도 등 고부하 작업엔 Pro 시리즈 우세.
  • 램(RAM)용량, SSD 용량 선택 중요. 16GB 이상, 1TB 이상 권장.
  • 개인 경험 공유: 회사에서 M1 Air로도 충분히 프로덕티브함.

5. Next.js 14의 라우팅과 레이아웃 관리

  • Next.js 14는 파일 기반 라우팅과 nested layout 지원.
  • 질문: 특정 하위 페이지에 네브바 제거하는 방법.
  • 답변:
    • 조건부 렌더링을 위해 상위 layout에서 상태를 내려주거나 Context API 활용.
    • 상위 layout에 컴포넌트를 안 넣거나, 하위 layout에서 덮어쓰는 방식 사용.
    • Next.js 공식 문서에서 route groups, nested layout 패턴 참고 권장.
  • 추가 팁: layout 관련 변경 시 페이지 전체 리렌더링 고려.

6. React에서 배열 반복문과 중간에 루프 종료하기

  • Array.map() 함수는 배열 전체를 순회하므로 중간에 멈출 수 없음.
  • 중간에 조건부로 멈추고 싶으면 for, while문 사용해야 함.
  • Array.some()는 조건 만족 시 루프를 종료할 수 있어 활용 가능.
  • Array.filter()는 조건에 맞는 요소만 추출하지만 역시 끝까지 돌음.
  • 중요: map은 변환용, some/for는 조건 검사 및 제어용으로 목적 명확히 해야함.
  • 실무에서는 명확한 목적에 맞는 반복문 선택이 중요함.

7. AI 코딩 도구(GPT, Copilot 등) 활용 후기 및 비교

  • GPT 플러스, GitHub Copilot 비교 문의 많음.
  • 사용자 경험 공유:
    • Copilot은 유닛 단위 코드 자동완성에 유리.
    • GPT는 방법론, 설계 질문에 답변용으로 적합.
  • 가격 부담 존재해 월 구독료 고민됨.
  • 앞으로 AI 코딩 도구가 점점 발전할 전망.
  • 추천: 둘 다 체험해보고 자신에게 맞는 툴 선택 권장.

8. 협업툴(슬랙, 노션, 네이버 웍스 등) 추천과 경험 공유

  • 소규모 팀은 디스코드가 친숙하고 가벼워 인기.
  • 슬랙과 지라, 노션은 대기업 및 개발팀에서 자주 사용.
  • 네이버 웍스는 국내 기업에서 많이 쓰이나 개발자 친화적이지 않은 편.
  • 개인 선호도 및 팀 문화에 맞춰 도구 선택 필요.
  • Tip: 협업툴은 문서 작성, 이슈 관리 등과 같은 업무 프로세스 통합 지원 여부도 고려.

9. 개발자 연봉, 재택근무, 그리고 직장 고민 이야기

  • 최근 회사에서 근무조건 악화(근무일수 축소, 연봉 삭감) 사례 공유.
  • 현실적인 대처법: 이직 고려, 빠른 경력 전환 권장.
  • 재택근무 장단점 논의: 개발 집중도는 높지만 일과 생활 경계 희미해짐.
  • 연봉, 복지, 장비 지원 등 조건 고려해 경력 관리 중요.
  • 개인 자산 관리 이야기: 지출 절약, 저축, 부채 관리 방법 공유.

10. 기타 기술 문의 및 팁

  • React PDF 렌더링 관련, LRU 캐시 적용 검토:
    • LRU(Least Recently Used) 캐시는 자주 쓰이는 데이터를 우선 저장, 메모리 효율 극대화 목적.
    • PDF 페이지 캐싱 시 렌더링 속도 개선에 도움 됨.
  • nextjs 캐시 문제: 크롬 등 브라우저 캐시 무효화 원인 다양, DevTools와 버전 확인 추천.
  • Css Flexbox 레이아웃에서 가운데 정렬 시 공간이 줄어드는 문제 해결:
    • justify-content: flex-start로 조정해 문제 완화 가능.
  • npm start 오류: package.json 위치 확인 필요, 경로 맞춰서 실행 권장.

면접팁⚡

  • 자바스크립트 안티패턴과 조건부 렌더링 활용법 숙지 필수.
  • React 및 Next.js에서 반복문 용도별 특성 이해와 적절한 사용법 설명 가능해야 함.
  • 쿠버네티스 및 클라우드 컨테이너 환경 관련 기본 개념과 도입 시 고려사항 준비.
  • AI 코딩 도구에 대한 장단점 파악과 실제 업무 적용 사례 어필 가능시 인상적.
  • 협업툴, 프로젝트 관리 경험 공유해 커뮤니케이션 능력 강조.
  • 프로젝트 및 디자인 구현 경험을 구체적으로 말해 퍼블리싱과 UI 구현 능력 어필.

링크🔗

#자바스크립트#리액트#Nextjs#쿠버네티스#맥북#AI코딩#협업툴#개발노하우#퍼블리싱#개발면접
이전 포스트

2024-03-26

2024년 3월 26일
다음 포스트

2024-03-28

2024년 3월 28일