F12 개발자 모드 사용을 사용한 웹페이지 분석 시작

웹 크롤러를 만들기 위해서 해당 웹 페이지를 분석한 과정을 남깁니다.

** 주의: JS, JQuery와 같은 기초지식이 없는 상태에서 진행하였기에 잘못된 정보가 있을 수 있습니다. (웹 개발 경험이 없습니다.)

 

- 개발자 모드 사용

1. 웹페이지에서 F12를 누르면 개발자 모드 창이 열려서 해당 웹페이지에 대한 관련 정보들을 알 수 있습니다.

2. 해당 개발자 모드 창에서 Ctrl + Shift + F를 누르면 해당 페이지 내에서의 모든 정보들을 볼 수 있습니다.

 

- JQuery: $(selector).val(value) -> 변수 값 대입

1. Html 내에서 onclick="ftn_name(var); 라는 문구를 확인했는데, 이는 마우스 클릭을 하였을 경우 해당 함수를 실행한다는 의미입니다.

2. ('input[name=var]').val(val); 의 의미를 찾아보았습니다. 이는 JQuery 문법입니다.

3. $(selector).val(value): value의 값을 selector에 대입한다는 것을 알 수 있습니다. (출처: www.w3schools.com/jquery/html_val.asp)

4. var는 hidden 타입으로 정의되어있는 변수입니다. hidden은 사용자에게 보이지 않는 숨겨진 입력 필드입니다. 사용자가 변경할 수 없는 데이터를 보낼때 유용하게 사용됩니다. (출처: tcpschool.com/html-input-types/hidden)

5. input[name=var]는 input 필드에서 이름이 var인 변수를 가리키는 selector입니다. (출처: stackoverflow.com/questions/19727263/select-particular-input-field-name-of-particular-form)

6. 즉 2번 구문의 문법은 input 필드에 있는 var의 값을 val값으로 바꾸라는 의미입니다.

 

- JQuery: $(selector).attr(attributeName, value) -> 선택한 요소의 속성 값 대입 (출처: www.codingfactory.net/10208)

1. $('form[name=var]').attr('action', val);

2. 의미는 form 필드에 있는? var의 action 속성 값을 val로 바꾸라는 의미로 보입니다.

3. form 태그에는 여러 속성들이 있는데 그중에 action은 폼을 전송할 서버 쪽 스크립트 파일을 지정합니다. (출처: www.nextree.co.kr/p8428/)

4. var의 method가 post로 설정되어있는것을 확인했기에 서버쪽으로 POST 요청을 보냅니다. POST 요청은 서버쪽에 어떤 작업을 명령할때 사용합니다. 또한 form은 사용자의 데이터를 서버에 전송하는 방법입니다. (출처: www.nextree.co.kr/p8428/)

 

- JQuery: $(selector).submit() -> 선택한 요소(=form)을 서버에 전송 (출처: m.blog.naver.com/psj9102/221012237293, cloudstudying.kr/lectures/72

1. 정확한 동작원리는 잘 모르지만 처리한 결과들을 서버에게 보내는 역할을 수행하는 것으로 보입니다.

2. 해당 결과 페이지가 바뀝니다. 중요한 기능으로 보입니다.

3. 추후 웹 개발을 하다보면 많이 접할 기능들로 보입니다.

 

이후부터는 아마 개발자 도구로는 확인이 불가능해보입니다.

submit 이후에는 아마 서버 단에서 처리할 거고, 해당 과정을 웹 상에서 볼 수 있을것 같지는 않습니다.

 

간단한 JQuery 문법과 폼을 이용해서 서버-클라이언트는 서로 데이터를 주고 받는다는 것을 알 수 있었습니다.