2024-02-12

목차

1. 패키지 매니저: npm vs yarn
2. CSS 배치 문제와 해결 팁
3. React.Fragment와 빈 태그 (<></>) 사용법
4. TypeScript 버전 이슈 및 사용 경험
5. 구매 추천: 윈도우 노트북 (LG 그램 vs 갤럭시북)
6. TanStack Query 특징과 용도
7. CSS 초보자 질문 및 해결 가이드
8. 연봉 및 취업 시장 이야기
9. VSCode 저장 시 자동 코드 포맷팅 문제
10. 인턴 vs 부트캠프 선택 고민

1. 패키지 매니저: npm vs yarn

• yarn과 npm은 각자의 장점이 있어, 상황에 맞게 따로 사용하는 게 좋다는 의견이 다수였음.
• nvm(Node Version Manager)으로 Node 버전을 관리하며 npm만 써도 충분하다는 의견도 존재.
• 각 도구의 강점과 단점을 파악해, 프로젝트에 적합한 도구를 선택하는 것이 중요.

npm과 yarn 차이

• npm은 Node.js 기본 패키지 매니저이고, yarn은 페이스북이 만든 패키지 매니저로 속도와 캐싱 측면에서 차이가 있음.
• Yarn Berry(Evolution) 버전은 TypeScript 지원 등 최신 기능을 강화했지만, 초기 설정이 복잡하다는 점도 있음.

2. CSS 배치 문제와 해결 팁

• React 초보가 5×6 사각형 격자에서 각각 3px 간격을 주려 했지만, 의도한 대로 안 됐다는 질문이 있었음.
• 주요 원인: 컨테이너 width가 없거나 그리드/플렉스 박스의 공간 지정이 명확하지 않음.
• CSS Grid나 Flexbox를 사용하는 것이 효과적이며, 1fr 단위가 제대로 작동하려면 컨테이너 넓이 설정이 필요함.
• 개발자 도구(F12)로 실제 스타일과 레이아웃 변화를 확인하는 것을 권장함.

CSS Grid와 Flexbox 기초

• CSS Grid: 2차원 레이아웃 제어에 유리, 행과 열 단위 배치 가능.
• Flexbox: 1차원 배치에 적합, 요소를 가로 혹은 세로 한 방향으로 정렬할 때 사용.

3. React.Fragment와 빈 태그 (<></>) 사용법

• <React.Fragment>와 <></>는 동일한 기능을 하는 태그로, 불필요한 DOM 요소를 추가하지 않고 여러 자식을 감쌀 때 사용.
• React 컴포넌트 안에서는 최상위 부모 요소가 반드시 하나여야 하기 때문에, Fragment를 활용해 래핑함.
• key 값을 설정해야 할 경우 <React.Fragment key="id"> 형태 사용 가능.
• 빈 태그는 단축 형태지만 key 설정이 불가능함.

4. TypeScript 버전 이슈 및 사용 경험

• 최신 yarn berry 버전에서 TypeScript 사용시 에러가 발생한다는 문제 제기.
• 해결법: yarn berry 사용 시 SDK 설치 설정 등 추가 설정이 필요하거나, 버전을 낮추는 방법도 있음.
• TypeScript를 어려워하면서도, Java 출신은 타입 지정이 명확해야 깔끔하다고 느낀다는 의견이 다수.
• any 타입을 남용하는 것에 대해 부정적 인식이 존재함. any 타입은 타입을 강제로 무시하고 유연성을 주지만, 타입 안정성을 해칠 수 있음.
• 타입 추론이 안 될 경우 어쩔 수 없이 as, any 등을 쓰게 되는 현실적 고민이 많음.

5. 구매 추천: 윈도우 노트북 (LG 그램 vs 갤럭시북)

• 부모님용으로 윈도우 노트북 추천을 요청받음.
• 다수 추천은 LG 그램: 가볍고 무난하며 사무/검색용으로 적합함.
• 갤럭시북도 나쁘지 않으며, 태블릿처럼 접어서 쓸 수 있는 장점이 있음.
• 구매 전 비교 영상 시청과 본인의 용도(터치, 휴대성 등)를 고려할 것을 권장.

6. TanStack Query 특징과 용도

• TanStack Query는 Ajax같은 통신 라이브러리라기보다는, 데이터 관리를 효율적으로 하기 위한 캐싱 라이브러리임.
• fetch, axios 등 실제 HTTP 요청 라이브러리와는 별개로 동작하며, 서버 상태를 클라이언트에서 간편하게 관리하고, 캐싱을 통해 성능 최적화에 도움 줌.
• 통신 방식에 구애받지 않고 데이터를 관리하고 싶은 분에게 추천됨.

7. CSS 초보자 질문 및 해결 가이드

• 텍스트 가운데 정렬 시, justify-content 속성에도 불구하고 이상한 간격이 생기는 문제 사례.
• 원인은 기본 브라우저 스타일(유저 에이전트 스타일시트)에서 h 태그나 p 태그에 기본 margin 등이 설정되어 있기 때문.
• 해결법: reset.css, normalize.css 등을 적용해 기본 스타일 초기화 후, 마진, line-height 등을 체크할 것.
• 개발자 도구를 활용해 스타일이 어떻게 적용되는지 직접 확인하는 습관이 중요함.

8. 연봉 및 취업 시장 이야기

• 신입 프론트엔드 연봉 2000만원대부터 6500만원까지 다양하지만, 지역과 회사에 따라 차이가 큼.
• 연봉에 대한 민감도가 높고, 단톡방 등 공개 커뮤니티에서는 논쟁거리가 됨.
• 연봉 외에도 복지, 근무 환경, 출퇴근 거리 등을 고려하는 것이 중요하다는 의견 공감.
• 최근 취업 시장이 얼어붙은 가운데, 직무에 포커스를 맞추고 장기적으로 경력을 쌓는 전략 추천.
• 희망연봉과 실수령액 개념 구분하기.

9. VSCode 저장 시 자동 코드 포맷팅 문제

• optional chaining ?. 사용 시 저장(ctrl + s)하면 자동으로 띄어쓰기 되는 문제 보고.
• 해결 팁: VSCode 설정에서 "Format On Save" 옵션과 사용하는 포맷터(prettier, eslint 등) 설정 점검 필요.
• 옵션 중 editor.formatOnSave 여부와 포맷터 확장 프로그램 설정을 조정하면 문제 개선 가능.

10. 인턴 vs 부트캠프 선택 고민

• 대학 4학년 프론트엔드 2년 경력자가 인턴과 프로그래머스 데브코스(부트캠프) 중 고민.
• 의견: 둘 다 지원해보고 기간 겹치지 않으면 병행해도 무방.
• 인턴은 실무 경험, 데브코스는 체계적인 학습과 협업 경험 강점을 가짐.
• 취업 준비 단계에서 협업 경험과 프로젝트 경험은 큰 자산임.

면접팁⚡

• React.Fragment와 <></> 차이점 설명 가능해야 함: DOM 트리 구조에 영향 안 주면서 부모 요소 역할 설명하기.
• TypeScript에서 any 타입 남용 문제와 적절한 타입 선언 중요성 강조 가능.
• CSS 기본 스타일 초기화(reset.css/normalize.css)의 필요성 이해하고, 개발자 도구로 문제 해결 과정 설명 준비.
• TanStack Query와 HTTP 통신 라이브러리 차이점 명확히 알기.
• 연봉은 개인 상황, 지역, 복지 등 다양한 요소 고려해 답변하는 자세 필요.

링크🔗

• Flexbox Froggy - 게임으로 배우는 Flexbox
• CSS Grid Garden - 게임으로 배우는 CSS Grid
• React Fragment 공식 문서
• TanStack Query 공식 문서
• VSCode Settings 관련
• LG 그램 제품 페이지
• 갤럭시북 사용기
• 네이버 블로그 - TypeScript yarn berry 설정