COMMIT.chat
View Bookmarks
react 썸네일react

2024-04-25

목차

  1. 만두와 당뇨 지수 이야기 🍲
  2. CSS 여백과 텍스트 정렬 팁 🎨
  3. PG사 결제창 팝업 닫힘 감지 방법 💳
  4. 다중 Firebase 프로젝트 사용 가능 여부 🔥
  5. 네이버 웨일 브라우저 호환 문제 및 해결책 🐬
  6. 국가별 언어 코드와 리스트 관리 방법 🌐
  7. Flexbox와 Grid 레이아웃 비교 및 활용법 ⚖️
  8. 자바스크립트 공부 자료 추천 📚
  9. React 채팅방 분위기 & 커뮤니티 이야기 💬
  10. es-hangul 라이브러리 소개 & 활용법 🇰🇷

1. 만두와 당뇨 지수 이야기 🍲

  • 만두 특히 김치만두가 혈당(당뇨) 지수를 급격히 올릴 수 있음.
  • 탄수화물 함량과 밀가루, 당면이 당지수 상승의 주원인.
  • 혈당 지수(Glycemic Index): 음식이 혈당에 미치는 영향 정도를 의미.
  • 당뇨 환자는 당지수 높은 음식 섭취 주의 필요.
  • 운동과 식단 관리(예: 닭가슴살, 샐러드 위주)에 따른 체중조절 경험 공유.

2. CSS 여백과 텍스트 정렬 팁 🎨

  • 특정 리스트에서 문단 간 칼같은 여백을 만드는 방법 문의.
  • 해결책: padding-left를 적절히 주고, CSS 가상 선택자인 ::marker로 리스트 아이템 점 스타일 조절.
  • text-decoration 같은 속성으로는 어려워, 직접 패딩과 마커 콘텐츠 조절이 필수.
  • Sass(SCSS) 반복문 활용 시 여러 리스트 아이템 스타일 반복 지정 가능.
  • 초심자가 이해하기 쉽게: ::marker는 리스트 아이템 앞의 기본 점•번호를 조절하는 가상 요소임.

3. PG사 결제창 팝업 닫힘 감지 방법 💳

  • 결제 팝업이 window.open으로 열릴 때, 닫힘 이벤트를 직접 캐치하기 어려움.
  • 대안으로 setInterval을 사용해 주기적으로 팝업 윈도우 상태(.closed)를 체크하는 방식 추천.
  • 팝업 닫힘 감지 시 인터벌 종료 후 후속 처리 진행.
  • 결제창 내 X 버튼 클릭 감지 불가하거나 동적 요소라 이벤트 등록이 늦을 수 있음.
  • 팝업이 취소 시 특정 URL(cancel_url)로 리다이렉트되는 경우, 프론트엔드에서 따로 처리 필요.
  • 근본적으로 PG사 API 문서나 콜백 지원 여부 확인이 중요함.

4. 다중 Firebase 프로젝트 사용 가능 여부 🔥

  • 하나의 앱에 여러 Firebase 프로젝트를 동시에 사용하는 건 공식적으로 지원하지 않는 경우가 많음.
  • 다만, 같은 Firebase 프로젝트에서 여러 앱을 빌드하는 방식 또는 다른 앱별로 각각 Firebase를 연결할 수 있음.
  • 여러 프로젝트 동시 사용 희망 시 Firebase SDK 내 여러 앱 인스턴스 관리 및 초기화 필요.
  • 초보자 팁: 복수 Firebase 프로젝트 연결은 복잡하며 주로 별도 앱 단위 분리해서 사용.

5. 네이버 웨일 브라우저 호환 문제 및 해결책 🐬

  • 크롬에선 정상작동하는 프로젝트가 네이버 웨일에서는 DOMException 발생하며 흰 화면이 뜨는 문제 보고됨.
  • 문제 원인: 일부 DOM 조작 시 웨일에서 DOM 트리 변경에 민감하거나 다른 처리 방식.
  • 해결책으로는
    • 웨일 포럼이나 공식 문의 활용,
    • 웨일 호환성 고려해 DOM 조작 코드 점검 및 예외처리 강화 권장.
  • 장기적으론 웨일 버그 수정 기다리거나 브라우저 호환성 테스트 및 폴리필 적용 권장.

6. 국가별 언어 코드와 리스트 관리 방법 🌐

  • 언어-국가 조합(예: en-US, ko-KR)을 관리해야 하는 경우가 많음.
  • 구조화된 국가 및 언어 리스트는 UI에서 자막 설정, 다국어 선택 등에 사용됨.
  • 라이브러리 사용 없이 직접 리스트 생성 가능하지만, 오픈소스 혹은 API 활용하면 업데이트와 유지 편리.
  • 참고: 캐나다같이 두 개 이상 언어를 사용하는 국가의 경우 다중 언어 코드 관리 중요.
  • 예시) { code: "ko-KR", name: "한국어 (대한민국)" } 같은 JS 객체 배열로 관리 권장.

7. Flexbox와 Grid 레이아웃 비교 및 활용법 ⚖️

  • Flexbox는 1차원 레이아웃(수평 혹은 수직 정렬)에 강점이며, 그리드는 2차원(행과 열) 레이아웃에 적합.
  • 대부분 UI 개발에선 Flexbox를 더 자주 사용하지만, 복잡한 레이아웃은 Grid가 더 효율적.
  • Grid는 테이블 같은 정형 배치에 유리하나, 익숙하지 않으면 복잡하고 오버헤드가 커질 수 있음.
  • 상황에 따라 두 가지를 같이 활용하는 것도 일반적임.
  • 초보설명: Flexbox는 상자들을 한 줄(또는 열)로 줄 세우는 도구, Grid는 상자들을 격자판에 배열하는 도구.

8. 자바스크립트 공부 자료 추천 📚

  • 유명한 자바스크립트 도서 추천으로는
    • 「딥다이브」, 「이펙티브 자바스크립트」, 그리고 고전 「SICP」 (Structure and Interpretation of Computer Programs) 소개됨.
  • 웹 표준의 정석은 JS 부분이 얕다는 평.
  • MDN 웹 문서 공식 가이드 병행하면 최신 문법 이해에 도움.
  • 타입스크립트 공부 전 자바스크립트 기본기를 다지는 것이 바람직함.

9. React 채팅방 분위기 & 커뮤니티 이야기 💬

  • 다양한 주제로 활발히 대화하며, 초보부터 경력자까지 폭 넓은 참여중.
  • 면접 관련 질문, 라이브러리 추천, 개발 팁 그리고 일상 이야기 등이 자연스럽게 오감.
  • 커밋 단위, 면접 결과 연락 예상 등 실무 경험 공유가 많음.
  • 활기차고 유쾌한 분위기로 스트레스 해소와 정보 교환에 긍정적 기여.

10. es-hangul 라이브러리 소개 & 활용법 🇰🇷

  • Toss에서 공개한 es-hangul은 자바스크립트/타입스크립트 언어로 한글 처리 특화 라이브러리.
  • 주요 기능: 초성 검색, 한글 문자 분해/합성, 명사별 조사 처리 등 한글 관련 비즈니스 로직 지원.
  • GitHub 및 npm에서 사용 가능하며, 코드 커버리지와 기여 활동 활발.
  • 협업 시 README 문서 내 링크 이슈 (404 등) 주의.
  • 초보자 팁: 한글 조작은 복잡한 규칙이 많아 전용 라이브러리 쓰면 생산성 크게 향상됨.

면접팁⚡

  • 면접 후 "다음 주중 연락드리겠다"는 말은 곧 결과가 나오지만, 반드시 약속된 날짜라는 의미는 아님.
  • 여러 후보자와 비교 후 결정하므로 답변 대기 기간은 유동적임.
  • 면접 전 서비스와 회사 환경을 꼼꼼히 살펴보고, 궁금한 점은 면접 때 질문하는 게 좋음.
  • 고생만 많이 하고 배우는 게 없는 일은 장기적으로 불리하니 합격해도 조건 잘 따져야 함.

링크🔗

#JavaScript#React#CSS#Frontend#Firebase#웹개발#PG사#언어코드#Flexbox#Grid#esHangul
이전 포스트

2024-04-24

2024년 4월 24일
다음 포스트

2024-04-26

2024년 4월 26일