2024-02-08

목차

1. 리액트와 일렉트론 개발 환경 설정 및 학습 자료 추천
2. Node.js 및 프론트엔드 개발 관련 의견 및 팁
3. 사이클 의존성(Circular Dependency) 이슈와 해결 경험
4. UI/UX 디자인 고민과 UI Kit 추천
5. React의 Context API 및 useContext 리렌더링 이슈
6. 연봉 토론 및 이직, 스타트업 근무 경험
7. 애자일(Agile) 개발 방법론에 대한 개발자들의 경험담
8. 번역 API 사용 경험과 추천
9. 도커(Docker) 및 컨테이너 관련 학습 자료 공유
10. 커뮤니티 활동과 스터디, 코딩테스트 준비

1. 리액트와 일렉트론 개발 환경 설정 및 학습 자료 추천

• 리액트를 설치할 때 기본적으로 npm i react 등이 필요하며, 웹페이지가 아닌 데스크탑 프로그램 개발 시엔 일렉트론(Electron)도 함께 배워야 함.
• 일렉트론 강의를 찾는다면 노마드코더 및 니꼬샘의 헬로우니꼬샘 무료 강의 추천. youtube에도 좋은 무료강의 많이 있음.
• 인프런 같은 플랫폼에서 유료 강의 구매도 고려 가능하지만 비용이 부담될 수 있음.
• 기본적인 리액트 문법과 일렉트론 사용법을 익힌 후, 스스로 공부해나가는 것이 중요함.

일렉트론 (Electron):
노드(Node.js)와 크롬 렌더러를 이용해 웹기술(HTML, CSS, JS)로 데스크탑 앱을 만드는 프레임워크.
한 번의 개발로 윈도우, 맥, 리눅스용 앱을 만들 수 있어 크로스 플랫폼 데스크탑 앱 개발에 많이 쓰임.

2. Node.js 및 프론트엔드 개발 관련 의견 및 팁

• Node.js는 단순히 예전 자바스크립트가 아니라 서버 사이드 자바스크립트 환경으로, 다양한 실무용 모듈 활용이 가능해 배우면 업무에 큰 도움 됨.
• Node.js 느낌에 대해 '옛날자스, 진한 바닐라 JS' 같다 말하나 점차 '서버 사이드 JS 플랫폼'임을 깨닫게 됨.
• 프론트엔드에서 CSS 디자인 감각 부족으로 고민하는 경우 UI Kit 사용 추천.
• UI Kit란 디자인이 미리 구축된 UI 구성 요소 라이브러리로, 일관된 디자인과 손쉬운 적용을 도와줌.
• 디자인 경험이 적으면 피그마(Figma) 같은 툴로 아이디어 구상 후 개발하는 방법이 유용함.

3. 사이클 의존성(Circular Dependency) 이슈와 해결 경험

• 사이클 의존성은 코드 내 모듈이나 컴포넌트가 서로를 참조하면서 무한 루프가 발생하는 문제.
• 예) UI가 util을 사용하고, util이 다시 UI를 참조하는 상황.
• 이는 의도치 않게 라이브러리 내에서 순환 참조를 만드는 경우가 많아 정의에 신중해야 하며, 디버깅하려면 소스맵을 들여다보고 참조 관계를 분석해야 함.
• 해결의 핵심은 의존성의 방향성을 유지하고, 순환 참조를 피하도록 코드 구조를 개선하는 것.
• 사이클 의존성 문제는 실무에서 흔하며, 삽질 경험을 통해 어떻게 처리하는지 배우는 게 중요.

사이클 의존성 (Circular Dependency):
모듈 A가 모듈 B를 참조하고, 다시 B가 A를 재참조하는 현상으로, 프로그램이 제대로 실행 안 되거나 예측 불가한 동작이 발생할 수 있음.

4. UI/UX 디자인 고민과 UI Kit 추천

• 초보 개발자는 디자인 감각 부족으로 버튼, 배경색 등에서 어려움 겪음.
• 디자인은 전문 디자이너의 영역이지만 접근성 측면은 개발자도 신경 써야 함.
• UI Kit 사용 시 일관된 스타일과 접근성 보장이 쉽고, 갑작스런 디자인 수정을 줄일 수 있음.
• 추천 라이브러리: Radix UI (https://www.radix-ui.com/) – 서버렌더링과 접근성에 상대적으로 강점이 있음.
• 디자인 시 피그마 사용법 익히고, UI Kit로 기본을 잡은 후 커스터마이징 권장.

5. React의 Context API 및 useContext 리렌더링 이슈

• useContext를 사용하는 컴포넌트는 Context Provider가 업데이트 될 때마다 리렌더링 됨.
• 리렌더링은 Context를 구독하는 모든 하위 컴포넌트에 발생하며, 이는 React의 기본 동작임.
• 따라서 Context를 사용할 때는 불필요한 리렌더링이 발생하지 않게 상태 분리나 메모이제이션을 적용하는 것이 좋음.
• 부모 컴포넌트와 Context 구독 컴포넌트 모두 리렌더링 될 수 있어 성능 최적화가 필요할 때가 많음.

Context API:
React에서 전역 상태를 쉽게 공유하도록 해주는 도구.
그러나 잘못 사용 시 성능 문제를 일으킬 수 있으므로 적절한 설계가 중요함.

6. 연봉 토론 및 이직, 스타트업 근무 경험

• 신입 개발자 초봉은 3000만 원 전후가 대부분이며, 스타트업은 3000 이하도 많음.
• 3500만 원 이상은 중소기업에서는 드물고, 좋은 조건은 대기업이나 일부 스타트업에서 가능.
• 이직을 통해 연봉 상승을 기대하는 의견 많음.
• 스타트업 복지나 문화에 따라 만족도가 크게 차이나며, 간식시간, 카페 무료 이용 등 특이 복지 사례도 공유됨.
• 정치가 심한 소규모 회사는 스트레스가 크니 리더십 좋은 회사를 찾는 것이 중요.

7. 애자일(Agile) 개발 방법론에 대한 개발자들의 경험담

• 애자일은 고객과 협력하며 계획을 유연하게 바꾸는 개발 방법론이나, 한국에서는 일정 고정에 업무 변경만 잦은 ‘k-애자일’로 불리며 부정적 인식도 존재함.
• 개발자들은 실제 경험에서 팀 운영이나 과도한 업무 압박에 대한 스트레스를 종종 토로함.
• 애자일의 진정한 의미와 구현 방식은 회사마다 다르므로 실제 업무 환경을 잘 파악하는 게 필요함.

8. 번역 API 사용 경험과 추천

• Next.js 환경에서는 next-i18next 같은 i18n 라이브러리가 인기.
• 네이버 파파고, 구글 번역 API 등 다양한 번역 API를 활용 가능하지만, 각각 유료/무료 조건과 편의성이 다름.
• 번역 기능을 서비스에 넣을 경우 API 요금과 번역 품질을 고려해 선택 권장.

9. 도커(Docker) 및 컨테이너 관련 학습 자료 공유

• 도커가 가상화 및 컨테이너 시대에 필수적이라는 의견이 많음.
• 초보자는 개념 이해에 시간이 걸리며, 도커 활용법과 운영 노하우가 중요.
• 노션 링크 등에서 도커, 쿠버네티스, 네트워크 관련 정리된 자료들을 학습하면 효율적임.
• 도커 마이그레이션 작업은 코드 작성보다 복잡하고 피곤할 수 있음.

10. 커뮤니티 활동과 스터디, 코딩테스트 준비

• 알고리즘 스터디 ‘콜럼버스 스터디’ 유료 모집 공고 공유됨.
• 스터디 커리큘럼은 기초 자료구조부터 심화 알고리즘까지 구성되어 있으며, 체계적인 관리와 피드백 제공.
• 코딩테스트 자주 나오던 유형으로는 완전탐색, BFS/DFS, 동적계획법, 그리디, 스택과 큐, 이진탐색, 정렬 등이 많이 언급됨.
• 드립과 다양한 소통으로 커뮤니티 분위기는 자유롭고 활발함.

면접팁⚡

• Context API 리렌더링 문제는 실무에서 자주 마주치는 이슈임.
  → 면접에서 Context의 성능 이슈와 최적화 전략을 묻는 경우가 많으니, 상태 분리, React.memo, useMemo 활용법을 숙지해두기.
• 사이클 의존성 문제 해결방법도 실무 경험 중 하나로, 정리해두면 좋음.
• 작은 스타트업에서 후보자가 겪는 연봉과 복지 현실에 대해 솔직하게 이야기할 준비.
• 애자일 방법론의 장단점에 대한 경험담을 물어볼 수 있으니 본인의 경험이나 생각을 말해보는 것도 긍정적.

링크🔗

• Radix UI (UI Kit 추천) : https://www.radix-ui.com/
• 닉네임 ‘제로초’ 강의 유튜브 예시 : https://www.youtube.com/watch?v=8_X0nSrzrCw
• use() React 훅 관련 영상 : https://youtu.be/zdNF9FJWJ8o?si=LkaMg3iFDyVhCuXH
• 도커 및 컨테이너 관련 노션 정리 :
  • https://www.notion.so/8d1b1ac5b483445d9e02407355e83175?pvs=4
  • https://sponge-palm-382.notion.site/3ced7d5c5b664faa91e2b34264e4495d?pvs=4
• 콜럼버스 알고리즘 스터디 소개 : https://screeching-crawdad-85a.notion.site/Columbus-Study-1-28c50502bf6543e794bb103d293468cf
• 단어 ‘속’ (풀칠) 의미: https://wordrow.kr/%EC%86%8D%EB%8B%B4/%EC%82%AC%ED%9D%98%EC%97%90%ED%95%9C%EB%81%BC%EC%9E%85%EC%97%90%ED%92%80%EC%B9%A0%ED%95%98%EA%B8%B0%EB%8F%84%EC%96%B4%EB%A0%B5%EB%8B%A4-%EB%8A%98%EA%B5%B6%EA%B3%A0%EC%82%B4%EC%A0%95%EB%8F%84%EB%A1%9C%EC%82%B4%EB%A6%BC%EC%9D%B4%EB%A7%A4%EC%9A%B0%EA%B0%80%EB%82%9C%ED%95%A8%EC%9D%84%EB%B9%84%EC%9C%A0%EC%A0%81%EC%9C%BC%EB%A1%9C%EC%9D%B4%EB%A5%B4%EB%8A%94%EB%A7%90./