웹개발 일지

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

React 프로젝트를 진행하던 중에 react-bootstrap을 적용하기 위해 해당 패키지를 설치 후 작업을 진행하였다. 작업을 두대의 기기에서 번갈아가며 진행하는 상황이었다. 처음 작업을 진행하였던 1번 기기에서는 패키지 설치치 후 bootstrap이 잘 적용되는 것을 확인하였다. 문제는 2번 기기에서 작업한 소스를 git pull 진행 후 로컬에서 구동을 진해하였으나 아래와 같은 에러 메시지가 발생하였다. PS 프로젝트경로> npm run start npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. npm WARN npm npm does not support Node.js v16.1..

발단 개인 프로젝트 진행 중 백엔드 API 서버 완성 후 프론트 프로젝트를 React를 통하여 구현 중이었음. POSTMAN 툴을 사용하여 백엔드 API 서버를 호출하였을 때 결과는 의도한대로 동작하는 것을 확인하였음. React에서 axios 라이브러리를 활용하여 백엔드 API 서버를 호출하는 과정에서 결과가 넘어오지 않는 상황이 발생하였음. 콘솔창을 확인한 결과 CORS 에러가 발생하고 있었음. 두 부분에 걸쳐서 해당 이슈를 조치하였음. 작업 구성 - 프론트서버 : http://localhost:3000 - 백엔드서버(apigateway의 역할) : http://localhost:5555 원인 분석 및 조치 CORS란? Cross-Origin Resource Sharing의 약자로 교차 출처 리소스 ..

발단 Windows10 개인 로컬 환경에서 WSL2를 활용하여 docker를 실행하여 apahch와 tomcat을 연동하는 중 발생한 문제 docker에서 apache 컨테이너와 tomcat 컨테이너를 실행하였고 각각 호출 시에는 정상적으로 호출되었음 http://localhost 호출 http://localhost:8080 호출 그러나 Web 서버와 Was의 처리를 분리하 mod_jk와 ajp 프로토콜을 적용하였을 때 문제가 발생하였음. ajp 적용 후 http://localhost 호출 시 에러 화면 원인 mod_jk.log를 확인하였을 때 WEB에서 WAS로 AJP통신을 요청할 떄 해당 ip와 port로 연결을 실패하였다는 것임. 에러 메시지 [info] ajp_service::jk_ajp_comm..

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

운영중인 서버에 DNS 사용 설정이 되어있지 않아 외부기관의 url을 호출할 때 하당 도메인의 ip를 nslookup으로 확인하여 hosts 파일에 일일이 등록되고 있는 부분을 확인하였다. 이러한 작업은 불필요하게 시간과 힘을 들이는 부분이 문제가 된다고 생각하여 해당 서버에 DNS를 적용해 보기로 하였다. 작업환경 Linux 환경 별도 DNS 서버 존재 먼저 host.conf 의 간략한 설명 host.conf multi on order hosts, bind, nis 위 설정대로 라면 hosts, bind, nis 순으로 DNS를 조회하는 의미인데 각 값의 의미는 아래와 같다. multi /etc/hosts 파일에 여러 url 설정이 가능하다. order 도메인을 조회할 방법의 우선순위를 설정 hosts..

sql querry가 들어있는 mybatis xml파일 내에서 부등호를 사용할 상황은 자주 등장한다. 그중에서도 "크거나 같다", "작거나 같다"에 대한 부등호를 처리해야 하는 경우를 정리하였다. jsp 내에서 jstl + EL을 경험해본 적이 있는 사용자라면 혼란이 있을 수 있기 때문이다. jstl + EL 방식에서 "보다 크거나 같다", "보다 작거나 같다"의 부등호는 ≥ ≤로 사용을 한다. 이 문법을 그대로 mybatis xml에 사용을 하면 아래와 같이 mybatis BuilderException The entity "ge" was referenced, but not declared. 라는 에러메시지를 확인할 수 있다. jstl 분석 먼저 jstl에서 ≥를 사용할 수 있는 이유를 알아보았다 부등호..

jQuery와 날짜 관련 js라이브러리 datepicker를 사용 중 시작일자와 종료일자가 서로 침범하지 않도록 검증을 하는 기능이 존재하여 날짜를 다시 선택하고자 할 때 불편함이 발생. 입력된 날짜를 초기화해야 하는 기능 구현이 필요. 1. 입력된 날짜 value 값을 빈 값으로 초기화 $('시작날짜선택자').datepicker('setDate', ""); $('종료날짜선택자').datepicker('setDate', ""); 1번 과정만 진행하였을 때 화면상에 input box에는 아래 이미지처럼 값이 비어있는 것으로 보이지만 클릭을 하였을 때 이전에 선택하였던 날짜가 선택되어 있어 초기화라고 할 수 없음. 2. datepicker 기능 해제 $('시작날짜선택자').datepicker('destroy..