목차
- 모달내 모달 및 안드로이드 백버튼 이슈
- 환경부 일회용품 규제 완화 토론
- 프리즈마 ORM과 관계 설정
- 연봉과 이직, 경력 관리 이야기
- 혼자 FE/BE 개발 경험 공유
- Next.js 13 App Directory와 쿼리 파라미터 처리
- 면접 및 취업 준비 팁, 과제 대응
- React Error Boundary와 클래스 컴포넌트
- 메모리 누수와 성능 문제 원인
- 기타 다양한 개발 잡담 및 AI 활용 토론
1. 모달내 모달 & 안드로이드 백버튼 대응
- 웹뷰 앱에서 모달(팝업 창)을 여러 겹으로 띄울 때 뒤로가기(Back) 버튼으로 순차적으로 닫는 기능 구현이 까다로웠음.
- 기본 모달 1개는 쉽게 처리되나, 모달 안에 또 다른 모달이 뜨면 백버튼 행동 로직을 꼼꼼히 처리해야 함.
- 안드로이드 백버튼이란? 모바일 환경에서 ‘뒤로가기’키로 현재 화면을 닫거나 이전 상태로 돌아가도록 하는 기능으로, 웹뷰 내 여러 모달이 있을 때 적절히 각 단계의 모달을 닫아야 사용자 경험이 좋음.
2. 환경부 일회용품 규제 완화 토론
- 플라스틱 빨대 규제가 완화되어 종이 빨대 대신 플라스틱 빨대를 다시 허용한다는 소식에 대해 의견 나눔.
- 종이 빨대는 가격도 비싸고 세척도 어려움. 플라스틱 빨대는 재활용 가치가 거의 없어 일반쓰레기 처리.
- 환경문제의 핵심은 플라스틱이 자연분해되지 않아 지속적인 환경오염을 유발한다는 점임.
- 미세플라스틱 이슈도 심각하며 몸속, 태아에도 영향을 준다고 알려짐.
- 결국 재활용보다 플라스틱 소비량을 줄이는 게 중요함.
3. 프리즈마(Prisma) ORM과 관계 설정
- Prisma는 TypeScript 기반 ORM으로, 데이터베이스와 코드 간 매핑을 쉽게 해줌.
- 테이블 간 조인(join) 시 외래키(FK)가 필수이며, FK가 없으면 ORM 레벨에서 자동 조인이 제한적임.
- 필요 시 생(원시) 쿼리(raw query)를 사용할 수 있지만, ORM 사용 취지에 맞게 최소화하는 게 좋음.
- ‘include’ 기능을 통해 관계된 데이터 로드를 가능하게 함.
- Prisma 공식문서를 참고하며 관계 설정을 꼼꼼히 확인하는 게 중요함.
4. 연봉, 이직, 경력 관리 이야기
- 프론트엔드(FE)와 백엔드(BE) 개발자의 연봉 차이는 보통 BE가 조금 더 높음.
- 경력(년차)이 아닌 ‘역할과 레벨’, ‘업무 성과’에 따라 연봉이 결정되는 추세임.
- 어려운 기술을 다루고 매니지먼트(관리자 역할)를 맡으면 연봉이 더 올라감.
- 미국은 채용 시 ‘이전 연봉’을 묻는 게 불법이며, 회사 내부 연봉 밴드에 맞춰 공개적으로 결정함.
- 신입부터 시니어까지 실력과 역할에 따라 급여가 다름.
- 최근에는 ‘쉬운 해고’가 필요하다는 의견과 그에 따른 리스크도 논의됨.
- 회사 문화와 개인 마인드셋이 이직 및 연봉 협상에 큰 영향을 끼침.
5. 혼자서 FE/BE 개발 경험 공유
- 혼자 프론트엔드 또는 풀스택(FE+BE) 개발을 하는 경험담 공유.
- 장점: 서비스 기획부터 배포까지 경험을 쌓을 수 있고 빠른 성장 가능.
- 단점: 업무량 과중, 외부에서 피드백이나 도움받기 힘듦, 비효율적으로 일할 수 있음.
- 개발이 익숙하고 목표가 명확하면 혼자서도 충분히 가능함.
- 어려움이 많으면 AI나 구글링 등 도구 활용 권장.
6. Next.js 13 App Directory와 쿼리 파라미터 처리
- Next.js 13부터 app 디렉터리 내에서 Props 기반 서버 컴포넌트 사용이 일반적임.
- 서버 컴포넌트에서는 직접 useRouter 훅 사용이나 클라이언트 API 접근이 불가.
- 쿼리 파라미터는 서버 컴포넌트 진입점 props로 전달하거나, 클라이언트 컴포넌트에서 useSearchParams로 가져와 서버 컴포넌트에 전달하는 방식을 권장.
- next/headers API를 이용하면 요청 헤더를 가져올 수 있으나, 라우트 최적화에 영향이 있을 수도 있음.
- 실제 환경에 맞는 구현 방식 선택과 문서 참고가 중요함.
7. 면접 및 취업 준비 팁, 과제 대응
- 면접 준비 시, 지원 회사 서비스에 대해 관심을 가지고 의견을 제시하는 것은 긍정적임.
- 회사 서비스 문제점을 지적할 때는 부드럽고 협조적인 태도를 유지하는 게 좋음.
- 코딩테스트 과제는 설계, 구현, 테스트까지 전 과정을 소화할 수 있어야 하며, 과제가 너무 자유롭거나 기간이 긴 경우 관리가 어려움.
- 회사별, 팀별 코딩테스트 난이도와 기간이 다르니 사전 파악 필요.
- 신입이라도 충분히 좋은 회사에 도전 가능하며, 꾸준한 자기 관리와 성장이 중요함.
- 온라인 멘토링이나 커뮤니티 참여도 큰 도움 됨.
8. React Error Boundary와 클래스 컴포넌트
- React의 에러 바운더리(Error Boundary)는 컴포넌트에서 발생하는 자바스크립트 에러를 잡아내 UI 붕괴를 방지함.
- 에러 바운더리는 클래스 컴포넌트로만 구현할 수 있음(함수형 컴포넌트 내에서는 구현 불가).
- react-error-boundary 같은 라이브러리를 활용하면 에러 바운더리 구현이 쉬워짐.
- Next.js에서는 훅 기반의 최신 컴포넌트가 주류지만, 에러 바운더리 목적에 클래스 컴포넌트는 여전히 필요함.
- 상태관리 훅(useRouter 등)과 함께 쓰려면 클래스와 함수형 컴포넌트를 적절히 조합해야 함.
9. 메모리 누수와 성능 문제
- 메모리 누수(memory leak)는 프로그램이 더 이상 필요하지 않은 메모리를 해제하지 않아 점점 메모리가 부족해지는 현상.
- 이는 CPU 점유율 증가와 애플리케이션 느려짐, 심하면 크래시(비정상 종료)로 이어질 수 있음.
- 메모리 누수를 막으려면 이벤트 리스너 제거, 사용하지 않는 참조 해제 등 클린업이 필요함.
- React에서 직접 DOM 접근 시에도 주의해야 하며 불필요한 렌더링과 상태관리에 신경 써야 함.
- 성능이 느려질 때 메모리 상태 점검과 프로파일링 도구 활용 권장.
10. 기타 개발잡담 및 AI 활용
- AI 도구(GPT 등)를 업무에 활용하는 비중이 늘고 있음.
- 무료/유료 서비스의 서버 상태와 안정성 차이를 경험하며, 필요 시 GPT 외 리튬(뤼튼?) 같은 대체 서비스도 추천받음.
- 개발 커뮤니티 내에서 정기적인 만남이나 멘토링 요구도 있었음.
- 다양한 개발자들이 리액트, Next.js, 타입스크립트, ORM, 테스트 라이브러리 등 최신 기술과 트렌드에 대해 의견 교류함.
- 질의응답 형태로 실무 관련 문제들이 활발히 오갔으며, 개발자 입장에서 실무 팁과 고민 공유가 주요 주제였음.
면접팁⚡
- 회사 서비스에 관심을 갖고 질의하거나 피드백하는 태도는 긍정적으로 인식될 수 있음.
- 부정적 지적보다는 개선 제안이나 궁금증 표현에 집중하자.
- 코딩 테스트 과제 분량이 과도하면 솔직히 진행가능성에 대해 조율하거나 범위를 문의해보는 것도 방법.
- 좋은 회사는 지원자의 공부 의지와 성장을 높이 평가하니 ‘잘 모르더라도 배우고 싶다’는 태도를 보여주자.
- 면접관과 평소 평가 점수(잡플래닛 등)는 참고용이며 직접 경험과 회사 문화가 더 중요함.
- 이직 시 전 회사에 대한 너무 부정적인 언급은 금물. 애사심 표현과 함께 본인의 성장 욕구 중심으로 대화 전개.
링크🔗
#React#Nextjs#FrontEnd#BackEnd#ORM#프리즈마#면접팁#연봉#개발자커뮤니티#테스팅