WIL (2021-09-19)
1. 부트캠프 시작
부트캠프 1주차를 시작하였다.
4인 1팀이며, 팀원 및 팀장은 랜덤으로 배정되었다. 부트캠프에 대한 설명회는 약 30분만에 끝이나고
바로 팀프로젝트 주제를 받고 시작하였다.
2. 첫 번째 프로젝트
Javascript와 python, aws ec2 를 이용하여 닷새 안에 웹 사이트를 완성해야 했다.
만들 웹사이트의 컨셉은 내 아이디어로 하기로 됐는데, 예능 "안녕하세요"를 본따서 웹사이트에 접속한 유저가 고민글을 올리면 다른 유저들이 추천 혹은 비추천을 투표할 수 있으며, 추천수가 높은 게시물들은 메인페이지에 따로
출력되도록 하는 컨셉으로 정했다.
3. 나의 역할과 진행
메인 페이지와 로그인 및 회원가입 페이지의 프론트엔드 담당을 하였다.
4. 문제 발생과 해결
(1)
자바스크립트에서 엘리먼트를 생성하는 함수와 해당 엘리먼트가 선택자인 이벤트리스너를 실행했지만 에러가 났다.
원인 : 엘리먼트가 생성함수를 실행하기 전에 이벤트리스너가 선언되어 해당 이벤트리스너는 존재하지도 않는 엘리먼트를 참고하려고 했기 때문에 error가 발생했다.
해결 : 이벤트리스너가 엘리먼트 생성 함수와 다른 스코프에 있을 경우, 엘리먼트 생성 함수가 실행되고 난 뒤 이벤트리스너가 선언되어야 제대로 이벤트가 작동한다.
(2)
글 목록 데이터 GET요청으로 데이터를 받아 출력을 하려 했지만 글 목록 데이터가 undefined 인 채로 출력을 했다.
원인 : 글 데이터를 받는 GET요청은 비동기 처리이기 때문에 요청을 보내고 응답을 받기전에 글 목록 출력을 먼저 해버려서 undefined라고 출력이 되었다.
해결 : jquery의 ajax success메서드 실행 블록에 글 출력 함수를 삽입하면 응답을 정상적으로 받고 나서 글 출력 함수를 실행한다.
(3)
프로젝트를 배포하고 나니 누군가가 게시글 내용에 HTML태그와 그 안에 스크립트를 삽입하여
해당 게시글의 상세페이지로 접속하게 되면 글 내용에 삽입해둔 스크립트가 실행되는 XSS 공격을 하였다.
원인 : 우리가 의도한 것은 단순한 문자열로서 화면에 출력되기를 바랬지만, 브라우저에서는 HTML태그와 스크립트로 인식하여 실행을 하였다.
해결 : 자바스크립트에서 글 내용 중 HTML태그를 정규표현식으로 찾아서 삭제하는 함수를 POST 요청전에 실행하도록 하였다.
5. 받은 피드백
1. 자손 엘리먼트의 위치를 조정할 일이 있으면 flex를 써라.
2. css 스타일 초기화는 unset 을 사용.
3. onclick 인라인 함수 지양.
4. XSS 방어
- 첫 번째 방법 : 글 내용을 p태그로 감싸면 내용이 문자열 처리되어서 실행될 일이 사라진다.
- 두 번째 방법 : HTML태그를 정규표현식을 이용해 특수 코드로 바꾸어 DB에 저장하고 화면에 출력할 땐 특수코드를 태그로 변경.