2024-02-23

목차

1. 면접 질문 및 준비 팁
2. 자바스크립트 수학 함수 이해하기: Math.floor
3. REST API 문서 관리 방법
4. 피그마(Figma) 디자인 툴 팁
5. yarn 명령어 관련 오류 해결
6. SWR 라이브러리의 mutate 및 throwOnError 옵션
7. 개발자들의 장비 및 작업 환경 이야기
8. jQuery와 React 논쟁 및 추억
9. Express.js와 React를 활용한 웹훅 구현 가능성
10. 기타 소소한 개발자 일상

1. 면접 질문 및 준비 팁 📝

• SI(시스템 통합) 회사에서 9개월간 일하고 중소기업 프론트엔드 개발직 면접 준비 중
• 보통 프로젝트 경험 관련 질문과 함께 프론트엔드 기술 질문이 많음
• 기본적으로 React와 Next.js 차이나 useMemo의 역할 같은 기술적 질문이 자주 나옴
• CS(컴퓨터 과학 기본 개념) 질문도 일부 포함됨
• 면접 준비 팁: 구글 검색을 통해 프론트엔드 관련 면접 질문들을 미리 확인해 보는 게 좋음

초보자를 위한 설명:

• useMemo: React에서 컴포넌트 렌더링 시 계산 비용이 높은 작업을 메모이제이션(기억)하여 불필요한 재연산을 줄이는 Hook임.
• React와 Next.js 차이: React는 UI 라이브러리, Next.js는 React 기반의 프레임워크로 SSR(서버 사이드 렌더링), 라우팅 등 추가 기능 제공.

2. 자바스크립트 수학 함수 이해하기: Math.floor 🧮

• Math.floor는 소수점 이하 숫자를 항상 작거나 같은(<=) 정수로 내림함
• 예) 3.123 → 3, -3.123 → -4 (음수 방향으로 내림)
• 반대 개념으로 Math.ceil은 올림 함수로, 해당 값보다 크거나 같은 정수를 반환함

초보자를 위한 설명:

• 음수에서 내림을 할 때는 절대값 기준이 아니라 수직선에서 더 작은 방향(왼쪽)으로 내림
• 이 점이 헷갈릴 수 있으니 꼭 기억할 것

3. REST API 문서 관리 방법 📄

• 대형 API 문서가 PDF 형식으로 제공되면 다루기 어려움
• 보통 Swagger 같은 툴을 활용하여 문서화하고, 웹 기반으로 쉽게 탐색과 조회 가능
• 간혹 메모장에 정리된 문서도 받는 경우가 있어 관리 편의성은 떨어짐

초보자를 위한 설명:

• Swagger는 REST API 명세를 작성하고 시각화하여 테스트도 가능한 오픈소스 툴
• API 문서를 잘 관리하면 개발과 유지보수가 훨씬 용이해짐

4. 피그마(Figma) 디자인 툴 팁 🎨

• 프론트엔드 개발자가 디자이너와 협업하기 위해 기본적인 피그마 사용법을 익히는 것이 좋음
• CSS flexbox와 유사한 개념으로 레이아웃을 잡으면 이해가 쉬움
• 컴포넌트화하여 재사용할 수 있고, 플러그인 활용 추천
• 피그마 인스펙터에서 노드 깊이가 너무 깊으면 탐색 불편, 이름을 최소화하는 게 좋음

초보자를 위한 설명:

• 피그마는 웹 기반 UI 설계 툴로, 실시간 협업과 프로토타입 제작이 가능함
• 스타일, 레이아웃을 시각적으로 확인할 수 있어 개발과 디자인 간 이해 차이를 줄여줌

5. yarn 명령어 관련 오류 해결 🔧

• yarn set version berry 명령어 입력 후 에러 발생 사례
• 흔한 원인: 현재 경로에 package.json이 없거나, 잘못된 위치에서 명령 실행
• 해결 팁: yarn init으로 package.json 생성 후 재시도하거나, 명령어를 실행할 폴더 확인

초보자를 위한 설명:

• Yarn은 자바스크립트 패키지 매니저이고, Berry은 yarn의 최신 버전명(버전 2 이상을 가리킴)
• 프로젝트 루트에 package.json 파일이 있어야 패키지 관리를 할 수 있음

6. SWR 라이브러리의 mutate 및 throwOnError 옵션 ❓

• SWR은 React에서 사용하는 데이터 fetching 라이브러리 중 하나
• mutate 함수는 캐시를 변경하고 데이터 리페칭하는 역할
• throwOnError 옵션은 mutate 중 에러 발생 시 이를 throw(던져서) 호출되게 함
• 이는 호출 실패 시 에러를 처리하거나 타임아웃 같은 상황을 판단할 때 유용

초보자를 위한 설명:

• SWR은 서버 데이터와 클라이언트 상태를 효율적으로 동기화하기 위한 React 훅
• mutate로 수동으로 데이터를 업데이트하고, 에러를 직접 잡아 재시도 처리 가능

7. 개발자들의 장비 및 작업 환경 이야기 💻

• 모니터, 책상, 주변기기 등에 대한 이야기 다수
• 예: 27인치 벤큐(BenQ) QHD 모니터 구입시 품질 문제(스크래치 존재) 논의
• 고주사율(360Hz)도 언급됨, 게이밍·고성능 환경에 대한 관심
• 작업 환경 개선으로 업무 효율 증진 기대

8. jQuery와 React 논쟁 및 추억 📜

• jQuery 4.0 출시 소식과 극찬 뉴스 공유
• React와 비교하며 러닝커브와 새로운 기술 학습 부담 언급
• "SPA를 하기보다 jQuery를 쓰라"는 도발적인 제목으로 어그로 유발
• 개발자들 사이에서 옛날 기술 회상과 흥미로운 토론

초보자를 위한 설명:

• jQuery는 과거 화려했던 DOM 조작 라이브러리
• React는 현대적인 컴포넌트 기반 UI 라이브러리로 유지보수와 확장성에 강점
• 두 기술은 세대 차이로 볼 수 있고, 특정 상황에 따라 적합한 도구 선택 필요

9. Express.js와 React를 활용한 웹훅 구현 가능성 🔗

• 질문: Express.js와 React를 조합해 웹훅을 구현할 수 있나요?
• 답변: 가능하며, Express.js는 서버 사이드 구축에 적합하고 React는 클라이언트 사이드 UI 담당
• 따라서 웹훅을 리스닝하는 백엔드 서버를 Express.js로 만들고, React는 프론트엔드에 사용

초보자를 위한 설명:

• 웹훅은 외부 서비스가 이벤트 발생 시 알림을 보내는 방식
• 서버 쪽에서 HTTP 요청을 받으려면 Express.js 같은 서버 프레임워크가 필수적임
• React는 사용자 인터페이스에 집중하므로 역할 분담이 중요

10. 기타 소소한 개발자 일상 🗣️

• 출근 중 에어팟 분실, 월급 들어왔다는 소식, 카드값 사용 고민, 직장 내 재미있는 에피소드
• 개발 도구 관련 고충 상담과 직장인 일상 묘사
• 커뮤니티 내 유쾌한 소통과 유머가 돋보임

면접팁⚡

• 면접에서는 기술 지식뿐 아니라 프로젝트 경험에 대해 자세히 말할 준비하기
• React 관련 기초, 특히 Hooks(useMemo 등), Next.js의 주요 기능 차이 파악 필수
• CS 기본 개념도 돌아보고, 예상 질문은 인터넷에서 꾸준히 찾아 공부
• 면접 시 실무에서 겪은 문제 해결 경험을 구체적으로 설명하면 좋은 인상

링크🔗

• SWR 심층 탐구: https://velog.io/@code-bebop/SWR-%EC%8B%AC%EC%B8%B5%ED%83%90%EA%B5%AC
• jQuery 4.0 출시 관련 뉴스 (개별 검색 필요)
• 피그마 사용법 관련 플러그인 및 팁 (커뮤니티 내 추천 및 구글 검색 권장)
• Yarn 공식 문서: https://yarnpkg.com/getting-started
• Swagger 공식 사이트: https://swagger.io