2023-10-15

목차

1. 퇴사 고민과 재취업 사이의 선택
2. React에서 다중 파일 업로드 문제 해결 팁
3. React Suspense 상태 관리와 로딩 처리
4. 퍼블리셔와 프론트엔드 개발자 협업 현실과 팁
5. React UI 라이브러리 비교 및 실무 사용 경험
6. JWPlayer 안드로이드 모듈 빌드 오류 사례
7. NaN(숫자가 아님)의 특성과 JS에서의 비교 이슈
8. CSS 관리 방법과 개인 프로젝트 스타일링 조언
9. 개발자 자기소개서 작성 고민과 응원
10. 커뮤니티 문화와 개발자 소소한 이야기

1. 퇴사 고민과 재취업 사이의 선택 🎯

• 퇴사 전 마지막 날까지 고민하는 개발자 이야기.
• 회사에서 배우는 게 없고, 외주 개발자처럼 상주하는 상황에 대한 불만.
• ‘스테이(STAY)’ 하라는 의견과 ‘적당히 버티면서 이직을 준비하라’는 조언이 공존.
• 회사에서 반복 업무에 지루함을 느끼면 개인 공부를 선택할 수도 있음.
• 시간과 워라밸 희생 조건 하에 이직 준비 가능.
• 사회가 ‘참을성 없는 인간’으로 인식할까 봐 걱정하는 심리도 공감.
• 퇴사 일자 목표 날짜 설정, 기간 관리 사이트 활용 추천.

설명

퇴사와 이직 사이 고민은 많은 개발자가 겪는 문제임. ‘사회적 이미지’나 ‘개인의 성장’ 사이에서 균형을 찾기 어려움. 시간을 정해두고 단계적으로 준비하는 것이 심리적 안정과 체계적인 준비로 이어짐.

2. React에서 다중 파일 업로드 문제 해결 팁 📁

• input type=file 을 여러 개 사용하는 경우 첫 번째 파일만 저장되는 문제.
• FormData.append를 여러 파일에 대해 반복해서 호출해도 파일이 하나만 첨부되는 이슈 발생.
• 개발자 도구 네트워크 탭에서 멀티파트(payload) 확인 필수.
• FormData 내부를 확인하려면 Object.fromEntries(formData) 시도, 일부 브라우저/환경에서 undefined일 수 있음.
• 파일 input 요소의 id나 file array 접근 후 적절히 FormData에 추가했는지 점검 필요.
• 파일 업로드 시 동일 키 이름('files')를 여러 번 append하면 멀티파트 형식에서 여러 파일로 처리됨.
• 브레이킹 포인트 사용, 디버거 활용해 한줄씩 상태 점검 권장.

초보자 설명

FormData는 폼 데이터를 서버에 전송할 때 쓰는 객체.
여러 파일을 올릴 때는 formData.append('파일 인풋명', 파일객체)를 파일마다 호출해야 한다.
네트워크 탭에서 실제 전송되는 데이터를 확인하며 문제점을 찾는 것이 핵심.

3. React Suspense 상태 관리와 로딩 처리 ⏳

• Suspense 사용시 로딩 상태를 감지하는 방법이 제한적.
• 가장 쉬운 방법은 Suspense 외부에서 로딩 상태를 별도로 관리하는 것.
• AsyncBoundary 컴포넌트에 onLoad 프로퍼티를 추가해 로딩 완료 신호를 전달하는 설계 제안.
• Suspense 내부 promise 상태를 직접 추적하기 어려우므로 useEffect 활용 권장.

설명

Suspense는 React에서 비동기 작업 로딩을 UI로 처리할 때 사용.
하지만 내부 상태를 알기 어려워 로딩 상태 감지를 위해선 커스텀 로직이 필요함.

4. 퍼블리셔와 프론트엔드 개발자 협업 현실과 팁 🔧

• 퍼블리셔가 기본 HTML/CSS 컴포넌트를 작성해주면 프론트개발자는 로직을 붙임.
• 컴포넌트 단위 설계 차이로 이중작업 상황 발생 가능.
• CSS-in-JS 사용 시 스타일 범위를 컴포넌트별로 나누기 용이.
• 웹 접근성(시각장애인 등 배려) 고려 안 된 퍼블뉘 있어 프론트가 추가 작업해야 하는 문제 존재.
• 업무 효율을 위해 퍼블과 프론트가 컴포넌트 단위 협의 필수.
• "퍼블리셔가 css, 레이아웃, 애니메이션 신경 쓰고, 개발자는 로직에 집중"하는 역할 분담 바람직.

추가 설명

퍼블리셔는 디자인을 HTML/CSS로 구현하고, 프론트엔드는 그 위에 JavaScript 로직을 구현.
컴포넌트 단위 차이가 있다면 미리 맞춰 협업하는 것이 중복 개발을 막는 방법.

5. React UI 라이브러리 비교와 사용 경험 🎨

• 많이 쓰이는 UI 라이브러리로는 Material UI, React Bootstrap, Chakra UI, Headless UI, Radix UI 등이 있음.
• Tailwind CSS는 유틸리티 클래스 기반으로 매우 인기 있지만, UI 컴포넌트 라이브러리와는 다름.
• Headless UI는 UI 구성 요소의 구조와 접근성만 제공, 스타일링 및 애니메이션 직접 구현 필요.
• Material UI는 방대한 컴포넌트와 기능을 제공하지만 학습 곡선이 있음.
• 조직마다 선호도가 다르며, 프로젝트에 따라 맞는 라이브러리 선택 권장.
• 대부분 라이브러리가 ARIA 속성 같은 웹 접근성 지원 포함.

초보자 필수 지식

• UI 라이브러리는 재사용 가능한 버튼, 모달, 드롭다운 등을 빠르게 만들도록 도와줌.
• 선택 시 프로젝트 요구사항과 팀 경험을 고려하는 게 좋음.

6. JWPlayer 안드로이드 모듈 빌드 오류 사례 ⚠️

• Gradle 빌드 시 Could not find com.jwplayer:jwplayer-core:4.13.0 등 의존성 모듈을 찾지 못하는 오류 발생.
• Maven 중앙 저장소 및 기타 리포지토리에 라이브러리 없음.
• 해결법으로는 저장소 설정 확인, 라이브러리 버전 호환성 체크, JitPack 또는 별도 배포처 확인 필요.
• 빌드 실패 로그에는 Gradle 옵션으로 --stacktrace, --info 활용해 자세한 정보 얻기 권장.

7. NaN(숫자가 아님)의 특성과 JS에서 비교 이슈 🧮

• NaN은 "Not a Number"지만 JavaScript에서 typeof NaN은 'number'임.
• NaN과 NaN을 직접 비교하면 false.
• Array.prototype.includes는 NaN을 예외적으로 같은 값으로 처리.
• NaN은 IEEE 754 표준에 따라 정의되는 부동소수점 특수 값임.

초보자용 간단 설명

NaN은 계산 오류나 정의되지 않은 숫자 결과를 의미함.
JS에서 NaN 값을 확인하려면 Number.isNaN() 함수를 쓰는 게 정확.

8. CSS 관리와 개인 프로젝트 스타일링 조언 ✏️

• CSS-in-JS 방식(styled-components, vanilla-extract 등) 선호도 상승.
• 개인 프로젝트나 협업 시 유지보수성과 재사용성 고려.
• 블로그나 문서에 꾸준히 스타일링 관련 글 작성하면 개발자로서 자신만의 색깔 확립 가능.

9. 개발자 자기소개서 작성 고민과 응원 📄

• 취준 시 자기소개서 어려움 및 작성 팁 공유.
• 주변 동료들이 대신 작성해주고 퇴근 후에도 응원 메시지 전달.
• 자소서 작성은 솔직하고 자신만의 이야기를 담는 것이 중요하다는 조언.
• 요즘 경력 제한 없이 지원 가능한 공고들도 늘고 있어 도전 권장.

10. 커뮤니티 문화와 개발자 소소한 이야기 ☕

• 유기견 봉사, 동영상 공유 등 개발자들의 일상 소식 나눔.
• 명언, 웃음, 간식 이야기 등 다채로운 대화로 서로 위로와 격려.
• 블로그 기록과 면접 준비의 중요성 재확인 ("블로그가 면접 가산점으로 작용").
• 라이브러리별 단어 유행, 재미있는 별명 및 개발자 별칭 공유.

면접팁⚡

• 꾸준한 블로그 관리는 면접 시 긍정적인 인상을 준다.
• 자신의 프로젝트 경험과 해결한 문제를 기록해두면 면접 질문에 자신감 있게 대답 가능.
• UI 라이브러리 별 특성과 장단점을 숙지해두면 프론트엔드 면접에서 유용함.
• 파일 업로드, 비동기 처리 등 자주 쓰이는 기술 문제에 대한 이해를 확실히 해두자.

링크🔗

• 다중 파일 업로드 디버깅 가이드: https://mainia.tistory.com/m/2801
• React Suspense 공식 문서: https://reactjs.org/docs/concurrent-mode-suspense.html
• JWPlayer Gradle 오류 도움말: https://help.gradle.org/
• 다양한 UI 라이브러리
  • Material UI: https://mui.com/
  • React Bootstrap: https://react-bootstrap.netlify.app/
  • Headless UI: https://headlessui.com/
  • Radix UI: https://www.radix-ui.com/
  • Tailwind CSS: https://tailwindcss.com/
  • vanilla-extract (타입스크립트 기반 CSS 전처리기): https://vanilla-extract.style/documentation/getting-started/
• NaN 관련 정보: https://ko.wikipedia.org/wiki/IEEE_754
• 개발자 자기소개서 작성 참고: https://dontasktoask.com/ko/