[새싹 성동 2기] Module Project 2 (24.11.30)- Review & Insight

12월 부터 본격적으로 배우는 보안 과정에 앞서,

마지막 웹 개발 프로젝트..!

 

랜덤으로 팀이 배정되었고, 프론트엔드 파트 전반을 맡았다.

 

사실, 개인적으로 백엔드 파트를 맡고 싶었지만 팀내에 프론트 개발 경험을 가진 분이 한분도 없었고, 

백엔드를 희망하셔서 프론트를 맡기로 했다. 

 

정신없이 4~5일 동안 한 것 같은데, 

여자저차 완성하고, 발표도 무사히 마쳤다 

아쉬움은 있었어도, 그래도 실무에서 배운거 다시 복기해서 짧은 시간내에 해보니 재미있고 보람도 있었다..!

 

개발 시작 전에

Template 활용해서 figma 에서 직접 UI도 만들어보고,

 

 

백엔드 팀원분들과 협업을 위해, 스키마도 짜고, 필요한 API도 작성해 보았다. 

 

신입으로 들어갔던 웹 개발 실무에선,

그냥 세팅된 환경에서 코드 짜고, 기능 추가될 때 필요한 API 말하면 바로 받거나

내가 프론트엔드, 백엔드 둘다 했었는데 

 

이번에는 아예 초기에 tech stack도 고려하고, 다른 프론트엔드 팀원 분들까지 이끌어야 하니 

생각보다 쉽진 않았지만 보람 있었다

 

짧은 기간이지만, 퀄리티에 대한 욕심이 있어서 MUI 도 활용하고,

그전에 사용했던 React, TypeScript와 Jotai 상태관리 라이브러리도 사용했다.

 

 

실제로 만든 UI

2~3일 만에 만들어서 코드가 엄청 클린하진 않지만,

나름 컴포넌트, 커스텀 훅까지 정의해서 깔끔하게 개발하려고 노력했다

 

 

 

 

아무래도 배포안하고 로컬에서 돌리다보니, 프론트엔드 <-> 백엔드 연결한 게 내 컴이 유일해서 

데모 영상 찍고 영상 편집하고 하느라 전날에는 새벽까지 했다.. (근데 다른 팀 분들도 그랬던듯..ㅎ)

그래도 팀원 분들도 다같이 열심히 하시고, 많이 도와주셔서 끝까지 잘 마무리 할 수 있었던 것 같다 

짧은 영상이지만, 영상 편집도 오랜만에 하니 재밌었다!

 

 

시간이 더 있었다면  AWS에 직접 배포하는 것까지 하면 좋았을 텐데 아쉽긴 하다. 

프로젝트 이후에 다른 팀원분들에게 의견을 물어보고, 틈틈히 시도라도 해볼 생각이다

 

 

Insight from other groups

1. 백엔드 보안

1) Clickjacking 방지

• 방법: 방지 헤더 추가, 예: X-Frame-Options: DENY.

2) 기타 보안 헤더 설정Content-Security-Policy (CSP) 설정

1. X-Powered-By 헤더 제거: 서버 정보(사용 중인 기술 스택)을 숨김 노출 방지
2. X-Content-Type-Options 설정: MIME 타입 스니핑 방지, 브라우저가 잘못된 Content-Type을 추측하지 못하도록 설정
3. Content-Security-Policy (CSP): 허용되지 않은 스크립트, 스타일, 리소스의 실행 차단

3) JWT 보안 강화

• 대칭키의 문제점: JWT 검증 사이트에서 대칭키로 인해 탈취 가능.
• 비대칭키로 변경: 공개키/비밀키 방식(RSA 등) 사용으로 방지.

4) 봇 방지 & Brute Force (무차별 대입 공격 방지)

• 자동화된 무차별 입력 방지를 위해 CAPTCHA 도입
• 로그인 시도 횟수 제한
• 서버에서 IP 기반 차단 또는 요청 속도 제한

 

2. 리액트 성능 개선: 불필요한 재렌더링 방지로 성능 최적화!

• useMemo: 값(함수 호출 결과 또는 계산 결과)을 메모이제이션
• useCallback: 함수 객체를 메모이제이션하여 재생성을 방지

 

3. 이미지 업로드 최적화 및 속도 개선

1. 문제점: 이미지 용량이 커서 로딩 속도가 느려짐.
2. 해결 방법:
   • Gzip Middleware: 데이터 전송 크기 압축으로 속도 개선.
   • CacheControl Middleware: 캐싱 정책 설정으로 추가 성능 향상.

 

4. 로컬스토리지 vs 쿠키

로컬스토리지에 토큰 저장 문제

• 문제점: 로컬스토리지에 토큰 저장 시, XSS(크로스사이트 스크립팅)에 취약하여 토큰이 노출될 위험이 있음.

쿠키로 변경 시 보안 고려 사항

• Secure 설정: HTTPS 통신에서만 전송되도록 하여 완화 가능하지만, 완전한 예방은 불가능.
• HTTP Only 설정:
  • 스크립트 접근 차단(브라우저에서 직접 접근 불가).
  • 모든 브라우저에서 지원하지 않음.
• 중요 정보 포함 금지: 민감 데이터는 쿠키에 저장하지 않음.
• Expire(MaxAge) 설정: 유효 기간을 짧게 설정하여 노출 리스크를 줄임.

5. 세션 및 쿠키 보안 개념

• 세션:
  • 서버에서 세션 ID로 관리.
  • 보호 메커니즘: 세션 ID를 추적하기 어렵게 암호화 및 주기적으로 변경.
• 쿠키:
  • 브라우저에서 관리하며 위에서 언급한 설정들을 적용하여 보안 강화.