반응형

ㅜ.ㅠ 일단 웃자!! ㅋㅎㅎㅎㅎㅎㅎ 
  개발시에...마우스 커서가 우연히~  form action 에 있었고..또 우연히 붙여넣기를 눌렀나보다..ㅜ.ㅜ


어느 순간부터...크롬에서  로그인 ID입력란에 커서 위치시..  에러 문구가 나왔다.
    '안전하지 않은 양식입니다. 자동 완성이 사용 중지되었습니다.'

해결 방법.    
   action에 오기입된 stylesheet 코드를  삭제한다. 

<form id="loginForm" name="loginForm" action="padding: 10px 0;">
  ->   
<form id="loginForm" name="loginForm" action="">
     * 크롬 비밀번호 자동완성 기능 하고도 연관되어 발견하기 힘들다. 
     * action 값에  '영문 2글자 이상' + ': '   이 등록된 경우에만 발생



이슈 트래킹
   1. 로그인쪽 UI수정하고  로컬,  개발 서버에서도 문제없었고..  운영 배포 후에도 문제가 없었다.
         * 로그인 자동완성 기능에 등록되어 있어서 발견 못했던 것..
   2. 배포후 몇일뒤 개발서버만에서 에러 발생.
       > 운영에선 문제없고 다른 PC에서도 발견되지 못해. 개발서버 문제려니..하고 대수롭지 않게 넘김..
         * 아마도. 개발서버 로그인 정보 저장하지 않고 있다가 저장한듯..ㅜ.ㅜ 
   3. 배포후 50일 뒤. 회원으로부터 이슈 제기.
       > 운영자 컴퓨터에서도 동일 이슈 발생/  일부 PC에선 해당 이슈 미발견.


이슈재연 방법
   1. 크롬 설정 > 자동완성 > 비밀번호 관리에서 해당 사이트 계정 저장정보 삭제


   2. 사이트 접속 시 이슈 확인.

 

* 에러 발생 조건
  1. 크롬 자동완성기능 미사용이거나 , 해당 사이트의 계정정보가 크롬에 등록되어 있으면 안됨.       
  2. form action 의 값이   '영문 2글자 이상' + ': ' 인 경우
      ex)   aa:  , aa::  (이슈발생)   
            ㄱㄱ:  ,11:  , aa , aaa, a:a:  (이슈발생안함)

 

반응형
Posted by Edward. K
반응형

placeholder에 Style적용하기

/* - Chrome ≤56,    - Safari 5-10.0           - Samsung Internet ≤6.2
   - Opera 15-43    - Opera Mobile 12-12.1    - Android Browser 2.1-4.4.4
   - QQ Browser     - iOS Safari 4.2-10.2   
*/
::-webkit-input-placeholder {color: #71B1DD;}

/* Firefox 4-18 */
:-moz-placeholder {color: #71B1DD;}

/* Firefox 19-50 */
::-moz-placeholder {color: #71B1DD;}

/* - Internet Explorer 10–11     - Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {color: #71B1DD !important;}

/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {color: #71B1DD;}

/* CSS Pseudo-Elements Level 4 Editor's Draft
   - Browsers not mentioned in vendor prefixes
   - Browser of newer versions than mentioned in vendor prefixes */
::placeholder {color: #71B1DD;}


#input_text::-webkit-input-placeholder {  color:#E17009;}
#input_text::-moz-placeholder {  color:#E17009; }
#input_text:-ms-input-placeholder { color:#E17009; }
#input_text:-moz-placeholder {  color:#E17009;}
#input_text:placeholder-shown {  border: 2px solid #E17009;}  /* inputbox내의 border 색상 */
#input_text{caret-color: #E17009;}
<input type="text" style="caret-color: #71B1DD;" placeholder="상품코드 혹은 상품명 " />
<br/><br/>
<input type="text" name="input_text" id="input_text" placeholder="텍스트를 입력하세요.">

 

반응형
Posted by Edward. K
반응형

크롤링 프로그램 테스트를 하다가 파일을 삭제 했는데..
    "오류: 기본 클래스 **.CrawlerController을(를) 찾거나 로드할 수 없습니다."



프로젝트  마우스 우 클릭 후, Run/Debug Settings 에서
에러나는 CrawlerController를 선택하고 Delete , Apply and Close

깔끔하게 Project > Clean 까지해주자


오류 원인

  -  패키지 익스플로러(Package Explorer) 상에서 main()함수 사용한 파일(.java) 삭제시 발생하는 에러.
  -  main()이 들어있는 클래스 파일을 실행하게 되면 실행 목록에 클래스 파일이 자동으로 추가되고,
      해당 파일 삭제시, 실행 목록에는 남아 있으나 실제 클래스 파일은 존재하지 않아 존재하지 않는다는 에러가 발생한다.

 

 

반응형
Posted by Edward. K
반응형

윈도우 업데이트(?) 이후, 
서버 실행시 'Port 80 required by **** is already use.' 에러가 발생했다.

80 포트를 사용하는 넘을 알아보자.

 1. 네트워크  상태 확인  netstat -ano | findstr :80
           * 마지막의 숫자가 PID

netstat -ano findstr :80

 2. PID에 해당하는 프로그램 확인   Ctrl + Alt + Del 동시입력
           * 불행(?)하게도 이녀석은 강제 종료가 안된다.

3. 'NT Kernal & System' 을 직접 종료하는 밖에 없다.
     3.1. 작업표시줄의 돋보기 버튼을 선택하고 '서비스' 입력후, 선택한다.

     3.2. World Wide Web Publishing 를 중지 한다.

     3.3 World Wide Web Publishing 사용안함으로 변경.  ?? 업데이트 하면서 자동설치된듯..하다 . 필요없으니 삭제!!
            * 마우스 우 클릭 ,  속성 선택,  시작유형 : 사용안함 선택 후 적용

4. 확인 .  서버실행 잘 된다.

 

반응형
Posted by Edward. K
반응형

 1. [ Spring Boot + Quasar ] 1. 프로젝트 환경설정 
    2.
 [ Spring Boot + Quasar ] 2. Quasar UI / component 가져다 쓰기

 

0. 사전작업

더보기

node.js 가 설치되어 있어야 한다.
    node.js 다운로드 및 설치 
           https://nodejs.org/ko/          * 화면에 보이는 TLS 버전을 다운받습니다.
            ------------------------------------------------------------
               * 설치 폴더 >  C:\Program Files\nodejs\
               * 설치 확인 >  C:\Users\uuser>npm -v

            ------------------------------------------------------------
* Node.js를 설치하게 되면 Node Package Manager인 NPM은 자동으로 설치된다.
  이를 통해 원하는 패키지를  npm install ~~ 의 형태로 설치할 수 있고,
  작성 코드를 빌드하고 서버를 켜는 행위도 npm을 통해 수행할 수 있다.

1.   Quasar CLI 설치       npm install -g @quasar/cli

2. Spring Boot 프로젝트 생성 

Create a project >  Spring Boot > Spring Starter Project   선택후 Next
프로젝트 설정후 Next

3. Spring Boot 사이트 확인 

spring boot Start

application.properties 수정 후 실행
기본 port 와 로그인 계정 정보

프로젝트(폴더)명은 소문자로...
Quasar에서 대문자 프로젝트명은 사용못한다.

대문자로 Quasar 프로젝트 생성시 에러

4. Quasar   프로젝트 생성    *  quasar create quasar_front
    * 이클립스에서 미리 Project 폴더(quasar_front) 생성후  진행 
    * 프로젝트(폴더)명은 소문자로...  Quasar에서 대문자 프로젝트명은 사용못한다.

대문자로 Quasar 프로젝트 생성시 에러
이미 만들었으니..Y
엔터
엔터
엔터
Aurhor 입력후 엔터
이동키로 이동  Sass with SCSS syntax (recommended) 선택, 엔터
Auto-import in-use Quasar components & directives 선택. 엔터
이동키로 이동, 스페이스바로 선택(i 키로 revert), 엔터 
Prettier 선택 엔터
NPM 선택. 엔터
설치중....
설치 완료

5. Quasar 사이트 확인 
  5.1. 설정 변경 
* quasar.conf.js  에사 port 번호 변경 ( 8080 -> 9091 )  * 8080은 이미 사용중..


  5.2. 서버 실행/ 사이트 접속(서버 실행시 자동접속)

 

6. 파일 설명 * 최초 생성되는 파일들

[node_module] : package.json 에 등록된 의존성 파일들이 다운로드 되는 폴더
                    package.json 수정시 npm install 명령어로 다운로드 된다.
                    * 개별등록시 : npm install 모듈명 -save    > package.json 자동 등록

[public] :
웹 파일 폴더. /favicon.ico처럼 루트로 접근 가능.

[src]
    [asset]  :
이미지 등을 저장하는 폴더입니다. webpack이 실행시 처리.
    [boot] :
부트 파일 폴더. 애플리케이션이 실행되기 전에 패키지나 플러그인 초기화.
                    quasar.conf.js 의 boot 에 선언된 플러그인 초기화 
    [components] :
vue컴포넌트들을 담는 폴더
    [css]  :
전역 css  폴더
    [layout] :
레이아웃 폴더
    [pages]  : 
페이지 폴더
    [router]  :
라우팅 설정 폴더
    [store] :
전역 데이터 저장소

.eslintrc.js :
자바스크립트  정적 분석 도구 (코드를 분석해서 문법 오류,
                안티 패턴 등을 찾아 일관된 코드 스타일로 작성할 수 있게 하는 도구)

babel.config.js : 
https://juneyr.dev/2019-02-20/webpack-babel

jsconfig.json :
https://code.visualstudio.com/docs/languages/jsconfig

package.json :
 의존성 관리 파일 (  aka. gradle  )

quasar.conf.js
 : Quasar 프로젝트의 환경 설정 파일.

* store  :  https://kamang-it.tistory.com/entry/Vue14vuex-사용하기
              https://hello-bryan.tistory.com/272
              https://balmostory.tistory.com/m/70?category=812222 
https://uxgjs.tistory.com/149

더보기

 

export default를 이용하여 외부에 노출시켜 주는데 노출시 각 키값 구조는 다음과 같은 의미를 가지고 있습니다.

▶ state: 프로젝트 내의 모든 곳에서 참조 및 사용이 가능한 전역변수
          state를 바꾸기 위해서는 commit을 이용해야 한다.

▶ mutations: state를 변경시키는 역할을 합니다. 동기 처리 (Mutations을 통해서만 state를 변경해야 함) 
         
        * commit('함수명', '전달인자')으로 실행  / mutations 내에 함수 형태로 작성

▶ action: Mutations를 실행시키는 역활.  비동기처리 .비동기 처리이기 때문에 콜백함수로 주로 작성
                 * dispatch('함수명', '전달인자', {root:true}) 로 실행

getters : 각 Components의 계산된 속성(computed)의 공통 사용 정의 
             하위 모듈의 getters를 불러오기 위해서는 특이하게 this.$store.getters["경로명/함수명"]; 을 사용
       

 

반응형
Posted by Edward. K