COMMIT.chat
View Bookmarks
react 썸네일react

2024-10-17

목차

  1. CSS Flexbox와 텍스트 중앙 정렬 문제
  2. React 컴포넌트 렌더링 최적화 및 DevTools 활용
  3. 토큰 관리(Access & Refresh Token) 방법
  4. 이메일 템플릿용 MJML 변환 문의
  5. 키보드 구매 및 추천 이야기
  6. 애플 에어팟 맥스 2024 모델 및 리뷰
  7. React 라이브러리/기능 추천 (알람, 타임픽커 등)
  8. CSS Scrollbar 제어 이슈 및 해결 팁
  9. 디지털 치매, 업무 및 개인 이야기
  10. GPT 활용 및 재미있는 자기 분석 기능 소개

1. CSS Flexbox와 텍스트 중앙 정렬 문제 🎨

  • Flexbox로 가운데 정렬했는데 중앙 정렬이 안 맞는 경우가 종종 발생함.
  • 주요 원인 중 하나는 이미지가 inline 요소이기 때문에 하단에 여백이 생겨서 정렬이 깨질 수 있음.
  • 이 현상은 이미지 아래에 생기는 여백, 흔히 line-height와 관련 있음.
  • line-height란?
    텍스트 줄 간격을 조정하는 CSS 속성으로, 이미지가 inline 상태일 때 여백을 만들기도 함.
  • 디자이너와 개발자가 수치(특히 line-height, 폰트, padding)를 조정해 협업 필요.
  • 참고 링크: StackOverflow - Inline image space issue

2. React 컴포넌트 렌더링 최적화 및 DevTools 활용 ⚛️

  • React에서 자식 컴포넌트가 타이머로 매초 카운트다운하면서 렌더링하면 부모 컴포넌트가 다시 렌더링 되는지 궁금.
  • 일반적으로 부모 컴포넌트는 상태나 props가 변경되지 않으면 리렌더링하지 않는 것이 맞음.
  • React DevTools에서 컴포넌트별 리렌더링 여부를 시각적으로 표시 가능.
    이 기능을 켜면 어떤 컴포넌트가 리렌더링 중인지 쉽게 알 수 있음.
  • 개발자에게는 렌더링 성능 최적화에 매우 유용한 도구.
  • 사용 팁: DevTools 설치 후 렌더 추적 옵션 활성화.

3. 토큰 관리(Access Token & Refresh Token) 📱

  • Access Token과 Refresh Token을 httpOnly 쿠키에 같이 넣을지 여부 논의.
  • 일반적 패턴은 Refresh Token을 Cookie에 저장하고 Access Token은 메모리(예: React state)에 저장하는 방식.
  • 왜 Access Token은 메모리에 둘까?
    보안상 도난 위험 줄이고, 새로고침 시 재발급 과정을 거치도록 하기 위함.
  • 새로고침 시 Access Token 재발급 필요로 불편할 수 있음.
  • 서버 컴포넌트에서 Access Token이 필요하면 쿠키에 저장해야 접근 가능.
  • 쿠키 저장 시 HTTP 절차에서 자동으로 헤더에 담겨 서버에 전송됨.

4. 이메일 템플릿용 MJML 변환 문의 ✉️

  • MJML은 이메일 템플릿을 쉽게 만들기 위한 마크업 언어.
  • 텍스트 에디터에 작성한 HTML을 MJML로 변환하는 방법 문의.
  • 일반적으로 MJML을 직접 작성하거나 공식 도구(mjml.io CLI, VSCode 플러그인 등)를 활용.
  • HTML → MJML 자동 변환 툴은 제한적이며 수작업 또는 커스텀 스크립트 필요할 수 있음.
  • 이메일 전용 템플릿 개발 시 MJML 추천됨.

5. 키보드 구매 및 추천 이야기 ⌨️

  • 10만원 이하 기계식 키보드 추천 문의.
  • 인기 브랜드 중 하나는 키크론(Keychron), 가성비 좋고 맥 호환도 잘 됨.
  • https://www.swagkey.kr/shop_view/?idx=780 와 https://www.swagkey.kr/22/?idx=972 등의 링크도 공유.
  • 키보드 고장 시 기판 교체가 가능하므로 새 제품 구매 전 점검 권장.
  • 기계식 키보드는 타건감과 스위치 종류가 다양해 직접 시험해보고 구매하는 것을 추천.

6. 애플 에어팟 맥스 2024 모델 및 리뷰 🍎

  • 최신 모델이 USB-C 타입 충전으로 변경됐고, 색상도 몇 가지 추가됨.
  • 성능은 이전 버전과 큰 차이는 없고 주로 디자인과 충전 편의성 개선에 초점.
  • 리뷰어들이 성능 개선보다는 패션 아이템으로 보는 의견 다수.
  • 가격이 비싸 중고 구매 혹은 할인 찬스를 노리는 사람도 있음.
  • 색상 추천: 스타라이트(밝고 예쁜 색), 다크 컬러는 호불호 갈림.

7. React 라이브러리/기능 추천 ⏰

  • 아이폰 알람 조절과 비슷한 원형 범위 선택 UI 구현 관련 추천 받은 라이브러리:
    • react-clock
    • react-timer-hook
    • Material-UI의 TimePicker 컴포넌트
  • 돌려서 시간을 조절하는 UI는 복잡하므로 검증된 라이브러리 활용이 효율적임.

8. CSS Scrollbar 제어 이슈 및 해결 팁 🖥️

  • overflow-x: auto; overflow-y: auto; 로 세로 스크롤이 생기면 자동으로 가로 스크롤도 같이 생기는 현상 문의.
  • 이는 브라우저 기본 동작이며, 세로 스크롤이 생기면서 내부 콘텐츠가 줄어 폭이 좁아져 가로 스크롤 발생.
  • 해결 방법:
    • overflow-y: scroll; 을 고정해서 세로 스크롤바를 항상 보여주거나,
    • 가상 스크롤 라이브러리 도입,
    • 또는 CSS로 스크롤바가 필요한 경우에만 보이도록 처리.
  • 코드펜 등으로 재현 가능한 환경 공유 시 더 정확한 답변 가능.

9. 디지털 치매, 업무 및 개인 이야기 💬

  • '디지털 치매'란 디지털 기기에 지나치게 의존하는 행동으로 기억력 저하 등이 일어나는 현상을 말함.
  • 업무 중 쇼핑 내역을 주간보고에 적어야 할지 말지 고민, 결국 솔직하게 업무 관련 내용만 기재하는 것이 원칙.
  • 팀 내 스터디 계획 이야기, 넥스트JS 관련 스터디 활성화 예정.
  • 개발에 직접 관계없는 재미있는 잡담(애플 제품, 졸업, 동물 이야기 등) 다수 포함.

10. GPT 활용 및 재미있는 자기 분석 기능 🤖

  • GPT 유료 버전에서는 사용자의 이전 대화 내역을 바탕으로 성격이나 특징을 분석해주는 기능이 있음.
  • 본인의 특성을 재밌고 정확하게 짚어주어 흥미로움.
  • AI와의 상호작용을 통해 자신에 대해 새로운 시각을 얻을 수 있는 좋은 경험으로 소개됨.

면접팁⚡

  • CSS Flexbox 중앙 정렬 문제에서 이미지 inline 특성과 line-height의 관계를 이해하고 설명할 수 있으면 CSS 전문성이 드러남.
  • React 렌더링 최적화 시 React DevTools 사용 경험을 말하면 실무 이해도가 높아 보임.
  • 토큰 관리 전략에 대해 정확히 알고, 보안과 편의성 측면을 균형 있게 설명할 줄 알면 백엔드 및 프론트엔드 연동 이해 능력 어필 가능.

링크🔗

#CSS#React#토큰관리#MJML#키보드추천#애플에어팟#리액트라이브러리#스크롤바#디지털치매#GPT분석
이전 포스트

2024-10-16

2024년 10월 16일
다음 포스트

2024-10-18

2024년 10월 18일