post IT

json 이용을 위해 pom.xml에 의존성 주입하면 나타나는 에러

NoClassDefFoundError: com/fasterxml/jackson/databind/exc/InvalidDefinitionException

해결

버전 2.9.6 -> 2.9.9 로 변경

consolas 탈출!👯‍♀️

아래 폰트들은 모두 무료 이용 가능하다.

▼다운로드 링크

Jetbrain mono : https://github.com/JetBrains/JetBrainsMono

monaco : https://www.cufonfonts.com/font/monaco

d2coding : https://github.com/naver/d2codingfont

※ 개발연습생의 설정 방법이므로, 내용이 정확하지 않거나 자세하지 않을 수 있습니다! (또륵)

MySQL에 담겨있는 나의 DB들을 다른 PC나 장소에서도 똑같이 동기화 하고 공유할 수 있으면 정말 좋겠지만...

간단한 연결이나 동기화는 아마도 보안적인 부분에서 이슈가 생기기 쉬울테니까? 이렇게 하는 거겠지? 하는 연습생의 스치는 생각은 버려두고....,

아무튼 노트북과 데스크탑을 옮겨다니며 연습생활을 하고 있는데, 각 기기에 DB동기화가 안되니까 export-import를 통해 직접 파일을 넘겨주며 연결해줘야하는게 너무너무너무너무너무 불편했다. 

그래서 다른 PC에서도 실시간(?)으로 DB를 사용하고 작업할 수 있는 방법에 대해 구글링을 하다보니 원격접속이라는게 있었다! 몇가지 블로그들을 찾아보니 커맨드창에서 직접 쿼리문을 이용하여 원격접속 설정을 하는 것이 정석인 것 같다.

그런데 나는 커맨드창을 좋아하지 않는다. (아니, 커맨드창이 날 좋아하지 않는다.)

그래서 보기 좋고 설정하기 편한 MySQL 워크벤치를 이용해서 원격 접속을 설정하였다!

준비물

서버PC (DB를 공유해줄 PC)
　　　　　　|
접속PC (DB를 공유받을 PC)

• 서버PC의 IP주소만 제대로 알고 있으면, 인터넷 환경이 같지 않아도 된다.
  (나 같은 경우 서버PC는 유선 환경ㅡ즉 본체에 랜선 장착 중, 그리고 접속PC는 무선 환경ㅡ즉 Wifi로 연결중이었다!)
• 각 PC마다 워크벤치가 설치되어 있어야한다.
• 서버PC가 전원이 켜져있어야지만 접속PC로 DB를 다룰 수 있다.

1. 서버PC의 Workbench에서 root계정으로 접속 한 뒤, 새로운 계정을 생성한다.

• 워크벤치 좌측의 Users and Privileges - Add Account 클릭
• Login Name : 새로운 계정명. 아무거나 자유롭게
• Limit to Hosts Matching : 접근 가능한 IP를 제한해주는 부분.
  - % : 모~~든 IP에서 접근 가능하다.
  - 특정 IP주소 : 기입한 IP주소로만 접근이 가능하다.
    (예를들어 내 DB에 접근 할 수 있는건 내 노트북 뿐이다 -> 내 노트북의 IP주소를 기입)
• 비밀번호를 자유롭게 입력하고 우측 하단의 Apply 클릭하여 계정 생성을 완료한다.

2. 접근허용할 스키마를 선택한 후, 스키마에 대한 새계정의 권한을 설정한다.

• 좌측에 생성된 계정을 클릭하고, 우측에서 Schema Privileges 탭을 선택 - Add Entry 클릭
• 접근허용할 스키마(테이블)를 설정할 수 있다.
  
  

• All Schema : 현재 root 계정에 있는 모든 DB에 접근할 수 있게 한다.
  - 지금 설정은 모두 프로그래밍 연습을 위한 접속이므로 일단 어느 컴에서나 모든 DB를 다 관리할 수 있게 All Schema를 선택했다. 특정 스키마만 필요한 부분이라면 Selected schema 에서 선택할 수 있다.
  
  
  

• 추가된 스키마 목록을 클릭하고 , 하단에서 새로운 계정에서 사용가능한 DDL, DML 권한을 설정한다. 
  - 이 부분 또한 연습을 위한 목적이므로 모든 권한을 부여하도록 Select "ALL"을 클릭하여 적용해주었다.

3. 접속할 PC에서 워크벤치를 켜고, 새로운 연결을 등록해준다.

• 워크벤치의 메인화면에서 캡쳐에 표시된 +를 누르고 Setup New Connection창을 열어준다.
  - Connection Name : 연결명. 아무거나 알아보기 쉽게 입력해준다.
  - Hostname : 서버 PC의 IP주소를 적어준다.

• Username : 아까 서버PC에서 만들어둔 새로운 계정이름을 입력한다. 
• Store in Vault ... 를 클릭하고 새로운 계정의 비밀번호를 입력하고 OK - OK !
• 여기서 연결이 성공했다면, 만들어둔 Connection으로 접속하면 서버PC에서 설정한대로 스키마들이 들어와있고, 관리할 수 있다. 

연결에 성공한 접속 PC에서 DB를 만지면, 만진 내용이 바로 서버PC에서도 동기화 되어 있는 것을 알 수 있다!

에러 내용

MyBatisSystemException Could not set parameters for mapping: ParameterMapping{property='gender', mode=IN, javaType=class java.lang.Object, jdbcType=null, numericScale=null, resultMapId='null', jdbcTypeName='null', expression='null'}. Cause: org.apache.ibatis.type.TypeException: Error setting non null for parameter #4 with JdbcType null . Try setting a different JdbcType for this parameter or a different configuration property. Cause: org.apache.ibatis.type.TypeException: Error setting non null for parameter #4 with JdbcType null . Try setting a different JdbcType for this parameter or a different configuration property. Cause: java.sql.SQLException: Parameter index out of range (4 > number of parameters, which is 3).

Mapper 코드에 공백이 있어서 발생한 에러. 공백 제거해주자 정상작동 함!

gmail 서버를 이용해 아이디/비밀번호 찾기 기능 구현 중, 

Could not convert socket to TLS 에러 발생.

root-context.xml에 아래 코드 추가해주면 해결 완료!

갑자기 js 파일이 흑백화 되어 진짜 메모장처럼 코드를 쓸 수 밖에 없는 상황...

이 채도 낮은 파일에서 우클릭 한 후에, (혹은 Explorer 파일에서 우클릭)

Open With - JavaScript Editor로 열면 해결이 된다.

JavaScriptEditor가 메뉴에 안보일 땐 따로 플러그인을 설치해주면 된다.

메뉴 Help - Install New Software...  창을 열고

아래 스샷과 같이 Add -> Location 칸에 http://download.eclipse.org/releases/photon 을 추가한 후 Add.

로케이션을 연결해주면 여러가지 목록이 뜨는데 제일 하단 쪽에

Web, XML, Java EE and OSGi Enterprise Development --> Eclipse Web JavaScript Developer Tools

를 체크한 후 Next 하여 설치해준다. 

이미 설치를 해버려서 스샷이 없는데 위와 비슷하게 JavaScript 쩌구쩌구 하는 걸 설치해주면 된다.

설치가 완료된 후 이클립스 재시작이 되고,

상단의 방법처럼 Open With - JavaScript Editor를 통해 열어주면 컬러화가 되어 있다.

앞으로 js열때마다 Open With를 통해 열어주면 매우 귀찮을테니까

JavaScript Editor를 디폴트에디터로 설정해보자.

메뉴 Window - Preferences - Associations 검색

아래와 같이 .js를 클릭해주면 아래쪽에 Editor목록이 나오는데 

그중에 JavaScript Editor를 클릭하고 오른쪽에 [Default] 버튼을 클릭 - Apply and Close 를 한다.

그러면 다음엔 열때 바로바로 알록달록한 js가 나온다.  끗!!!

정규표현식

• 문자열의 패턴을 확인할 때 사용하는 표현식
• 아이디, 비밀번호 등의 규칙을 정할 때 사용.

참고사이트 : www.regex101.com

네이버 회원가입 아이디 정규표현식
/ ^[a-z0-9_-]{5,20}$ /
'5~20자의 영문 소문자, 숫자와 특수기호(_), (-)만 사용 가능합니다.'

정규표현식 중요 메서드

• test(문자열) : 정규표현식과 일치하면 true, 일치하지 않으면 false를 반환.
    ex) regex.test(str) str이 regex에 맞는 문자열인지 확인.

var phoneReg =  /^010(-\d{4}){2}$/;

var num1 = '010-1234-5678'
console.log(num1 + " : " + phoneReg.test(num1));
var num2 = '01012345678';
console.log(num2 + " : " + phoneReg.test(num2));
var num3 = '010-abcd-abcd';
console.log(num3 + " : " + phoneReg.test(num3));
var num4 = '010-1234-678';
console.log(num4 + " : " + phoneReg.test(num4));

• 문자열.math(정규표현식) : 정규표현식과 일치하는 문자열을 배열로 만들어 반환.

플래그정규표현식 : 정규표현식의 / ← 다음에 써준다.

• i : 대소문자 구별 없이 비교. test() 메서드를 이용할 때 사용
• g : 문자열 전체와 비교
• m : 여러 행의 문자열을 비교

참고하면 좋은 영상!

https://www.youtube.com/watch?v=t3M6toIflyQ

input 태그

• 인라인태그
• 사용자가 입력할 부분에 주로 <input>태그를 이용함. 다양한 input의 옵션은 type 속성에 의해 결정 된다.

<!--기본형-->
<input type="유형" [속성="속성 값"]>

• id속성 : 여러번 사용된 폼 요소를 구분하기 위해 사용.
  id속성을 지정해 놓으면 <label>태그를 이용해 캡션을 붙일 수 있고, CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수 있음.

text 타입에서 사용할 수 있는 속성

checkbox & radio 타입에서 사용할 수 있는 속성

<!--사용예제-->
<form action="">
    <fieldset>
         <legend>신청과목 <small>(1과목)</small></legend>
         <label for="music"><input type="radio" name="subject" id="music" value="music">음악</label>
         <label for="math"><input type="radio" name="subject" id="math" value="math">수학</label>
         <label for="english"><input type="radio" name="subject" id="english" value="english" >영어</label>
    </fieldset>
</form>

• for - id - value : 같은 값으로 지정.
• name : 같은 분류 안에서 동일한 name으로 지정.

number & range 타입에서 사용할 수 있는 속성

textarea 태그

<!--기본형-->
<textarea [속성="속성 값"]> 내용 </textarea>
<!-- 내용에 글을 미리 입력해둘 수 있다. 내용이 없으면 빈 텍스트 영역. 
	내용부분엔 공백이 그대로 표시되어 나타난다.-->

a태그 (인라인태그)

<!-- 기본형 -->
<a href="링크주소" [속성="속성 값"]> 텍스트 </a>
<a href="링크주소" [속성="속성 값"]><img src="이미지 파일 경로"> </a>

a 링크 태그 속성

form태그 (블록태그)

<!--기본형-->
<form [속성="속성 값"]> 여러 폼 요소 </form>

form 태그 속성

label 태그 (인라인태그)

<!--기본형-->
<label [속성="속성 값"]> 레이블명 <input ...> </label>

또는

<label for="id명"> 레이블명 </label>
<input id="id명" [속성 = "속성 값"]>
<!-- <label> 태그를 사용한 텍스트 부분과, 사용자 입력을 받는 <input> 소스가 떨어져 있더라도 
id명을 통해 둘 사이를 쉽게 연결 할 수 있는 장점이 있음. 

<label>에서 for와 id는 항상 함께, 같은 이름으로 사용해야 한다.-->

• 폼 요소에 레이블을 붙임. (레이블 : 입력 창 옆에 '아이디', '비밀번호' 처럼 붙여 놓은 텍스트)
• <label> 태그를 이용하면 폼 요소와 레이블 텍스트가 서로 연결되어 있다는 것을 브라우저가 알 수 있음.
• 체크박스와 라디오 박스에 <label>을 감싸주면, 텍스트 영역까지 클릭 범위가 확장 된다.
  대부분의 폼에서 이 방식을 이용함.