개발자도구로 레퍼런스 페이지 스크립트 추출하기

개발 비전공자의 ERP시스템 제작기

챗-GPT에게 레퍼런스 웹사이트를 바탕으로 수정을 요청하기 위해선 레퍼런스 웹사이트에서 사용된 스크립트를 찾는 것이 중요합니다.

열심히 설명해도 놓치는 부분이 생기기 때문이죠. 예를 들어 토글 버튼을 누르면 참여하기로 바꿔주고 다시 버튼을 누른 경우 참여하기를 해제해 달라는 스크립트만으로는 토글의 애니메이션, 그리고 작동 방식이 동기화 방식인지 비동기화 방식인지 일일이 설명하기 어렵기 때문이죠. 무엇보다 레퍼런스 웹사이트에서 작동하는 방식이 마음에 들어 똑같이 설명했지만 작동되는 스크립트는 새롭게 만들어지는 코드다 보니 최적화가 안 되어 있을 수도 있습니다. 그리고 상용서비스 중인 레퍼런스의 경우 이미 사용자들의 피드백을 바탕으로 정책에 벗어나는 행동을 했을 때와 같은 예외 케이스들이 코드로 잡혀있는 경우가 있기 때문입니다.

현재, 2024년 기준으로 모든 웹서비스의 작동 방식은 새로운 기술은 없다고 보면 됩니다. 물론 코드 최적화가 되거나 애니메이션 효과를 담당하는 CSS의 신기술이 나오거나 하긴 하지만 작동의 원리로만 보면 새로울 것은 거의 없습니다. 즉, 이미 만들어져 있는 것을 잘 고치느냐가 중요한 능력이 될 수 있습니다.

지금 보이는 화면은 Amazon.com의 주소 입력 필드입니다. 우리는 이 주소 입력 필드 중 나라 입력 필드를 레퍼런스 한다고 가정합니다.

크롬브라우저 우측 상단의 점 세개를 클릭합니다.

도구 더 보기 > 개발자 도구를 선택합니다. 단축키는 F12 또는 Alt+Ctrl(Command)+I 입니다.

빨간 톱니바퀴를 클릭합니다.

js코드를 레퍼런스하기위해 상단의 설정에 체크합니다.

개발자도구 왼쪽 상단의 빨간 네모 박스 부분을 클릭합니다. 이 도구는 요소 선택 툴입니다. 요소 선택 툴이 활성화되었으면 레퍼런스 할 영역에 마우스를 가져다 댑니다.

이렇게, 요소에 마우스커서를 얹으면 해당 영역만 표시가 됩니다. 우리는 이 영역에서 사용되고 있는 HTML, CSS, JS 요소를 영역을 지정하고 있는 선택자¹를 통해 식별할 수 있습니다.

사용된 식별자 중 가장 유니크한 것을 고릅니다. 클래스는 여러개의 부여가 가능해서 해당 기능에 작동할 법한 별명을 찾아야 하기 때문이죠.

예제에서는 countryCode가 가장 유니크해 보입니다.

그를 바탕으로 Search필드에 countryCode를 타이핑하여 검색합니다.

보시는 바와 같이 css(스타일)와 js코드까지 가져올 수 있습니다.

이를 챗GPT에게 분석요청합니다.

이렇게 GPT는 우리가 원하는 영역에 사용된 코드를 분석해줄 수 있습니다. 이제 이를 바탕으로 우리서비스에 가져오려면 우리서비스에 맞게 고쳐줘 라고 설명을 해야합니다.

이렇게 우리, 개발 비 전공자들도 챗-GPT를 통해 전문 개발을 할 수 있게됩니다.

¹HTML에서 클래스 선택자는 웹 페이지의 특정 요소에 별명을 붙여 스타일이나 동작을 적용하는데 사용됩니다. 이 별명을 사용함으로써, 프로그래밍할 때 특정 요소를 쉽게 식별하고 관리할 수 있습니다.

클래스 선택자 사용 방법:

클래스 정의하기: 원하는 HTML 요소에 class 속성을 추가하고, 그 요소에 대한 별명을 설정합니다. 예를 들어, <button class="redbutton"></button>은 버튼에 redbutton이라는 별명을 부여합니다.

CSS에서 클래스 선택: CSS에서는 점(.)을 사용하여 이 별명(클래스)을 선택하고, 그 요소에 스타일을 적용합니다. 예를 들어, .redbutton { color: red; }는 redbutton 클래스를 가진 모든 버튼의 글자색을 빨간색으로 설정합니다.

클래스 선택자는 웹 개발에서 요소를 효과적으로 구분하고, 스타일과 동작을 쉽게 적용할 수 있도록 도와주는 유용한 도구입니다.