목차
- 아침 루틴과 운동 이야기
- 프론트엔드 CSS 기술 논의 (SCSS, CSS-in-JS, Tailwind 등)
- React Native와 iOS 개발자의 러닝커브 및 기술 전환
- 수익쉐어 프로젝트와 경력 인정 관련
- UI 라이브러리와 도구 활용 (shadcn, MUI, Tanstack Router 등)
- PDF 생성 및 레이아웃 문제
- 상태관리 및 라이브러리 선택 (lodash, es-toolkit, xState 등)
- 클로저(Closure) 개념과 커스텀 훅 질문
- 테일윈드 CSS에 대한 찬반 토론
- 기타 개발 관련 Q&A 및 링크
1. 아침 루틴과 운동 이야기
- 아침 운동이나 일어나서 활동하는 것에 대한 소소한 이야기
- 운동 목적이 다이어트가 아닌 취미인 경우가 많음
- 새벽운동, 아침식사 메뉴(김밥, 칼국수 등) 이야기
- 서로 칼국수 먹으러 가자는 의견 교환 (날씨와 연관)
2. 프론트엔드 CSS 기술 논의 (SCSS, CSS-in-JS, Tailwind 등)
- SCSS 사용 빈도가 낮아지고 CSS-in-JS가 각광받는 추세
- SCSS는 레거시 코드 관리시 배워야 하는 경우가 있음
- CSS-in-JS는 자바스크립트 내 스타일 정의 방식으로 컴포넌트 단위 스타일 관리에 적합
- Tailwind CSS는 유틸리티 퍼스트 방식의 CSS 프레임워크, 클래스 이름이 많아 가독성이 떨어지거나 유지보수가 어렵다는 의견도 존재
- Tailwind CSS의 장점은 빠른 스타일링과 높은 생산성, 단점은 지나치게 많은 클래스명으로 코드가 복잡해 보일 수 있음
- shadcn UI: 소스코드를 바로 활용 가능해 커스텀에 유리, MUI처럼 패키지 설치가 복잡하지 않음
- Tanstack Router: 타입세이프(타입스크립트와 잘 어울리는) 라우터 구현을 제공하지만 설정과 유지에 부담이 있을 수 있음
3. React Native와 iOS 개발자의 러닝커브 및 기술 전환
- iOS 2.5년 경력 개발자가 React Native + TypeScript 학습 고민 중
- React Native 러닝커브가 생각보다 길지만, iOS 경험이 있으면 앱 개발 이해도가 높아 도움이 됨
- SwiftUI 경험이 React Hooks, React Navigation, 글로벌 상태관리, StyleSheet 이해에 긍정적 영향
- Expo를 이용해 빠르게 React Native 앱 개발 시작 가능
- Flutter도 평가 대상이나, React Native가 상대적으로 채용 시장에서 더 활발히 활용 중
- JavaScript 기반이라 서버개발까지 확장 가능한 장점 언급됨
4. 수익쉐어 프로젝트와 경력 인정 관련
- 수익쉐어 형태 프로젝트 참여 제안에 대한 고민
- 경력 인정 여부는 회사 및 사람마다 차이 있지만, 네이티브 경력은 보통 인정받음
- React Native 경력은 프로젝트를 만들어 스토어에 공개하면 경력으로 증명 가능
- 자바스크립트 관련 기술 스택을 배우면 개인 앱 출시 등의 목표 달성에 유리
5. UI 라이브러리와 도구 활용 (shadcn, MUI, Tanstack Router 등)
- shadcn은 컴포넌트 소스를 직접 커스터마이징할 수 있어 선호됨
- MUI는 설치와 커스텀 복잡성이 단점
- Tanstack Router는 타입세이프를 중시함, 코드 생성(gen 파일) 방식은 호불호가 있음
- 백오피스 개발부터 도입하는 경우가 많으며, 서비스 단계로 확장 검토 중
- 스타일링 도구는 프로젝트 규모와 성격에 따라 적절한 선택 요구됨
6. PDF 생성 및 레이아웃 문제
- React 훅을 이용해 html2canvas, jsPDF로 PDF 생성 시 텍스트가 원래 위치보다 아래로 내려가는 문제 발생
- 원인 파악이 어렵고 텍스트 위치 조정에서 버그가 있음
- PDF 생성할 때 휴먼 폰트 로딩, DPI 설정, 페이지 사이즈, 이미지 삽입 방식 등 다양한 요인이 문제에 영향
- 해결 팁: 캔버스 스케일과 HTML 요소 스타일을 꼼꼼히 검사하고 레이아웃 조정 필요
7. 상태관리 및 라이브러리 선택 (lodash, es-toolkit, xState 등)
- lodash 대신 토스에서 만든 es-toolkit 같은 가벼운 유틸리티 사용 권장
- 사내 라이브러리 직접 제작 시 관리와 유지보수 리스크 존재
- xState는 상태 머신 개념으로 멀티 스텝 폼 등 복잡한 상태를 관리하는 데 효과적
- xState에 대한 경험과 만족도 교환, 구조적 관리의 필요성 강조됨
- 검색 및 조작이 복잡한 경우 Context API 및 query string 상태관리 단점 토론
8. 클로저(Closure) 개념과 커스텀 훅 질문
- 클로저란 내부 함수가 외부 렉시컬 환경(변수 등)을 기억하는 개념
- 자바스크립트뿐 아니라 다양한 언어에서 사용됨
- 커스텀 훅은 리액트 함수형 컴포넌트에서 재사용 가능한 로직을 캡슐화하는 함수 형태
- 클로저 개념과 결합돼 내부 상태와 인자 등을 유지하는 경우가 많음
- 초보자를 위한 MDN 등 문서 링크와 설명 제공됨
9. 테일윈드 CSS에 대한 찬반 토론
- 테일윈드 CSS를 좋아하는 개발자와 싫어하는 개발자 극명하게 나뉨
- 찬성 의견: 빠르고 생산적이며, 작은 프로젝트나 단기 과제에 적합
- 반대 의견: 유지보수시 가독성 저하, 코드 복잡성, 클래스명이 지나치게 많아 관리 어려움
- 대규모 B2C 프로젝트에서 일부 강제 도입시 고충 발생 사례 공유
- 팀이나 회사 환경, 프로젝트 규모에 맞는 적절한 도구 선택 중요성 언급
- ‘애증’의 관계라는 표현도 등장하며, 경험 기반 의견 교환 활발
10. 기타 개발 관련 Q&A 및 링크
- 로그인 세션 관리 방법: 쿠키, 세션 스토리지 외에 recoil(상태관리 라이브러리) 과거 아카이브됨
- React 좌우 드래그 스크롤 라이브러리 추천 요청 (react-indiana-drag-scroll 제안)
- jsPDF, html2canvas 사용 시 고해상도 PDF 제작법 등의 실무 노하우
- 당근 인턴십 설명회 정보 및 신청 링크 공유
- 인기 개발용 코딩 폰트 정보 공유 (D2Coding, IBM Flex Mono, Plex, 양재와당체 등)
면접팁⚡
- iOS 개발자가 React Native, TypeScript 등으로 전향할 때, 본인의 네이티브 경력과 앱 개발 경험을 적극 어필할 것
- 클로저 개념은 자바스크립트 코딩 면접에서 자주 나오는 주제, 함수 내 함수가 외부 변수를 기억하는 작동 원리를 숙지할 것
- 상태관리 라이브러리 선택과 각 라이브러리의 장단점을 이해하고 왜 선택하거나 배제하는지 명확한 의견을 준비할 것
- 타입세이프 라우터, UI 컴포넌트 라이브러리 사용 경험을 자신의 프로젝트에 어떻게 적용했는지 구체적으로 말할 준비
- PDF 생성, 파일 다운로드, DOM에서 이미지 캡처 기술에 대한 기본 지식과 문제 해결 경험을 공유하면 긍정 평가
링크🔗
- 당근 WinterTech Internship 온라인 설명회: https://forms.gle/wJTXrJb6g2QU26rr5
- MDN 클로저(Closure) 문서: https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures#클로저closure
- React-indiana-drag-scroll (좌우 드래그 스크롤 라이브러리): https://www.npmjs.com/package/react-indiana-drag-scroll
- 코딩 폰트 모음: https://www.codingfont.com/
- Recoil GitHub (아카이브됨 참고용): https://github.com/facebookexperimental/Recoil
- 토스 es-toolkit (lodash 대체 가능 유틸리티): https://github.com/toss/eskit
#ReactNative#TailwindCSS#CSSinJS#React#JavaScript#iOS개발#PDF생성#상태관리#개발자커뮤니티