2024-03-06

목차

1. 개발자의 직업 선택과 미래 고민
2. 리액트 개발에서 코드 중복 감소 방법
3. GitHub Copilot 사용 경험과 회사 정책
4. SSL 인증서 발급 문제와 nginx 설정 팁
5. 바이너리 데이터 다운로드와 처리 방법
6. API 통신 문제 및 네트워크 캐싱 이슈
7. Electron + Vite 개발환경에서 포트 변경 및 실행 문제
8. 안티디자인(antd) DatePicker 한글화 및 포맷 문제
9. SOLID 원칙과 개발 생산성에 대한 의견
10. 신입 개발자 취업 트렌드와 필수 스킬 관련 조언

1. 개발자의 직업 선택과 미래 고민

• 개발 직업을 정년까지 유지할 수 있을지에 대한 고민이 깊음.
• 20대는 개발자로 도전하는 경향이 많고, 30대 이상은 경제적 안정과 생계 유지를 우선시함.
• 안정성을 고려하지 않고 당장 선택하라는 질문에 대부분 빠른 결정을 하는 것이 낭비를 줄이는 길로 봄.
• 개발자로서 평생 먹고살기 어렵다면 변화하거나 공기업 등 다른 직업 선택도 고민해야 함.
• 인생에서 머뭇거림은 시간을 낭비하는 것과 같다는 의견이 많음.

2. 리액트 개발에서 코드 중복 감소 방법

• react-query의 useMutation을 사용할 때 대부분 CRUD 작업이 비슷한 패턴을 가짐.
• 이런 경우 코드 중복을 줄이기 위해 커스텀 훅(custom hook)이나 추상화를 고려하는 것이 효과적.
• 반복되는 성공/에러 콜백 패턴을 재사용 가능한 함수로 분리하여 코드 가독성 향상 가능.

3. GitHub Copilot 사용 경험과 회사 정책

• 개인 계정으로 GitHub Copilot을 결제해 사용하는 경우가 많음.
• 회사에서는 보안 문제로 GitHub Copilot 사용 금지인 경우가 있음.
• Copilot 추천 코드의 일부가 무분별하게 수집되는 이슈로 인해, 새로운 코드나 모르는 코드는 무시하며 사용하기도 함.
• 보안 및 결제 프로필 관리 문제로 개인 계정과 회사 계정을 나누는 것에 큰 필요성을 느끼지 않는 의견.

4. SSL 인증서 발급 문제와 nginx 설정 팁

• Certbot으로 SSL 인증서를 발급할 때 Apache 또는 nginx 인증 실패 메시지(unauthorized) 발생.
• "Domain: 도메인 Type: unauthorized" 오류는 인증기관이 서버에 접근 혹은 임시 구성 변경을 검증하지 못했기 때문.
• 해결 방안:
  • 도메인이 실제 서버 IP를 가리키는지 확인
  • 서버가 외부에서 접속 가능하도록 방화벽 설정 확인
  • 웹서버(Apache/nginx) 설정이 Certbot이 요구하는 임시 파일 접근을 허용하는지 점검
• Let’s Encrypt 공식 포럼(https://community.letsencrypt.org/)에서 추가 도움 가능.

5. 바이너리 데이터 다운로드와 처리 방법

• S3에서 바이너리 데이터를 요청(다운로드) 시 깨지는 문제 발생 가능성 있음.
• 해결 방법:
  • HTTP 요청 시 responseType으로 'blob'이나 'arraybuffer' 지정해 바이너리를 올바르게 처리.
  • 받아온 데이터를 Blob으로 변환 후 File 객체로 변환하여 사용 가능.
  • Postman 등으로 응답 결과 확인해 실제 데이터가 정상인지 검증 권장.
• CDN 사용 시 라우팅 문제를 해결할 수도 있음.

6. API 통신 문제 및 네트워크 캐싱 이슈

• 크롬 개발자 도구 네트워크 탭에 API 호출이 간헐적으로 나타나지 않는 문제 발생.
• 캐싱 문제일 가능성 있지만, 네트워크 탭에 요청 자체가 뜨지 않는 경우 캐시와는 별개일 수 있음.
• 원인 파악 팁:
  • 코드상 API 호출 여부 재확인
  • 요청 조건이나 환경 변수 등 코드 변화를 꼼꼼하게 체크
  • 헤더, 쿠키 등 요청 차단 요소 확인.

7. Electron + Vite 개발환경에서 포트 변경 및 실행 문제

• Electron과 Vite 연동 시 포트 번호 변경 방법: vite.config.js 파일 내 server.port 옵션 수정.
• Electron 프로젝트에서 Vite는 보통 electron.vite.config.ts 같은 별도 설정 파일을 사용함.
• yarn dev:web 명령어 실행 시 포트는 열리지만 페이지가 없다고 나오는 문제 있음.
• Electron과 웹 서버를 동시에 띄우는 스크립트 작성 시 concurrently 라이브러리 활용 가능.
• 상황별 설정 로직이나 환경변수 적용 상태 확인 필요.

8. 안티디자인(antd) DatePicker 한글화 및 포맷 문제

• antd DatePicker에서 한글화(ConfigProvider + ko_KR) 적용 시 초기 버전과 달리 날짜 삭제가 안 되는 현상 등장.
• antd 공식 문서 권장 dayjs로 locale 변경하였으나 일부 제한 발생.
• moment.js는 상당히 오래된(deprecated) 라이브러리이나 여전히 많이 쓰임.
• 해결 팁: cellDateFormat이나 dayFormat 강제로 지정해 포맷 문제 조정.
• 버전 차이나 설정 방법에 따라 동작 차이 있으니 공식 문서 및 커뮤니티 참고 필수.

9. SOLID 원칙과 개발 생산성에 대한 의견

• SOLID 원칙은 객체지향 설계에서 코드 유지보수성과 확장성을 위한 기본 원칙 모음임.
• React에 엄격히 적용하기 어려운 점이 있고, 처음부터 완벽하게 하면 개발 생산성이 떨어질 수 있음.
• 실무에서는 적당히 모듈화하며 점진적으로 적용하는 방식이 현실적임.
• 경험과 리팩토링을 통해 자연스럽게 원칙을 지키게 되는 측면도 있음.
• 신입 개발자의 경우 초반에는 생산성 위주 개발, 점차 원칙 적용 연습 권장.

10. 신입 개발자 취업 트렌드와 필수 스킬 관련 조언

• 타입스크립트 없이는 최근 채용 공고에서 떨어질 가능성이 크다는 의견.
• 신입 개발자의 경우도 타스(타입스크립트) 학습은 필수적인 준비 사항.
• 채용 면접에서 중요한 것은 해당 기술 경험 여부보다 기본기가 탄탄하고 빠르게 배우려는 태도임.
• 다양한 프레임워크 경험 요구가 증가 추세지만, 빠른 적응력이 더 중시됨.
• 과거와 달리 현재 취업 경쟁이 심화되어 특정 기술에 대한 요구가 높아짐.
• 실전 면접은 기술 외에 문제 해결 능력과 팀 적응력 등도 평가함.

면접팁⚡

• 직업 선택 부분:
  자신의 나이, 경제적 상황, 인생 목표를 명확히 정리하고, 안정성뿐만 아니라 성장 가능성도 고려해 선택하라.
  머뭇거림이 경력 낭비가 될 수 있음을 명심.

• 기술 스택과 면접 준비 팁:
  기술 스택이 빠르게 변하는 만큼 한 가지에 치중하기보다는 기본 원리 이해와 빠른 학습능력을 강조하자.
  SOLID 원칙을 면접에서 질문받을 수 있으니, 개념과 현실적인 적용 방법도 준비할 것.

• API 및 기술 문제 해결:
  로그와 에러 메시지 분석 능력을 보여주는 것이 중요하다.
  인증서 문제, 네트워크 문제는 공식 문서와 커뮤니티 활용 경험 어필 가능.

링크🔗

• Let’s Encrypt 커뮤니티: https://community.letsencrypt.org/t/cleaning-up-challenges-some-challenges-have-failed-ask-for-help-or-search-for-solutions-at-https-community-letsencrypt-org-see-the-logfile-var-log-letsencrypt-letsencrypt-log-or-re-run-certbot-with-v-for-more-details/184869
• iOS 100vh 문제 해결 - INJE BLOG: https://injeblog.tistory.com/110
• 모바일 브라우저 100vh 버그 대응 - Velog: https://velog.io/@edie_ko/Tip-%EB%AA%A8%EB%B0%94%EC%9D%BC-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-100vh-%EC%A0%81%EC%9A%A9-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0-iosandroid
• KISS, YAGNI, DRY 원칙 정리: https://velog.io/@wngud4950/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4-%EA%B0%9C%EB%B0%9C-3%EB%8C%80-%EC%9B%90%EC%B9%99-KISS-YAGNI-DRY