2024-02-05

목차

1. 출근 및 근무 환경 이야기
2. HTML, CSS 학습 및 강좌 공유
3. 면접과 취업 이야기
4. 재택근무와 주말근무 이슈
5. 키보드와 주변기기 토크
6. yarn berry와 PnP 이슈 설명
7. React-router-dom과 SPA 라우팅 문제
8. 개발 환경 고민과 PC 견적 팁
9. GPT 챗봇과 AI 활용 이야기
10. 프로그래밍/코딩 입문자의 학습 팁

1. 출근 및 근무 환경 이야기

• 주말에도 일하고 출근하는 개발자들 근황.
• 회사마다 다르지만 주말 재택근무 처리에 대한 눈치 문화 존재.
• 8시부터 5시까지 고정 출근하는 회사도 있으나, 유연근무제를 활용하는 곳도 있음.
• 화상 면접 떨린다는 경험 공유, 면접 잘 되길 응원하는 분위기.

2. HTML, CSS 학습 및 강좌 공유

• 초보자가 HTML/CSS 공부할 때, 기본적인 태그와 CSS 속성을 직접 알고 작성하는 경우 많음.
• TailwindCSS가 편리하고 융통성 좋은 CSS 프레임워크로 자주 추천됨.
• 부트스트랩, MUI 같은 UI 라이브러리는 융통성은 떨어지나 가볍게 시작 가능.
• web.dev HTML / web.dev CSS 강좌 추천.

3. 면접과 취업 이야기

• 프론트엔드 개발자 면접 중 2차 면접 진출 어려움 언급, 다른 역량까지 물어보는 경우 많음.
• 면접 결과 확인은 보통 몇일 내 연락 안 오면 탈락 사례 많아 포기하지 않고 계속 지원 강조.
• TypeScript 학습은 공식문서와 책 병행 추천. Java, C 경험 있으면 익히기 수월하다는 의견도 있으나 개인차 존재.
• 면접에서 프로젝트 경험과 코드 리팩토링 경험을 상세히 말할 준비 필요.

4. 재택근무와 주말근무 이슈

• 주말 재택근무 인정 여부는 회사 문화에 따라 천차만별.
• 정식 승인이 있어야 하며, 주로 눈치 보이거나 정규 출근 원칙 지켜지는 곳이 많음.
• 유연근무를 활용해 평일에 일정을 조정하는 경우도 소개됨.

5. 키보드와 주변기기 토크

• 개발자들 사이에서 키보드 기계식 축, 키압, 무접점 키보드 등 하드웨어 토론 활발.
• 해피해킹, 키크론, 리얼포스 등 유명 모델과 윤활 관련 이야기 공유.
• 키보드 키압은 키를 누르기 시작하는 힘과 전체 압력으로 구분하며, 개인 취향에 따라 선택함.
• 적절한 키보드는 손목 건강과 타이핑 효율에 직결되어 중요함.
• 이어폰, 모니터 등 주변기기 구매와 추천도 함께 나옴.

6. yarn berry와 PnP 이슈 설명

• Yarn Berry(aka Yarn 2+)에서는 PnP(Plug'n'Play) 방식으로 node_modules 폴더 없이 의존성 관리를 함.
• PnP는 의존성 트리를 평탄화하지 않고 정확히 매핑하기 때문에 parent 패키지가 peerDependencies에 정확한 의존성을 선언해야 함.
• 그렇지 않으면 Missing 에러가 발생할 수 있음.
• Next.js 같은 프레임워크가 PnP를 완벽 지원하지 않아 호환 문제가 발생할 수 있음.
• 실제로 모노레포 환경에서 PnP와 tsconfig 문제로 고생한다는 경험 공유.

7. React-router-dom과 SPA 라우팅 문제

• React-router-dom은 클라이언트 사이드 라우팅 라이브러리라 웹서버와는 별개로 작동함.
• 사용자가 URL을 직접 입력하여 접근할 때, 해당 경로에 대응하는 정적 파일이 없으면 404 에러 발생.
• 이를 막으려면 웹서버에서 모든 URL 요청에 대해 index.html을 반환하도록 설정해야 함.
• 예를 들어, Nginx나 Express 같은 서버에서 SPA fallback 설정하는 것이 필수.
• Tomcat 같은 WAS 환경에서는 별도의 리다이렉트 설정 필요.

8. 개발 환경 고민과 PC 견적 팁

• 게임용과 개발용 PC 스펙 고민, 그래픽카드 추천 (RTX 4090 권장).
• 4K 모니터는 고사양 GPU 필요하며 가격도 꽤 비쌈.
• FPS 게임(발로란트, 옵치 등)은 FHD 혹은 QHD 해상도 추천.
• 컴퓨터 조립은 잘 아는 지인과 상의하거나 견적 업체(옵챗)에 맡기는 게 현명.
• 내장 그래픽카드 옵션, 예산 대비 성능 고려 필요.
• 모니터 해상도, 주사율(144Hz 이상)도 중요 요소.

9. GPT 챗봇과 AI 활용 이야기

• GPT를 활용한 챗봇 개발 관심도 증가.
• OCR 내장 기능 덕분에 이미지 내 숫자나 텍스트 인식 가능.
• 안드로이드 환경과 카카오톡 플러스친구 연동 관련 토론.
• AI 활용 프로젝트 예고 및 유료 GPT 구매 경험 공유.
• IT 초심자 대상 튜터 모집 공고 (100% 온라인, 주 2~3일 가능) 안내.

10. 프로그래밍/코딩 입문자의 학습 팁

• HTML 이벤트 객체에서 event.target.이름은 폼 안 요소의 name 속성으로 접근함.
  • 예) <input name="input" /> 내부 이벤트라면 event.target.input이 동작.
  • 만약 name이 "random"이라면 event.target.random으로 접근해야 함.
• TypeScript는 공식 문서와 책 동시 참고 추천. Java, C 경험은 학습 시 유리하나 개인차 존재.
• CSS 속성 수는 많지 않아 기본을 익히면 직접 작성 가능.
• 프레임워크 라이브러리를 활용하기보다는 CSS 직접 관리하는 경우가 많음.

면접팁⚡

• 면접에서 기술적 질문뿐 아니라 프로젝트 경험과 문제 해결 과정, 리팩토링 경험을 상세히 설명할 준비를 할 것.
• TypeScript 학습 시 공식 문서와 책을 병행하고, JavaScript 기본 개념을 확실하게 익혀두면 좋음.
• SPA 프로젝트 배포 시, React-router-dom 사용 시 발생하는 라우팅 문제 대응 방안을 알고 있으면 어필 가능.
• Git 브랜치 병합 시, 브랜치를 삭제해도 커밋 히스토리는 사라지지 않고 기록으로 남으므로 걱정 말 것.

링크🔗

• HTML 강좌: https://web.dev/learn/html
• CSS 강좌: https://web.dev/learn/css
• 온라인 튜터 모집: https://abit.ly/49fd4l
• React Router Docs: https://reactrouter.com/web/guides/quick-start
• Mermaid (도면, 다이어그램 툴): https://github.com/mermaid-js/mermaid
• React 스타터 관련 자료: https://velog.io/@lky5697/react-starter?utm_source=substack&utm_medium=email
• 키보드 윤활 리뷰 영상: https://youtube.com/shorts/WZIwKJwJROA?si=tsbmi3cJMDZKA67F
• PnP 설명 참고: Yarn 공식 문서 (참고자료)