COMMIT.chat
View Bookmarks
react 썸네일react

2024-03-09

목차

  1. 연봉 인상과 동결 이슈
  2. 챗GPT 서비스 상태 변화
  3. 웹 접근성과 현업 실무
  4. 주식 앱 버그 사례와 대응
  5. 드롭다운(select, option) 스타일 문제
  6. 리액트 클래스 컴포넌트의 변수와 state
  7. CSS-in-JS 네이밍과 시맨틱 태그 사용법
  8. AWS VPC와 비용 이슈
  9. IT 커뮤니티 공지 및 네트워킹 모임 안내
  10. 퍼포먼스 최적화 사례 공유

1. 연봉 인상과 동결 이슈 💰

  • 초봉이 낮아서 6개월 만에 25% 인상했다는 이야기로 대화 시작.
  • 인상률은 높아도 근본적인 초봉 수준이 낮아 의미가 크지 않다는 의견도 나옴.
  • 동결(연봉 동결) 상황에 대한 우려도 있었으며, ‘동결만은 피하고 싶다’는 반응이 많음.
  • 일반적으로 회사가 인상을 제한하거나 동결하는 경우가 있어 개발자 사이에서 민감한 주제가 됨.

2. 챗GPT 서비스 상태 변화 🤖

  • 챗GPT의 오류와 서비스 인터페이스 변화에 대한 언급.
  • 이전에는 오류 발생 시 질문 입력이 가능했지만 지금은 아예 질문 입력을 중단하는 상태.
  • 이는 사이트 기준으로 서비스 제공 정책이나 기술적 문제로 풀이됨.
  • 기본적으로 AI 챗봇서비스는 무중단 서비스를 목표로 하지만 가끔 장애가 생길 수 있음.

3. 웹 접근성과 현업 실무 🌐

  • 웹 접근성(Accessibility)은 장애를 가진 사람도 웹을 쉽게 사용할 수 있도록 돕는 중요한 요소.
  • 완벽한 100% 접근성 준수가 이상적이지만 현실적으로 시간이 부족하거나 예산 부족ㅠ 때문에 적당한 수준에서 타협하는 경우가 많음.
  • 프로젝트 우선순위에 따라 웹 접근성 작업이 밀려 못하는 경우가 보편적임.
  • 접근성은 사용자 기반 확장과 법적 준수 차원에서 꾸준히 신경 써야 할 부분임.

4. 주식 앱 버그 사례와 대응 🐞

  • 주식 앱에서 평가금액 표시가 이상하게 나오는 버그가 발생함.
  • 실제 돈이 아닌 숫자 이상 표시나 UI가 깨지는 현상에 대한 놀람과 동시에 농담도 오감.
  • UI가 금액 표시 width를 넘을 정도로 깨질 때는 CSS overflow 처리나 레이아웃 조정을 고려해야 함.
  • 버그가 심각한 만큼, 실시간 데이터 바인딩과 상태 관리에 주의 필요.

5. 드롭다운(select, option) 스타일 문제 🎨

  • HTML 기본 드롭다운 메뉴인 select, option 요소의 너비(width) 변경이 브라우저마다 다르게 적용되어 고민이 나옴.
  • 기본 select는 브라우저 기본 UI를 따르기 때문에 외부 CSS 조절 제한이 많음.
  • 통일된 스타일을 위해선 커스텀 드롭다운 컴포넌트를 사용하는 것이 보통.
  • 브라우저 호환성을 신경 써야 하며, UI 라이브러리 사용도 추천됨.

6. 리액트 클래스 컴포넌트의 변수와 state ⚛️

  • 클래스 컴포넌트 내에 state 객체 외에 timeout, startTime, endTime 같은 변수 선언에 관한 질문.
  • state는 React가 관리하는 UI 상태로 값 변경 시 자동으로 렌더링을 발생시킴.
  • state 외 변수들은 일반 JS 멤버 변수 혹은 인스턴스 변수이며 일반 변수처럼 선언 (let, const 안 써도 클래스 멤버변수로 취급).
  • 변수와 state의 차이는 '변경 시 뷰에 반영되는지 여부'가 핵심임.
  • ES6부터 let, const는 변수 선언의 기본이며 가급적 붙이는 게 명확성에 도움됨.

7. CSS-in-JS 네이밍과 시맨틱 태그 사용법 🧑‍💻

  • CSS-in-JS에서 styled 컴포넌트 변수 네이밍은 의미 있고 직관적인 이름을 권장.
  • Layout, Wrapper, Container, Box 같은 추상적 이름은 지양하는 게 좋다는 의견도 존재.
  • React에서 시맨틱 태그(main 등)는 HTML5 표준과 동일하게 사용, 페이지의 주요 콘텐츠를 구분하는 역할.
  • 각 페이지마다 main 태그를 사용하는 건 적절하며, 페이지마다 메인 콘텐츠가 달라서 가능.
  • W3C, MDN 문서를 참고해 시맨틱 태그 사용법을 익히는 게 중요함.

8. AWS VPC와 비용 이슈 ☁️

  • AWS VPC 사용 중 예상치 못한 20달러 과금 증가 발생.
  • VPC(Virtual Private Cloud)는 가상 네트워크 환경으로, 네트워크 트래픽이나 리소스 사용에 따라 비용 책정.
  • 정책 변경이나 비용 청구 방식의 변화 가능성 있음.
  • 비용 관리 툴 활용과 AWS 공식 문서 확인 권장.

9. IT 커뮤니티 공지 및 네트워킹 모임 안내 🗓️

  • ‘린사이트(Lean_insight) 살롱’ 소개: IT 개발자, 디자이너, 기획자 등이 모여 책과 경험 공유하는 멤버십.
  • 매주 금/토/일 3주 단위로 광진구 이그조띠끄 하우스에서 열림.
  • 협업과 타 직군 이해 등 커뮤니티 교류에 좋은 기회.
  • 신청 링크: https://naver.me/F1e2HFsY
  • 장소 링크: https://naver.me/xmPAU36Z

10. 퍼포먼스 최적화 사례 공유 ⚡

  • 한 개발자가 퍼포먼스 이슈를 경험하고 최적화를 진행했다고 공유.
  • 실무에서 성능 문제는 사용자 경험에 직결되며 개선 노력은 귀중함.
  • 최적화 방법은 다양하나 코드 리팩토링, 불필요한 렌더링 줄이기, 데이터 처리 효율화 등이 일반적임.

면접팁⚡

  • 클래스 컴포넌트의 state와 변수 구분:
    면접에서 리액트 클래스 컴포넌트 내 state와 일반 변수를 구분해서 설명할 수 있어야 함.
    state는 UI 반영을 위해 React가 관리하는 데이터이고, 변수는 단순 값 저장용임.

  • 웹 접근성에 대한 현실적인 인식:
    접근성을 100% 준수하는 게 이상적이나, 개발 일정과 예산에 따라 현실적인 적정선을 판단해 우선순위 조절 경험을 얘기하면 좋음.

  • 시맨틱 태그 활용 경험:
    react에서 시맨틱 태그 main, article, section 등의 역할을 설명할 수 있으면 면접관에게 좋은 인상.

  • 퍼포먼스 최적화 경험:
    실제 겪은 퍼포먼스 문제 상황과 해결 과정에 대해 구체적으로 말하면 강점.

링크🔗

#연봉협상#웹접근성#리액트#프론트엔드#버그대응#CSSinJS#AWS#IT모임#퍼포먼스최적화
이전 포스트

2024-03-08

2024년 3월 8일
다음 포스트

2024-03-10

2024년 3월 10일