2024-03-28

목차

1. ML 강의 및 Next.js 배포 경험 공유
2. CSS 크기 단위와 반응형 디자인 이야기
3. 리액트 느린 렌더링과 가상화 라이브러리 추천
4. Cafe24 Node.js 호스팅 503 에러 문제
5. React Router의 useParams 사용 및 문제 해결
6. 스타트업과 경력직, 시니어 개발자의 현실 고민
7. AI 도구와 개발 보조, Cursor 및 코파일럿 비교
8. 개발자 면접 및 코딩 테스트 경험 토론
9. 사이드 프로젝트 스위프(SWYG) 참여 및 후기
10. 출퇴근 환경과 개발자 일상 소소한 이야기

1. ML 강의 및 Next.js 배포 경험 공유

• 실습형 머신러닝 강의를 듣고 있음.
• Next.js 14 버전 프로젝트 생성 시, 이전에는 기본으로 켜져 있던 TailwindCSS 옵션이 기본 비활성화(no)로 바뀜.
• AWS S3를 이용한 Next.js 프로젝트 배포 경험 공유 및 트러블슈팅 사례가 유용함.
• 공부 과정에서 비용 이슈가 있어 회사에 지원 요청 예정.
• 프론트엔드 개발자가 AI와 결합되어 새로운 시도가 가능하다는 의견도 나옴.

설명:

• 트러블슈팅은 개발과정에서 생기는 문제를 발견하고 해결하는 과정이다. 남의 경험을 참고하면 시간과 스트레스를 절약할 수 있음.
• TailwindCSS는 유틸리티 CSS 프레임워크로 빠르게 스타일을 적용할 수 있어 최근 많이 사용됨.

2. CSS 크기 단위와 반응형 디자인 이야기

• px, em, rem, %, vw, vh 등의 CSS 크기 단위가 있는데, 각각의 쓰임새와 장단점 궁금증 제기.
• px는 절대 크기로 고정된 픽셀 단위이며, em과 rem은 폰트 크기에 따른 상대 단위로, rem은 최상위 요소(font-size)에 대해 상대적임.
• %는 부모 요소 대비 비율을 의미하며, vw, vh는 뷰포트(viewport) 폭과 높이에 대한 상대 단위임.
• 미디어쿼리를 잘 활용하면 어떤 단위도 문제없다는 의견이 많음.
• rem 단위를 쓰면 사용자 접근성(a11y)에 유리하다는 자료 공유(링크 제공).

설명:

• 반응형 웹 디자인은 화면 크기에 따라 레이아웃과 글자 크기가 유동적으로 바뀌는 웹 디자인 기법임.
• em, rem을 사용하는 이유는 사용자가 브라우저에서 기본 폰트 크기를 변경해도 웹사이트의 텍스트 크기가 적절히 조정되게 하려는 목적임.
• a11y는 *웹 접근성(Accessibility)*의 줄임말로, 장애인을 포함한 모든 사용자가 불편 없이 웹을 사용할 수 있도록 하는 원칙임.

3. 리액트 느린 렌더링과 가상화 라이브러리 추천

• 리액트로 만든 페이지 렌더링이 너무 느릴 때 테스트 방법과 해결책 질문.
• 일부러 API 호출에 20초 지연을 주거나 스켈레톤 UI 없이 렌더링해보는 드립도 있었음.
• 대용량 데이터(30만~40만건) 렌더링 문제: react-window, react-virtualized, tanstack virtual 라이브러리 언급.
• tanstack virtual이 초경량이라 추천받음.
• 대용량 데이터 가상화(virtualization)는 실제 화면에 보이는 데이터만 렌더링하여 성능 문제를 줄이는 기법임.
• 필터 기능과 CSS 깨짐 현상 원인 분석 및 라이브러리 한계도 공유됨.

4. Cafe24 Node.js 호스팅 503 에러 문제

• Cafe24 Node.js 호스팅 시, 깃 커밋 후 503 서비스 불가 에러가 발생하는 문제 공유.
• 로컬에선 express 모듈 설치 후 잘 실행되나 호스팅 서버에서는 못 찾는다고 에러 발생함.
• 가능한 원인으로 package.json에 express가 등록됐는지, node_modules가 제대로 포함됐는지, 포트 설정 등이 논의됨.
• 파일 디렉토리 및 로그 첨부 후 원인 분석 중.
• 대체 방안으로 Vercel 같은 클라우드 배포 대안 제시.

설명:

• 503 에러는 서버가 요청을 처리할 준비가 안 됐을 때 나오는 상태 코드.
• Node.js 배포 시, 종종 의존성(node_modules) 누락, 포트 충돌, 권한 문제 등이 원인임.
• Cafe24는 한국에서 많이 쓰이는 호스팅 서비스이나 일부 Node.js 환경에서는 제한이 있을 수 있음.

5. React Router의 useParams 사용 및 문제 해결

• navigate 함수를 이용하여 id를 포함한 경로로 이동 시 useParams로 id 값을 받지 못하는 문제 질문.
• 보통 React Router에서 동적 경로 매칭은 Route에 /path/:id 형태로 정의해야 함.
• URL에 id가 포함되어 있어도 Route 정의에 :id가 없으면 값이 안 넘어옴.
• 상수로 경로를 관리할 때 동적 파라미터 부분은 제외하고 navigate 시 수동으로 붙여야 함(예: /marketing/promotion/detail/${id})
• 실제 코드 예제와 함께 설명.
• useLocation 훅으로 상태 전달(state)도 가능하지만 path param과는 별개임.
• 결국 Route 정의 오류가 원인일 가능성 높음.

6. 스타트업과 경력직, 시니어 개발자의 현실 고민

• 스타트업에서는 경력 8~10년차 이상의 시니어 개발자를 팀장으로 선호하지만 인력이 부족해 현실적인 어려움 존재.
• 신입이 팀장 역할을 맡는 경우도 있고, 경력자도 싸게 일하려는 시장 상황 공유.
• 스타트업의 장점: 다양한 역할 경험, 기술 적용 자유로움, 복지가 돈으로는 안 되는 경우 많음.
• 단점: 레거시(기존 코드)가 빨리 쌓이고, 인재 문제로 회사가 망할 수 있음.
• 이직과 면접 준비에 대한 걱정이 많으며, AI의 개발자 대체 가능성에 대한 토론도 이어짐.

7. AI 도구와 개발 보조, Cursor 및 코파일럿 비교

• Cursor는 프로젝트 전체 코드를 이해하는 AI 도구이고, GitHub Copilot은 현재 파일 또는 페이지 내 코드에 집중하는 AI 보조 도구임.
• 창업이나 사이드 프로젝트에 AI 도구를 활용하는 사례가 증가함.
• AI 기능을 잘 활용하면 복잡한 로직이나 테스트 코드 작성 시간을 크게 줄일 수 있음.
• AI를 적극 활용하는 개발자가 앞으로 더 경쟁력이 있을 것이라는 의견 존재.

설명:

• GitHub Copilot은 AI 기반 코드 자동완성 도구로, 함수 단위나 라인 단위로 추천을 제공함.
• Cursor는 AI가 프로젝트 전체를 이해하고 문서 생성, 코드 탐색까지 지원함.
• 두 도구는 보완적인 역할을 하며 개발 생산성을 높임.

8. 개발자 면접 및 코딩 테스트 경험 토론

• 코딩 테스트 플랫폼별 난이도 차이, 문제 풀이 시 참고용 답안의 장단점 토론.
• 정답을 맞히는 것과 문제 해결 능력 평가의 차이 강조.
• 면접 시 이력서는 임팩트 있는 경험 위주로 작성하는 게 효과적이며, 무작정 많은 프로젝트 나열은 피할 것 조언.
• 면접 질문 예시로 "ChatGPT보다 본인이 나은 점" 같은 미래지향적 질문 등장.

9. 사이드 프로젝트 스위프(SWYG) 참여 및 후기

• 스위프는 개발자, 기획자, 디자이너가 팀을 만들어 6주간 단기 웹 프로젝트를 진행하는 프로그램임.
• 포트폴리오 제작과 협업 경험, 현업과 네트워킹 기회 제공.
• 참가비는 99,000원 ~ 199,000원이며 수료 시 현금 리워드도 있음.
• 참가자 실력은 다양하며, 책임감과 배우려는 의지가 가장 중요함.
• 협업툴과 GitHub 연동, 웹 호스팅 지원도 제공됨.

10. 출퇴근 환경과 개발자 일상 소소한 이야기

• 파주→양재 출퇴근 2시간 30분 소요 경험담 공유, 거주지역 기반 개발자들의 친목과 근황 나눔.
• 코로나 이후 재택근무 경험 및 장단점 공유.
• 개발자들 사이에서 웃음과 삶의 애환 섞인 소소한 에피소드로 분위기 화기애애함.

면접팁⚡

• 코딩 테스트는 어려운 문제를 완벽히 푸는 것보다 문제 해결 과정을 보여주는 것이 중요함.
• 이력서 작성 시, 주요 경력과 성과를 간결하고 임팩트 있게 표현할 것.
• React Router 사용할 때는 동적 라우팅을 올바르게 설정하는지 꼭 확인할 것.
• AI 도구 활용 능력을 적극 어필하는 것도 미래 개발자 경쟁력의 한 축임.
• 스타트업 면접 시 회사 환경과 팀 상황, 역할 기대치를 미리 파악해 현실적인 대비를 할 것.

링크🔗

• Next.js AWS S3 배포 가이드: https://velog.io/@leehyewon0531/AWS-S3%EB%A1%9C-Next.js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0
• rem 단위와 웹 접근성: https://www.zigae.com/a11y-use-rem/
• Cypress 자동 테스트 코드 생성 기능 (Cypress Studio): https://docs.cypress.io/guides/references/cypress-studio
• Cafe24 Node.js 호스팅 503 에러 해결법: https://iamdaeyun.tistory.com/entry/cafe24-Nodejs-%ED%98%B8%EC%8A%A4%ED%8C%85-%EC%82%AC%EC%9A%A9%EC%8B%9C-503%EC%97%90%EB%9F%AC-error-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95
• React 가상화 라이브러리 tanstack virtual: https://tanstack.com/virtual/v3
• 스타트업 단기 웹 프로젝트 스위프(SWYG): https://swyg.link/7FnWc
• React Router 공식 예제 (동적 라우팅): https://reactrouter.com/en/main/start/tutorial