react 썸네일react

2023-12-02

목차

  1. 입력장치 경험 후기: 마우스, 키보드, 해피해킹
  2. 리액트 컴포넌트에서 네트워크 요청 취소 이슈
  3. 채용공고 신뢰 문제 및 커뮤니티 구인 게시판 운영원칙
  4. 프로젝트 전달 시 Node_modules 포함 여부 및 의존성 관리
  5. 리액트 컴포넌트 구조와 API 요청 최적화 전략
  6. 클린코드 책과 자바스크립트 코드 스타일 이슈
  7. 키보드 하드웨어와 미래에 대한 토론
  8. 리액트 환경 관련 공부 및 라이브러리 소개
  9. 테일윈드 CSS와 동적 스타일 적용 고민
  10. 기타 일상적 대화 및 개발자 커뮤니티 분위기

1. 입력장치 경험 후기: 마우스, 키보드, 해피해킹

  • 해피해킹 키보드는 적응하면 매우 편리하지만, 윈도우 환경이나 게임 (특히 롤) 에서는 불편함이 있음.
  • 매직 마우스, 트랙패드는 휴대성과 터치감에서 장점으로 꼽힘.
  • 마우스는 손에 편한 제품을 찾는 게 중요하며, 손을 마우스에 맞추는 것이 필요하다는 의견도 있음.

2. 리액트 컴포넌트에서 네트워크 요청 취소 이슈

  • 컴포넌트가 언마운트(화면에서 사라질 때) 된 후에도 비동기 요청의 응답이 처리되면 예상치 못한 부작용이 발생할 수 있음.
  • 이를 예방하기 위해 요청을 취소(cancel)하는 방법이 있음. React에서는 이 작업을 쉽게 해주기도 하지만, 실제로 네트워크 요청은 서버에 완료되기도 함.
  • 직접 요청 취소를 구현하면 사용자 경험 향상 및 자원 낭비를 줄일 수 있음.
  • 예) AbortController를 활용해 fetch 요청을 취소 가능.

3. 채용공고 신뢰 문제 및 커뮤니티 구인 게시판 운영원칙

  • 커뮤니티 내 구인글은 신뢰 부족 문제 발생 가능성을 인지.
  • 회사정보나 공식 채용공고 링크를 제공하지 않으면 채용 사기 의심 우려가 큼.
  • 운영진은 구인 공지 시 채용 플랫폼(원티드, 잡코리아, 사람인 등) 링크 첨부를 필수로 요구하며, 직접 운영 페이지나 이메일 공개는 사전 허가를 받도록 공지함.
  • 과도한 광고 및 허위 구인글 관리를 강화해 커뮤니티 신뢰 유지를 목표로 함.
  • 채용사기란 고용 계약 후 임금을 지급하지 않는 등의 부당행위를 말함.
  • 발언자들은 구인글 자체를 부정하지 않으며, 신뢰성 확보가 중요함을 강조.

4. 프로젝트 전달 시 Node_modules 포함 여부 및 의존성 관리

  • Node.js 프로젝트를 다른 사람에게 전달할 때 node_modules 폴더를 함께 보내는 것은 비효율적이며 권장되지 않음.
  • 수백 메가바이트가 될 수 있는 node_modules를 압축해서 보내는 대신, package.json과 package-lock.json 파일만 전달 후,
  • 받는 사람이 npm install 명령어로 의존성 설치를 하도록 하는 것이 표준 절차.
  • 이를 통해 용량 문제를 줄이고, 최신 패키지 버전 적용 등 유지 관리가 쉬워짐.
  • 다만 과제나 특정 상황에서는 구두 합의에 따라 함께 보내기도 함.

5. 리액트 컴포넌트 구조와 API 요청 최적화 전략

  • 리스트 컴포넌트(List)에서 여러 아이템(Book)의 상세 정보를 각각 API로 요청하는 것은 서버 부하와 로딩 시간 증가 문제 초래.
  • 보통 리스트 컴포넌트가 상세 정보를 포함한 데이터를 한 번에 가져와 자식 컴포넌트에 props로 넘기는 방식이 효율적.
  • 각 Book 컴포넌트는 단순 렌더링만 담당하는 'Dumb Component' 형태로 설계할 것을 권장.
  • 만약 상세 페이지가 별도로 존재한다면, 상세 페이지 컴포넌트에서 별도의 API 호출을 수행할 수 있음.
  • 캐싱은 클라이언트가 처리하는 부분이며, API 호출 횟수를 줄여 서버 부하를 관리하는 것이 핵심.
  • 같은 UI라 해도 사용하는 데이터 모델과 목적에 따라 컴포넌트를 분리하는 것이 유지보수에 유리함.

6. 클린코드 책과 자바스크립트 코드 스타일 이슈

  • 고전적 '클린코드(Clean Code)' 책은 자바 중심으로 작성되어 있음.
  • 자바스크립트와 완전히 맞지 않는 부분도 있고, 일부 내용은 현실 적용이 어려울 수 있음.
  • 개발자마다 의견이 분분하며, 결국 자신만의 판단과 팀 상황에 맞춘 적용이 권장됨.
  • 관련 논란 및 다양한 의견은 Reddit 등 외부 커뮤니티에서 확인 가능 (예: https://www.reddit.com/r/programming/comments/qs8j0z/its_probably_time_to_stop_recommending_clean_code/).

7. 키보드 하드웨어와 미래에 대한 토론

  • 미래에는 키보드 같은 물리 입력 장치가 사라질 것이라는 전망도 있음.
  • 생각으로 코딩하거나 텔레파시 같은 기술이 나오면 타이핑 없이 입력 가능할 것이라는 상상 담긴 의견.
  • 현재는 해피해킹 외에도 다양한 기계식, 무선, 텐키리스 등 사용자 취향에 맞는 키보드가 많음.
  • 맥 사용자라면 텐키리스 올블랙 키보드 추천 요청도 있었음 (예: Nuphy Air75 V2 추천 링크 공유됨).

8. 리액트 환경 관련 공부 및 라이브러리 소개

  • SSR (서버 사이드 렌더링) 과 React Query 같은 상태 관리 라이브러리를 공부 중임.
  • 복잡하고 어렵지만 장기적으로 프로젝트 최적화에 도움 됨.
  • CLI 기반 UI 제작 라이브러리 소개 (https://github.com/ICe1BotMaker/linterf) - 터미널에서 위젯, 3D 효과 등을 쉽게 구현 가능함.

9. 테일윈드 CSS와 동적 스타일 적용 고민

  • 동적으로 props 값을 받아서 테일윈드 CSS 클래스를 적용하는 문제가 논의됨.
  • 일반적인 방법으로는 className에 조건문을 조합하거나 join 함수를 사용.
  • 그러나 테일윈드는 정적 클래스 명으로 빌드 시 최적화하는 특성 때문에 동적 생성은 제한적임.
  • 동적 스타일링이 어렵다면 인라인 스타일(style 속성) 또는 CSS 모듈, 스타일드 컴포넌트 같은 대체 방법 추천.

10. 기타 일상적 대화 및 개발자 커뮤니티 분위기

  • 개발자들 사이에서 야근, 야식, 운동, 취업 준비, 김장철 등 다양한 일상 이야기가 오갔음.
  • 커뮤니티 내에서는 분위기 메이커, 규칙 제정, 모각코(모여서 각자 코딩하기) 약속 등 활발한 소통이 이어짐.
  • 전체적으로 자유롭고 친근한 분위기 속에서 다양한 기술적, 비기술적 의견 공유가 이루어짐.

면접팁⚡

  • 리액트 컴포넌트 간 API 요청 전략에 대한 질문은 실무 수준에서 자주 등장.
    • 리스트에서 데이터를 한 번에 받아 자식 컴포넌트로 props 전달하는 방식과, 각 컴포넌트가 직접 요청하는 방식의 장단점을 정확히 이해하고 설명할 것.
  • 네트워크 요청 취소 개념과 사용 이유(부작용 방지)를 명확하게 답변할 수 있으면 좋음.
  • 클린코드 관련 질문에는 "언어 특성에 따라 적용 방식이 다르다"는 유연한 의견 제시가 긍정적.
  • 채용 시 회사정보 공개와 신뢰성 관리 중요성에 대해 알고 있으면 대화에 도움이 됨.

링크🔗

#React#Frontend#API최적화#채용사기주의#NodeJS#클린코드#키보드#테일윈드#개발환경#커뮤니티운영