COMMIT.chat
View Bookmarks
react 썸네일react

2024-05-02

목차

  1. 자체 로그인 서비스와 이메일 서버 개발에 관해
  2. JWT와 인증 보안 팁
  3. 기술 스택과 입문 교육 커리큘럼 이야기
  4. 플러터(Flutter)와 멀티플랫폼 개발 동향
  5. 팀원 코드 품질 문제와 협업 소통
  6. CDN과 캐싱 이슈 정리
  7. 웹 개발 중 캐시 무효화 및 버전 관리
  8. 토큰 저장 방식과 쿠키 사용 개념
  9. 텍스트 에디터 추천 및 활용 팁
  10. 리액트 setTimeout 및 상태 관리 문제

1. 자체 로그인 서비스와 이메일 서버 개발에 관해

  • 직접 로그인 서비스와 자체 이메일 서버를 구축하는 것은 개발 및 공부에 매우 좋은 도전 과제임.
  • SNS 로그인 연동이나 이메일 보내기 기능은 보통 API 연동 정도로 단순하게 이루어지는 경향이 있음.
  • 직접 구현하는 부분은 보안, 서버 설정, 토큰 관리 등 기본적인 인증 메커니즘에 초점 맞춰야 함.

설명
자체 로그인 서비스는 단순히 로그인 UI를 넘어서 인증 방식 설계와 보안이 중요함. 자체 메일 서버도 SMTP 구성이나 보안 강화가 필요하며, 타사 서비스를 무조건 쓰는 게 아니라 직접 설정해 보면 이해도가 높아짐.

2. JWT와 인증 보안 팁

  • JWT(JSON Web Token)는 사용자의 인증 정보를 안전하게 전달하기 위한 토큰 방식임.
  • JWT 자체를 쉽게 디코딩할 수 있으므로, 서버가 토큰의 유효 기간과 서명을 반드시 검증해야 안전함.
  • 토큰의 유효시간(ttl)이 매우 중요하며, 서버에서 주기적으로 검증하여 만료된 토큰은 거부해야 함.

설명
JWT는 토큰 내부가 Base64로 인코딩되어 누구나 토큰을 열어 볼 수 있음. 그래서 중요한 데이터는 토큰에 직접 넣지 않고, 서명(Signature) 검증과 만료시간(expiry)을 통해 위변조를 막는 게 핵심임.

3. 기술 스택과 입문 교육 커리큘럼 이야기

  • HTML/CSS, DBMS, Java 순으로 배우는 학원 커리큘럼에 대한 다양한 의견 존재.
  • Java가 백엔드에서 매우 많이 쓰이지만, 프론트엔드 개발 방향에선 필수는 아님.
  • Java와 Spring Framework는 백엔드 개발에서 많이 쓰이며, 프론트엔드와 분업이 일반적임.
  • 풀스택 교육이라도 프론트와 백엔드 기초를 골고루 다루는 게 중요함.

설명
입문자라면 특정 언어(Java 등)에 너무 얽매이기보다, 기본적인 웹 원리를 이해하고 다양한 기술을 체험해보는 것이 바람직함. 백엔드에서는 Java뿐만 아니라 Node.js, Python 등 여러 선택지가 있음.

4. 플러터(Flutter)와 멀티플랫폼 개발 동향

  • 플러터는 크로스플랫폼 UI 프레임워크로 많은 관심을 받음.
  • 최근 구글 내부 조직 변화로 불확실성이 제기되기도 했으나, 국내외 커뮤니티에서는 계속 활발히 사용 중.
  • 코틀린 멀티플랫폼, React Native 등 여러 선택지가 공존.
  • 멀티플랫폼 개발은 코드 재사용과 빠른 출시를 위한 좋은 방법이지만, 각 플랫폼에 특화된 개발도 중요함.

설명
플러터는 하나의 코드베이스로 iOS, Android, 웹, 데스크톱 앱을 만들 수 있어서 생산성이 높음. 그러나 회사 정책이나 프로젝트 특성에 따라 다르게 선택될 수 있음.

5. 팀원 코드 품질 문제와 협업 소통

  • 팀원 코드 품질이 낮거나 엉망일 때 속상함과 스트레스가 큼.
  • 직접적으로 문제를 이야기하기 어렵지만, 장기적으로 유지보수 문제를 고려하면 반드시 개선 의사를 전달해야 함.
  • 코드 리뷰나 정기적인 리팩토링이 필수. 협업 시 소통이 무엇보다 중요함.
  • 소통 부재는 업무 효율뿐 아니라 팀 분위기에도 악영향을 미침.

팁
문제 인식 시점에 문제의식을 갖고 개선 의견을 소통하며, 리팩토링 문화 정착에 신경 써야 함.

6. CDN과 캐싱 이슈 정리

  • jsdelivr CDN 인증서 만료로 서비스 장애 발생 사례 공유.
  • CDN 사용 시 인증서 문제, 캐싱 정책 미비 등이 장애를 일으킬 수 있음.
  • CDN을 사용하면 네트워크 속도와 부하가 개선되나, 인증서 갱신 등 관리가 중요함.
  • CDN 장애 시 로컬에 복사하여 직접 서빙하는 대처법 제안.

설명
CDN(Content Delivery Network)은 전 세계 여러 서버에 콘텐츠를 분산 저장하여 빠른 응답을 제공하는 서비스임. 인증서 문제가 발생하면 HTTPS 접속이 안 되어 사이트 접속에 문제를 일으킴.

7. 웹 개발 중 캐시 무효화 및 버전 관리

  • 스태틱 파일(js, css 등)에 버전 파라미터를 붙여 캐시를 무효화하는 방법이 있음.
  • 하지만 캐시가 잘못 동작하거나 오래된 캐시를 참조하면 복불복 현상이 발생.
  • HTML 파일(index.html 등)도 캐시 제어 대상이며, query string을 붙여 새로고침을 유도할 수 있음.
  • 브라우저 개발자 도구의 네트워크 탭으로 요청과 응답 상태를 체크하는 것이 문제 해결에 도움됨.

설명
브라우저는 HTTP 캐시 제어 헤더를 보고 파일을 재사용할지 말지 결정한다. 정적 자산에 버전 넘버를 붙이면 서버 또는 CDN 캐시와 브라우저 캐시를 효과적으로 관리 가능.

8. 토큰 저장 방식과 쿠키 사용 개념

  • 서버 인증 시 JWT 같은 토큰을 클라이언트에 저장하는 방법 다양함.
  • 클라이언트 로컬스토리지(localStorage), 세션스토리지, 쿠키에 저장할 수 있으나 보안 관점에서 다름.
  • 서버가 Response 헤더에 Set-Cookie를 사용하면, 쿠키에 토큰을 심어 자동으로 요청 시 인증 가능.
  • 쿠키 방식은 CSRF, XSS 공격 방어 방식을 동반해서 사용해야 함.

설명
쿠키는 HTTP 요청마다 자동으로 서버에 전송되어 편리하지만, 보안 설정(CORS, SameSite, HttpOnly 등)이 필수. 로컬스토리지 저장은 스크립트 공격에 노출될 위험도 있다.

9. 텍스트 에디터 추천 및 활용 팁

  • 관리자 페이지 FAQ, 약관 입력용 텍스트 에디터는 기본적인 편집 기능(텍스트 크기, 색, 이미지, 링크 등) 정도면 충분.
  • TinyMCE, CKEditor, React Quill, ProseMirror, SunEditor 등이 인기 있음.
  • 개인적으로는 TinyMCE가 기능 대비 사용하기 무난하며, 계정 생성 과정이 있음.
  • SunEditor는 한국 개발자가 만들어 정서에 맞는 편집기라 평가됨.

설명
웹 기반 텍스트 에디터는 WYSIWYG(What You See Is What You Get) 방식으로, 서버에 쉽게 작성 컨텐츠를 전달 및 저장할 수 있음. 프로젝트 특성에 맞게 선택 권장.

10. 리액트 setTimeout 및 상태 관리 문제

  • setTimeout을 리액트 상태 관리 함수(setValue) 내에서 호출할 때, 간헐적으로 이벤트가 여러 번 실행되는 현상 발생.
  • concurrent mode 등 리액트 내부 스케줄링이 영향을 미칠 수 있음.
  • 해결 방법은 onClick 핸들러 내부에서 상태 업데이트 로직을 분리하거나, setTimeout을 useEffect에 둬 부작용으로 처리하는 것 권장.

설명
리액트는 상태 업데이트를 비동기로 처리하며, 특히 concurrent mode에서는 상태 변화가 예상치 못하게 여러 번 발생할 수 있음. 콜백 함수와 사이드 이펙트 분리가 핵심.

면접팁⚡

  • JWT와 토큰 기반 인증 시스템에서 서버와 클라이언트의 역할을 명확히 이해하고 설명할 수 있어야 함.
  • CDN과 캐시 관리 이슈, 특히 인증서 만료나 캐시 무효화 방법에 관한 질문이 나올 수 있으니 대비할 것.
  • 프론트엔드와 백엔드 기술 스택 각각의 역할과 상호작용에 대해 명확히 설명하는 게 좋음.
  • 협업 시 코드 품질 문제 대응 경험이나 소통 방법에 대해 구체적인 사례를 준비하면 긍정적 인상.
  • 리액트 상태관리 이슈나 비동기 처리 관련 문제도 자주 묻는 주제, 간단한 코드 흐름과 해결법 정리 필수.

링크🔗

#인증#JWT#플러터#웹개발#캐싱#CDN#쿠키#텍스트에디터#리액트#협업
이전 포스트

2024-05-01

2024년 5월 1일
다음 포스트

2024-05-05

2024년 5월 5일