COMMIT.chat
View Bookmarks
react 썸네일react

2023-11-19

목차

  1. 리액트 숫자 증가 이펙트 및 슬롯머신 구현
  2. 쏘카 코딩 테스트 후기 및 난이도
  3. 리액트 학습 자료 추천: 'React Deep Dive' 책과 블로그
  4. 경찰 방문 경험과 안전 대처법
  5. 웹팩 개발 서버(WDS) 무한루프 문제와 해결 팁
  6. 사내 메신저 추천 및 사용 후기
  7. Next.js Image 컴포넌트 iOS 이미지 잘림 현상 해결법
  8. CORS 문제 대처 방법과 프록시 활용
  9. 백엔드 없는 신입 개발자 포트폴리오 고민과 솔루션
  10. Supabase 및 Firebase 비교와 개발 후기

1. 리액트 숫자 증가 이펙트 및 슬롯머신 구현 🎰

  • 리액트에서 숫자 증가 애니메이션을 구현할 때는 react-counter 같은 라이브러리를 많이 사용함.
  • 하지만 react-counter는 숫자 단위의 카운터에 특화되어 슬롯 머신처럼 배열 요소가 회전하는 애니메이션에는 적합하지 않음.
  • react-slot-counter라는 라이브러리가 있는데, 이를 응용하면 슬롯 머신 효과를 낼 수 있음.
  • 또한 framer.js는 직접적인 슬롯 머신 기능은 없으나, 애니메이션 라이브러리로써 커스텀 애니메이션을 만들어 구현 가능함.
  • 슬랏머신 효과는 각 배열 요소가 회전하며 자리 바꿈이 되도록, 마치 카지노 슬롯머신에서 볼 수 있는 회전 효과를 말함.
  • 참고한 코드 샌드박스 URL: Slot Machine 샘플

2. 쏘카 코딩 테스트 후기 및 난이도 💻

  • 최근 쏘카 공채 코딩 테스트가 있었음.
  • 난이도는 "어렵다"는 의견도 있었으나, 실제로는 문제 2개 모두 '빡구현' 수준이라 도전 가능한 정도였음.
  • 알고리즘 문제 유형이었으며, 꾸준한 연습이 필요함.
  • 실패 예외 상황만 걸리지 않게 주의하면 무난히 통과 가능할 것으로 보임.

3. 리액트 학습 자료 추천 📚

  • 'React Deep Dive'라는 책과 네이버 개발자 블로그가 추천됨.
  • 책은 모던 자바스크립트와 리액트 내부 구조, 심화 내용까지 다루어 초중급 개발자에게 좋음.
  • 네이버 블로그 URL: React Deep Dive 블로그 글
  • 작가는 네이버 소속으로, 장기간에 걸쳐 전문적으로 작성한 질 높은 콘텐츠를 제공함.
  • 개발 공부에 좋은 참고자료로 적극 추천됨.

4. 경찰 방문 경험과 안전 대처법 🚓

  • 새벽에 경찰관 방문으로 깜짝 놀란 경험 공유.
  • 방문 이유는 이전 거주자의 실종이나 범죄 확인 때문이라고 함.
  • 경찰관 신분 확인 방법:
    • 공무원증 요청
    • 지구대에 전화해 경찰 방문 확인 및 도움 요청
  • 사칭 경찰 사례 주의:
    • 경찰관이라 해도 사복 입은 경우가 많으므로 무조건 믿으면 안 됨.
    • 문을 열어야 할 때는 신분증 확인과 함께 지구대 연락 권장.
  • 무조건 문 열지 말고, 상황 설명 듣고 당황하지 않아야 함.
  • 심리학적 측면에서 갑작스러운 상황은 경계하는 게 안전함.

5. 웹팩 개발 서버(WDS) 무한루프 문제와 해결 팁 🔄

  • 웹팩 개발 서버에서 무한루프 현상 발생 시 문제는 다음일 수 있음.
    • 코드 내 로직 오류
    • 라이브러리 또는 플러그인 충돌
  • 문제를 해결하려면 설정 파일(webpack.config.js)과 사용중인 패키지 목록을 점검해야 함.
  • 한 가지 팁은 webpack-dev-server(WDS)를 완전히 재설치하거나 최소화 설정으로 점검하는 것.
  • 원인을 직접 코드 라인별로 추적하는 것이 가장 정확함.

6. 사내 메신저 추천 및 사용 후기 📱

  • 회사 내 메신저로는 슬랙(Slack)을 많이 선호함.
  • 슬랙은 협업에 편리한 메모 기능과 다양한 통합 앱 지원이 장점.
  • 개인적으로는 Outlook의 메신저 기능은 불편하다 평가됨.
  • 슬랙은 개인, 팀 단위 모두에서 인기가 많으며, 업무 효율성을 높임.

7. Next.js Image 컴포넌트 iOS 이미지 잘림 현상 해결법 🖼️

  • iOS 기기에서 Next.js Image 컴포넌트로 불러온 png 이미지가 사각형으로 잘리는 현상 발생.
  • 일반적인 해결 방법:
    • layout="responsive" 속성을 추가하여 이미지가 컨테이너에 맞게 유연조절 되도록 함.
  • iOS는 이미지를 렌더링할 때 크롭 처리가 발생할 수 있어 이 설정이 중요함.

8. CORS 문제 대처 방법 및 프록시의 활용 🌐

  • 개발 중 CORS(Cross-Origin Resource Sharing) 이슈가 빈번히 발생함.
  • 보통 두 가지 대처 방법이 있음:
    1. 백엔드에서 Access-Control-Allow-Origin: *으로 설정하여 모든 도메인 허용 (개발환경에서 간단하지만 보안 이슈 발생 가능)
    2. 프론트엔드에서 프록시 설정이나 브라우저 확장 도구를 사용하여 CORS 문제 우회
  • 디버깅 시 크롬 브라우저에서 CORS 정책 무시 옵션으로 열기도 함 (예: --disable-web-security 플래그)
  • 실제 서비스 환경에선 백엔드에서 적절한 CORS 정책을 설정하는 것이 바람직함.

9. 백엔드 없는 신입 개발자 포트폴리오 고민과 솔루션 💡

  • 백엔드 경험이 부족해 포트폴리오에 고민하는 신입 개발자 많음.
  • 추천 솔루션:
    • Supabase(수파베이스)나 Firebase 등 Backend-as-a-Service(BaaS) 플랫폼 활용
    • 이들 플랫폼은 인증, 데이터베이스, 스토리지 기능을 백엔드 없이 쉽게 구현 가능
  • 수파베이스는 오픈소스 PostgreSQL 기반이며, 카카오 OAuth 연동 등 다양한 기능 지원해 실무 활용도 높음.
  • 관련 강의 추천: 넥스트풀스택 강의 (12/12)

10. Supabase와 Firebase 비교 및 후기 🔄

  • Supabase 장점:
    • PostgreSQL 쿼리를 그대로 사용 가능해 RDBMS 친화적인 서비스
    • 오픈소스라 커뮤니티 기반 지원이 활발함
    • OAuth 카카오 연동 등 국내 서비스를 지원함
    • 이미지 리사이징, 파일 스토리지 등 부가 기능도 지원
  • 단점:
    • 공식 문서 업데이트가 다소 느림
    • 복잡한 쿼리는 JS에서 처리하기 까다로워 때때로 직접 SQL RPC 작성 필요
  • Firebase 장점:
    • 한글 자료 풍부해 진입장벽 낮음
    • 구글 서비스와의 연동 용이함
  • 초보자는 간단한 프로젝트에서는 Supabase가 더 쉽고 직관적일 수 있음.

면접팁⚡

  • 코딩테스트 준비 시, 난이도가 너무 높지 않아 문제 풀이의 기본 구현능력과 예외처리 점검에 집중할 것.
  • 포트폴리오에 백엔드 경험이 부족하면 BaaS 활용 사례를 적극 어필하면 좋음.
  • React 내부 구조나 심화 내용을 묻는 질문 대비에 'React Deep Dive' 같은 책이 유용함.
  • CORS 이슈 대처 방법 및 개발 환경 설정에 대해서도 숙지해두면 면접 시 질문받을 가능성 있음.

링크🔗

#React#코딩테스트#NextJS#CORS#Supabase#Firebase#웹팩#프론트엔드#안전대처법#개발자공유
이전 포스트

2023-11-18

2023년 11월 18일
다음 포스트

2023-11-20

2023년 11월 20일