유튜브에서 방송한 자료입니다. https://www.youtube.com/watch?v=F2r_vEHrcrY&list=PLdntWJk2tJPKvRB0mSqC5tyKUv7HFtcqg&index=2

1. 2020년 5월 23일
개발 이야기 정리
박재호(jrogue@gmail.com)

2. 참고 자료
• <컴퓨터 vs 책> 블로그
• http://jhrogue.blogspot.com/
• OKdevTV 유튜브 방송
• 오늘 방송:
https://www.youtube.com/watch?v=F2r_vEHrcrY&list=PLdntWJk2tJ
PKvRB0mSqC5tyKUv7HFtcqg&index=2
• 재미있는 개발 이야기 리스트:
https://www.youtube.com/playlist?list=PLdntWJk2tJPKvRB0mSqC5t
yKUv7HFtcqg
• 슬라이드 셰어
• https://www.slideshare.net/jrogue/presentations

3. 오늘의 짤방
아니 실수로 ls를 ㅣㄴ라고 쳤는데 왜 되는건데
via @hibiyasleep

4. 오늘 소개할 내용
• HTML 지옥에 오신 당신을 환영합니다!
• 프론트엔드 앱을 위한 13가지 보안 팁
• 8년간의 개발자 생활 회고
• 꼭 해야 하는 VSCode 설정
• 크롬 확장 추천
• HTTP 헤더를 잘 읽으면…
• Vultr 서울 리전 오픈
• SSD 수명은 걱정하지 마세요

5. (오늘의 논쟁) HTML 지옥에 오신 당신을 환영합니
다!
• https://www.htmhell.dev/
• 절망편: 상용 서비스에서도 이런 일이
벌어진다
• 희망편: 그래도 누군가는 계속 수정을
위한 힌트를 제공한다

6. (개발) 프론트엔드 앱을 위한 13가지 보안 팁(1)
• https://medium.com/better-programming/frontend-app-
security-439797f57892
• 공격 방법
• 무제한 파일 업로드
• 클릭재킹
• XSS 공격
• SQL 삽입 공격
• DoS 공격
• 중간자 공격 또는 세션 하이재킹

7. (개발) 프론트엔드 앱을 위한 13가지 보안 팁(2)
• 방어 방법
• 사용자 입력 제한: DOMPurify, secure-filters
• 브라우저 메모리에 숨겨진 필드와 데이터에 주의: https://www.zaproxy.org/ 활용
• 강력한 CSP(Content Security Policy) 적용: https://developer.mozilla.org/en-
US/docs/Web/HTTP/Headers/Content-Security-Policy
• XSS 보호 모드 활성: "X-XSS-Protection": "1; mode=block
• 전형적인 XSS 실수 방어: https://web.dev/trusted-types/ 참고
• iframe 임베딩 비활성: X-Frame-Options": "DENY
• 오류 메시지 제한: 특히 사용자 개인 정보
• Captcha 사용: 로그인 과정에서 DoS 공격 방어
• Referrer-Policy": "no-referrer 사용 → Get으로 매개변수가 전달되면… (자세한 설명은
생략한다)
• 브라우저 기능과 API 사용 제한
• 의존성을 주기적으로 점검: npm audit!
• 애플리케이션 분리: https://public.example.com, https://users.example.com and
https://admin.example.com 등으로…
• 3자 API 사용을 줄이기

8. (개발) 8년간의 개발자 생활 회고
• https://jaeyo.github.io/look-back-on-8-years-1/
• 글을 쓰기는 어렵고, 회고를 쓰기는 더욱 어렵다.
• 이력서와 회고글은 주기적으로 작성… (diff를 보면 인생 경로를 알 수 있음)

9. (개발) 꼭 해야 하는 VSCode 설정
• https://dev.to/thegeoffstevens/vs-code-settings-you-should-
customize-5e75
• 자동 포매팅: "editor.formatOnPaste": true
• 저장할 때마다 자동 포매팅: "editor.formatOnSave": true
• 변경된 내용이 있을 경우 탭 하이라이트:
"workbench.editor.highlightModifiedTabs": true
• 변경 시각에 따라 파일 탐색기 정렬 순서 변경: "explorer.sortOrder":
"type“
• 파일에서 여분의 뉴라인 제거: "files.trimFinalNewlines": true (주의: 자바
스크립트…)

10. (개발) 크롬 확장 추천 • Dark Reader:
https://chrome.google.com/webstore/detail/
dark-
reader/eimadpbcbfnmbkopoojfekhnkhdbiee
h?hl=ko
• HTTP Everywhere:
https://chrome.google.com/webstore/detail/
https-
everywhere/gcbommkclmclpchllfjekcdonpm
ejbdp?hl=ko
• Wappalyzer(강추!):
https://chrome.google.com/webstore/detail/
wappalyzer/gppongmhjkpfnbhagpmjfkannfb
llamg?hl=ko
• Web Developer:
https://chrome.google.com/webstore/detail/
web-
developer/bfbameneiokkgbdmiekhjnmfkcnld
hhm
• EditThisCookie:
https://chrome.google.com/webstore/detail/
editthiscookie/fngmhnnpilhplaeedifhccceom
clgfbg?hl=ko

11. (개발) HTTP 헤더를 잘 읽으면…
• https://frenxi.com/http-headers-you-dont-expect/

12. (개발) Vultr 서울 리전 오픈
• https://www.vultr.com
/news/Deploy-Cloud-
Servers-in-South-
Korea/
• 가성비가…
• uptime 100%에 도전!
• 클릭으로 필요한 각종 앱
설치

13. (우리가 몰랐던 사실) SSD 수명은 걱정하지
마세요
• https://gigglehd.com/gg/hard/1312880
• 하이라이트: “삼성 850 프로는 9.1PB의 데이터를 기록했네요. 공식 표기값
인 150TB의 60배. 하루 40GB씩 기록한다면 623년이 걸립니다.SSD의 수
명은 걱정하지 마세요”