2025-07-18 학습 노트

📚 웹 보안과 React 사고법

🔐 SSL/TLS (Secure Sockets Layer / Transport Layer Security)

웹사이트와 브라우저 간 데이터 암호화 프로토콜

• 인터넷 데이터 전송 시 도청, 위변조 방지
• 서버 인증을 통한 신뢰성 확보
• 현재는 TLS가 표준이지만 SSL로 통칭
• 포트 443 (HTTPS) 주로 사용

사용 예시

• HTTPS 웹사이트 (https://로 시작)
• 온라인 결제, 로그인 정보 전송
• 이메일 암호화 (IMAPS, POP3S)

---

🖥️ SSH (Secure Shell)

원격 서버에 안전하게 접속하고 명령어 실행하는 프로토콜

• 원격 서버 관리
• 파일 전송 (SCP, SFTP)
• 포트 포워딩 및 터널링

인증 방식

• ID/Password 인증
• 공개키-개인키 방식 인증 (더 안전)

특징

• 리눅스 서버 관리 시 필수
• 포트 22 기본 사용
• Git 저장소 접근에도 사용

---

핵심 차이점

구분	SSL/TLS	SSH
주요 용도	웹 통신 암호화	원격 서버 접속
사용 환경	웹 브라우저 ↔ 서버	터미널 ↔ 서버
기본 포트	443 (HTTPS)	22
주요 기능	데이터 암호화, 서버 인증	원격 명령 실행, 파일 전송

한 줄 요약

SSL은 웹 보안, SSH는 서버 관리

---

⚛️ 리액트로 사고하기

React 앱을 체계적으로 설계하는 5단계 접근법

1. UI 구상한거 컴포넌트 계층으로 쪼개기
   • 디자인을 보고 컴포넌트 단위로 분해
   • 단일 책임 원칙: 하나의 컴포넌트는 하나의 일만
2. 정적인 버전으로 대충 만들기
   • State 사용하지 말고 props만으로 구현
   • 데이터 흐름 확인 (상위 → 하위)
3. 어떤걸 State로 사용할지 생각하기
   • 시간이 지나도 변하지 않으면 → State 아님
   • props로 전달받으면 → State 아님
   • 다른 state나 props로 계산 가능하면 → State 아님
4. 어디에 State가 있어야하는지 생각하기
   • 해당 state를 사용하는 모든 컴포넌트의 공통 부모에 배치
   • 적절한 부모가 없으면 새로운 컴포넌트 생성
5. 역 데이터 흐름 추가하기
   • 하위 컴포넌트에서 상위 컴포넌트의 state 변경 필요시
   • 상위에서 함수를 만들어 props로 전달
   • 하위에서 이벤트 발생시 전달받은 함수 호출
   • 예: onChange={handleInputChange} 형태로 콜백 전달

---

💡 유용한 팁

브라우저 단축키

• Ctrl + Shift + T: 닫힌 탭 다시 열기

Windows 단축키

• Windows + L: 화면 잠금