웹개발 일지

HTML과 Jquery 활용한 화면 프론트 작업 중 발생한 문제이다. 문제Jquery를 통하여 특정 영역에 html을 append 해주는 기능을 작업하던 중서버에서 요청받은 데이터가 해당 기능 추가 전과 후의 차이가 확인되었음. 설명을 위해 필요한 부분만 작성한 html 코드 예시 우선 결과 데이터를 기준으로 비교 결과 testFunc() 함수가 실행된 결과임을 알 수 있었음. 다만 해당 함수 위치한 영역은 숨겨져 있으며 특정조건에 일치하는 경우에 대해서만 표출해주고 있는 형태이다. 함수가 실행되기 위해서는 onblur 이벤트가 발생해야함. 하지만 테스트한 케이스는 해당 영역이 표출되어있지 않음. append 시 사용하는 Jquery 소스코드 $('..

view 작업을 할 때 다양한 jsp, php, react 등 다양한 언어를 사용한다. 이를 이용한 결과물을 브라우저에서 서비스를 제공하는 경우 작업 결과물은 html로 표출이 된다. 필자는 jsp 환경에서 작업을 하던 중 html input 태그에 reonly 속성을 주어 사용자가 직접 값을 입력하지 못하도록 의도하였으나 브라우저 상에서 테스트를 진행하였을 때 값을 입력할 수 있는 경우가 확인 되었다. 작업한 소스는 아래와 같이 태그에 readonly="readonly" 속성을 작성하였다. 읽기만 가능합니다. 브라우저 개발자모드로 확인한 html 소스는 아래와 같이 잘 적용되었으나 클릭 후 입력이 가능하여 readonly의 목적인 읽기 전용의 역할을 수행하지 못하였다. 확인 결과 필자의 작업 환경은 h..

발단 화면 진입하여 생성된 토큰 값을 서버로 보내 검증하는 작업을 진행하던 중 동일한 기능을 여러 페이지에 삽입하던 중 특정 페이지에서 토큰 값이 일치하지 않다는 오류 로그를 확인하게 되었음. 원인 디버깅과 로그를 확인하며 원인을 찾아보던 중 의심이 가는 부분을 확인하였음. 확인한 로그에서는 토큰을 두번 생성하고 있었음. 두 번 생성한 원인은 해당 페이지를 재호출하는 것으로 확인이 되었음. 개발자 모드로 화면이 로드되는 과정을 한라인씩 따라가 보았지만 JavaScript 부분에서는 호출되는 부분을 확인할 수 없었음. 페이지 내에 라인 별로 콘솔창에서 확인할 수 있도록 콘솔 로그를 삽입한 결과 특정 라인 이후로 콘솔 로그까지 표출되었다가 다시 처음부터 콘솔 로그가 표출되는 것을 확인하였음. 확인된 부분은 ..