목차
- UI 렌더링 이슈: CSS 너비 차이 원인과 해결법
- 타입스크립트(Typescript) 입문과 도전기
- Next.js 및 웹팩(Webpack) 설정 어려움
- Supabase와 Firebase 비교, 사용 후기
- React 개발에서의 키(key) 문제와 해결법
- 리액트와 자바스크립트 학습 조언
- 개발자 건강과 작업 환경: 건강 관리 팁
- 면접 질문 및 이직 준비 이야기
- API 요청과 GET에 바디(body)를 보내는 문제
- 테스트 코드 작성의 중요성 및 현황
1. UI 렌더링 이슈: CSS 너비 차이 원인과 해결법
- 문제: 동일한 CSS가 적용된 div 10개 중 2개 너비가 0.5~1px 정도 두껍게 렌더링됨.
- 개발자도구에는 동일한 너비로 표시되나 실제 화면에서 차이 발생.
- 주요 원인:
- 모니터 해상도 차이: 듀얼 모니터 사용 시 발생. 다른 해상도 환경에서 픽셀 렌더링 오차가 일어남.
- 배율(줌) 문제: 100%가 아닐 경우 픽셀 단위 계산 시 오차 발생 가능.
- 겹치는 선(border collapse 아님): 선 겹침으로 인한 두꺼워 보임은 아니라고 확인.
- 해결 팁:
- 애플 맥북 등 해상도가 다른 모니터에서 테스트해보기.
- 각 div 너비나 높이를 살짝 조정해 픽셀 단위 오차 없애기.
- box-sizing 속성 확인 및 배율 100% 맞추기.
- 초보자 설명: 화면에 보여지는 픽셀은 모니터 해상도와 배율 설정에 따라 1픽셀 차이가 더 굵거나 얇게 보일 수 있습니다. 이런 미세한 렌더링 차이는 CSS 코드 문제라기보다는 화면 출력 환경 차이로 발생합니다.
2. 타입스크립트(Typescript) 입문과 도전기
- 대화 내용:
- 대부분 초심자들이 "맨땅에 헤딩" 하듯 프로젝트에 타입스크립트를 도입하고 오류 700개 넘게 수정하며 배우는 중.
- 처음에는 any 타입을 최대한 많이 사용하면서 점차 유틸리티 타입, 제네릭(Generic)으로 변경해 가는 실천법 추천.
- 공식문서를 자주 참고하는 것이 중요하다는 조언.
- "타입은 거들뿐"이라는 말로 본질은 자바스크립트 동작임을 인식.
- 팁:
- 초보일수록 any를 적극 활용하고 나중에 구체적인 타입으로 줄여가는 것이 부담을 덜어줌.
- 에러 메시지를 꼼꼼히 확인하고 IDE 재시작 등이 필요할 때도 있음.
- 타입스크립트 개념 설명:
- 자바스크립트에 타입을 추가해 코드 안정성과 가독성을 높이는 도구.
- 제네릭(Generic): 여러 타입을 일반화해서 재사용 가능한 함수나 컴포넌트를 만들 때 사용.
- 유틸리티 타입: 타입스크립트 내장 도구로, 특정 타입을 변형하거나 조합하는 데 사용.
3. Next.js 및 웹팩(Webpack) 설정 어려움
- Next.js 설정이 복잡하고 래핑(Wrapper) 작업이 어렵다는 불만.
- 웹팩 설정은 다양한 플러그인과 도구(VE, Sentry 등)를 연동할 때 복잡해짐.
- next-compose-plugins 같은 패키지로 여러 플러그인 구성을 쉽게 할 수 있으나 한계 존재.
- 웹팩 설명: 자바스크립트 번들러로, 여러 파일을 합치고 변환해 최적화된 결과물을 만듦. 설정이 자유로운 대신 복잡도가 높음.
- Next.js config: React SSR 프레임워크로, 자체적인 웹팩 설정을 덮어쓰거나 확장해야 할 때 난해할 수 있음.
4. Supabase와 Firebase 비교, 사용 후기
- Supabase는 Firebase와 비슷하면서도 PostgresDB 기반으로 오픈소스라는 점이 특별함.
- Firebase보다 사용이 편리하다는 평가가 있지만, 커뮤니티 내 경험은 다양함.
- Neon(https://neon.tech/)도 Postgres 기반 클라우드 서비스로 거론됨.
- Firebase와 Supabase 차이:
- Firebase는 NoSQL 중심.
- Supabase는 SQL(Postgres) 기반.
- Supabase는 오픈소스 기반으로 사용자 맞춤형 개발에 유리.
- 새로운 프로젝트에 도입할 가치 있음.
5. React 개발에서 키(key) 문제와 해결법
- React에서 리스트(map) 렌더링 시 키 값으로 DATE_NO, SCHEDULER_NO 중 하나를 사용하려 했으나 중복 또는 null 값 문제 발생.
- 해결 방법:
- 두 값을 조합해서 고유 키 생성 (${DATE_NO}-${SCHEDULER_NO}).
- 키는 문자열, 숫자, bigint, null, undefined 모두 가능하나 null/undefined는 피해야 함.
- 키 Props 설명:
- React에서 리스트 렌더링 시 어떤 항목이 변경, 추가, 삭제됐는지 추적하기 위한 식별자로 사용됨.
- 고유해야 하며, 중복되면 렌더링 오류가 생기고 퍼포먼스 저하 가능성.
6. 리액트와 자바스크립트 학습 조언
- 초보가 둘 다 같이 공부하면 어려우니 별도로 학습하는 게 좋음.
- 자바스크립트 기본 문법과 배열, 함수 등을 숙지한 이후 React 공부 추천.
- 다양한 강의와 영상 참고 추천: 노마드코더, 코딩애플, 드림코딩 등.
- 프로젝트를 통해 실습하며 점진적으로 개념 잡기.
- 어려운 부분은 반복 학습과 커뮤니티 활용 권장.
7. 개발자 건강과 작업 환경: 건강 관리 팁
- 장시간 코딩에 따른 눈떨림, 입안 상처, 허리 및 손목 통증 호소.
- 루테인은 망막과 황반 기능에 도움을 주는 영양제이며, 눈떨림과 직접 연관은 없음.
- 눈떨림에는 마그네슘 보충이 추천됨 (근육 균형 및 피로 해소 도움).
- 작업 환경 개선:
- 모션 데스크(높이 조절 책상) 구매 장려.
- 모니터 높낮이 조절 권장 (거북목 예방).
- 충분한 수면과 햇빛 쬐기 중요.
- 건강은 개발 지속 가능성에 큰 영향.
8. 면접 질문 및 이직 준비 이야기
- 성격 장단점 질문에 “장점: 단점 없음, 단점: 장점 없음” 같은 재치 답변도.
- 개발 분야 관심사, 수행한 프로젝트, 팀워크 관련 질문 주로 등장.
- 면접 일정 관리 팁:
- 면접 시간 및 장소 문자나 메일로 받아 기록.
- 지원 회사 이름 헷갈릴 땐 전화나 문자로 다시 확인 권장.
- 이직 준비는 꾸준히 하는 것이 중요하며, 프로젝트 끝낸 후 면접 준비 권장.
- 초보 개발자 현실: 공부는 힘들어도 꾸준히 도전해야 함.
9. API 요청과 GET에 바디(body)를 보내는 문제
- HTTP 스펙상 GET 요청에 body를 보내는 것은 권장되지 않음.
- 일부 클라이언트 라이브러리(예: axios)는 GET에 body 전송을 지원하지 않음.
- POSTMAN은 가능하지만, 실제 브라우저나 fetch API는 지원하지 않을 수 있음.
- 스펙 RFC 7230-7237에 따르면 서버가 무시할 수도 있고 지원할 수도 있음.
- 해결법:
- GET 요청 시 query string에 파라미터 보내기.
- 서버 API 설계 시 body가 필요한 데이터는 POST, PUT 메서드 사용 권장.
10. 테스트 코드 작성의 중요성 및 현황
- 규모 있는 회사는 테스트 코드 작성 필수.
- 소규모 회사나 일부 팀은 테스트를 잘 안하는 경우도 있음.
- 테스트는 코드 변경 시 버그 예방과 유지보수 성능 향상에 중요.
- 테스트 작성은 초보자에게도 추천하며, 점진적으로 도입하는 것을 권장.
면접팁⚡
- 면접 때 회사에서 면접 위치, 시간, 연락처 등을 반드시 문자나 메일로 요청해 놓을 것.
- 성격의 장점과 단점 질문은 솔직히 하되 유머를 섞어 부드럽게 응답하기.
- 기술 질문에 당황하지 말고 어떻게 배워왔는지를 어필할 것.
- 키 값 문제 등 기본 React 원리 질문 대비 필요.
- 면접 이후 연락을 못 받으면 직접 연락해 확인하는 적극성이 유리.
링크🔗
- Supabase 공식: https://supabase.com
- Neon (Postgres 클라우드): https://neon.tech/
- Next.js Compose Plugins: https://www.npmjs.com/package/next-compose-plugins
- 노마드코더 강의: https://youtu.be/sF-5gXSIs60?si=xf9U3CUkS6OtptYR
- 인프런 "타입스크립트 입문" 영상: https://www.youtube.com/watch?v=F6iXvOBQ_B4&ab_channel=%EC%9D%B8%ED%94%94%EB%9F%B0inflearn
- 커피냅(Coffee Nap) 효과 설명
#React#TypeScript#NextJS#Webpack#Supabase#Firebase#API#개발자건강#면접팁#테스트코드