2023-11-20

목차

1. Superbase, Prisma, Redux Toolkit & RTK Query
2. 경력 작성법과 신입 취업 전략
3. 코드 리뷰와 면접 시 코드 확인 방식
4. 새로운 기술 학습 습관과 고민
5. 상태 관리에서 단발성 이벤트 처리
6. Next.js 서버 컴포넌트 & SSR 이해
7. 연봉, 이직, SI 회사 문화 이야기
8. CSS 단위: px, rem, em 활용법
9. 코딩 테스트 환경과 Node.js 관련 고민
10. React vs Vue, 프레임워크 선택

1. Superbase, Prisma, Redux Toolkit & RTK Query

• Superbase는 빠르게 Backend를 세팅할 수 있는 서비스임.
• Prisma는 데이터베이스 ORM(객체 관계 매핑)도구로, 개발자가 DB를 쉽게 다룰 수 있게 해줌.
• Redux Toolkit(RTK)은 Redux 사용을 간편화한 공식 라이브러리임.
• RTK Query는 Redux Toolkit 위에 올라가는 데이터 fetching 라이브러리로 비동기 데이터 관리를 쉽게 해줌.

초보자 설명:
Redux Toolkit은 전통적인 Redux보다 더 간단하게 상태 관리를 할 수 있게 해준다. RTK Query를 이용하면 API 호출부터 캐싱, 상태 변이까지 손쉽게 처리 가능한데, Redux Toolkit이 프레임워크의 기반 역할을 하며 RTK Query는 그 위에서 데이터를 관리하는 추가 기능임.

2. 경력 작성법과 신입 취업 전략

• 경력 상세 작성 시 한 줄 소개, 기능 구현 내용, 어려웠던 점 및 해결 과정, 사용 스택을 간결하게 적으면 좋음.
• 신입은 경력자가 가진 비즈니스적 성과가 없기에, 기능 구현 과정 및 문제 해결 노력을 자세히 기록해야 어필 가능함.
• 신입 취업이 경력자에 비해 훨씬 어려움.
• 포트폴리오나 깃허브 README에 상세 설명을 덧붙이는 것도 좋은 전략.

3. 코드 리뷰와 면접 시 코드 확인 방식

• 기업마다 코드를 꼼꼼히 보는 경우가 적음. 보통 한두 페이지만 훑음.
• 커밋 내역을 통해 개발 습관과 코드 스타일을 파악함.
• 코드 리뷰는 시간이 많이 소요되므로, 이력서를 통해 1차 스크리닝 후 관심 가는 지원자에 한해 살펴보는 형태임.
• 따라서, 이력서 작성 시 가독성 및 핵심 내용 전달이 매우 중요.

4. 새로운 기술 학습 습관과 고민

• 새로운 개념을 찾아보며 이해하는 데 하루를 쓰는 것은 초기 학습에서 매우 좋은 습관임.
• 실무에서는 급한 일도 있으므로 상황에 맞게 시간을 조절할 필요 있음.
• 익숙하지 않은 기술을 제대로 배우려면 시간이 걸리는 것이 자연스러움.

5. 상태 관리에서 단발성 이벤트 처리

• 전역 상태 관리 스토어는 일반적으로 상태(State) 변이와 액션(Action)을 통해 데이터 흐름을 처리함.
• 단발성 이벤트(예: 좋아요 클릭)가 전역 상태에 영향을 끼친다면 전역 상태로 관리하는 것이 일관된 코드 패턴 유지에 도움이 됨.
• 그렇지 않은 경우는 오히려 전역 상태가 복잡해질 수 있으니 신중히 결정할 것.
• useReducer를 활용해 로컬 상태 이벤트를 관리하는 방법도 있음.
• 용어 공유와 정의가 협업에 있어 중요함. '이벤트'라는 단어도 팀마다 다르게 이해할 수 있어 명확한 합의가 필요.

6. Next.js 서버 컴포넌트 & SSR 이해

• Next.js 13부터 서버 컴포넌트를 지원해 렌더링 시 서버에서 직접 UI를 생성함.
• Streaming SSR을 사용하지 않으면 서버 컴포넌트가 데이터를 다 가져올 때까지 Time To First Byte(TTFB)가 늦어질 수 있음.
• 이는 페이지 초기 로딩 지연의 원인이 될 수 있으니 상황에 맞게 적용 필요.

7. 연봉, 이직, SI 회사 문화 이야기

• 연봉 정보는 데이터 수집 방식에 따라 큰 편차가 존재하며, 적은 표본 수는 신뢰도가 낮음.
• 신입 초년차는 첫 직장의 연봉과 경력이 이후 이직에 영향을 줄 수 있음.
• SI(System Integration) 업계에서는 정해진 계약 범위 내에서 빠르고 정확한 결과물을 내는 사람이 '잘하는 사람'으로 평가됨.
• 사교성, 인맥도 연봉에 영향을 주는 요소임.
• 여러 포지션과 역할을 맡게 될 경우 인수인계가 어렵고 퇴사 시 어려움이 커질 수 있음.
• 이직 사유를 묻는 면접에서 '경영 악화' 같은 이유는 일반적으로 수용됨.
• 퇴사 전에는 인수인계, 증거 확보 등 신중한 준비가 필요함.

8. CSS 단위: px, rem, em 활용법

• px 단위로 작업 후 rem 등의 상대단위로 변환하는 사례가 많음.
• rem은 루트 요소(html)의 폰트 크기를 기준으로 하는 상대 단위로, 반응형 웹 제작에 유리함.
• em은 해당 요소의 상위 폰트 크기에 종속되어 있어 복잡한 구조에서는 유지보수가 어려울 수 있음.
• padding, margin 등 공간에 rem을 사용하는 경우가 많으나, 특정 고정값은 px로 지정하기도 함.

9. 코딩 테스트 환경과 Node.js 관련 고민

• 일부 코테는 프론트엔드 직군임에도 Node.js를 명시하지 않아 혼란을 줌.
• Node.js가 JS 기반이라 언어 능력으로 간주해 사용하는 경우 많음.
• 코테는 개발자의 필터링 목적이 주된 목적이며, 특정 환경에 치우치지 않는 능력 평가가 중요함.
• 회사마다 코테 환경이 달라 미리 확인하거나 유연한 태도가 필요함.

10. React vs Vue, 프레임워크 선택

• 두 프레임워크는 각기 장단점이 있으며, 팀내 환경 및 목적에 맞게 선택하는 것이 중요함.
• React는 자유도가 높으며 생태계와 시장 점유율이 넓음.
• Vue는 사용법이 명확하고 진입장벽이 낮아 초보자나 초심자에게 적합하다는 의견도 있음.
• 프레임워크 선택은 ‘망한다’보다 ‘어떤 용도와 환경인지’가 더 중요함.
• 지속적 관심과 학습이 필요하며, 어느 하나가 절대적 우위는 아님.

면접팁⚡

• 경력 작성 시 간단명료하면서도 “무엇을 했는지”, “어떤 어려움이 있었고 어떻게 해결했는지”를 꼭 적는 게 중요함.
• 코드리뷰는 제한된 시간 내 이뤄지니, 깔끔한 코드 구조와 커밋 히스토리도 신경 써야 함.
• 이직 사유는 너무 솔직하면 면접에서 난처할 수 있으니, “경영 악화”, “업무 방향과 부합하지 않음” 정도로 역할을 잘 포장하면 무난함.
• 코딩 테스트 환경은 사전에 가능한 한 정보를 미리 확보하고 익숙해지는 게 좋음.
• 이력서에 깃허브 링크를 넣으면 코드 뿐 아니라 문서화된 README도 중요해짐.

링크🔗

• How to Write Object Keys and Types in TS (Medium)
• CSS 단위 rem, em 이해와 활용법
• Rem, Em, Px 차이와 CMS 적용 가이드
• React useReducer 공식 문서 예제
• 깃허브 액션에서 SSH 접속 이슈 (참고용)
• 유튜브: Prisma 패키지 만든 천재 개발자 이야기
• 유튜브: Smashing Magazine - Better Context Menus
• 기타 유튜브, 블로그는 대화 내 필요 시 참고 추천