우디의 개발스터디

리눅스 AWS 서버 실무 배포 및 운영 관리 정리(putty, filezilla)

개발자 우디 — Tue, 8 Nov 2022 10:33:14 +0900

리눅스 서버 배포 및 운영 방법 정리
2022.11.08 최신화
내가보려고 저장
url 들은 그냥 삼성으로 예시

END POINT 확인

CMD에 아래 줄 입력해서 확인! telnet 뒤는 주소, 맨 뒤 숫자는 포트번호
- telnet engageimportapi.samsung.com 443
CMD 에서 확인하면 로컬에서 날리는 확인이고, 서버에서 API 보내려고 확인하는거면 동일한 방법으로 Putty 에서 입력해서 확인할 것.
포트번호는 http 는 80, https 는 443 으로 규약

IDE

IDE 내에서 프로젝트 우클릭 EXPORT 해서 WAR 파일확장자로 선택 후 추출
로컬 디렉토리에 원하는 특정 위치에 deploy 폴더 생성하고 그 안에 해당 일자 폴더 만들고(ex.20220511) 그 안에 AP, API 디렉토리 2개 생성 후 그 중 작업할 디렉토리 안에 ROOT.war 로 저장

리눅스 서버 배포 팁

ROOT.war 파일의 기존과 변경파일 용량과 시간을 꼭 잘 확인할 것!
기존 tomcat 종료 시 pid 값이 일치하지 않으면
- vi tomcat.pid 열어서 현재 돌아가는 것과 일치하게 변경 후 [i] -> ESC -> :wq
- 위 과정 완료 후 ./shutdown.sh 로 종료
서버 재시작은 ./startup.sh
프론트 파일들은 서버 재시작 필요 없음
위 과정 후 꼭 제대로 돌아가는지 로그로 보면서 확인할 것.
기존 서버에 ROOT.war 파일은 확장자명을 바꿔서 백업해둘것. 예시) ROOT.war.bk0831 --> 이런식으로 변경해서 두고 새로 바뀐 war파일을 추가하면 됨.

Putty

ps -ef | grep tomcat : 톰캣 가용 서버 확인
예시: /data/log-backup/samsung/webapp/logs : log4j 로그 저장 경로

진행 과정

putty 터미널을 2개 킨다(하나는 로그확인용, 하나는 명령어 실행용)
일반계정(centos)으로 로그인 한 후 su 입력해서 root 계정으로 전환
현재 돌아가는 톰캣서버들을 확인하려면 ps -ef | grep tomcat 입력해서 173, 174 둘 다 확인
현재 위치 / 루트로 이동(cd /) 후 로그 디렉토리로 이동 --> 예시) cd svc/samsung-api/engine/apache-tomcat-9.0.7/logs
putty 창 2개 중 하나는 프로젝트 cd svc/engine/apache-tomcat-X.X.X/logs로 들어가 tail -f catalina.out 다음 명령어를 입력해서 로그를 살펴본다
윗 줄이 동작하지 않을 시 --> cd data/log-backup/samsung-api/webapp/logs/debug 들어가서 tail -f debug.log 입력해서 로그 확인.
putty 창 2개 중 다른 하나는 프로젝트경로/webapp으로 들어가 ps -ef | grep 이나 tomcat | grep [프로젝트명] 을 입력해 현재, 서버가 돌고 있는지 확인한다. (비즈메세지 센터에서 모니터링으로 확인도 같이)
로그 확인 후 안돌아가고있으면 톰캣경로/bin 디렉토리 내에 ./shutdown.sh 해주고 [FileZilla]에서 ROOT.war 최신으로 교체하고 다시 putty에서 ./startup.sh 배치파일 실행해서 톰캣서버 재시작.
경로예시) cd /svc/samsung-api/engine/apache-tomcat-9.0.7/bin
1. ./shutdown.sh << ./ 필수 (톰캣이 아닌 리눅스 자체를 종료해버릴수 있음 주의!!!!!)

vi 명령어

vi + 파일명
vi 내에서 [i] 입력모드
vi 내에서 :q 는 탈출, :wq 는 저장후 탈출
vi 내에서 /찾고싶은문자열 + n(ctrl+F 와 동일)

FileZilla

처음 접속 시 SFTP - SSH 로 선택해서 들어가야함 일반 계정으로(셀렉박스 2번째에 위치)
호스트: 예시)10.101.83.174
사용자명 : 예시)admin1
비밀번호: 예시)root1
포트: 2022 ==> 정보 입력 후 연결
리모트 서버 경로 webapp 까지 이동(WEB 일때)
API 는 경로 /svc/samsung-api/webapp 에 있음
리모트 서버에 있는 ROOT.war 파일 로컬에 ORG 폴더에 백업(혹시모를 에러대비)
백업이 완료 되었으면 수정 적용된 버전을 FTP 를 통해 서버에 반영
ROOT.war 파일 디패키징 경로 예시 ==> /svc/samsung/engine/apache-tomcat-9.0.7/webapps
FTP 21 번 포트는 보안 관련사항으로 막아져 있음

리눅스 명령어

pwd : 현재 위치
cd : 이동
ls : 현재 디렉토리 파일 확인
ls -al : 리스트로
ls -alrt : 정렬까지
su : root 계정으로 전환
ps -ef|grep tomcat: 톰캣 실행중인것 확인
vi : 텍스트파일 열기
i : 입력모드
dd : 한 줄 삭제
:q : 텍스트파일 나가기
:q! : 저장하지않고 나가기
:wq : 저장하고 나가기

hosts

DNS 서버 확인하기 전에 먼저 조회하는 ip 설정해두는 파일, 리눅스에도 존재함

C:\Windows\System32\drivers\etc\hosts 파일 확인

TIP

timeout 에러는 connection time out 과 read time out 이 있는데, 전자는 연결까지 허용할 수 있는 시간을 초과한 것이고 후자는 연결된 후 작업이 마무리 되는 데 까지 걸리는 허용 시간을 초과한 것이다.

[Javascript] 만나이 계산

개발자 우디 — Fri, 7 Oct 2022 15:03:31 +0900

업무 중 중계서버에서 주민등록번호를 넘겨 받아 스크립트에서 만나이를 조건으로 분기해야하는 작업이 있었다. 함수로 간단하게 구현해봤는데 테스트 결과 문제없이 잘 동작하고 있다.

실제로는 아래 코드에 분기 조건까지 들어갔었지만 어차피 만나이를 계산하는 과정이 중요한거니까 해당 조건 분기 부분은 지우고 만나이를 계산해서 리턴하는 부분까지의 코드만 포스팅 하려고 한다.

필요한 사람이 있다면 참고하면 좋을 것 같다.

// 파라미터로 주민등록번호 받아서 만나이 계산
function fn_checkBirthAge(jumin){
	
	// 전달받은 주민번호 데이터에 '-' 확인 후 있으면 제거
	if(jumin.includes('-')){
		jumin = jumin.replace('-','');
	}
	
	// 전달받은 주민번호 데이터 자체에 문제가 있는 경우
	if(jumin.includes('-') == false && jumin.length != 13){
		console.log("==================ERROR:주민등록번호 데이터 확인 필요");
		return false;
	}
	
	let today = new Date();	// 현재 날짜 및 시간

	let juminFront = jumin.substr(0,6); // 주민번호앞자리
	let juminBackFirstVal = jumin.substr(6,1); //주민번호뒷자리 첫 문자열(2000년도 이전생인지 확인)

	let age = 0;
	let birthDate = null;
	let juminYear = null;
	let juminMonth = jumin.substr(2,2);//10
	let juminDate = jumin.substr(4,2);//03
	
	let monthCheck = 0;

	if(juminBackFirstVal == 1 || juminBackFirstVal == 2){
		// 2000년생 이전일 경우
		juminYear = "19" + jumin.substr(0,2);//93~~

		// 문법상 Month(월)은 0부터 시작하기 때문에 -1 처리해야 됨.
		birthDate = new Date(juminYear*1, juminMonth-1, juminDate*1);
		
		// 현재 연도에서 - 태어난 연도
		age = today.getFullYear() - birthDate.getFullYear();

		// 현재 월에서 - 태어난 월
		monthCheck = today.getMonth() - birthDate.getMonth();

		// 생일 월이 현재 월을 지나지 않았을 경우 만 나이기 때문에 -1
		if(monthCheck < 0 || (monthCheck === 0 && today.getDate() < birthDate.getDate())){
			age--;
		}
	}else{
		// 2000년생 이후
		juminYear = "20" + jumin.substr(0,2);//01~~
		
		birthDate = new Date(juminYear*1, juminMonth-1, juminDate*1);
		
		age = today.getFullYear() - birthDate.getFullYear();

		monthCheck = today.getMonth() - birthDate.getMonth();

		if(monthCheck < 0 || (monthCheck === 0 && today.getDate() < birthDate.getDate())){
			age--;
		}
	}

	console.log("=====================만 나이: ",age + "세");
		
	return age;
}


//TEST CASE 1
// fn_checkBirthAge('010509-3012345'); //00년생 이후 테스트

//TEST CASE 2
fn_checkBirthAge('9310031234567'); //00년생 이전 테스트
// fn_checkBirthAge('920216-1234567'); //00년생 이전 테스트

[네트워크] localhost 와 127.0.0.1

개발자 우디 — Wed, 21 Sep 2022 09:37:06 +0900

웹 개발 업무를 하다 보면 자연스럽게 주소창에 localhost:8080이나 127.0.0.1:8080을 입력해 로컬 환경에서 테스트를 해보고는 한다. 거의 매일같이 사용하는데 막상 정확한 원리를 모르는 것 같아서 찾아봤다.

우선 루프백 이라는 것부터 설명하자면

자신의 로컬 PC를 스스로 서버로 만들고 그 로컬 PC 내에서 요청을 보내고 응답을 받을 수 있는 것이다.

쉽게 말해 내 PC 환경만으로 별도의 외부서버와 통신하는 것처럼 요청과 응답을 주고받을 수 있다는 뜻이다. 운영체제는 이런 루프백을 위해 고정된 아이피와 호스트네임을 제공하는데 그것이 바로 127.0.0.1과 localhost이다. 그렇기 때문에 127.0.0.1은 인터넷상에 일반 IP로 쓸 수 없게 지정되어 있다. OS에 귀속되는 가상의 주소라고 생각하면 될 것 같다.

그렇다면 localhost:8080 과 127.0.0.1:8080은 어떤 차이가 있을까?

localhost:8080 은 www.google.com 이라고 치면
127.0.0.1:8080 은 142.250.76.132(구글의 응답 ip주소)라고 생각하면 된다.

구글의 ip주소 확인

사용자가 웹 브라우저에 입력하는 사이트 url은 DNS(domain name server) 을 통해 ip 주소로 변환되게 되고, 이를 통해 요청과 응답을 주고받는 연결이 가능해진다. 참고로 루프백은 내 로컬 PC가 내 로컬 PC에 요청과 응답을 주고받는 기능이기 때문에, DNS 서버를 통해 ip주소로 변환할 수가 없다.

따라서 OS가 해당 부분을 조정해줘야 하는데, 그것을 담당하는 부분이 OS hosts 파일의 redirect rules이다.

해당 hosts 파일이 존재하는 윈도우 파일 경로

C\Windows\System32\drivers\etc\hosts

여기에서 localhost 를 특정 ip로 redirecting 시킬 것인지 지정할 수 있는데, 만약 이 부분에서 localhost의 redirecting ip를 다르게 지정해 놓았다면 localhost:8080을 주소창에 입력하더라도 로컬 서버로 접근이 불가능하다.

내 PC의 hosts 파일

위에 보이는대로 localhost의 ip주소가 지정이 되어있다. 위는 ip.v4 아래는 ip.v6 환경에서 redirecting 되는 내용이다.
참고로 해당 파일에 특정 사이트의 도메인과 ip 주소의 redirecting rules를 지정해두면 DNS 서버를 거치지 않고 도메인 네임만으로도 접속이 가능하게 할 수 있다.

[네트워크] 서버 인증 방식 - 쿠키/세션, 토큰

개발자 우디 — Tue, 20 Sep 2022 14:06:50 +0900

HTTP는 비연결성 및 무상태성이라는 특징을 가지고 있다. 따라서 클라이언트의 요청을 처리한 뒤 연결을 끊어버리기 때문에, 클라이언트의 상태 정보 및 현재 통신 상태가 남아있지 않는다.

그렇다면 왜 HTTP는 비연결성이라는 특성을 가지고 있을까?

우선 비연결성의 장점은 서버의 자원 낭비를 줄일 수 있다는 점이다. 예를 들어 만약 다수의 클라이언트가 서버와의 연결을 유지한다면 서버의 자원 낭비가 심해지고 성능의 저하를 야기할 수 있기 때문이다.

허나 비연결성은 클라이언트를 식별할 수 없다는 단점 또한 존재한다. 로그인을 하더라도 다음번 요청에서 해당 클라이언트를 식별할 수 있는 무언가가 없기 때문에, 계속 로그인을 해야 할 것이다. 참고로 이렇게되면 웹 브라우저(Ex.크롬)에서 새로고침을 누를 때마다 로그인을 해야한다.

이런 장점과 단점들을 보완하기 위해 Cookie와 Session 그리고 토큰이라는 기술을 활용하게 된다.

쿠키 (Cookie)

쿠키(Cookie)란 클라이언트가 어떠한 웹사이트를 방문할 경우, 그 사이트가 사용되고 있는 서버를 통해 클라이언트의 브라우저에 설치되는 작은 기록 파일을 일컫는다. 간단히 말해 서버와 클라이언트가 대화하기 위한 수단이다.

서버는 클라이언트의 로그인 요청에 대한 응답을 작성할 때, 클라이언트 측에 저장하고 싶은 정보를 응답 헤더의 Set-Cookie에 담는다(쿠키는 Key-Value형식의 문자열이다.) 이후 해당 클라이언트는 요청을 보낼 때마다 매번 저장된 쿠키를 요청 헤더의 Cookie에 담아 보낸다. 서버는 쿠키에 담긴 정보를 바탕으로 해당 요청의 클라이언트가 누군지 식별할 수 있다.

쿠키의 특징

브라우저가 서버와 연결이 되었을 때 브라우저에서 자동적으로 쿠키를 생성하고, response 할 때 쿠키를 담아서 보낸다.
특정 호스트에서 생성된 쿠키는 이후 모든 요청마다 서버로 전송된다.
요청 해더의 set-cookie 속성에 정보를 담을 수 있다.
쿠키에 담긴 데이터는 브라우저에서 관리된다.
이름, 값, 만료 날짜, 경로 정보로 구성된다.

쿠키의 단점

보안에 취약하다. (요청 시 쿠키의 값을 그대로 보내어, 유출 및 조작당할 위험이 존재한다.)
용량 제한이 있어, 많은 정보를 담을 수 없다.
웹 브라우저마다 쿠키에 대한 지원 형태가 다르기에, 브라우저 간 공유가 불가능하다.
쿠키의 사이즈가 커질수록 네트워크에 부하가 심해진다.

세션 (Session)

서버와 클라이언트의 연결이 활성화된 상태에서 활용되는 방식.

동작 과정

세션이란

세션은 비밀번호 등 클라이언트의 인증 정보를 쿠키가 아닌 서버 측에 저장하고 관리한다.

서버는 클라이언트의 로그인 요청에 대한 응답을 작성할 때, 인증 정보는 서버에 저장하고, 클라이언트 식별자인 JSESSIONID를 쿠키에 담는다. 이후 클라이언트는 요청을 보낼 때마다 JSESSIONID쿠키를 함께 보낸다. 그리하면 서버는 JSESSIONID의 유효성을 판별해 클라이언트를 식별한다.

동작 순서

사용자가 로그인 요청한다.
서버에서 계정 정보를 읽어 사용자를 확인 하고, 사용자의 고유한 ID를 부여하여 세션 저장소에 저장한 후, 이와 연결된 세션ID를 발급한다.
사용자는 서버에서 해당 세션ID를 받아 쿠키에 저장 한 후, 인증이 필요한 요청마다 쿠키를 헤더에 실어 보낸다.
서버는 쿠키를 받아 세션 저장소에서 대조 후 대응되는 정보를 가져온다.
인증이 완료 되고 서버는 사용자에 맞는 데이터를 보내준다.

세션의 특징

클라이언트가 서버와 통신을 시작하면 서버는 해당 클라이언트에 대해 유일한 고유값인 세션 ID를 부여, 세션 스토리지에 해당 세션 ID 정보를 저장한다.
클라이언트는 이 세션ID를 쿠키를 통해 기억한다.
클라이언트가 추가로 어떤 요청을 보낼 때마다 헤더의 cookie에 세션 ID를 담아서 전송함.(식별을 위해)
서버는 클라이언트가 보낸 요청의 쿠키에 담긴 세션ID와 세션 스토리지에 담긴 세션ID를 대조해 인증 상태를 판단함(즉, 세션과 쿠키는 완전히 분리된 개념이 아니며 세션은 쿠키를 기반으로 함)
각 클라이언트마다 유니크한 세션 객체가 주어지고, 이 세션 객체에 데이터를 담아 관리할 수 도 있음(세션 객체가 자물쇠로 잠긴 상자라면 세션ID가 열쇠)
세션을 사용하지 않고 쿠키만으로 어떤 데이터를 주고받는다면, 클라이언트는 이미 모든 데이터를 알고 있다는 것.

세션을 통한 인증의 장점

서버가 클라이언트의 웹 브라우저에 의존하지 않아도 된다.
쿠키를 포함한 요청이 외부에 노출되어도 세션 ID 자체는 유의미한 개인 정보를 담지 않는다.
각 사용자마다 고유한 세션 ID가 발급되기 때문에, 요청이 들어올 때마다 회원 정보를 확인(로그인)할 필요 없다.

세션을 통한 인증의 단점

해커가 세션 ID를 중간에 탈취하여 클라이언트인 척 위장할 수 있다.

서버에서 세션 저장소를 사용하기 때문에, 요청이 많아지면 서버에 부하가 생긴다.

토큰 (Token)

JWT는 세션/쿠키와 함께 가장 대표적인 인증 수단이다. JWT(JSON Web Token)의 약자로 인증에 필요한 정보들을 암호화시킨 토큰을 뜻한다. 세션/쿠키 방법과 유사하게 사용자는 Access Token(JWT토큰)을 HTTP헤더에 실어 서버로 보낸다.

JWT(JSON Web Token)는 인증에 필요한 정보들을 암호화시킨 토큰이다.

JWT의 구조는 위 사진과 같이 세가지 문자열의 조합이다. 실제 디코딩된 JWT는 Header, Payload, Signature로 이루어져 있다.

Header : 위 3가지 정보를 암호화할 방식(alg), 타입(type) 등
Payload : 서버에서 보낼 데이터. 일반적으로 유저의 고유 ID값, 유효기간
Verify Signature : Base64 방식으로 인코딩한 Header,payload 그리고 SECRET KEY를 더한 후 서명

토큰 액세스

토큰 인증 과정

클라이언트 로그인 요청이 들어오면, 서버는 검증 후 클라이언트 고유 ID등의 정보를 Payload에 담는다.
암호화할 비밀키를 사용해 Access Token(JWT)을 발급한다.
클라이언트는 전달받은 토큰을 저장해두고, 서버에 요청할 때마다 토큰을 요청 헤더 Authorization에 포함시켜 함께 전달한다.
서버는 토큰의 Signature 을 비밀키로 복호화한 다음, 위변조 여부 및 유효 기간 등을 확인한다.
유효한 토큰이라면 요청에 응답한다.

토큰의 장점

Header와 Payload를 가지고 Signature를 생성하므로 데이터 위변조를 막을 수 있다.
인증 정보에 대한 별도의 저장소가 필요 없다. (I/O 처리 필요 없음)
JWT는 토큰에 대한 기본 정보와 전달할 정보 및 토큰이 검증됐음을 증명하는 서명 등 필요한 모든 정보를 자체적으로 지니고 있다.
클라이언트의 인증 정보를 저장하는 세션과 다르게, 서버는 무상태(Stateless)가 된다.
확장성이 우수하다.
토큰 기반으로 다른 로그인 시스템에 접근 및 권한 공유가 가능하다. (토큰 서버 활용)
토큰 기반으로 다른 로그인 시스템에 접근 및 권한 공유가 가능하다.
OAuth의 경우 Facebook, Google 등 소셜 계정을 이용해 다른 웹서비스에서도 로그인 할 수 있다.
모바일 어플리케이션 환경에서도 잘 동작한다.

토큰의 단점

쿠키, 세션과 다르게 JWT는 토큰의 길이가 길어, 인증 요청이 많을수록 네트워크 부하가 심해진다.
Payload 자체는 암호화되지 않기 때문에 유저의 중요한 정보는 담을 수 없다. (패스워드 등)
토큰을 탈취당하면 대처하기 어렵다. 토큰은 한 번 발급되면 유효기간이 만료될 때까지 계속 사용이 가능하다.
특정 사용자의 접속을 강제로 만료하기 어렵다. (쿠키/세션 기반 인증은 서버 단에서 쉽게 삭제할 수 있지만 토큰은 그게 안 됨)

이러한 단점을 보완하기 위한 토큰 전략들은 몇 가지가 있는데 그 중 기존의 Access Token의 유효기간을 짧게 하고 Refresh Token이라는 새로운 토큰을 발급해서 Access Token을 탈취 당해도 상대적으로 피해를 줄일 수 있는 방법이 있다.

Refresh Token

Access Token(JWT)를 통한 인증 방식의 문제는 제 3자에게 탈취당할 경우 보안에 취약하다는 점이다. 유효기간이 짧은 Token의 경우 그만큼 사용자는 로그인을 자주해서 새롭게 Token을 발급받아야 하므로 불편하다. 그러나 유효기간을 늘리자면, 토큰을 탈취당했을 때 보안에 더 취약해진다.

"그러면 유효기간을 짧게 하면서 더 좋은 방법은 없을까?" 라는 고민에 의해 탄생하게 된 것이 Refresh Token이다.

Refresh Token은 Access Token과 똑같은 형태의 JWT이다. 처음에 로그인을 완료 했을때 Access Token과 동시에 발급되는 Refresh Token은 긴 유효기간을 가지면서, Access Token이 만료됐을 때 새로 발급해주는 열쇠가 된다.

Access Token은 탈취 당하면 정보가 유출되는건 동일하다. 다만 유효기간이 짧기에 조금더 안전하다는 뜻이다.

Refresh Token의 휴효기간이 만료 됐다면, 사용자는 새로 로그인 해야한다. Refresh Token도 탈취될 가능성이 있기때문에 적절한 유효기간 설정이 필요하다.(보통 2주)

참고

https://velog.io/@kingth/%EC%84%9C%EB%B2%84-%EC%9D%B8%EC%A6%9D-%EB%B0%A9%EC%8B%9D%EC%84%B8%EC%85%98%EC%BF%A0%ED%82%A4-%ED%86%A0%ED%81%B0

https://tecoble.techcourse.co.kr/post/2021-05-22-cookie-session-jwt/

[네트워크] 브라우저에 URL을 입력한 후 동작 순서

개발자 우디 — Thu, 15 Sep 2022 10:03:57 +0900

예전에 신입으로 면접을 보러 다닐 때 자주 들었던 질문 중 하나인데 생각이 나서 간단하게 정리해두려고 한다.

축약 이미지

대략적으로 8단계로 나열해봤을때 특정 사이트(maps.google.com)를 예로 들자면

사용자가 브라우저 주소창에 특정 URL(예시: maps.google.com)을 입력한다.
브라우저가 maps.google.com의 IP 주소를 찾기 위해 캐시에서 DNS 기록을 확인한다.
만약 요청한 URL(maps.google.com)이 캐시에 없다면, ISP의 DNS 서버가 DNS 쿼리로 maps.google.com을 호스팅 하는 서버의 IP 주소를 찾는다.
브라우저가 해당 서버와 TCP 연결을 시작한다.
브라우저가 웹서버에 HTTP 요청을 보낸다.
서버가 요청을 처리하고 응답을 보낸다.
서버가 HTTP 응답을 보낸다.
브라우저가 HTML 콘텐츠를 렌더링한다.

도메인 IP 주소 조회하는 방법

nslookup [URL주소]

nslookup 명령어 사용

참고한 사이트

https://medium.com/@maneesha.wijesinghe1/what-happens-when-you-type-an-url-in-the-browser-and-press-enter-bb0aa2449c1a

What happens when you type a URL in the browser and press enter?

If you are in any technical profession, I am sure someone at some point has asked you this question. Whether you are an engineer…

medium.com

[Eclipse] 톰캣 서버 시작시 경로인 Context root 지정

개발자 우디 — Tue, 6 Sep 2022 15:17:29 +0900

컨텍스트 패스(Context Path)는 WAS(Web Application Server)에서 웹어플리케이션을 구분하기 위한 Path로 예를들자면 아래 주소에서 'Service' 부분에 해당하는 루트 경로이다.(이클립스에서 프로젝트를 생성하면 자동으로 server.xml에 추가되어 서버를 구동시키면 자동으로 잡히는 경로)

localhost:8080/Services/

근데 간혹 서버는 잘돌고있는데 404 에러가 발생하면서 해당 루트를 찾지 못하는 경우가 있는데 그럴 경우 Context root 를 확인해보면 해결될 가능성이 높다.

이 컨텍스트 패스를 변경을 하고자 할 때, 방법이 두 가지가 있다.

1. Properties 변경

1. 원하는 프로젝트 우클릭 후 Properties 클릭

원하는 프로젝트 우클릭 후 Properties 클릭

2. 좌측 메뉴 중 Web Project Settings 클릭

3. Context root 경로를 '/' 로 변경 후 OK

Context root 경로 지정

2. Server의 프로젝트 config에서 변경하는 것으로 위에서 말한 server.xml의 Context path값을 변경

Package Explorer 에서 Servers 폴더를 열고, [프로젝트-config] 의 server.xml 파일을 연다.

해당 속성 설정하는 부분

해당 부분을 찾아서 Context 태그 내에 path 속성값을 원하는 값으로 변경해주면 된다.(보통 '/' 로 많이 사용)

[Postman] JSON 파라미터 보내기

개발자 우디 — Tue, 6 Sep 2022 15:09:10 +0900

포스트맨에서 JSON 데이터를 보내는 방법은 매우 간단하다.

[Body] > [raw] > [JSON] 선택

JSON 데이터 선택

요청 결과

[Database] Lock 이란

개발자 우디 — Mon, 5 Sep 2022 13:25:04 +0900

얼마전 업무 중 DB 락이 걸려서 잠시 애를 먹은적이 있다. 다행히 구글링을 통해 락이 걸린 프로세스들을 찾아 금방 해결할 수 있었지만 LOCK 이 정확히 어떤건지 알고 넘어가는게 좋을 것 같다는 생각이 들었다.

락 해제 방법

https://coding-plant.tistory.com/148

[PostgreSQL] 테이블 Lock 조회 및 Kill 방법

현재 수행중인 SQL 전체 조회 select datname, pid, usename, application_name, client_addr, client_port, backend_start, query_start, wait_event_type, state, backend_xmin query from pg_stat_activity..

coding-plant.tistory.com

DB Lock 이란

데이터의 일관성을 보장하기 위한 방법이다.

DB에서 데이터 수정은 DB Lock을 가진 세션만 가능하다. 데이터를 수정하기 위해 접근하면, 세션은 DB Lock을 얻을 수 있는지 확인하고 가능하다면 바로 획득한다. 그리고 트랜잭션이 Commit 될 때, DB Lock을 반납한다.

DB Lock이 필요한 이유

예를 들어 두 개의 DB 세션이 존재한다고 가정해보자. 세션 1이 A라는 행의 데이터를 수정중이고 이를 아직 커밋하지 않은 상황이다. 이 때, 세션2가 A라는 행에 접근해서 데이터를 수정하는 상황이 있다고 가정해보자. 한 마디로 설명하면, A라는 곳을 동시에 여러 세션이 수정하려고 하는 상황이다. 이러한 과정은 데이터의 정합성과 원자성을 무너뜨리기 떄문에 문제가 야기될수 있다.

과정으로 보자면 세션1은 A → B → C 순으로 접근해서 각각의 데이터를 수정하는 일을 한다고 가정한다. 세션1이 A의 값을 수정하고, B의 값을 수정하는 순간 세션2가 A의 값을 다시 수정한다고 가정해보자. 그리고 세션1이 C의 값을 수정하는 순간 문제가 발생해서 세션1의 트랜잭션이 롤백된다고 가정해보자.

그렇다면 이 때, 'A'의 값은 어떤 값으로 롤백 되는 것이 맞을까? 트랜잭션이 시작되기 전 지점으로 돌아가는 것이 맞을까? 아니면 세션2가 수정한 값으로 변경한 값이 맞을까? 다양한 경우의 수가 존재하게 될 것이다.

이처럼 여러 세션이 동시에 동일한 곳에 접근해서 데이터를 수정하는 경우, 데이터의 정합성에 대한 신뢰도 문제가 발생한다. 따라서 한 세션이 데이터를 수정중인 경우 다른 세션은 데이터를 수정하지 못하게 하는 것이 바람직하다. 이 때 사용하는 것이 DB Lock이다.

Lock의 종류는

Lock은 크게 두 종류로 구분한다.

1. Shared Lock(공유 Lock 또는 Read Lock)
보통 데이터를 읽을 때 사용한다. 원하는 데이터에 Lock을 걸었지만 다른 세션에서 읽을 수 있고, 공유Lock을 설정한 경우 추가로 공유Lock을 설정할 수 있지만, 배타적 Lock은 설정할 수 없다.

즉, 내가 보고 있는 데이터는 다른 사용자가 볼 수 있지만, 변경할 수는 없는 상태

2. Exclusive Lock(배타적 Lock 또는 Write lock)
보통 데이터를 변경할 때 사용한다. 이름에서 보여지듯이 해당 Lock이 해제되기 전까지는, 다른 공유Lock, 배타적Lock을 설정할 수 없다.

즉, 읽기와 쓰기가 불가능한 상태

Blocking

블로킹은 Lock들의 경합(==Race condition)이 발생하여 특정 세션이 작업을 진행하지 못하고 멈춰 선 상태를 의미한다. (공유Lock과 배타적Lock) 또는 (배타적Lock과 배타적Lock)끼리 블로킹이 발생할 수 있다. 이를 해결하는 방법은 Transaction commit 또는 rollback 으로 제어하는 방법뿐이다.

경합이 발생할 때, 먼저 Lock을 설정한 트랜잭션을 기다려야하기 때문에, 이런 현상이 반복되면 사용자에게 양질의 서비스를 제공하기가 어려워진다.

블로킹 해결 방법

트랜잭션을 가능한 짧게 정의하면 경합을 줄일 수 있다.
동일한 데이터를 동시에 변경하는 작업을 하지 않도록 설계하는 것이 좋다.
트랜잭션이 활발한 주간에는 대용량 갱신 작업을 수행하면 안됨.
대용량작업이 불가피할 경우, 작업단위를 쪼개거나 lock_timeout을 설정하여 해당 Lock의 최대시간을 설정할 수 있다.

-- 예시
set lock_timeout 3000

Dead Lock

DeadLock은 트랜잭션간의 교착상태를 의미한다. 두 개의 트랜잭션간에 각 트랜잭션이 가지고 있는 리소스의 Lock을 획득하려고 할 때 발생하는 교착상태이다.

DeadLock 예시

위 사진은 가장 흔히 떠올릴 수 있는 deadlock 상황이다. 좌측 1번 트랜잭션에서 우측 2번 리소스의 잠금을 획득, 2번 트랜잭션에서는 1번 리소스의 잠금을 획득한 상태이다. 이 때, 동시에 상대방의 데이터를 엑세스하려고 할때 기존의 Lock이 해제될 때까지 기다리게 되는 교착상태에 빠지게 된다.

DeadLock 예시2

두번째 예시는, 1번 트랜잭션이 공유Lock을 설정하고 Sleep에 빠져버렸을 때를 보여준다. 이때 2번 트랜잭션은 배타적Lock을 설정하려고 시도하여도, 계속 기다리게만 되는 교착상태에 빠지게 된다.

참고로 내가 업무에서 주로 사용하는 Postgresql 에서는 자동적으로 deadlock을 인지하고 교착상태를 해결하기 위하여 하나의 트랜잭션을 취소시켜준다. 하지만 정확히 어떤 트랜잭션이 취소될 지 판단하는게 불가능하다.

쉽게말하면

TIP

둘 이상의 프로세스가 특정 자원을 얻지 못해서 다음 명령을 처리 못하는 상태 (교착상태) 한정된 자원을 여러 곳에서 사용하려고 할 때 발생

참고

http://www.sqler.com/320577

개발자 커뮤니티 SQLER.com - 교착상태 (DeadLock)

교착상태(DeadLock)은 서로 다른 두개의 작업(트랜잭션)이 리소스 잠금을 교차해서 획득하려 할 때 발생합니다. 가장 보편적인 DeadLock그림입니다. T1작업은 R1(리소스)의 잠금을 획득하고 R2를 액세

www.sqler.com

https://ojt90902.tistory.com/856

Spring DB : DB 락 - 개념 이해

이 글은 인프런 김영한님의 강의를 복습하며 작성한 글입니다. DataBase Lock의 개념 이해 두 개의 DB 세션이 존재한다고 가정해보자. 세션 1이 A라는 행의 데이터를 수정중이고 이를 아직 커밋하지

ojt90902.tistory.com

[PostgreSQL] 테이블 Lock 조회 및 Kill 방법

개발자 우디 — Fri, 2 Sep 2022 11:03:57 +0900

현재 수행중인 SQL 전체 조회

select  datname, 
        pid, 
        usename, 
        application_name, 
        client_addr, 
        client_port, 
        backend_start, 
        query_start, 
        wait_event_type, 
        state, 
        backend_xmin
        query 
from pg_stat_activity;

datid	oid	데이터베이스 oid
datname	name	데이터베이스 이름
pid	integer	프로세스 고유id
usesysid	oid	사용자고유번호
usename	name	사용자이름
application_name	text	응용프로그램이름
client_addr	inet	접속ip
client_hostname	text	접속 호스트 이름
client_port	integer	접속한 TCP 포트
backend_start	timestamp	서버 접속시간
xact_start	timestamp	트랜잭션 시작 시간
query_satrt	timestamp	쿼리 시작 시간
state_change	timestamp	state 마지막 변경 시간
waiting	boolean	대기중 = true
state	text	상태 정보 (하단 참조) query
query	text	state=active 인 row에 대해 실행중인쿼리

state (상태 정보)

active : 쿼리 실행중
idle : 새로운 명령 대기중
idle in transaction : 트랜잭션은 있지만 현재 실행중인 쿼리 없음
idle in transaction (aborted) : 트랜잭션은 있고 실행중인 쿼리는 없으나 트랜잭션에 오류가 발생
fastpath function call : 함수 실행중
disabled : track_activities 무효

LOCK 걸린 테이블 조회

SELECT  t.relname,
        l.locktype,
        page,
        virtualtransaction,
        pid,
        mode,
        granted
FROM pg_locks l,
 pg_stat_all_tables t
WHERE l.relation = t.relid
ORDER BY relation ASC;

현재 테이블에 lock을 확인 할 수 있다. 기본적으로 대부분의 lock 테이블은 괜찮으나 RowExclusiveLock 이 검색된다면 해당 테이블에 접근이 지연되어 다른 쿼리에도 영향을 미칠 수 있으므로 반드시 잡고있는 트랜잭션이나 서버 상태 등을 점검하여 lock을 해제 해 주는 작업이 필요하다.

락이 걸린 테이블의 PID 값을 가지고 조건문에 넣어주면 해당 문제가 발생한 시점도 알 수 있다.

해당 프로세스 중지(Kill)

SELECT pg_cancel_backend([pid]);
SELECT pg_terminate_backend([pid]) FROM pg_stat_activity;

pg_cancel_backend는 해당 PID만 중지시키고, pg_terminate_backend는 해당 PID와 연계된 모든 상위 쿼리 프로세스를 종료시킨다. 따라서 pg_cancel_backend로 해당 작업이 종료 되는지 먼저 체크한 뒤, 중지 되지 않는다면 pg_terminate_backend를 수행하여 해당 프로세스를 종료시키는게 좋다.

[Linux] Tomcat 서버 시작/종료/재시작

개발자 우디 — Fri, 2 Sep 2022 09:42:34 +0900

최근 업무 시간 종료 후 서버에 변경사항을 배포할 일이 있었는데 실수로 명령어를 잘못입력해서 Tomcat 이 아닌 리눅스 자체를 종료시킨적이 있었다. 서버관리팀에 요청해서 금방 재부팅하고 마저 진행했지만 혹시나 이런 실수를 반복할 수 있으니 정리해둔다.

서버 시작

$ ./startup.sh
$ ps -ef | grep tomcat 명령어로 톰캣이 제대로 가동되었는지 확인

Tomcat 서버 종료

여기서 만약 ./shutdown.sh 가 동작하지 않는다면 tomcat.pid 파일의 pid 값이 현재 돌아가는 톰캣 프로세스와 일치하지 않아서 그럴 확률이 있으니 확인해볼 것.

$ cd 톰캣까지의경로/apache-tomcat-9.0.22/bin
$ ./shutdown.sh
$ ps -ef | grep tomcat 명령어로 톰캣이 제대로 종료되었는지 확인

tomcat.pid 파일 수정

tomcat.pid 파일을 vi 텍스트 모드로 열어서 직접 알맞게 수정 후 다시 서버 종료 시도

$ vi tomcat.pid
$ 값 수정
$ :wq 저장하고 텍스트모드 나가기
$ ./shutdown.sh 서버 종료

명령어 주의!

현재 디렉토리를 나타내는 ./ 를 입력하지 않고 그냥 shutdown 명령어만 입력하게 되면 톰캣 서버가 아닌 리눅스 서버 자체를 꺼버릴 수 있기 때문에 반드시 명령어 사용에 주의해야한다.

서버 재시작

$ ./startup.sh
$ ps -ef | grep tomcat 명령어로 톰캣이 제대로 재가동되었는지 확인

[에러메세지 ]이클립스 War Export 추출 시 오류 'Module name is invalid'

개발자 우디 — Fri, 2 Sep 2022 09:39:42 +0900

회사에서 업무중 배포할 일이 있어 war 파일을 추출하려는데 갑자기 이상한 에러가나서 당황스러웠다.

다행히 쉽게 해결할 수 있는 환경설정 문제였어서 나중에 까먹을까봐 정리해둔다.

WAR 파일 Export 시도

Module name is invalid 에러 발생

프로젝트 설정 변경

Properties 진입
Project Facets -> Dynamic Web Module 체크 후 Apply
적용 중 모습
완료 후 다시 Export 시도
정상적으로 추출 완료!

마무리

생각보다 간단하게 해결할 수 있는 문제였다.

[Blog] HTML form태그에서 메일보내기 : Google Apps Mail

개발자 우디 — Fri, 2 Sep 2022 09:31:34 +0900

티스토리에서 깃허브 블로그로 넘어오면서 내 블로그를 방문한 사람들이 전달하고 싶은 말을 바로 나에게 편하게 보낼 수 있도록 메일 서비스를 적용하고 싶었다.

HTML에서 mailto를 사용하면, 구현은 간단하지만 outlook 등 같은 서드파티 앱을 실행해 직접 메일을 보내는 방식이기 때문에 내가 생각한 편리함은 없었다.

하지만 역시 세상은 넓고 똑똑한 사람은 많다보니 이런 기능을 적용해본 블로거분이 계셔서 그 분의 글을 보며 별도 서버가 없는 순수 HTML과 자바스크립트로 메일보내기를 구현할 수 있었다.

내가 바라던대로 방문자(사용자)는 계정에 로그인하고 메일을 보내는 귀찮음을 느낄 필요도 없이 간단한 웹페이지의 양식대로만 입력해서 쉽고 빠르게 메일을 보낼 수 있다.

이 방법을 찾기 전에는 서버를 하나 결제해야하나 고민했는데 구글에서 제공하는 방법으로 우회해서 해결할 수 있어서 다행이었다

참고한 사이트

메일 보내는 페이지(화면)

위 사진은 내 블로그에서 전달할 내용과 정보를 입력하는 페이지이다.
페이지는 이미 구성을 했고, 이제 기능을 구현해보자.

우선 참고한 사이트에서 진행한 방식 그대로 따라가봤다.

Google Apps Mail을 사용해 정적 HTML Form에서 메일을 보내기

작동 예제
링크

동작 원리

유지보수가 필요한 서버를 이용해 이메일을 보내는 대신, 사용자를 대신하여 Google로 메일을 보내고 Google 스프레드시트를 사용해 데이터를 추적하는 방식

진행 시작

1. Sample Spreadsheet를 복사

https://docs.google.com/spreadsheets/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy

본인 Google 계정에 로그인하고 "사본 만들기"를 클릭

사본 만들기를 클릭하고 나면 이렇게 클라우드에서 사본이 열린다.

2. 스크립트 편집기 열기

메뉴에서 확장프로그램 -> Apps Script 를 클릭한다.

위에 가이드 문서에서는 도구 -> 스크립트편집기 라고 나와있는데 나는 메뉴가 달라 저렇게 구성되어 있었다.. 아마 버전의차이아닐까

3. 스크립트에서 TO_ADDRESS 를 설정

해당 빨간 밑줄 부분을 본인 메일주소로 수정

4. 스크립트의 새로운 버전 저장

메뉴에서 파일 -> 버전기록 -> 현재버전 이름저장 클릭

여기까지 완료했다면

5. 업데이트된 스크립트를 웹 앱으로 배포

해당 스크립트 안에서 배포 -> 새 배포 클릭

아무 설명이나 써넣고 배포 클릭

6. 이메일을 보내기 위해 스크립트를 인증

해당 인증 부분 캡처들을 못 찍어서 참조 이미지로 대체함.

이제 배포 ID와 웹 URL을 메모장 같은 곳에 기록해두고 마무리!

잊어버려도 배포관리 메뉴에 들어가면 다시 확인할 수 있음.

7. 이제 실제 화면 페이지를 구성(HTML)

이건 사람마다 본인이 원하는 화면 구성이 다 다를테니 내 블로그 코드를 예로 보여주자면

---
layout: page
title: 연락하기
---
<div class="contact-area bg-color1 p-t-130 p-b-130">
   <div class="container">
      <article class=""  data-aos="fade-up">
         <div class="row m-b-60">
            <div class="col-md-4">
               <div class="contact-info">
                  <div class="info-logo"><img src="{{site.baseurl}}/assets/images/contact-info-logo.png" alt="contact info logo"/></div>
                  <div class="info-content">
                     <h5 class="heading-5"><a href="#">Office Address</a></h5>
                  </div>
               </div>
            </div>
            <div class="col-md-4">
               <div class="contact-info">
                  <div class="info-logo"><img src="{{site.baseurl}}/assets/images/contact-info-logo2.png" alt="contact info logo"/></div>
                  <div class="info-content">
                     <h5 class="heading-5"><a href="#">Email Address</a></h5>
                  </div>
               </div>
            </div>
            <div class="col-md-4">
               <div class="contact-info m-0">
                  <div class="info-logo"><img src="{{site.baseurl}}/assets/images/contact-info-logo3.png" alt="contact info logo"/></div>
                  <div class="info-content">
                     <h5 class="heading-5"><a href="#">Phone Number</a></h5>
                  </div>
               </div>
            </div>
         </div>
         <div class="row">
            <div class="col-md-7">
               <div class="comment-form">
                  <!-- <script data-cfasync="false" type="text/javascript" src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script> -->
                  <div class="inner-title">
                     <h5 class="heading-5">Send Your Message</h5>
                  </div>
                  <form id="emailForm" class="gform" method="POST" data-email="clothes.yoo@gmail.com" 
                        action="https://script.google.com/macros/s/AKfycbzm-PBHodHx2va9AAauDKxBxYOybY37cHxzQVRy6Qq6hJ5kqpSObQVUi-FcdJ612QUR/exec">
                     <div class="form-row">
                        <div class="col-md-12">
                           <div class="form-row">
                              <div class="col-md-12">
                                 <div class="form-group">
                                    <input type="text" class="form-control" id="senderEmail" name="senderEmail" placeholder="Your Email" required>
                                 </div>
                              </div>
                           </div>
                           <div class="form-row">
                              <div class="col-md-12">
                                 <div class="form-group">
                                    <input type="text" class="form-control" id="senderName" name="senderName"placeholder="Your Name" required>
                                 </div>
                              </div>
                           </div>
                           <div class="form-row">
                              <div class="col-md-12">
                                 <div class="form-group">
                                    <textarea class="form-control" id="message" name="message" rows="5" placeholder="Your Message"></textarea>
                                 </div>
                              </div>
                           </div>
                           <script type="text/javascript">
                              (function() {
                                 // get all data in form and return object
                                 function getFormData(form) {
                                    var elements = form.elements;
                                    var honeypot;

                                    var fields = Object.keys(elements).filter(function(k) {
                                       if (elements[k].name === "honeypot") {
                                       honeypot = elements[k].value;
                                       return false;
                                       }
                                       return true;
                                    }).map(function(k) {
                                       if(elements[k].name !== undefined) {
                                       return elements[k].name;
                                       // special case for Edge's html collection
                                       }else if(elements[k].length > 0){
                                       return elements[k].item(0).name;
                                       }
                                    }).filter(function(item, pos, self) {
                                       return self.indexOf(item) == pos && item;
                                    });

                                    var formData = {};
                                    fields.forEach(function(name){
                                       var element = elements[name];

                                       // singular form elements just have one value
                                       formData[name] = element.value;

                                       // when our element has multiple items, get their values
                                       if (element.length) {
                                       var data = [];
                                       for (var i = 0; i < element.length; i++) {
                                          var item = element.item(i);
                                          if (item.checked || item.selected) {
                                             data.push(item.value);
                                          }
                                       }
                                       formData[name] = data.join(', ');
                                       }
                                    });

                                    // add form-specific values into the data
                                    formData.formDataNameOrder = JSON.stringify(fields);
                                    formData.formGoogleSheetName = form.dataset.sheet || "responses"; // default sheet name
                                    formData.formGoogleSendEmail
                                       = form.dataset.email || ""; // no email by default

                                    return {data: formData, honeypot: honeypot};
                                 }

                                 function handleFormSubmit(event) {  // handles form submit without any jquery
                                    event.preventDefault();           // we are submitting via xhr below
                                    var form = event.target;
                                    var formData = getFormData(form);
                                    var data = formData.data;

                                    // If a honeypot field is filled, assume it was done so by a spam bot.
                                    if (formData.honeypot) {
                                       return false;
                                    }

                                    disableAllButtons(form);
                                    var url = form.action;
                                    var xhr = new XMLHttpRequest();
                                    xhr.open('POST', url);
                                    // xhr.withCredentials = true;
                                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                                    xhr.onreadystatechange = function() {
                                       if (xhr.readyState === 4 && xhr.status === 200) {
                                          form.reset();
                                          var formElements = form.querySelector(".form-elements")
                                          if (formElements) {
                                             formElements.style.display = "none"; // hide form
                                          }
                                          var thankYouMessage = form.querySelector(".thankyou_message");
                                          if (thankYouMessage) {
                                             thankYouMessage.style.display = "block";
                                             alert("메일 전송에 성공했습니다. 확인 후 회신드리겠습니다.");
                                          }
                                       }
                                    };
                                    // url encode form data for sending as post data
                                    var encoded = Object.keys(data).map(function(k) {
                                       return encodeURIComponent(k) + "=" + encodeURIComponent(data[k]);
                                    }).join('&');
                                    xhr.send(encoded);
                                 }

                                 function loaded() {
                                    // bind to the submit event of our form
                                    var forms = document.querySelectorAll("form.gform");
                                    for (var i = 0; i < forms.length; i++) {
                                       forms[i].addEventListener("submit", handleFormSubmit, false);
                                    }
                                 };
                                 document.addEventListener("DOMContentLoaded", loaded, false);

                                 function disableAllButtons(form) {
                                    var buttons = form.querySelectorAll("button");
                                    for (var i = 0; i < buttons.length; i++) {
                                       buttons[i].disabled = true;
                                    }
                                 }
                                 })();
                           </script>
                           <div class="form-group m-0">
                              <button id="btnSubmit" class="btn-submit mt-2">Send Message</button>
                           </div>
                        </div>
                     </div>

                     <div style="display:none" class="thankyou_message">
                        <h2><em>Thanks</em> for contacting us! We will get back to you soon!</h2>
                     </div>
                  </form>
               </div>
            </div>
            <div class="col-md-4 offset-md-1">
               <div class="contact-image"><img src="{{site.baseurl}}/assets/images/contact-image.png" alt="contact image"/></div>
            </div>
         </div>
      </article>
   </div>
</div>

이렇게 구성되어 있다.

8. 주의사항

1. 만약 이 레포지토리의 예제가 아닌 직접 작성한 form을 벌써 사용하려고 한다면 각각의 form 요소 name 속성은 Google 시트의 컬럼네임과 같아야 한다.

2. form태그의 class는 gform이 되어야 함. 즉, <form class = "gform">

3. Form태그의 action 속성을 전 단계에서 복사해놓은 URL로 고쳐야 함을 잊지 말 것!!(중요)

9. 브라우저에서 HTML Form (페이지) 열기

HTML Form에서 테스트 데이터를 채움

submit 버튼 클릭 후 json 결과 데이터 확인

참고로 위 2개의 캡처는 참조용 이미지임.

10. 아까 설정했던 본인 메일주소로 들어가 받은편지함을 확인

11. JavaScript 와 "AJAX" 를 사용한 양식 제출 + 양식이 제출될 때 나오는 메시지 커스터마이징

여기서부턴 꼭 필요한 과정은 아니지만 사용자 편리성을 위해 필요하다고 볼 수있는 부분이다.

페이지가 JSON 응답/결과로 변경되지 않도록 하려면 `AJAX`를 사용하여 양식을 제출해야 한다.

파일 끝 (*</body> 태그 닫기 전)에 다음 JavaScript 파일을 포함하도록 index.html을 업데이트.

<script data-cfasync="false" type="text/javascript"
src="https://cdn.rawgit.com/dwyl/html-form-send-email-via-google-script-without-server/master/form-submission-handler.js"></script>

참고로

위의 3단계에서 TO_ADDRESS 변수를 설정하지 않은 경우, 메인 form 요소에 data-email="example@email.net"를 포함시켜야 된다.

12. thankyou_message div를 만들어 직접 메시지를 만든다

<!-- 해당 div의 위치는 <form> 태그의 안에 속하게 할 것. -->

<div style="display:none" class="thankyou_message">
 <!-- You can customize the thankyou message by editing the code below -->
 <h2><em>Thanks</em> for contacting us! We will get back to you soon!
 </h2>
</div>

사용자들에게 전송이 잘 되었다는것을 알리기 위한 것이므로 나는 Alert 메세지까지 추가했다.

마무리

여기까지만 하면 일단 기능적으로는 전부 끝났다.
CSS 나 메일 수신시 양식을 변경하는 것은 반드시 해야하는 기능은 아니기 때문에 작성하지 않으려고 한다.

시도하는 모든 사람들 화이팅

[Git] git 명령어 모음

개발자 우디 — Fri, 2 Sep 2022 09:30:37 +0900

git 초기 세팅 관련

현재 위치에서 지역 저장소를 생성

   $ git init

깃 환경에서 사용자 이름을 사용자명으로 지정

   $ git config --global user.name "사용자명"

깃 환경에서 사용자 이메일을 사용자이메일명으로 지정

   $ git config --global user.email "사용자이메일명"

깃의 상태를 확인

   $ git status

commit 명령어

파일명.확장자명을 스테이지에 올림

   $ git add 파일명.확장자명

커밋 메시지 메시지명을 붙여 커밋

   $ git commit -m "메시지명"

메시지 메시지명을 붙여서 스테이징과 커밋을 동시에 진행

   $ git commit -a -m "메시지명"

커밋 내역 확인

   $ git log
   $ git log --pretty=oneline # 한줄로 표기하기

특정 커밋 내역 확인

   $ git show 커밋 id

최근 버전과 작업 폴더의 수정 파일 사이의 차이를 출력

   $ git diff
   $ git diff 이전커밋 id 이후커밋 id

지정한 커밋 해시로 이동

   $ git checkout 커밋 해시

가장 최근 커밋을 취소

   $ git reset HEAD^ # 현재 HEAD의 이전 커밋으로 되돌리기
   $ git reset HEAD~n # 현재로 부터 n 번째 이전 커밋으로 되돌리기

지정한 커밋 해시로 이동하고 커밋을 취소

   $ git reset 커밋 해시

reset의 3가지 옵션

   $ git reset --soft 커밋ID # head 만 바뀜
   $ git reset --mixed 커밋ID # staging 도 그 때로 바뀜
   $ git reset --hard 커밋ID # working디렉토리/staging 모두 그 때로 바꿈

지정한 커밋 해시의 변경 이력을 취소

   $ git revert 커밋 해시

커밋 수정하는 법
파일 수정 한 뒤

   $ git add .
   $ git commit --amend : 최신 커밋 수정

브랜치 명령어

새로운 브랜치 브랜치명을 생성

   $ git branch 브랜치명

브랜치 조회하기

   $ git branch

브랜치명으로 체크아웃(이동)

   $ git checkout 브랜치명

   $ git checkout -b 브랜치명 # 브랜치만들고 바로 이동

브랜치 삭제

   $ git branch -d 브랜치명

커밋 로그에서 한 줄에 한 커밋씩 출력

   $ git log --oneline

수정한 전체 파일을 스페이지에 올린다.

   $ git add .

커밋 로그에 각 브랜치의 커밋을 그래프로 표시

   $ git log --branches --graph

브랜치명을 master 브랜치와 병합

   $ git merge 브랜치명
   $ git merge 브랜치명 --edit // 병합 후 바로 vi 편집기가 나오면서 커밋 메시지 수정 가능
   $ git merge 브랜치명 --no-edit // 커밋 메시지 수정없이 바로 병합

merge 취소하기

   $ git merge --abort

github 원격 저장소

원격 저장소에 연결

   $ git remote add origin github 레포지 주소
   $ git remote add origin branch 이름 #없으면 생성됨

원격 저장소에 연결됐는지 확인

   $ git remote -v

지역 저장소의 커밋을 맨 처음 원격 저장소에 올리는 경우

   $ git push -u origin master

윗 줄 동작을 한 후에 지역 저장소의 커밋을 원격 저장소에 올리는 경우(업로드)

   $ git push
   $ git push origin master

원격 저장소의 커밋을 지역 저장소로 가져옴

   $ git pull
   $ git pull origin master

SSH 키를 생성함

   $ ssh-keygen

원격 저장소 복제하기
첫번째 커밋이 아니라면 풀 먼저하기

   $ git remote remove origin

원격 저장소를 지역저장소명에 복제하기

   $ git clone 원격 저장소 주소

원격 저장소의 커밋을 가져오기만 하고 merge하지 않는다
가져온 branch 내용은 origin/브랜치 로 저장됨

   $ git fetch

이후엔 diff 로 비교

   $ git diff test origin/test # 브랜치 이름이 test일 경우 예시

패치로 가져온 정보가 있는 브랜치`FETCH_HEAD`로 이동

   $ git checkout FETCH_HEAD

패치로 가져온 정보가 있는 브랜치FETCH_HEAD를 master 브랜치에 병합한다

   $ git merge FETCH_HEAD

브랜치명을 만드는 것과 동시에 체크아웃한다

   $ git checkout -b 브랜치명

원격 저장소에 브랜치명의 브랜치의 커밋을 올린다

   $ git push origin 브랜치명

원격저장소 삭제

   $ git remote remove origin

파일/보관 명령어(stash)

파일 내용 출력

   $ cat 파일명.확장자명

디렉토리를 만드는 동시에 지역저장소 생성

   $ cd init 디렉토리명

현재 커밋을 다른 브랜치에 있는 커밋메시지 커밋으로 되돌림

   $ git reset 커밋메시지 커밋해시

병합이 끝난 브랜치명을 삭제

   $ git branch 브랜치명 -d

작업 트리의 수정 내용 stash에 따로 보관하기

   $ git stash
   $ git stash save

보관한 내용을 목록을 출력

   $ git stash list

보관한 내용을 적용

   $ git stash apply
   $ git stash apply stash@{1}

보관한 내용 중 가장 최근 항목을 삭제

   $ git stash drop
   $ git stash drop stash@{1}

stash를 apply하고 제거(drop) 하기

   $ git stash pop

기타 명령어

긴 명령어 짧게 이름 붙여 사용하기
ex) git log --pretty=oneline을
->git history 라는 별명으로 바꾸기.

   $ git config alias.별명 '원하는 명령어'
   $ git config alias.history 'log --pretty=oneline'

tag 설정 하기

   $ git tag 태그이름 커밋 ID
   $ git tag Version_2 86a99 # tag 달기
   $ git tag #tag 조회하기
   $ git show Version_2

[Linux] Linux 명령어 모음

개발자 우디 — Fri, 2 Sep 2022 09:28:49 +0900

주로 사용하는 명령어

pwd (print working directory)

현재 사용자가 위치하고 있는 경로를 출력해줌.

ls (list)

현재 위치한 디렉토리에 있는 파일과 디렉토리 리스트를 보여줌

[옵션]

$ ls -l : 파일과 디렉토리에 대한 내용을 구체적으로 출력함
(권한 소유계정 그룹계정 파일크기[Byte] 생성날짜 파일이름)
(== `ll 과 동일`)
$ ls -a : 현재 디렉토리에서 숨김파일을 포함하여 출력함
$ ls -li: ls-l상태에서 inode번호를 함께 출력함
$ ll: ls-l과 동일함
$ ls -alrt: 정렬까지해서 상세하게 출력

chmod (change Mode)

권한 변경

$ chomd 664 fileName (ex. chomd 664 note.txt)
$ chmod u+x fileName (ex. chomd u+x note.txt)
u(user), g(group), o(other)를 의미하며 +는 권한부여, -는 권한박탈
(ex. u+x => 유저에게 execute권한을 부여)

mkdir (make Directory)

디렉토리를 생성함

$ mkdir dirName

touch

빈 파일 생성

$ touch fileName

rm (remove)

파일삭제 명령

$ rm fileName
$ rm -r dirName (-f 옵션이 없으면 directory는 지워지지 않음)

cd (change Directory)

디렉토리를 이동함

$ cd path

mv (move)

파일, 디렉토리를 이동시키거나 이름을 변경시키는 명령어

$ mv file1 file2 (이름변경)
$ mv file1 dir1 (file을 dir로 이동시킴)
$ mv dir1 dir2 (dir1을 dir2 하위로 이동)

cp (copy)

파일, 디렉토리를 복사함

$ cp file1 copy_file
$ cp -r dir1 copy_dir (-r 옵션이 없으면 directory복사 안됨)

ln (link)

링크파일을 생성함

$ ln -s source target (softlink, target은 source를 참조)
$ ln source target (hardlink, 같은 inode번호를 가진다.)

cat

파일의 내용을 출력함

$ cat FileName (fileName의 내용을 출력)
$ cat FileName | more (내용이 많을경우 좀 더 편하게 볼 수 있음)
$ cat source > target
(출력의 방향을 파일로 변경함, source를 target으로 복사했다고 볼 수 있다. 조심해야 하는점은 만약 target으로 지정한 파일의 이름이 이미 존재하는 경우 그 파일에 source의 내용이 덮어씌워진다.)
$ cat source >> target (source의 내용이 target파일에 append됨)

head

파일의 맨 앞에서 몇 라인만을 출력함

$ head fileName

option으로 Line수를 지정할 수 있다.

tail

파일의 맨 아래부분 몇 라인만을 출력함

$ tail fileName
$ tail -f fileName (파일의 마지막에 데이터가 추가되는 즉시 파일의 내용을 출력해줌, 개발 시 로그파일을 볼 때 많이 사용한다.

grep

검색하고자 하는 문자를 옵션으로 주면 해당 문자열과 일치하는 파일을 찾아준다.

$ grep 문자열 파일이름 (ex. grep test *.log)
$ grep -H 문자열 파일이름 (어떤 파일인지를 함께 출력해줌)
$ grep -w 문자열 파일이름 (입력한 문자열과 정확히 일치하는 파일만을 출력)

less

파일을 열고 내용을 볼 수 있는 TextViewer기능을 가진다.

목적도 용도가 vi와는 다르기 때문에 별도로 알아야 할 필요가 있다.

1GB정도 되는 로그파일을 vi로 열게되면 1GB가 모두 메모리에 올라가고, 네트워트 트래픽 또한 1GB만큼 발생하게 된다.

하지만 less명령어를 이용하여 열면 화면에 보이는만큼만 메모리에 올라간다. 즉, 용량이 큰 로그파일을 열때는 less명령어를 사용하는 것이 좋다.

System 명령어

tar

압축관련 명령어

tar cvfz target.tar.gz source1 source2
(source1, source2를 target으로 압축한다. 현재 디렉토리를 모두 압축하고 싶은경우에는 *를 사용한다.)

cvfz중 c가 create를 의미한다는 정도만 알아두어도 된다.

tar.gz는 tar(파일과 디렉토리를 한 묶음으로 만듬)라는 명령어를 이용하여 gzip으로 압축한다는 의미이다.

tar xvfz source.tar.gz

xvfz중 x는 extract를 의미하며 압축을 해제할 때 사용한다.

압축과 압축해제는 옵션까지 한 묶음으로 숙지하는것이 좋다.

sudo

관리자 권한을 사용할 수 있는 명령어
root계정으로 접속하여 etc/sudoers(CentOS 7기준)파일에서 계정에 권한을 주어야 함.

$ sudo ~~

chown (change Owner)

파일 또는 디렉토리의 소유자, 그룹명을 변경하는 명령어

소유권을 뺏을수도 있는것이기 때문에 관리자 권한이 필요하다. (sudo)

$ chown user: group(or user) target

find

파일이나 디렉토리를 찾을 때 사용하는 명령어이다. 검색조건이 매우 다양함

find 경로 조건 target

$ find / -name system.log
$ find / -name debug.log* //뒤에 * 을 붙이면 해당 이름이 포함된 전체를 조회

which

명령어의 위치를 조회하는 명령어

which 찾을명령어

$ which ls => /bin/ls

top

운영중인 서버의 CPU, Memory등의 상태를 확인하는 명령어

상단에는 CPU사용률과 메모리 사용률을 표시한다.

하단에는 프로세스 별 CPU사용률과 메모리 사용률을 표시한다.

갱신하는 주기는 default 3초이다.

매 초마다 갱신하고 싶다면 화면에서 d를 누르고 1을 입력하거나 top명령어를 실행할 때 top -d 1처럼 옵션을 입력하여 실행해도 된다.

실행화면에서 h를 누르면 사용할 수 있는 명령어가 나온다.

w

현재 리눅스 장비에 접속한 사용자가 누구인지 조회하는 명령어

사용자 아이디, 접속한 시간, IP, CPU사용률, 어떤 작업을 수행중인지 출력한다.

간단하게 보고싶으면 who명령어를 사용하면 된다.

ping

네트워크 설정이 잘 되어 있는지 알아보는 경우에 많이 사용함

$ ping domain(or IP) (ex. ping google.com)

nslookup !!

domain을 이용하여 IP를 알아낼 때 사용하는 명령어

$ nslookup domain

ps (process status)

현재 구동중인 모든 프로세스 정보를 조회할 때 사용하는 명령어

너무많은 정보를 보여주기 때문에 주로 옵션과 함께 사용한다.

$ ps -ef |grep apache (프로세스 중 apache가 들어간 것을 조회)

PID는 각 프로세스마다 할당되는 유니크한 번호이다.

PID오른쪽에는 해당 프로세스의 부모 프로세스 PID를 나타낸다.

kill

프로세스를 종료하는 경우 사용하는 명령어

PID를 이용하여 종료시킨다.

kill은 관리자 권한이 필요하다.

$ kill -9 PID (-9옵션을 주면 강제종료 한다.)

df

파일 시스템 디스크 사용량을 조회하는 명령어

옵션들

일반적으로 df -h 가 가장 많이 사용된다.

$ df -h

du

df 명령어가 시스템 전체의 디스크 공간을 확인하는 명령어라면, du 명령은 특정 디렉토리를 기준으로 디스크 사용량을 확인할 수 있다.

디렉토리 안에 있는 서브 디렉토리의 디스크 사용량도 표시함.

$ du -h

man

명령어에 대한 메뉴얼을 제공

man 3 sleep처럼 3을 옵션으로 주면 프로그래밍에 대한 메뉴얼도 제공받을 수 있다.

adduser

새로운 사용자를 추가하는 경우에 사용하는 명령어

관리자 권한이 필요한 명령어

$ adduser 사용자ID

su

사용자를 변경할 때 사용하는 명령어

$ su - (root계정 접속)
$ su -l userID (해당 userID로 접속)

deluser

사용자를 삭제하는 경우에 사용하는 명령어

관리자 권한이 필요한 명령어

$ deluser 사용자ID

권한

ls -l을 이용하여 디렉토리 정보를 출력하면 맨 앞쪽에 drwxrwxrwx처럼 권한에 대한 내용이 출력된다.

가장 먼저 나오는 알파벳은 파일의 유형을 의미하며 d, l, -로 나뉘고 각각 directory, link, file을 의미한다.

권한정보인 rwx는 각각 read write execute를 의미한다.

예를들어 --x권한을 가지고 있다면 읽거나 쓰지는 못하고 실행만 할 수 있다.

권한정보는 rwx(User 권한) rwx(Group 권한) rwx(Other 권한)처럼 3자리씩 끊어서 하나의 세트로 볼 수 있다.

또한 rwx를 숫자로 표현하면 421로 표현할 수 있다 (이진수 표기법)

경로

/ : 절대위치 기준 경로 (root가 시작점)

./ : 현재위치 기준 경로 (현재 디렉토리가 시작점, 생략가능)

../ : 현재 위치의 상위 기준 (root/home 이라면 ../는 root임)

~/ : Home 위치 기준

[블로그] Github 블로그 검색엔진에 등록 (구글/네이버/다음)

개발자 우디 — Fri, 2 Sep 2022 09:25:18 +0900

우리나라에서 검색량이 많은 구글, 네이버, 다음에 등록을 해보려 한다. 각 포털사이트별로 검색엔진에 등록방법을 구글링을 해본 결과들을 정리해보려고 한다.

sitemap.xml 생성하기

우선 검색엔진에서 GitHub 블로그의 글들을 긁어올 수 있도록, 사이트의 모든 페이지 정보를 모아두는 sitemap.xml 이 필요하다.

포스팅을 업로드 할 때마다 매번 추가해주는 건 너무 노가다일테니 한번에 세팅해서 넣어주도록 하자.

사이트맵 코드 링크 이동

위 링크의 코드를 복사해서 루트 디렉토리에 sitemap.xml 파일을 만들고 깃에 push 하면 된다.

업로드 후, https://본인블로그주소/sitemap.xml 에 접속해서 내 블로그의 모든 페이지 주소를 정상적으로 출력하는지 확인되면 끝!

예시)

robots.txt 생성하기

내 사이트를 검색엔진에 등록하면 구글 검색 엔진의 크롤러가 내 사이트에 방문하여 정보를 가져간다.

이 때, 크롤러가 방문했을 때 참고할 수 있는 정책을 명시해주면 좋다.

User-agent: *
Allow: /
Sitemap: https://yuuisang.github.io/sitemap.xml

위 코드를 복붙해서 robots.xml 파일을 만들고, 루트디렉토리에 추가하면 됨.
참고로 깃허브 주소는 본인껄로 변경해야함!

feed.xml 생성하기

이건 필수는 아닌데 RSS Feed로도 등록될 수 있도록 feed.xml 까지 만들어본다.

feed.xml 코드 링크 이동

위 링크내의 코드를 복사해서 feed.xml 파일을 만들고 루트디렉토리에 추가

여기까지 등록 전 준비단계는 전부 끝났다.
이제 각 포털사이트에 등록하러 가보자!

구글서치콘솔 등록

구글 웹마스터 도구 접속 -> URL 접두어 탭으로 이동 -> 등록하고자하는 사이트의 URL 입력 -> 계속 버튼 클릭
본인의 url을 등록해야 한다. 방법은 여러가지 있는데 HTML 파일을 직접 저장시키는게 가장 권장사항이다.
이 파일을 깃허브 디렉토리 내 루트에 저장!

여기까지 됐으면 좌측 메뉴에서 Sitemaps 을 클릭 -> 새 사이트맵 추가 에 https://본인깃허브주소/sitemap.xml 을 입력 -> 제출 버튼 클릭
위 이미지처럼 뜨면 성공이다.

여기까지 구글서치콘솔 작업은 끝! 다음은 네이버...!

네이버 서치어드바이저

네이버 서치어드바이저 에 접속.
웹 마스터 도구 -> 사이트 관리 -> 사이트 등록 페이지로 이동한다.
URL을 입력한다.
사이트 소유확인 페이지에서 HTML 파일 업로드 를 선택한다.
HTML 확인 파일 을 클릭하여 다운로드 한다.
등록하고자하는 깃허브의 루트 디렉토리에 해당 파일을 업로드한다.
가이드 되어있는 링크를 클릭하여 제대로 업로드 되었는지 확인한다.
소유확인 버튼을 누른 후 아래와 같은 팝업이 뜨는지 확인한다.

HTML 확인파일을 찾을수 없거나, 네이버 검색로봇 사이트 서버에 접근할 수 없습니다.

이런 문구가 뜬다면 하루 정도 기다렸다가 다시 진행해보면 되는 경우가 많다.
정상적으로 마무리가 되었다면 목록에 이렇게 뜬다.

이제 사이트맵 을 제출해 보자!
(구글과 동일하게 제출만 하면 된다.)
등록된 블로그 링크를 클릭하여 사이트 관리 페이지로 들어간다.
요청 -> 사이트맵 제출 메뉴로 들어간다.
아까 만들어서 내 깃허브에 업로드했던 sitemap.xml 의 주소를 다음과 같이 입력하고 확인 버튼을 누른다.
잘 되었는지 확인해 본다.

다음 검색등록 에 접속한다.
블로그 등록 을 클릭하고 블로그 URL을 넣고 확인 을 클릭하면 끝!

앞서 두 구글,네이버 사이트에 비해 엄청 간단하다.

SEO 검색 엔진 최적화

https://tech.songyunseop.com/post/2016/09/seo-for-blog/

이분 포스트를 보면서 차차 진행해 볼 예정이다.

[HTML] input 태그 총 정리

개발자 우디 — Fri, 5 Aug 2022 14:05:39 +0900

<input> 태그는 사용자로부터 값을 입력받을 수 있는 대화형 컨트롤(=필드)를 나타낸다. 기본적으로 인라인 요소이고, 닫는 태그가 없는 단일태그이다. <input> 태그는 type 속성을 통해 입력받는 요소의 데이터 유형이 달라진다. 사용가능한 type 은 20여 가지이며, 기본값은 text 이다.

다양한 type

text

디폴트 값. 한줄의 텍스트 필드이다. 새줄 문자는 입력값으로부터 자동으로 제거 됨.

text type(default)

password

값이 가려진 한줄 텍스트 필드. 사이트가 안전하지 않으면 사용자에게 경고

password type

radio

같은 name 값을 가진 여러개의 선택중에서 하나의 값을 선택하게 하는 라디오 버튼

radio type

submit

<form> ~ </form> 내에 있는 정보들을 서버로 전달하는 버튼

submit type

range

값이 가려진 숫자를 입력하는 컨트롤. 디폴트 값이 중간값인 범위 위젯으로 표시하고, 접속사 min 와 max 사이에 사용되며 수용가능한 값의 범위를 정의한다.

range type

button

기본 행동을 가지지 않으며 value을 레이블로 사용하는 푸시 버튼.

button type

checkbox

단일 값을 선택하거나 선택 해제할 수 있는 체크박스.

checkbox type

date

날짜(연월일, 시간 없음)를 지정할 수 있는 컨트롤. 브라우저가 지원하는 경우, 활성화 시 날짜를 선택할 수 있는 달력 등을 열어준다.

date 기본형태

달력 클릭시

file

파일을 지정할 수 있는 컨트롤. accept 특성을 사용하면 허용하는 파일 유형을 지정할 수 있다.

file 기본형태

파일 선택 클릭시

hidden

형태가 보이지 않지만 값만 서버로 전송하는 타입이다. 자주 사용되는 타입!

hidden type

image

src 특성에 지정한 이미지로 나타나는 시각적 제출 버튼. <img> 태그와 동일

image type

~~이 외에도 몇개 더 있지만 딱히 중요한 것은 없다.~~

name 지정

radio 타입에서는 반드시 name 지정 필수!

<input type="radio" name="age" value="1">1
<input type="radio" name="age" value="2">2
<input type="radio" name="age" value="3">3
<input type="radio" name="age" value="4">4

다양한 전역 속성

<input> 요소는 전역 속성(Global Attributes)과 다음 특성을 포함한다.

속성	유형	설명
accept	file	파일을 업로드 컨트롤에서 기대하는 파일 유형을 암시
alt	image	이미지 유형에 대한 대체 속성. accessibiltiy 측면에서 필요.
autocomplete	all	양식 자동생성 기능 (form autofill) 암시
autofocus	all	페이지가 로딩될때 양식 제어에 오토포커스
capture	file	파일 업로드 제어에서 input 방식에서 미디어 capture
checked	radio, checkbox	커맨드나 컨트롤이 체크 되었는지의 여부
dirname	text, search	양식 전송시 요소의 방향성을 전송할 때 양식 필드의 Name
disabled	all	양식 컨트롤이 비활성화되었는지의 여부
form	all	컨트롤을 양식 요소와 연결
formaction	image, submit	양식 전송시 URL 사용하기
formenctype	image, submit	양식의 데이터 인코딩 유형이 양식 전송시 사용될 것
formmethod	image, submit	양식 전송시 HTTP 방식을 사용
formnovalidate	image, submit	양식 전송시 양식 컨트롤 확인을 무시하기
formtarget	image, submit	양식 전송시 브라우징 맥락
height	image	이미지 높이에서 height 속성과 같음
list	almost all	datalist 자동입력 옵션의 id 속성값
max	numeric types	최대값
maxlength	password, search, tel, text, url	value의 최대 길이 (문자수)
min	numeric types	최소값
minlength	password, search, tel, text, url	value의 최소 길이 (문자수)
multiple	email, file	불리언값. 여러 값을 허용할지의 여부
name	all	input 양식 컨트롤의 이름. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다
pattern	password, text, tel	value 가 유효하기 위해 일치해야 하는 패턴
placeholder	password, search, tel, text, url	양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용
readonly	almost all	불리언값. 이 값은 수정이 불가능함
required	almost all	불리언값. 양식이 전송되기 위해서 반드시 입력하거나 확인이 필요한 값
size	email, password, tel, text	컨트롤의 크기
src	image	이미지 출처의 주소에서 src 와 같은 속성
step	numeric types	유효한 증분적인 (Incremental)값
type	all	input 양식 컨트롤의 유형
value	all	양식 컨트롤의 현재 값. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다
width	image	이미지의 width 속성과 같다

[HTML] ul, ol, li 태그(목록, 리스트 나열)

개발자 우디 — Fri, 5 Aug 2022 13:22:21 +0900

HTML 에서는 크게 순서가 있는 리스트, 순서가 없는 리스트 2가지로 나누는데, 순서가 없는 리스트는 Unordered List 의 약어인 <ul> 태그를 사용하고 순서가 있는 리스트는 Ordered List 의 약어인 <ol> 태그를 사용한다.

<ul></ul>
<ol></ol>

순서의 여부를 통해 <ul> 과 <ol> 중에 필요한 것을 정하면 이제 그 안에 리스트 항목들을 채워넣어야 하는데 안에 들어가는 항목은 공통으로 <li> 태그를 사용한다.

예시) ul

<ul>
	<li>순서가</li>
	<li>없는</li>
	<li>리스트</li>
<ul>

예시) ol

<ol>
	<li>순서1</li>
	<li>순서2</li>
	<li>순서3</li>
<ol>

[HTML] 하이퍼링크 a 태그

개발자 우디 — Fri, 5 Aug 2022 10:10:35 +0900

<a> 태그는 anchor의 약어로 닻을 의미한다. <a> 태그는 href 속성을 통해 다른 페이지, 전화번호, 이메일주소 와 그 외에 다른 url로 연결할 수 있는 링크(연결)을 만든다. 인라인 요소이고, 콘텐츠는 주로 링크의 목적지를 나타낸다.

<a> 태그의 대표 속성

href : 연결하고 싶은 주소를 지정한다.

target : 링크를 클릭했을 때 창의 형태를 지정한다.(총 4가지)

_blank : 새창에서 열기
_self : 현재 탭에서 열기(기본값)
_top :
_bottom

title : 링크에 대한 설명이 들어간다.

href 속성의 다양한 활용

a 태그의 href에는 웹 문서의 주소 뿐만 아니라 전화번호나 메일주소 등을 지정할 수도 있다. 이때 각 유형별로 필요한 추가 텍스트가 있다.

1. 전화번호

<a href="tel:010-1234-5678" target="_self">
	전화 걸기
</a>

2. 메일쓰기

mailto: 를 실제 메일주소앞에 붙여야함

<a href="mailto:clothes.yoo@gmail.com" target="_blank">
	메일 쓰기
</a>

[HTML] 컨테이너 태그(div, span) - 시멘틱 구조

개발자 우디 — Thu, 4 Aug 2022 15:04:08 +0900

콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 여러 요소들을 하나로 묶어 관리하기 편하게하는 태그를 컨테이너 태그라고 한다. 콘텐츠 내용을 구분하거나, 특정 영역마다 공통적인 스타일(css)를 적용하고자 할 때 개발자는 컨테이너태그를 사용하는 것이 좋다.

컨테이너 역할을 담당하는 태그는 크게 시멘틱(Semantic) 태그와 논-시멘틱(non-Semantic) 태그로 나뉜다.

시멘틱(Semantic) 태그

시멘틱 태그란 브라우저, 개발자와 사용자에게 태그에 종속되어있는 내용을 직설적으로 알려주는 태그이다.

태그의 종류로는 header, nav, section, article, aside, footer 가 있다.

header : 전체 사이트의 헤더, article에 관련된 헤더이다.
nav : 로그인, 목차 네비게이터 등으로 사용된다.
section : 뉴스헤드라인, 컨텐츠 분류, 본문바디에서 구간을 나눌 때, 본문안에서 본문끼리의 그룹을 지을 때 사용
article : 페이지의 주요 내용정보를 담을 때 사용
aside : 분몬 내용을 서포트 할 때 사용, aside가 어디에 포함되냐에 따라 사용 용도가 다르다.
article 내 aside : article에 종속되어있는 내용을 서포트해주는 정보를 담을 때 사용, 사용검색엔진이 스캐닝을 할때 article에 관련된 aside인지 알수있다.
외부 aside : 사이트 전체의 해당 되는 내용을 서포트 할 수 잇는 정보를 담은 aside, 간단한 네비 넣을 수 있음
footer : 회사소개, 저작권 약관등의 정보를 넣음

논-시멘틱(non-Semantic) 태그

아무런 의미가 부여되지 않는 태그이다. 스타일(css)을 주거나, 서버에서 데이터를 받아서 그룹형 컨테이너(혹은 모듈)로 manipulate를 해야할 때 컨테이너형 태그를 사용한다. 논 시멘틱 태그는 div 와 span 이 있다.

<div></div>
<span></span>

<div> 와 <span> 비교

<div>

박스 형태로 영역이 설정되고 그 안에 정렬된다.
width, height 크기 지정이 가능함.
자동으로 줄바꿈이 된다.
margin 속성이 4방향 모두 적용이 되며 위 아래 겹쳐지는 여백은 상쇄된다. 즉 여백의 크기가 더해서 2배가 되는 것이 아니라 겹쳐지는 것.

<span>

span 은 줄 단위로 영역이 설정된다.
inline 속성을 가지기 때문에 width 와 height 를 속성값으로 정해 줄 수 없다.
줄바꿈이 되지 않고 옆으로 나열된다.
margin 속성이 양 옆으로만 적용되며 겹쳐지지 않는다. 가시적으로 더 넓어 보임.

[HTML] 이미지(img) 태그

개발자 우디 — Thu, 4 Aug 2022 13:31:30 +0900

<img> 태그는 이미지를 표시할 때 일반적으로 사용하는 태그이다.

~~(참고로 이미지를 표시하는 방법에는 표시할 엘리먼트 대상에 background-image 속성으로 정의하는 방법도 있다.)~~

단일 태그로서 닫는 </> 태그를 필요로 하지 않는다. 콘텐츠를 적어주는 대신 표시할 이미지에 대한 정보를 속성으로 지정해주어야 한다.

기본 형태

<img src="표시할이미지파일의경로" alt="이미지 설명" />

<img> 태그의 속성들을 확인해보자면 먼저 src 속성은 표시할 이미지의 경로 정보와 파일명을 입력받는 속성이다. 즉 이미지의 url을 입력받는다. 서버(클라우드)에 위치한 이미지 파일도 가능하고, 내 로컬 PC에 저장된 이미지 파일도 가능하다.

예시

<!-- 로컬 PC 경로내 이미지 -->
<img src="./image/tempImg.png" alt="임시이미지">

<!-- 특정 서버에 저장된 이미지 -->
<img src="https://item.kakaocdn.net/do/493188dee481260d5c89790036be0e66effd194bae87d73dd00522794070855d" alt="클라우드에저장된이미지" >

두번째로 alt 속성은 alternative의 약자로 대체 텍스트 역할을 한다.

이미지가 로딩되기 전이나 이미지 로딩에 실패한 경우 이미지 대신에 대체할 텍스트가 표시된다.

alt는 사용하면 이미지는 볼 수 없는 시각장애인에게 웹 페이지를 서비스해야 하는 상황에 대한 대비가 가능하다.

세번째로 loading 속성은 페이지 내에서 바로 필요하지 않은 이미지들을 로딩 시점을 뒤로 미루는 것이다. 페이지 로드 시점에 유저에게 보여지지 않는 이미지는 스크롤 등으로 실제로 이미지가 보여지는 시점이 올 때 로딩된다.

그리고 만약 사용자가 스크롤하는 행위가 없으면, 사용자에게 보여지지 않은 이미지는 절대 로딩되지 않는다.

사용하는 이유는 크게 1) 성능향상 2) 비용감소 가 있다.

<img src="./image/img.png" alt="대체텍스트" loading="lazy">

이미지 크기 조절하기

<img> 태그를 통해 이미지를 표시할 때는 이미지가 표시될 크기를 지정할 수 있다.

이 때 넒이와 높이를 속성으로 각각 지정할 수 있다.~~(참고로 이 속성을 이용하지 않고 별도의 CSS에서 설정해도 무관하다.)~~

예시

<img src="이미지경로" alt="대체텍스트" width="넓이값" height="높이값">

여기서 넓이와 높이는 각각 픽셀(px) 단위로 적용된다.

[HTML] HTML 텍스트 관련 태그(p, hr, em, strong, u, b, mark, br, &nbsp 등) 사용법

개발자 우디 — Thu, 4 Aug 2022 09:43:52 +0900

<p> 태그

문단을 표시하는 태그(단락을 구분)

<html>
    <head>
    </head>
    <body>
    	<p>단락1 입니다.</p>
        <p>단락2 입니다.</p>
    </body>
</html>

<h1>, <h2> ... <h6> 태그

헤드라인을 표시하는 태그이며, 숫자가 작을수록 크기가 크다.

<html>
    <head>
    </head>
    <body>
    	<h1>제일 큰 제목</h1>
        <h2>2번째로 큰 제목</h2>
        <h3>3번째로 큰 제목</h3>
        <h4>4번째로 큰 제목</h4>
        <h5>5번째로 큰 제목</h5>
        <h6>가장 작은 제목</h6>
    </body>
</html>

<hr> 태그

수평선을 표시하는 태그로 주제 변경이나 내용 구분시에 사용하는 태그이다.

<html>
    <head>
    </head>
    <body>
    	<p>첫 단락</p>
        
        <hr>
        
        <p>두번째 단락</p>
    </body>
</html>

<br> 태그

줄바꿈(==Enter) 을 적용해주는 태그이다. <br> 태그 하나당 1줄씩 줄바꿈 처리 된다.

<html>
    <head>
    </head>
    <body>
    	첫 줄 내용    
        <br>        
        두번째 줄 내용
    </body>
</html>

<b> 태그

해당 <b> ~~ </b> 안의 텍스트에 Bold(강조) 를 적용한다.

<html>
    <head>
    </head>
    <body>
    	일반 글씨
        
        <br>
        
        <b>강조된 Bold 글씨</b>
    </body>
</html>

<strong> 태그

해당 <strong> ~~ </strong> 안의 텍스트를 굵게 만든다.

<html>
    <head>
    </head>
    <body>
    	일반 텍스트
        
        <br>
        
        <strong>폰트 굵게 적용된 텍스트</strong>
    </body>
</html>

<u> 태그

해당 <u> ~~ </u> 안의 텍스트에 언더바( _ ) 를 적용한다.

<html>
    <head>
    </head>
    <body>
    	일반 내용
        
        <br>
        
        <u>밑줄 쳐진 내용</u>
    </body>
</html>

<em> 태그

해당 <em> ~~ </em> 안의 텍스트에 이탈릭체(폰트)를 적용한다.

<html>
    <head>
    </head>
    <body>
    	일반 텍스트
        
        <br>
        
        <em>이탈릭체 적용 텍스트</em>
    </body>
</html>

<mark> 태그

해당 <mark> ~~ </mark> 안의 텍스트에 형광펜 표시를 적용한다.

<html>
    <head>
    </head>
    <body>
    	일반 텍스트
        
        <br>
        
        <mark>형광펜 효과 적용 텍스트</mark>
    </body>
</html>

&nbsp

태그는 아니지만 HTML에서 띄어쓰기(==SpaceBar) 1칸을 의미한다.

<html>
    <head>
    </head>
    <body>
    	띄어쓰기전문구 &nbsp 1칸띄어쓰기후문구
    </body>
</html>

[HTML] HTML 개념 및 기본구조

개발자 우디 — Wed, 3 Aug 2022 17:37:48 +0900

HTML 은 Hyper Text Markup Language 의 약자로 하이퍼링크를 통해 특정 웹 페이지에서 다른 페이지로 접근할 수 있는 마크업 언어이다.

HTML의 기본 구조

<!DOCTYPE html>
<html>
    <head>
    	<meta charset = "utf-8">
        <title>문서의 제목</title>
    </head>
    <body>
    	브라우저 화면에 표시할 부분
    </body>
</html>

HTML 은 크게 <head> </head> 영역과 <body> </body> 영역 총 2가지 영역으로 나누곤 한다.

쉽게 생각해서 한 웹 페이지 화면을 나눈다고 생각했을 때 <head> 영역은 사람의 머리부분이라고 생각하면 되고, <body> 는 나머지 몸통 부분이라고 생각하면 이해하기 쉽다.

<head> 영역은 화면을 구성하는데에는 포함이 되지 않고, <body> 영역은 화면에 직접 출력되는 부분이다.

HTML의 특징

웹 페이지 구조(뼈대)를 만드는 언어이다.
이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용 구성을 태그를 통해 추가/삭제 할수있다.
파일유형이 .html 이다.
일반적인 태그는 시작태그와 끝 태그로 구성되어있다.(예외로 img,br,input 등의 태그들은 끝태그(</>) 없이 사용 가능)

HTML의 구성요소

1. 엘리먼트(element) == 태그(tag)

콘텐츠(요소포함)를 감싸는 태그(tag) 를 지칭함.(요소라고도 함)

2. 어트리뷰트(attribute)

각 속성을 의미함

속성과 값

3. 벨류(value)

속성마다 해당하는 값을 의미함

태그 개념

<!DOCTYPE html>

문서의 첫 부분에서 문서 유형을 지정하는 단일 태그이다.

여기서 문서 유형이란 웹 브라우저에게 '이 문서는 OO 니까 그렇게 알고 처리해줘' 라는 메시지를 전달하는 것이다.

HTML 은 시간이 지나면서 계속 버전이 업그레이드 되고 있는데 현재 표준으로 사용되고 있는 버전을 사용하기 위해 적어주는 명칭이 html 이다.

<html> ~ </html>

문서 유형을 지정한 후 실제 문서가 시작되고 끝나는 것을 나타내는 태그이다.

이 태그의 내부에 모든 태그들이 포함된다.

<head> ~ </head>

웹 브라우저 화면에 보이진 않지만 웹 브라우저가 알아야 할 정보들은 모두 이 태그에 들어간다.

<meta charset="utf-8"> : 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그이다.
<title> ~ </title> : 문서의 제목을 나타낸다. 콘텐츠는 브라우저탭에 표시된다.
<script type="text/javascript"> : 해당 웹 페이지에서 사용할 Javascript 정의
<style> : CSS 파일 내부에서 정의
<link rel="stylesheet" href="경로/이름.css"> : CSS 파일 외부에서 정의해서 사용

<body> ~ </body>

실제 브라우저 화면에 표시될 내용을 입력하는 태그이다.

여기엔 다음과 같은 유형의 태그들이 포함될 수 있다.

텍스트 표시 태그
이미지 표시 태그
각종 사용자 인터페이스(버튼, 입력란, 드롭다운메뉴, 테이블, 캔버스 등...)를 나타내는 태그

태그안에 태그를 포함하는 방식으로 콘텐츠를 다양하게 구성할수 있다.

[Java] Iterator 개념 및 사용법

개발자 우디 — Mon, 18 Jul 2022 15:03:09 +0900

Iterator 란

Iterator 는 자바에서 Collection 객체의 값을 가져오거나 조작할 때 사용하는 인터페이스 객체이다.

Collection 객체는 대표적으로 List, Set, map, Queue 등이 있다.

Iterator의 장점으로는 모든 컬렉션 프레임워크에 공통으로 사용 가능이 가능하기 때문에 코드 개발 및 유지보수에 용이하다.

단점으로는 반복을 수행하는 동안 단방향 반복만 가능하고, 중간에 값을 변경하거나 추가가 불가능하다.

또한 대량의 데이터를 제어하려고 하면 성능이 떨어진다.

코드 예시

JSONObject jsonObj = (JSONObject)jsonArray1.get(i);
Iterator<String> iterator = jsonObj.keySet().iterator();
ArrayList<String> keyList = new ArrayList();

while(iterator.hasNext()){
    String temp = iterator.next(); // 다음 순서 가져옴
    keyList.add(temp); // 다른 컬렉션에 추가
    iterator.remove(temp); // 삭제
}

Iterator 활용 함수

Iterator.hasNext()

Iterator 안에 다음 값이 들어있는지 확인한다. 존재하면 True, 없으면 False 를 Return 한다.

Iterator.next()

iterator의 다음 값을 가져온다.

Iterator.remove()

iterator에서 next() 함수 호출 시 가져온 값을 컬렉션(List, Set, Map) 등에서 삭제한다.

[Java] ArrayList 2차원 배열

개발자 우디 — Tue, 12 Jul 2022 17:23:20 +0900

업무중에 ArrayList 로 2차원 배열을 만들어야할 일이 생겼는데 이후로도 가끔 필요할 것 같아 정리해두려고한다.

ArrayList 란

ArrayList란 Collection 프레임워크의 일부이며 java.util 패키지에 소속되어 있다.

표준 배열보다는 속도가 느리지만, 가변 배열로 사용해야 할 때 매우 편리하고, Depth 는 List 인터페이스에서 상속 받아 사용이 가능하다. 쉽게 말해 객체가 추가되어 용량을 초과하면 자동으로 부족한 크기만큼 용량이 늘어난다.(일반 배열처럼 length 가 고정 될 일이 없다는 것)

기본 ArrayList 선언

ArrayList<String> list1 = new ArrayList<String>();

ArrayList 2차원 배열 선언

인스턴스 생성 시 배열 부호 [ ] 사용

ArrayList<String>[] list_D1 = new ArrayList[3]; 
for(int i=0; i<3; i++){
    list_D1[i] = new ArrayList<String>();
}

각각의 배열 인덱스 lsit_D1[i] 에 new ArrayList<String>() 힙 객체로 가변 배열을 생성해준다.

ArrayList 2차원 배열에 값 추가

for(int i=0; i<list_D1.length; i++){
    for(int j=0; j<tempArray.length; j++){
        list_D1[i].add("추가할 값"); // 해당 값 추가
    }
}

ArrayList 2차원 배열 값 사용

for(int i=0; i<list_D1.length; i++){
    for(int j=0; j<tempArray.length; j++){
        System.out.println(list_D1[i].get(j)); // 해당 값 확인
    }
}

생각보다 간단하다.

[네트워크] HTTP(HyperText Transfer Protocol) 개념 정리

개발자 우디 — Tue, 12 Jul 2022 11:13:50 +0900

HTTP란

HTTP(Hypertext Transfer Protocol)하이퍼텍스트 전송 규약. 웹 브라우저(web browser) 같은 응용프로그램을 통해 웹 클라이언트(사용자)와 웹 서버(서비스 제공자) 사이 데이터를 전송하는 프로토콜이다. 인터넷 통신을 위해 사용 되는 Protocol이며, HTML뿐만 아니라, 각종 이미지, 동영상, 음성 데이터 전송이 가능하다. 웹 서버와 사용자 컴퓨터에 설치된 웹 브라우저 사이에 문서를 전송하기 위한 통신 규약이다.

HTTP의 특징

HTTP 클라이언트와 HTTP 서버에 의해서 해석이 된다.
TCP/IP를 이용하는 응용 프로토콜(application protocol)이다.
연결 상태를 유지하지 않는 비연결성 프로토콜이다.
요청/응답(Request/Response) 방식으로 동작한다.
HTTP는 기본 포트인 80번 포트에서 서비스 대기한다.

연결 상태를 유지하지 않기 때문에 정보를 저장하기 위한 수단으로 쿠키(Cookie)와 세션(Session)이 등장했다.

HTTP의 통신 과정

클라이언트(사용자)가 서버에 HTTP Request (요청) 전송
서버가 사용자의 요청을 받고 HTTP Response (응답) 회신

클라이언트의 요청이 없으면 응답하지 않는게 기본 상태이다.

HTTP 상태 코드

상태 코드는 IETF (Internet Engineering Task Force)에서 정의한 인터넷 표준에 따라 개발되며, 총 5가지 클래스로 분류된다.

1xx: Informational - 요청 정보 처리 중
2xx: Success - 요청을 정상적으로 처리함
3xx: Redirection - 요청을 완료하기 위해 추가 동작 필요
4xx: Client Error - 서버가 요청을 이해하지 못함
5xx: Server Error - 서버가 요청 처리 실패함

1xx: Informational 정보

서버가 요청을 클라이언트에서 성공적으로 수신했으며 서버 끝에서 처리 중이라는 정보를 나타낸다. 서버의 임시 응답이며 일반적으로 상태 줄과 선택적 헤더 만 포함하며 빈 줄로 끝난다. 현재는 거의 사용하지 않는다.

2xx: Success 성공

서버가 요청을 받고 성공적으로 처리되었음을 나타낸다.

3xx: Redirection 리디렉션

브라우저는 자동으로 다른 URL로 리디렉션되므로 브라우저 창에는이 코드가 표시되지 않지만, 이미지 파일처럼 캐싱된 파일을 새로고침 후 확인하면 3xx 코드를 확인할 수 있다.

4xx: Client Error 클라이언트 오류

서버가 해결할 수 없는 클라이언트 측 에러 코드다. 주로 클라이언트(사용자)가 서버에 잘못된 요청을 했을 경우 발생한다.

5xx: Server Error 서버 오류

서버가 클라이언트의 요청을 처리하지 못했을 때 발생한다. 서버는 보안 상 통신하지 않는 것이 가장 좋으므로 대부분의 에러 코드를 500 Error로 처리한다.

HTTP 응답 코드(자세히)

100	Continue (클라이언트로 부터 일부 요청을 받았으며 나머지 정보를 계속 요청함)
101	Switching protocols
200	OK(요청이 성공적으로 수행되었음)
201	Created (PUT 메소드에 의해 원격지 서버에 파일 생성됨)
202	Accepted(웹 서버가 명령 수신함)
203	Non-authoritative information (서버가 클라이언트 요구 중 일부만 전송)
204	No content, (사용자 요구 처리하였으나 전송할 데이터가 없음)
301	Moved permanently (요구한 데이터를 변경된 타 URL에 요청함)
302	Not temporarily
304	Not modified (컴퓨터 로컬의 캐시 정보를 이용함, 대개 gif 등은 웹 서버에 요청하지 않음)
400	Bad request (사용자의 잘못된 요청을 처리할 수 없음)
401	Unauthorized (인증이 필요한 페이지를 요청한 경우)
402	Payment required(예약됨)
403	Forbidden (접근 금지, 디렉터리 리스팅 요청 및 관리자 페이지 접근 등을 차단)
404	Not found, (요청한 페이지 없음)
405	Method not allowed (혀용되지 않는 http method 사용함)
407	Proxy authentication required (프락시 인증 요구됨)
408	Request timeout (요청 시간 초과)
410	Gone (영구적으로 사용 금지)
412	Precondition failed (전체 조건 실패)
414	Request-URI too long (요청 URL 길이가 긴 경우임)
500	Internal server error (내부 서버 오류)
501	Not implemented (웹 서버가 처리할 수 없음)
503	Service unnailable (서비스 제공 불가)
504	Gateway timeout (게이트웨이 시간 초과)
505	HTTP version not supported (해당 http 버전 지원되지 않음)

HTTP Method

GET

GET 요청 방식은 URI(URL)가 가진 정보를 검색하기 위해 서버 측에 요청하는 형태

POST

POST 요청 방식은 요청 URI(URL)에 폼 입력을 처리하기 위해 구성한 서버 측 스크립트(ASP, PHP, JSP 등) 혹은 CGI 프로그램으로 구성되고 Form Action과 함께 전송되는데, 이때 헤더 정보에 포함되지 않고 데이터 부분에 요청 정보가 들어가게 된다.

PUT

POST와 유사한 전송 구조를 가지기 때문에 헤더 이외에 메시지(데이터)가 함께 전송된다.원격지 서버에 지정한 콘텐츠를 저장하기 위해 사용되며 홈페이지 변조에 많이 악용되고 있다.

DELETE

원격지 웹 서버에 파일을 삭제하기 위해 사용되며 PUT과는 반대 개념의 메소드

PATCH

부분적인 수정을 위해 사용

TRACE

원격지 서버에 Loopback(루프백) 메시지를 호출하기 위해 사용된다.

HEAD

HEAD 요청 방식은 GET과 유사한 방식이나 웹 서버에서 헤더 정보 이외에는 어떤 데이터도 보내지 않는다.웹 서버의 다운 여부 점검(Health Check)이나 웹 서버 정보(버전 등)등을 얻기 위해 사용될 수 있다.

OPTIONS

해당 메소드를 통해 시스템에서 지원되는 메소드 종류를 확인 가능

CONNECT

웹 서버에 프락시 기능을 요청할 때 사용된다.

[네트워크] 포트(Port)의 개념

개발자 우디 — Tue, 12 Jul 2022 10:13:03 +0900

포트(Port)의 개념

포트는 운영 체제 통신의 종단점이다. 이 용어는 소프트웨어에서 네트워크 서비스나 특정 프로세스를 식별하는 논리 단위를 나타낸다.

사용법

예시) https://000.000.000.000:21

여기서 000.000.000.000은 IP 주소를 나타내며 그 뒤에 있는 21이 포트 번호를 의미한다.

쉽게 설명해서 예를 들어 집배원이 우편물을 배송하는 과정으로 비유하자면 여러사람이 같이사는 공동주택으로 배송을 갔다고치면 단순히 집 주소 만으로는 집배원이 이 우편을 누구에게 전달할지 명확히 알 수 없기 때문에, 집 주소와 함께 수령할 사람이 들어 있는 방번호까지 적어줘야 정확한 배송을 받을 수 있다.

이 때, 집 주소에 해당 하는 것이 IP이며, 방번호가 Port다.

포트(Port)범위

0 ~ 65535 : 16비트 숫자로 구성됨
0 ~ 1023 : 잘 알려진 포트 번호로 웹 서버, 메일 서버 같은 프로그램들이 사용한다.
1024 ~ 49151 : 잘 알려지지 않은 프로그램들이 사용한다.
49152 ~ 65535 : 서버가 클라이언트를 식별 할때 사용이 된다.

코드 정리 사이트(HTML/Javascript/CSS)

개발자 우디 — Mon, 11 Jul 2022 17:20:41 +0900

1. segio

미리보기 지원

http://html.segio.com/ko/

HTML 소스 태그정리 (segio.com)

대상 작업 (속성, 태그, 여백)을 선택한 후 아래에서 제거하십시오. 추가할 내용은 콜론으로 구분하여 입력하세요. 태그 삭제시 "!--/--"의 의미는 " " 태그를 의미합니다.

html.segio.com

2. Tabifier

HTML, CSS, C Style, JSON 코드 정리

https://tools.arantius.com/tabifier

Tools - Tabifier (HTML and CSS code beautifier) - arantius.com

Tabifier The tabifier is a tool to properly indent computer code. The style it produces is a mix of my personal preferences for indentation plus what I could manage to make a program produce from dirty source. The tabifier currently supports CSS, HTML, and

tools.arantius.com

3. Online JavaScript Beautifier

Javascript 코드 정리

https://beautifier.io/

Online JavaScript beautifier

HTML <style>, <script> formatting: Keep indent level of the tag Add one indent level Separate indentation

beautifier.io

4. Javascript Compressor

Javascript 코드 한줄로 정리

https://javascriptcompressor.com/

Javascript Compressor - compress code online for free

javascriptcompressor.com

5. Cleancss

CSS 코드 정리

https://www.cleancss.com/css-beautify/

CSS Formatter

Format your CSS to clean it up and beautify it. Make your CSS easier to read and validate it.

www.cleancss.com

6. CSS Minifier

CSS 코드 한줄로 정리

https://www.toptal.com/developers/cssminifier

CSS Minifier & Compressor | Toptal®

Use our CSS Minifier & Compressor tool to reduce CSS code size and make your website load faster. Get started for free now.

www.toptal.com

[네트워크] 공인 IP 대역과 사설 IP 대역

개발자 우디 — Mon, 11 Jul 2022 11:39:30 +0900

회사에서 업무를 보다보면 IP 주소 관련해서 헷갈리는 경우가 많았다. 내부 IP 주소와 고객사 IP 주소 등..

그래서 시간이 될 때마다 하나씩 기록하며 정리해두려고 한다.

공인 IP (Public IP) 대역의 개념

인터넷 사용자의 로컬 네트워크를 식별하기 위해 ISP(Internet Service Provider, 인터넷 서비스 공급자)가 제공하는 IP주소이다. 공용 IP주소라고도 불리며 외부에 공개되어 있는 IP주소이다. 공인 IP는 전 세계에서 유일한 IP주소를 갖고 있으며(중복 X), 공인 IP 주소가 외부에 공개되어 있기때문에 인터넷에 연결된 다른 PC로부터의 접근이 가능하다. 따라서 공인 IP 주소를 사용하는 경우에는 방화벽 등의 보안 프로그램을 반드시 설치할 필요가 있다.

예시

대표적인 통신사 SK,KT,LG등을 통해서 사용하고 있는 인터넷망을 공인 IP라고 할 수 있다.

공인 IP 대역

0.0.0.0 ~ 127.255.255.255
128.0.0.0 ~ 191.255.255.255
192.0.0.0 ~ 233.255.255.255
224.0.0.0 ~ 239.255.255.255
240.0.0.0 ~ 255.255.255.255

사설 IP (Private IP)대역의 개념

일반 가정이나 회사 내 등에 할당된 네트워크의 IP주소이다. 로컬 IP, 가상 IP라고도 불리며 IPv4의 주소부족으로 인해 서브넷팅된 IP이기 때문에 라우터에 의해 로컬 네트워크상의 PC나 장치에 할당된다.

예시

인터넷 공유기에 연결된 PC,TV,스마트폰 등이 대표적인 사설 IP주소이다. 외부에는 공개되지 않아서 외부에서 검색, 접근이 불가능하다.

사설 IP 대역

10.0.0.0 ~ 10.255.255.255
172.16.0.0 ~ 172.31.255.255
192.168.0.0 ~ 192.168.255.255

[티스토리] 티스토리에 쿠팡파트너스 배너 넣기

개발자 우디 — Sun, 3 Jul 2022 14:42:37 +0900

평화로운 일요일 점심... 티스토리 블로그를 운영한지 반년이 넘어가는데 구글 애드센스만 등록하고 아직 쿠팡파트너스를 등록하지 못했다는걸 깨닫고 급하게 등록하고 블로그에 적용하는 것까지 성공했다!

특별히 어려운 부분은 없고, 마지막에 티스토리 블로그 스킨 편집에서 코드로 넣어야하는 부분이 비 개발자들에게는 조금 어려울 수 있다고 생각하기 때문에 설명과 함께 정리해두려고 한다.

1. 쿠팡 파트너스 사이트에 접속

쿠팡 파트너스(쿠팡 계정과 별도) 가입이 필요.

https://partners.coupang.com/

Coupang Partners

쿠팡과 함께 수익을 창출해보세요

partners.coupang.com

2. 쿠팡 파트너스 로그인

쿠팡 파트너스 홈페이지 메인 화면

여기서 가입하는 과정부터 보자면

2-1. 쿠팡 파트너스 회원가입

일반적인 블로그 운영만 하는 경우 [개인] 이 맞음.

기본정보 입력

추천인 ID

AF6600364

적용할 사이트 목록

가입 완료!

3. 쿠팡 파트너스 로그인 후 #링크 생성

기존 배너가 없을테니, [배너 생성] 클릭

4. 배너 만들기

배너 만들기

설정값은 마음대로 해도 괜찮고, 크기는 본인 블로그에 이 배너가 들어갈 공간의 크기에 맞게 설정해주면 된다.

참고로 잘못설정해도 추후에 얼마든지 변경하거나 다시 만들 수 있으니 걱정할 필요는 없다.

우선 여기까지 하면 쿠팡 파트너스에서 작업할 것은 끝난다.

이 뒤 부터는 티스토리라는 플랫폼에 적용하는 방법이다.

이건 개개인마다 코드 구성이 다르기 때문에 차이가 있을 수 있지만, 최대한 공통적인 부분 위주로 작성하려고 한다.

5. 티스토리 스킨 편집에 생성한 쿠팡파트너스 배너 추가

적용하는 코드 부분

<div class="searchP-ad-container flex" style="border-top: 3px solid #e5e5e5;height:150px">
    <div class="searchP-ad position-relative width-100">
      <!-- 검색바 하단 광고 -->
      <script src="https://ads-partners.coupang.com/g.js"></script>
      <script>
        new PartnersCoupang.G({
          "id":591916,
          "template":"carousel",
          "trackingCode":"AF6600364",
          "width":"99%",
          "height":"150"
        });
        try {
          setTimeout(function() {
            var iframeNode = document.querySelector('iframe[id^="591916"]');
            document.querySelector('.searchP-ad').appendChild(iframeNode);
          }, 1000);
        } catch (e) {
          console.error(e);
        }
      </script>
    </div>
</div>
<span class="coupang-notice">이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.</span>

개발자들은 아마 쉽게 바로 사용할 수 있겠지만, 비 개발자들은 조금 난해할 수 있으니 설명하자면

위 캡처에서 "id": 591916 이랑 "trackingCode": "AF6600364" 그리고 'iframe[id^="591916"]' 이렇게 총 3 부분이 나의 쿠팡파트너스 고유 식별 정보를 담고 있는 부분이다.

캡처와 별도로 코드도 적어두었으니 잘 모르겠다면 코드를 전부복사해서 원하는 위치에 붙여넣기 한 후

저 3 부분의 숫자만 본인의 값으로 변경해서 사용하면 된다.

6. 결과물

[네트워크] 명령프롬프트(CMD) netstat 명령어를 통한 네트워크 상태 확인 방법 및 taskkill 명령어로 프로세스 강제 종료

개발자 우디 — Wed, 22 Jun 2022 09:51:47 +0900

개발을 하다보면 서버를 종료해도 해당 로컬 포트가 이미 사용중이라며 에러가 날 때가 있다.

그럴 때 사용하면 편리한 방법이다.

netstat 명령어

내가 주로 사용하는 방법

netstat -an

사용 방법
netstat [옵션] [| grep 포트 번호 or 서비스 명]

option
-l (listen) : 연결 가능한 상태
-n (number port) : 포트 넘버
-t (tcp) : tcp
-u (udp) : udp
-p : 프로그램 이름 / PID
-a : 모두
-i : 이더넷 카드별 정상/에러/드랍 송수신 패킷 수 확인
-r : 라우팅 테이블
-s : 네트워크 통계

자주 사용 하는 옵션

netstat -ano : 사용중인 포트와 해당 포트의 PID 까지 보여준다.

netstat -nap : 연결을 기다리는 목록과 프로그램을 보여준다.
netstat -an | grep 포트번호 : 특정 포트가 사용 중에 있는지 확인.
netstat -nlpt : TCP listening 상태의 포트와 프로그램을 보여준다.

taskkill 명령어

사용 예시

taskkill -f -pid 9024

위의 명령어 netstat 으로 종료하고 싶은 프로세스의 pid 값을 확인한 뒤 taskkill /f /pid 명령어로 강제 종료 시키면 된다.

여기서 /f 는 강제종료, /pid는 프로세스 pid 값을 사용하여 종료하겠다는 의미이다.

Everything : 이름으로 파일과 폴더를 빠르게 찾을 수 있는 윈도우용 검색 유틸리티

개발자 우디 — Mon, 20 Jun 2022 14:00:29 +0900

Everything 은 이름별로 파일과 폴더를 빠르게 찾을 수있는 윈도우 용 검색 유틸리티다.

사용해보니 너무 편리해서 이런 프로그램이 존재하는지 모르는 사람들이 있다면 꼭 써보는게 좋을 것 같다.

파일

Everything-1.4.1.1017.x64.zip

1.70MB

참고로 무설치 형이다.

공식 다운로드

https://www.voidtools.com/ko-kr/downloads/

다운로드 - voidtools

www.voidtools.com

사용법

그냥 찾고싶은 파일이나 폴더명을 입력만하면 알아서 하단에 표시된다.

WinMerge : 텍스트(코드) 비교 프로그램

개발자 우디 — Mon, 20 Jun 2022 13:46:37 +0900

프로그래밍 할 때 같은 파일의 코드 형상관리 버전이 달라 비슷한 두 텍스트(코드)를 비교해야 하는 경우가 자주 있다.

그럴때마다 일일이 다른 부분을 직접 찾는건 너무 번거롭고 비효율적인 방법인데, 그럴때 사용하기 좋은 무료 툴이다.

파일

WinMerge-2.16.14-x64-Setup.zip

7.69MB

공식 다운로드

https://winmerge.org/downloads/?lang=en

Download WinMerge - WinMerge

Download WinMerge The easiest way to install WinMerge is to download and run the Installer. Read the online manual for help using it. WinMerge 2.16.20 The current WinMerge version is 2.16.20 and was released at 2022-04-27. For detailed info on what is new,

winmerge.org

사용법

1. 새문서 추가

2. 비교할 텍스트를 양쪽에 입력 후 [2] 번 클릭 시 비교 실행

끝!

[티스토리] 티스토리 업비트 실시간 가격 띄우기

개발자 우디 — Sun, 19 Jun 2022 17:11:02 +0900

코인 매매와 공부하는 걸 좋아하다보니 내 블로그에도 업비트의 실시간 가격이 떴으면 좋겠다는 생각이 들었다.

궁금해서 찾다보니 참고할만한 블로그(꾸생님)가 있어서 신기하기도하고 공부하는 목적도 겸해서 적용해보았다.

필요한 사람에게 도움이 되길 바라며 정리해본다.

결과물

HTML 코드

<div class="price-wrap">
  <div class="slide-wrap">
    <span class="item-BTC">
      <i class="bx bxl-bitcoin"></i>
      <span class="ticker-price-rise">33,415,000</span>
    </span>
    <span class="item-ETH">
      <!--<span class="ticker-txt">ETH : </span>-->
      <i class="bx bxl-ethereum"></i>
      <span class="ticker-price-rise">1,769,500</span>
    </span>
    <span class="item-ADA">
      <!--<span class="ticker-txt">ADA : </span>-->
      <i class="bx bxl-ada"></i>
      <span class="ticker-price-rise">500</span>
    </span>
  </div>
  <script>
    var slideBar = document.querySelector(".slide-wrap");
    setInterval(function() {
      var upbit = "https://api.upbit.com/v1/ticker?markets=";
      var crypto = "KRW-BTC,KRW-ETH,KRW-ADA";
      axios.get(upbit + crypto).then(function(res) {
        var data = res.data;
        res.data.forEach(function(el, idx) {
          var pirceBar = el.market.substr(4, 4) === "BTC" ? "<span class=\"ticker-txt\"><i class='bx bxl-bitcoin bx-xs'></i></span><span class=\"ticker-price-rise\">".concat(el.trade_price.toLocaleString(), "</span>") : "<span class=\"ticker-txt\">".concat(el.market.substr(4, 4), " :</span><span class=\"ticker-price-rise\">").concat(el.trade_price.toLocaleString(), "</span>");
          if (el.change === "RISE") {
            slideBar.children[idx].innerHTML = pirceBar;
          } else if (el.change === "FALL") {
            slideBar.children[idx].innerHTML = pirceBar;
          } else {
            slideBar.children[idx].innerHTML = pirceBar;
          }
        });
      })["catch"](function(err) {
        console.log(err);
      });
    }, 1200);
  </script>
</div>

스크립트 부분이 코드가 길지 않아 따로 분리하지 않고 해당 엘리먼트 안에 작성했다.

밑에 Javascript 코드 영역은 따로 기술해 두었다.

Javascript 코드

<script>
    var slideBar = document.querySelector(".slide-wrap");
    setInterval(function() {
      var upbit = "https://api.upbit.com/v1/ticker?markets=";
      var crypto = "KRW-BTC,KRW-ETH,KRW-ADA";
      axios.get(upbit + crypto).then(function(res) {
        var data = res.data;
        res.data.forEach(function(el, idx) {
          var pirceBar = el.market.substr(4, 4) === "BTC" ? "<span class=\"ticker-txt\"><i class='bx bxl-bitcoin bx-xs'></i></span><span class=\"ticker-price-rise\">".concat(el.trade_price.toLocaleString(), "</span>") : "<span class=\"ticker-txt\">".concat(el.market.substr(4, 4), " :</span><span class=\"ticker-price-rise\">").concat(el.trade_price.toLocaleString(), "</span>");
          if (el.change === "RISE") {
            slideBar.children[idx].innerHTML = pirceBar;
          } else if (el.change === "FALL") {
            slideBar.children[idx].innerHTML = pirceBar;
          } else {
            slideBar.children[idx].innerHTML = pirceBar;
          }
        });
      })["catch"](function(err) {
        console.log(err);
      });
    }, 1200);
</script>

나는 현재 에이다만 분할로 매수하는 중이기 때문에 비트코인, 이더리움, 에이다 총 3개의 코인의 가격만 실시간으로 받아오고자 스크립트를 구성했다.

CSS 코드

/* 업비트 API */
@media (min-width: 992px) {
  .price-wrap {
    height: 35px;
    /*background: #f8f8f8 url(images/bg.svg);*/
  }
}

.price-wrap {
  position: sticky;
  top: -15px;
  display: inline-block;
  padding: 0;
  margin: 35px 15px 0 15px;
  box-sizing: border-box;
  width: 280px;
  background-color: #161a1e;
  /*box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow: hidden;
  z-index: 9998;
  font-size: 1.0rem !important;
  color: #fff !important;
  border: 0 solid #d0d0d0;
  background: #f1f1f191;
  border-radius: 10px;
  box-shadow: 0 1px 10px rgb(0 0 0 / 18%);
}

.price-wrap:after {
  content: 'Upbit';
  display: inline-block;
  /*position: absolute;*/
  top: 0;
  left: 0;
  height: 100%;
  background-color: #093687;
  z-index: 9999;
  padding: 10px;
  font-size: 15px;
  color: #fff;
  font-weight: bold;
  font-style: italic;
  font-family: 'IBM Plex Sans', sans-serif;
}

.ticker-txt {
  color: #333 !important;
  font-weight: bold;
  font-family: Maplestory-Light !important;
}

.bxl-bitcoin {
  color: #ef8e18;
  margin-top: 2px;
}

.bxl-ethereum {
  color: #3b3f52d8;
  margin-top: 2px;
}

.bxl-ada {
  color: #3f18ef;
  margin-top: 2px;
}

.slide-wrap>span {
  position: absolute;
  top: 50%;
  left: 110%;
  transform: translate(0, -50%);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  width: 110px;
  height: 20px;
  white-space: nowrap;
  text-align: center;
  color: #333;
  font-size: 1.1rem;
  font-family: 'IBM Plex Sans', sans-serif;
  z-index: 9997;
}

.slide-wrap>span span {
  font-size: 13px;
  margin: 2px;
  display: inline-block;
  vertical-align: middle;
}

.ticker-price-fall {
  color: #f6465d;
  margin: 0;
}

.ticker-price-rise {
  color: #0ecb81;
  margin: 0;
}

.ticker-price-same {
  color: #fff;
  margin: 0;
}

.item-BTC {
  animation: slidingSlow 15s 0s linear infinite;
}

.item-ETH {
  animation: slidingSlow 15s 5s linear infinite;
}

.item-ADA {
  animation: slidingSlow 15s 10s linear infinite;
}

@keyframes slidingSlow {
  0% {
    left: 100%;
  }

  100% {
    left: 5%;
  }
}

HTML 과 CSS 는 본인 블로그 스킨에 맞게 유동적으로 고쳐서 적용하면 된다.

끝!

Ref

https://juni-official.tistory.com/

꾸생의 DevLog

꾸준함이 생명입니다.

juni-official.tistory.com

꾸생님 방명록

넘나 친절하신 꾸생님ㅎㅎ 자주놀러갈게요!

[Javascript] JSON 데이터 [object object] alert 나 console.log 함수로 출력하는 방법

개발자 우디 — Fri, 10 Jun 2022 13:17:43 +0900

기본적으로 JS에서 JSON 데이터는 콘솔이나 Alert 로 출력시 [Object object] 로만 출력되고 내용은 보이지 않는다.

이럴 경우 데이터를 제대로 갖고있는지 확인하려면 다음 함수를 사용하면 된다.

JSON.stringify()

//data == 확인할 JSON 데이터
console.log(JSON.stringify(data));
alert(JSON.stringify(data));

[Javascript] Javascript 파일에서 다른 JS 함수 호출 하는법

개발자 우디 — Fri, 10 Jun 2022 11:39:21 +0900

Node.js 처럼 Module.import/export 로 하는 방법말고 그냥 js에서 하는 방법을 찾고 있었는데

정상 동작하는 방법을 찾았다.

호출한 파일 : calc_forecasting.js

호출 대상 : erlangc.js

// 외부 js파일 호출(erlangc.js)
document.write('<script src="/com/js/erlangc.js"></script>');

// 외부 js파일에 있는 함수 호출(Agents)
// function Agents() --> erlangc.js 파일 내에 정의된 함수

// 사용 예시
var Agents_t = Agents(SLA, SERVICE_TIME, tempVal ,AHT);

[Javascript] jQuery UI datepicker 사용법(ex_날짜 제한)

개발자 우디 — Thu, 19 May 2022 13:58:17 +0900

기본 세팅 옵션

$.datepicker.setDefaults({
        dateFormat: 'yy-mm-dd',	//날짜 포맷이다. 'yy-mm-dd' 를 보편적으로 사용
        prevText: '이전 달',	// 마우스 오버시 이전달 텍스트
        nextText: '다음 달',	// 마우스 오버시 다음달 텍스트
        closeText: '닫기', // 닫기 버튼 텍스트 변경
        currentText: '오늘', // 오늘 텍스트 변경
        monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],	//한글 캘린더중 월 표시를 위한 부분
        monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'],	//한글 캘린더 중 월 표시를 위한 부분
        dayNames: ['일', '월', '화', '수', '목', '금', '토'],	//한글 캘린더 요일 표시 부분
        dayNamesShort: ['일', '월', '화', '수', '목', '금', '토'],	//한글 요일 표시 부분
        dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],	// 한글 요일 표시 부분
        showMonthAfterYear: true,	// true : 년 월  false : 월 년 순으로 보여줌
        yearSuffix: '년',	
        showButtonPanel: true,	// 오늘로 가는 버튼과 달력 닫기 버튼 보기 옵션
        buttonImageOnly: true,	// input 옆에 조그만한 아이콘으로 캘린더 선택가능하게 하기
        buttonImage: "images/calendar.gif",	// 조그만한 아이콘 이미지
        buttonText: "Select date"	// 조그만한 아이콘 툴팁
    });

오늘 날짜 구하기

var today = $.datepicker.formatDate('yy-mm-dd', new Date());

선택할 수 있는 날짜 제한

$("#datepicker1").datepicker({
	maxDate : "+1m +1w",	//선택할 수 있는 최대 날짜  +1m +1w 은 1달 1주일 뒤 까지 선택가능  [+,-][숫자][y,m,w,d] 
	minDate : "-1y"	//선택할 수 있는 최소 날짜 
    //maxDate : new Date('2022-05-05'), // 이런식으로 사용해도 됨
    //minDate : new Date('2022-01-01') //
});

[Javascript] Object.keys - 객체의 Key 값 가져오기, Object.value - value값 가져오기

개발자 우디 — Mon, 16 May 2022 15:54:51 +0900

데이터를 객체로 다루다보면 key값만 추출해서 따로 사용하거나 value값만 추출해서 사용해야하는 경우가 종종 생긴다.
이럴 때 배열에 돌려서 일일이 꺼내 쓰는건 굉장히 귀찮은 작업이기 때문에,

JS에서는 Object.keys(), Object.values() 라는 메서드를 제공해준다.

TIP

쉽게 설명하자면 특정 객체를 대상으로 key, value 값들만 뽑아서 배열로 리턴하는 함수다.

var obj = { a: 1, b: 2, c: 3 }; 
var keys = Object.keys(obj); 
var values = Object.values(obj);

console.log("결과1:"+keys);
console.log("결과2:"+values);

// 결과1 : [a, b, c]
// 결과2 : [1, 2, 3]

참고로 Object 이다보니 순서는 명확하지 않다.

해당 데이터에 명확한 인덱스(순서)를 알아야 한다면 조금 투박한 방법이지만

var obj = { a: 1, b: 2, c: 3 }; 
var keys = Object.keys(obj); 
var values = Object.values(obj);

console.log("결과1:"+keys);
console.log("결과2:"+values);

// 결과1 : [a, b, c]
// 결과2 : [1, 2, 3]

// 순서 확인
var keys_arr = [];
var vals_arr = [];
keys.sort(); // 이름순으로 정렬
for(var i=0; i < keys.length; i++){
    vals_arr.push(values[keys[i]]);
}

console.log("keys 순서대로 정렬된 value 값들 : "+vals_arr);

이런식으로 해서 명확한 인덱스를 찾아도 된다.

[Javascript] jqGrid 사용법 총 정리

개발자 우디 — Mon, 2 May 2022 16:27:33 +0900

소개

jqGrid는 jQuery라이브러리를 이용한 Grid Plugin 이다. 웹에서 테이블 형식의 데이터를 표시하고 조작을 위한 Ajax기반 자바스크립트 컨트롤러 기능을 한다.

jqGrid는 Ajax가 내장되어 있어서 조금만 이해하고 공부한다면 쉽게 데이터를 화면에 뿌려줄 수 있지만,
반대로 jQuery 기반의 플러그인이기 때문에 jQuery에 대한 기본적인 지식이 없다면 사용하기 어려울 수 있다.

jqGrid의 대표적인 장점은 페이징, 정렬과 같은 기능을 제공해준다는 점이다. 정해준 형식에 맞춰 사용해야 하지만 익숙해지기만 한다면 굉장히 편리하다.

그리고 디자인 같은 경우 jQuery-UI에서 제공하는 CSS로 자기 입맛에 맞는 디자인을 할 수 있으니 이 또한 그리드의 장점이다.

라이브러리 추가

CDN 방식으로 추가 시 다음과 같이 진행.

js 파일로 직접 추가해서도 가능

// jqGrid 라이브러리 추가
<link rel="stylesheet" type="text/css" media="screen" href="../resources/css/jquery-ui-1.10.4.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../resources/css/ui.jqgrid.css" />
 
// jQuery js파일을 jqGrid js파일보다 상위에 선언해야 제대로 동작함
<script src="../resources/js/jquery-1.11.0.min.js" type="text/javascript"></script> 
<script src="../resources/js/i18n/grid.locale-kr.js" type="text/javascript"></script>
<script src="../resources/js/jquery.jqGrid.min.js" type="text/javascript"></script>

수많은 옵션들

url : 데이터 API 요청을 보낼 주소를 입력
mtype : API 요청 방식을 설정(get || post)
datatype : 가지고 오는 데이터의 타입을 설정한다. 보통 xml, json,local 이렇게 세 가지를 자주 사용.
colNames : 그리드 각각의 컬럼에 출력되는 이름이고, 배열로 설정한다.
colModel : 각 컬럼에 대한 상세 정보이다. 서버로부터 받아온 데이터를 매핑해서 출력한다.
- colModel 하위에 label이 들어가는데, colNames를 사용하지 않고 label 내부에 설정해도 동일하게 사용이 가능하다.(하단 코드 예시 참고)
jsonReader/xmlReader : 데이터 타입이 json/xml일 경우 reader를 통해서 데이터를 어떻게 읽어들일지 설정.
rowNum : 초기에 출력할 데이터의 개수를 설정.
pager : 그리드의 대표기능인 페이저를 설정, jqGrid <Table> 하위에 <div> 를 넣어주고 그 div의 id값을 써주면 된다.(하단 예시 참고)
multiselect : row마다 selectbox가 생긴다(이벤트 처리 가능)
postData : 서버에 파라미터로 넘길 데이터를 설정한다. 배열의 형태로 설정 가능하고, <FORM> 태그로 감싼 데이터들을 한번에 serialize() 해서 보낼수도 있다.

loadComplete : 서버에 모든 요청 후 즉시 발생

onCellSelect : 그리드의 특정 셀을 클릭시 발생ondblClickRow : row가 더블클릭한 직후 발생

autowidth: true, // jQgrid width 자동100% 채워지게
shrinkToFit: false, // width를 자동설정 해주는 기능

// FORM 태그로 감싼 모든 Submit 데이터
var formData = $('#FORM1').serialize();

// grid 란 id 값을 가진 테이블에 jqGrid 생성
$("#grid").jqGrid({
	url : "<%=APP_ROOT%>/auth/root/bbs/getList",
        postData : formData,
        datatype: "json",
        /*
            // colModel 옵션들
            name : 출력할 데이터의 이름입니다. 서버에서 받은 데이터의 변수명과 일치해야 함.
            index : 컬럼 정렬 시 서버에 넘어가는 값이다. index값을 설정하지 않으면 name값이 넘어간다.
            width : 컬럼의 넓이를 설정.
            align : 컬럼 내 데이터의 정렬을 설정.
            hidden : 데이터값은 설정하고 화면에서 보이고 싶지 않을 때 사용.
            formatter : 데이터로 들어온 값을 특정 형식으로 변환해서 보여줄 수 있다.
            frozen : true or false // 이 옵션을 넣은경우 그리드를 전부다 그린뒤 $("#gridid").jqGrid('setFrozenColumns'); 함수를 호출해줘야한다. + reload 까지도
        */
        colModel : [
            {label : "KEY",name : "ID", width:120, hidden: true},
            {label : "ID", name : "ID", align:'center'},
            {label : "나이", name : "AGE", align:'center', formatter : "integer", sorttype : "integer"},
            {label : "이름", name : "NAMES", align:'center', editable:true, edittype:'text'
                , editoptions:{
                    
                }						
            },
            
        ],
        formatter: {
            integer: {thousandsSeparator: ",", defaultValue: '0'}
        },
        cellEdit: true,
        cellsubmit: 'clientArray',
        cellurl : '',
        afterEditCell:function(rowid, cellname, value, iRow, iCol){
            /* //input HTML 태그가 입력되어버리는 문제 해결
            //jqGrid에서 CellEdit 모드 일 때 마우스가 Input에서 focus를 벗어 났을 때 Cell Save
            $("#"+rowid+"_"+cellname).blur(function(){
                $("#grid").jqGrid("saveCell",iRow,iCol);
            });	 
            */	
        },
        loadtext : '로딩중..',
        autowidth: true,
        loadonce : true,
        viewrecords: true,
        height : 'auto',
        rowNum: 20,
        rowList:[10,30,50,80,100],
        pager: '#pager',
        pgtext : "Page {0} of {1}",
        jsonReader: {cell:""},
        multiselect:true,
        ondblClickRow: function(id,irow,icol,e){

        },        
        onSelectRow  : function(rowid){
            var idArry = $("#grid").jqGrid('getDataIDs'); //grid의 id 값을 배열로 가져옴

            for(var i=0 ; i < idArry.length; i++){
                var ret =  $("#grid").getRowData(idArry[i]); // 해당 id의 row 데이터를 가져옴
                if("N" != ret.finish_yn){ //해당 row의 COMPLETED_YN 컬럼 값이 N이 아니면 checkbox disabled 처리
                    //해당 row의 checkbox disabled 처리 "jqg_list_" 이 부분은 grid에서 자동 생성
                    $("#jqg_grid_"+idArry[i]).removeAttr("checked");
                    $("#"+idArry[i]).removeClass('ui-state-highlight');
                }
            }  
        },
        onSelectAll: function(aRowids,status) { //disabled 처리된 checkbox 선택 안되도록 해주는 부분
            if (status) {
                var cbs = $("tr.jqgrow > td > input.cbox:disabled", $("#grid")[0]);
                cbs.removeAttr("checked");

                $("#grid")[0].p.selarrrow = $("#grid").find("tr.jqgrow:has(td > input.cbox:checked)").map(function() { return this.id; }).get();

                var idArry = $("#grid").jqGrid('getDataIDs'); 

                for(var i=0 ; i < idArry.length; i++){
                    var ret =  $("#grid").getRowData(idArry[i]);
                    //if("N" != ret.COMPLETED_YN){ 
                    if("N" != ret.finish_yn){ //해당 row의 COMPLETED_YN 컬럼 값이 N이 아니면 checkbox disabled 처리 
                        $("#"+idArry[i]).removeClass('ui-state-highlight');
                    }
                }  
            }
        },
        loadComplete: function (data) {
            var allRow = jQuery("#grid").jqGrid('getGridParam', 'records');
            if(allRow == 0 ){
                $("#grid >tbody").append("<tr><td align='center' colspan='10' style=''>조회된 데이터가 없습니다.</td></tr>");
            }

            var idArry = $("#grid").jqGrid('getDataIDs'); 

            for(var i=0 ; i < idArry.length; i++){
                var ret =  $("#grid").getRowData(idArry[i]); 
                //if("N" != ret.COMPLETED_YN){ 
                if("N" != ret.finish_yn){ //해당 row의 COMPLETED_YN 컬럼 값이 N이 아니면 checkbox disabled 처리 
                   $("#jqg_grid_"+idArry[i]).attr("disabled", true); 
                }
             }
        },
})

<!-- jqGrid 페이징 처리 예시 -->
<div class="grid full-height full-height-strict">
    <table id="grid" class="full-size-jq-grid"></table>
</div>
	<div id="pager" style="height: 35px; "></div>
</div>

jqGrid 열명(th) 변경하는 방법

이것 때문에 꽤나 애를 먹었는데 정확한 방법을 찾아냈다.

// 기존 그리드를 담은 엘리먼트(테이블) 제거
$('#grid').jqGrid("clearGridData")
$.jgrid.gridDestroy("grid")

// 새 테이블(그리드를 담을 그릇) 추가
// id = parentDiv 인 <div> 는 기존에 grid 를 적용한 테이블을 감싸고 있는 바로 상위의 엘리먼트
$("#parentDiv").append('<table id="grid" class="full-size-jq-grid"></table>')

// 새 jqGrid 추가
$("#grid").jqGrid({
    url : ..
    ..
})

자주 발생하는 에러

No such method: GridDestroy

jquery 버전 차이 때문에 발생하는 에러이다.

- 기존 예시 : $('#grid').jqGrid('GridDestroy');

- 변경할 예시 : $.jgrid.gridDestroy("grid");

GridUnload 도 에러가 발생하면 동일하게 처리 가능

텔레그램 코인 알림봇 개발 (Node.js 를 이용한 Rest 방식)

개발자 우디 — Sun, 24 Apr 2022 22:18:53 +0900

나는 평소 코인을 거래할 때 김프가 라는 사이트를 자주 이용하는데, 매번 띄워놓고 확인하기 너무 번거롭다고 느껴서 차라리 내가 원하는 특정 상황이 되었을때 텔레그램 봇이 실시간 가상화폐(코인) 가격을 채팅으로 알려주는 프로그램을 직접 개발해봐야겠다고 생각했다.

2022.04.24 어제 새벽에 시작했고, 현재 내가 시도한 방법이 몇몇 코인들의 정보를 가져오는데는 전혀 문제가 없지만 업비트의 API Request 수 제한에 걸리기 때문에 전체를 대상으로는 부적합한 방법이라는 걸 깨닫고 전체 데이터를 실시간으로 조회할 새로운 방법을 찾아 시작하기 전에 내가 시도한 방법에 대한 정리를 하려고 한다.

Node.js 설치

node.js 를 설치(본인 운영체제에 맞게)

package.json 파일을 설정

추후에 필요한 모듈들은 필요할 때마다 터미널에 'npm install __ ' 해서 사용!

프로그램 올릴 개인용 무료 서버 Heroku 가입 및 등록

여기서도 설정할 것들이 꽤나 있었다.

Config Vars 세팅

해당 Settings 메뉴에서 Config Vars 에 텔레그램에서 발급받은 키를 입력했다.(중요!)

INTERVAL은 몇초마다 결과를 받을지 테스트할겸 적용한 값이다.(중요하지 않음)

heroku git 설정

Heroku에 올릴 때도 깃 명령어는 다른 깃 사용법과 동일하다.

# 깃 기본 세팅
git init
# 깃 저장소 세팅
heroku git:remote -a test-mv
# 현재 프로젝트 파일을 깃 현재 저장소에 등록
git add .
# 현재 저장소에 저장
git commit -am "make it better"
# Heroku 서버 마스터로 푸시
git push heroku master

Heroku 서버 자동 Sleep 방지 모니터링

Heroku는 일정 시간 동안 deploy한 앱에 접속 요청이 없을 경우, 앱을 sleep 시켜버린다.

물론 sleep 이 된다고 해서 영원한 잠에 빠지거나 하는 건 아니고, 다음 요청이 있을 때까지 죽여 놓는 것이다. 새로운 요청을 받으면 앱을 새로 구동한 다음 웹 페이지를 보여준다. 평범한 블로그나 웹 사이트라면 sleep 상태라고 해도 10~30초 정도만 기다리면 되는 것이다.
하지만 텔레그램 봇은 웹이 아니어서 그런지 한 번 sleep 상태로 빠져들면 다시는 깨어나지 않았다.

그래서 나온 꼼수가 http end point를 만든 다음, 주기적으로 ping을 보내주는 서비스에 봇의 http end point를 등록해서 봇이 잠들지 않도록 해주는 것이다. 이런 서비스들 중 하나가 바로 uptimerobot 이다.

무료로 가입할 수 있고, 사용법도 단순하다.

가입후 대시보드에서 New Monitor 클릭한 뒤 본인이 원하는 도메인을 세팅하면 된다.

텔레그램 봇 API key 발급

텔레그램 봇 만들기

텔레그램에서 @BotFather 채널을 검색해서 채팅창에 /start 를 입력하면 설명이 나온다.

순서대로 기술하자면

/newbot
본인이 정한bot 이름 입력

bot.js

/*
    텔레그램 김프 봇
    EuiSang Yu
    2022.04.25
*/

// 업비트 조회
// 2022.04.25 기준 총 113개
const Upbit = require('./upbit')

// 업비트 정보 가져오기
async function upbit_start() {
    const upbit = new Upbit('시리얼키 자리', '액세스키 자리')

    let market_all = await upbit.market_all()
    let market_krw = [];
    for(let i=0; i<market_all.data.length; i++){
        if(market_all.data[i].market.includes("KRW")){
            market_krw.push({"data" : market_all.data[i]});
        }
    }
    console.log("원화 상장 코인 총 개수 : " + market_krw.length)

    for (let i=0; i< market_krw.length; i++){
        {
            let {'data': data} = await upbit.market_ticker(market_krw[i].data.market)
            console.log(data)
        }

        //result.push({"market" : data[i].market, "trade_price" : data[i].trade_price})
    }
}

upbit_start()


// 바이낸스 정보 가져오기
const Binance = require('node-binance-api');
const binance = new Binance().options({
    APIKEY: '액세스키 자리',
    APISECRET: '시크릿키 자리',
    useServerTime: true,
    test: true
})


//사용자 id 저장
var  idSet  =  new  Set();

// Telegram Api 연동
const TelegramBot = require('node-telegram-bot-api');
var  http  =  require('http');
var  request  =  require('sync-request');

// 텔레그램 정보 가져오기
const getToken = (function(){
    const token = process.env.TELEGRAM_TOKEN;
    return function() {
        return token;
    };
})();

const bot = new TelegramBot(getToken(), {polling: true});

bot.onText(/\/start/, (msg, match) => {
    if(idSet.has(msg.chat.id) ==  false) {
        idSet.add(msg.chat.id);
    }
});

bot.onText(/\/stop/, (msg, match) => {
    if(idSet.has(msg.chat.id)) {
        idSet.delete(msg.chat.id);
    }
});

setInterval(function() {
    
    // res.map(coin  => {
    //     for(let  id  of  idSet) {
    //         bot.sendMessage(id, "현재 " + coin.market +" 가격은 ["  +  coin.trade_price +  "] 원 입니다.");
    //     }
    // });

}, process.env.INTERVAL);

upbit.js

const rp = require("request-promise")
const sign = require("jsonwebtoken").sign
const queryEncode = require("querystring").encode

async function request(url, qs, token, method) {
    if (!method) {
        method = 'GET'
    }
    let options = {
        method: method, 
        url: url,
        json: true,
        transform: function (body, response) {
            let remain_min = 0
            let remain_sec = 0
            if (response.headers && response.headers['remaining-req']) {
                let items = response.headers['remaining-req'].split(';')
                for (let item of items) {
                    let [key, val] = item.split('=')
                    if (key.trim()=='min') {
                        remain_min = parseInt(val.trim())
                    } else if (key.trim()=='sec') {
                        remain_sec = parseInt(val.trim())
                    }
                }
            }
            return {
                'success': true,
                'remain_min': remain_min, 
                'remain_sec': remain_sec, 
                'data': body
            }
        }
    }
    if (method=='POST') {
        options.json = qs
    } else {
        options.qs = qs
    }
    if (token) {
        options.headers = {Authorization: `Bearer ${token}`}
    }
    let result = {'success': false, 'message': null, 'name': null}
    try {
        result = await rp(options)
    } catch(e) {
        result.data = null
        if (e.error.error) {
            result.message = e.error.error.message
            result.name = e.error.error.name
        } else {
            result.message = e.message
        }
    }

    return result
}

//전체 계좌 조회
async function accounts() {
    const url = 'https://api.upbit.com/v1/accounts'

    const payload = {
        access_key: this.accessKey,
        nonce: (new Date).getTime(),
    }
    const token = sign(payload, this.secretKey)

    let result = await request(url, {}, token)
    return result
}

// 주문 리스트
async function order_list(market, state, uuids, page) {
    //market: null KRW-BTC
    //state: wait done
    const url = 'https://api.upbit.com/v1/orders'
    let qs = {state:state, page:page}
    if (market) qs['market'] = market
    if (uuids) qs['uuids'] = uuids

    const query = queryEncode(qs)
    const payload = {
        access_key: this.accessKey,
        nonce: (new Date).getTime(),
        query: query
    }
    const token = sign(payload, this.secretKey)

    let result = await request(url, qs, token)
    return result
}

// 주문(매수)
async function order_bid(market, volume, price) {
    //market: KRW-BTC
    const url = 'https://api.upbit.com/v1/orders'
    let qs = {market:market, side:'bid', volume:volume, price:price, ord_type:'limit'}

    const query = queryEncode(qs)
    const payload = {
        access_key: this.accessKey,
        nonce: (new Date).getTime(),
        query: query
    }
    const token = sign(payload, this.secretKey)

    let result = await request(url, qs, token, 'POST')
    return result
}

// 주문(매도)
async function order_ask(market, volume, price) {
    //market: KRW-BTC
    const url = 'https://api.upbit.com/v1/orders'
    let qs = {market:market, side:'ask', volume:volume, price:price, ord_type:'limit'}

    const query = queryEncode(qs)
    const payload = {
        access_key: this.accessKey,
        nonce: (new Date).getTime(),
        query: query
    }
    const token = sign(payload, this.secretKey)

    let result = await request(url, qs, token, 'POST')
    return result
}

// 주문 상세
async function order_detail(uuid) {
    const url = 'https://api.upbit.com/v1/order'
    let qs = {uuid:uuid}

    const query = queryEncode(qs)
    const payload = {
        access_key: this.accessKey,
        nonce: (new Date).getTime(),
        query: query
    }
    const token = sign(payload, this.secretKey)

    let result = await request(url, qs, token)
    return result
}

// 주문 취소
async function order_delete(uuid) {
    const url = 'https://api.upbit.com/v1/order'
    let qs = {uuid:uuid}

    const query = queryEncode(qs)
    const payload = {
        access_key: this.accessKey,
        nonce: (new Date).getTime(),
        query: query
    }
    const token = sign(payload, this.secretKey)

    let result = await request(url, qs, token, 'DELETE')
    return result
}

// 주문 가능 정보
async function order_chance(market) {
    const url = 'https://api.upbit.com/v1/orders/chance'
    let qs = {market:market}

    const query = queryEncode(qs)
    const payload = {
        access_key: this.accessKey,
        nonce: (new Date).getTime(),
        query: query
    }
    const token = sign(payload, this.secretKey)

    let result = await request(url, qs, token)
    return result
}

// 시세종목정보
async function market_all() {
    const url = 'https://api.upbit.com/v1/market/all'
    let result = await request(url)
    return result
}

// 분 캔들
async function market_minute(market, unit, to, count) {
    //unit:  1, 3, 5, 15, 10, 30, 60, 240
    //to: yyyy-MM-dd'T'HH:mm:ssXXX
    const url = 'https://api.upbit.com/v1/candles/minutes/'+unit
    let qs = {market:market}
    if (to) qs.to = to
    if (count) qs.count = count

    let result = await request(url, qs)
    return result
}

// 일 캔들
async function market_day(market, to, count) {
    //to: yyyy-MM-dd'T'HH:mm:ssXXX
    const url = 'https://api.upbit.com/v1/candles/days'
    let qs = {market:market}
    if (to) qs.to = to
    if (count) qs.count = count

    let result = await request(url, qs)
    return result
}

// 주 캔들
async function market_week(market, to, count) {
    //to: yyyy-MM-dd'T'HH:mm:ssXXX
    const url = 'https://api.upbit.com/v1/candles/weeks'
    let qs = {market:market}
    if (to) qs.to = to
    if (count) qs.count = count

    let result = await request(url, qs)
    return result
}

// 월 캔들
async function market_month(market, to, count) {
    //to: yyyy-MM-dd'T'HH:mm:ssXXX
    const url = 'https://api.upbit.com/v1/candles/months'
    let qs = {market:market}
    if (to) qs.to = to
    if (count) qs.count = count

    let result = await request(url, qs)
    return result
}

// 채결 정보
async function market_trade_tick(market, to, count) {
    //to: yyyy-MM-dd'T'HH:mm:ssXXX
    const url = 'https://api.upbit.com/v1/trades/ticks'
    let qs = {market:market}
    if (to) qs.to = to
    if (count) qs.count = count

    let result = await request(url, qs)
    return result
}


// 시세 Ticker
async function market_ticker(markets) {
    // markets: KRW-BTC,KRW-ETH
    const url = 'https://api.upbit.com/v1/ticker'
    let qs = {markets:markets}

    let result = await request(url, qs)
    return result
}


// 호가 정보
async function trade_orderbook(markets) {
    // markets: KRW-BTC,KRW-ETH
    const url = 'https://api.upbit.com/v1/orderbook'
    let qs = {markets:markets}

    let result = await request(url, qs)
    return result
}

// class Upbit
function Upbit(s, a) {
    this.secretKey = s
    this.accessKey = a
}

Upbit.prototype.accounts = accounts
Upbit.prototype.order_list = order_list
Upbit.prototype.order_bid = order_bid
Upbit.prototype.order_ask = order_ask
Upbit.prototype.order_detail = order_detail
Upbit.prototype.order_delete = order_delete
Upbit.prototype.order_chance = order_chance
Upbit.prototype.market_all = market_all
Upbit.prototype.market_minute = market_minute
Upbit.prototype.market_day = market_day
Upbit.prototype.market_week = market_week
Upbit.prototype.market_month = market_month
Upbit.prototype.market_trade_tick = market_trade_tick
Upbit.prototype.market_ticker = market_ticker
Upbit.prototype.trade_orderbook = trade_orderbook

module.exports = Upbit

web.js

/*
    http end-point
*/
const express = require('express');
var packageInfo = require('./package.json');

var app = express();

app.get('/', function (req, res) {
    res.json({ version: packageInfo.version });
});

var server = app.listen(process.env.PORT, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('Web server started at http://%s:%s', host, port);
});

index.js

require('./bot');
require('./web');

텔레그램 봇으로 채팅 받는 것까지 성공!!

이렇게 구성을해서 테스트 중이었고 실제로 텔레그램 봇으로 코인 정보를 10초마다 실시간으로 채팅 받는 것까지 성공했다...

PC 텔레그램 화면

아이폰 화면

하지만...원화 마켓에 있는 총 113개의 코인의 이름과 현재 종가(trade_price)를 한번에 받아오려고 하니 업비트의 Rest API 요청 수 제한이 있다는 사실을 뒤늦게 깨달아 버렸다...

too many request....-_-

아... 요청 수 제한이라니 석우형 진짜 선넘네...ㄹㅇ

그리하여 나의 8시간을 불태운 작업은 여기서 마무리 되었다.

지금 머리속에 드는 계획은 새로 환경구축하고 파이썬을 새로 배워볼 겸 파이썬으로 처리할 생각인데, 김프가 사이트를 크롤링해서 텔레그램에 보낼 메세지에 입혀야겠다.

그리고 생각해보니 가능하면 트위터 API도 같이 끌어와야겠다... 매번 트위터켜서 코인들 소식 검색하는것도 귀찮으니ㅜ

귀찮귀찮...

지금 굉장히 허무해서 설명을 너무 대충적은거 같은데 밑에 내가 참고한 사이트들을 전부 링크에 걸어둘테니 참고하면서 하면 될 것같다.

혹시 지금 이글을 보고 '나는 모든 코인 가격은 다 필요없고 간단하게 그때 그때 알고싶은 코인 몇개 정보면 돼! ' 라고 생각하는 사람들도 있을텐데 그렇다면 내가 시도한 방법으로도 무리없이 충분히 완성 가능하니 참고하면 좋을 것 같다.

그럼 다음 글은 파이썬으로 adios.............

Ref

https://johngrib.github.io/blog/2017/03/12/telegram-bot/

https://note.heyo.me/%EC%97%85%EB%B9%84%ED%8A%B8api-%ED%8A%B8%EB%A0%88%EC%9D%B4%EB%94%A9-1-%EC%A4%80%EB%B9%84-%EB%B0%8F-%ED%85%8C%EC%8A%A4%ED%8A%B8/

https://steemit.com/kr-dev/@asinayo/nodejs-heroku

Cause: java.sql.SQLException: ORA-00911: 문자가 부적합합니다

개발자 우디 — Fri, 25 Feb 2022 16:56:16 +0900

에러메세지

Cause: java.sql.SQLException: ORA-00911: 문자가 부적합합니다

원인

쿼리에 잘못된 문자 입력이 잘못되었다는 뜻.

경우에 따라 다르지만 나같은 경우는 쿼리 마지막 부분에 세미콜론 ' ; ' 을 넣어서 에러가 발생했다.

DB 툴에서는 ' ; ' 를 작성하는게 맞지만 자바 프로젝트의 xml 파일 내에서는 세미콜론 ' ; ' 을 붙이면 에러가 발생한다.

다른 사람들은 나같은 실수를 하지 말길!

해결방법

세미콜론을 제거해주면 완료!

Cause: java.sql.SQLException: ORA-01722: 수치가 부적합합니다

개발자 우디 — Thu, 24 Feb 2022 15:44:47 +0900

에러메세지

### Cause: java.sql.SQLException: ORA-01722: 수치가 부적합합니다

원인

데이터 타입이 일치 하지 않는 경우, 또는 데이터 타입이 다른 연산을 하는 경우 오류가 발생함.(보통 숫자-문자열 간 에러)

간혹 제대로 사용했는데 안된다고 하면

DB 칼럼은 문자형인데 파라미터 데이터는 숫자형 ex) "23" <-- 이런식으로만 받는경우 파라미터를 숫자로 인식

이거부터 확인해볼것!

일단 내 경우는 백단에서 쿼리로 넘겨주는 데이터가 String인데 DB칼럼은 Number 로 되어있어서 나는 에러였다.

ANALY_UNIT 요놈!

이게 범인이었다..

해결방법

데이터 타입을 다시 제대로 맞춰주면 해결 완료!

java.lang.IllegalArgumentException: 메소드 이름에 유효하지 않은 문자가 발견되었습니다. HTTP 메소드 이름은 유효한 토큰이어야 합니다.

개발자 우디 — Fri, 11 Feb 2022 10:42:39 +0900

에러메세지

원인

https 보안으로 인한 문제

해결

https 를 http 로 변경하면 된다.

Mybatis CDATA 사용법

개발자 우디 — Wed, 26 Jan 2022 16:49:04 +0900

CDATA 쓰는 이유

마이바티스에서 .xml 파일을 사용할 때 쿼리문안에 문자열 비교연산자 혹은 부등호를 처리해야할 일이 있다.
이 때 CDATA 를 사용하지 않으면 DB툴에서 동작시에는 문제없이 동작하지만 마이바티스 xml 파일내에서 입력하면 에러가 발생한다.

간단한 예시

SELECT	*
FROM TABLE_A
<![CDATA[
WHERE columA <> 'B의값'
]]>

이런 비교연산자가 있을 때 CDATA 를 사용하지 않으면 부등호 '<', '>'가 열림,닫힘 태그로 인식되어 버리기 때문에 에러가 발생한다.

java.lang.Integer cannot be cast to java.lang.String

개발자 우디 — Wed, 26 Jan 2022 13:18:33 +0900

에러메세지

java.lang.Integer cannot be cast to java.lang.String

에러 원인

숫자타입의 값(Int,Long..) 을 String으로 바로 캐스팅하려고 시도해서

// 실패 예시
String TEMP = (String)request.getAttribute("백단에서 넘겨준 값");

해결 방법

// 정답
String TEMP = String.valueOf(request.getAttribute("백단에서 넘겨준 값"));

위 코드와 같이 String.valueOf() 함수를 이용하면 해결 가능

Cause: org.postgresql.util.PSQLException: ERROR: syntax error at or near ","

개발자 우디 — Fri, 21 Jan 2022 15:22:31 +0900

에러메세지

### Error querying database.  Cause: org.postgresql.util.PSQLException: ERROR: syntax error at or near ","

에러 원인

에러 내용 그대로 문자 오류이다.

작성한 쿼리문에 "," 가 잘못들어가있는 위치를 찾으면 해결가능!

나같은 경우엔 WHERE 절에 AND 와 "," 가 같이 적혀 있어 생긴 에러였다.

Mapped Statements collection does not contain value for..

개발자 우디 — Wed, 19 Jan 2022 13:54:53 +0900

에러메세지

java.lang.IllegalArgumentException: Mapped Statements collection does not contain value for alimtalk_csv.selectNextAlimtalkCSVSeq

에러 원인

mapper id가 다를 경우
- mapper파일(MyBatis의 쿼리문을 등록한 XML 파일)에 <select id=''.. 에 id와 mapper파일에 직접 접근하는 service 메소드 id값이 다름
Parameter와 bean의 필드명이 틀림
mapper파일(MyBatis의 쿼리문을 등록한 XML 파일)에에 정의된 네임스페이스(namespace)와
mapper파일에 직접 접근하는 java파일(DAO나 service)에서 호출하는 네임스페이스(namespace)가 다름
MyBatis config파일에 mapper가 정의가 되어 있지 않거나 Spelling이 틀린 경우
mapper에 정의된 namespace 명칭이 같은 Application 내에 중복될 경우

해결

나의 경우는 mybatis-config-postgres.xml 파일에서 새로추가한 xml 파일을 매핑시켜주지 않아서 생긴 문제였다.

<configuration>
	<mappers>
		<mapper resource="bizmsg/alimtalk_csv/sql/AlimtalkCSV_Postgres.xml" />
	</mappers>
</configuration>

[Log4j] log4j 2 사용법

개발자 우디 — Wed, 29 Dec 2021 17:40:54 +0900

log4j2.xml 파일 코드 구성

APACHE 공식 래퍼런스 문서 기본 형태 + 업무에서 배운 형태

<?xml version="1.0" encoding="UTF-8"?>
<Configuration status="debug" name="RoutingTest" monitorInterval="30">
  <Properties>
    <Property name="filename">target/rolling1/rollingtest-$${sd:type}.log</Property>
  </Properties>
  <ThresholdFilter level="debug"/>
 
  <Appenders>
    <Console name="STDOUT">
      <PatternLayout pattern="%m%n"/>
      <ThresholdFilter level="debug"/>
    </Console>
    <Routing name="Routing">
      <Routes pattern="$${sd:type}">
        <Route>
          <RollingFile name="Rolling-${sd:type}" fileName="${filename}"
                       filePattern="target/rolling1/test1-${sd:type}.%i.log.gz">
            <PatternLayout>
              <pattern>%d %p %c{1.} [%t] %m%n</pattern>
            </PatternLayout>
            <TimeBasedTriggeringPolicy interval="1" modulate="true" />
            <SizeBasedTriggeringPolicy size="500" />
          </RollingFile>
        </Route>
        <Route ref="STDOUT" key="Audit"/>
      </Routes>
    </Routing>
  </Appenders>
 
  <Loggers>
    <Logger name="EventLogger" level="info" additivity="false">
      <AppenderRef ref="Routing"/>
    </Logger>
 
    <Root level="error">
      <AppenderRef ref="STDOUT"/>
    </Root>
  </Loggers>
 
</Configuration>

각각의 요소에 대해 하나씩 정리해보자.

우선 가장 상단의 <Configuration> 부터

Configuration

<Configuration status="debug" name="RoutingTest" monitorInterval="30">

<Configuration>은 로그 설정의 최상위 노드이다.

<Configuration>은 <Properties>, <Appenders>, <Loggers>요소를 자식노드로 가지고 있다.
status 속성은 log4j의 내부 이벤트에 대한 로그 레벨을 의미.

monitorInterval="30" 은 Log4j가 파일의 변경 여부를 확인하는 주기를 '30'분 주기로 하겠다는 뜻이다.

Properties

<Properties>
    <Property name="filename">target/rolling1/rollingtest-$${sd:type}.log</Property>
  </Properties>

<Properties>는 해당 <Configuration> 영역 내에서 사용할 프로퍼티를 의미한다.

자바로 치면 전역변수같은 느낌

Layout

<PatternLayout>
	<pattern>%d %p %c{1.} [%t] %m%n</pattern>
</PatternLayout>

날짜나 시간(12,24) 포맷, 색깔, 출력 요소 등을 결정할 수 있는 요소이다.

구체적인 사용 방법은 링크

Appenders

Appender는 log 메세지를 특정 위치에 전달해주는 역할이다.

Appender는 layout을 통해 로그를 formatting 하고, 어떤 방식으로 로그를 제공할지 결정한다.

Appender에는 여러 종류가 있다. 소개되지 않은 나머지는 링크

ConsoleAppender
RollingFileAppender
FileAppender
JDBCAppender
등등...

여기서 가장 핵심이라고 생각하는 RollingFileAppender 만 따로 설명하자면,

<RollingFile name="Rolling-${sd:type}" fileName="${filename}" 
	filePattern="target/rolling1/test1-${sd:type}.%i.log.gz">
       
       <PatternLayout>
       		<pattern>%d %p %c{1.} [%t] %m%n</pattern>
       </PatternLayout>
       <Policies>
       	<TimeBasedTriggeringPolicy interval="1" modulate="true" />
       	<SizeBasedTriggeringPolicy size="500" />
       </Policies>
       <DefaultRolloverStrategy max="10" fileIndex="min"/>
</RollingFile>

로그 파일에 문제가 생기면 로그가 전부 유실될 수 있기 때문에 RollingFileAppender에서 설정을 해줌으로서 미연에 방지할 수 있다.

RollingFileAppender 는 파일에 로그를 기록하고, 특정 기준에 따라 압축하여 저장하는 방식의 Appender 이다.

RollingFileAppender의 구체적인 속성들을 설명하자면

Policy

Policy는 간단하게 설명하자면 기준이되는 트리거를 정할 수 있고, 구체적인 제약사항을 정할 수 있다.

File Rolling Up 기준이고, 하나의 RollingFileAppender에는 여러 Policy를 적용할 수 있다.

예를 들어 TimeBasedTriggeringPolicy 를 삽입한다고 치면 설정한 interval=? 에 따라 주기가 달라진다.

OnStartupTriggeringPolicy : jvm start시 trigger
TimeBasedTriggeringPolicy : time에 따른 trigger
SizeBasedTriggeringPolicy : file size에 따른 trigger
CronTriggeringPolicy : Cron Expression(시간에 관한 표현)에 따른 trigger

DefaultRolloverStrategy

DefaultRolloverStrategy는 datetime 패턴과 File Pattern의 int값을 받아서 정해진다.

File Pattern 숫자는 DB에서 사용되는 자동증가 Sequence처럼 rollover 마다 1씩 증가한다.

datetime은 현재 시간으로 대체되고, 각각 rollover 이후에는 정해준 형식대로 아래 사진처럼(예시) 저장된다.

예시

해당 Strategy에 부여할 수 있는 속성들

fileIndex : max로 설정 시 높은 index가 더 최신 파일이 됩니다. min으로 설정 시 작은 index가 최신 파일이 된다. 기존의 파일들을 rename하는 방식으로 동작.
compressionLevel : 0~9까지 정수값. 0은 압축하지 않고, 1은 최고 속도, 9는 최고 압축. ZIP파일만 가능함.
tempCompressedFilePattern : 압축하는 동안의 파일 이름 패턴.
min : counter 최소값. 기본값은 1
max : counter 최대값. 만약 최대값에 도달하면 오래된 파일을 삭제. 기본값은 7

Logger

<Loggers>
	<!-- Additivity값은 중복된 로그를 남길 지에 대한 속성 -->
    <Logger name="EventLogger" level="INFO" additivity="false">
      <AppenderRef ref="Routing"/>
    </Logger>
 
    <Root level="error">
      <AppenderRef ref="STDOUT"/>
    </Root>
</Loggers>

Root패키지의 <Logger>는 필수이고, 여러개를 적용할 때에는 <Loggers> 내에 복수개의 <Logger>로 설정할 수 있다.

해당 로거는 name="EventLogger" 패키지에 해당하는 파일들에 대해서 INFO 이상 레벨의 로그를 콘솔에 남기는 로거이다.

그냥 여태까지는 로그를 찍어야하는구나하고 대충 사용할 줄만 알았었는데 이번 기회에 조금 자세히 공부할 수 있었다

Ref

https://logging.apache.org/log4j/2.x/manual/configuration.html#PropertySubstitution

Unable to scan WEB-INF for JAX-RS annotations, you must manually register your classes/resources

개발자 우디 — Tue, 28 Dec 2021 11:45:57 +0900

에러메세지

해결방법 1(추천X)

web.xml 파일 내에서 해당 구문을 찾아 false 로 변경

혹은 해당 <context-param> 전체 삭제

해당 방법은 대신 실서버에서 하위 Path들을 못잡는 문제가 발생할 수 있음.

따라서 가장 깔끔한 해결법은

해결방법 2

바로 javassist.jar 파일을 최신버전으로 변경하는 것!

Maven 이나 Gradle을 사용하는 프로젝트라면 <dependency>에서 변경하면 되고, 로컬에서 jar 파일로 관리하고 있다면 아래와 같은 방법으로 해결할 수 있다.

라이브러리 삭제

javassist-3.12.1.GA.jar – 기존 파일 삭제
javassist-3.20.0-GA.jar – 기존 파일 삭제

라이브러리 추가

Javassist 3.28.0-GA.jar – 새로 추가(Java 8 버전일 때)

Javassist 3.28.0-GA.jar

0.74MB
Javassist 3.23.1-GA.jar – 새로 추가(Java 7 버전일 때)

Javassist 3.23.1-GA.jar

0.72MB

백준 11021 A+B-7(Java)

개발자 우디 — Mon, 27 Dec 2021 11:25:30 +0900

문제보기

정답

package baekjoon.ex_for;

import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.util.ArrayList;

public class Q_11021 {

	public static void main(String[] args) throws IOException {
		// TODO Auto-generated method stub

		/*
		 * 문제 두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오.
		 * 
		 * 입력 첫째 줄에 테스트 케이스의 개수 T가 주어진다.
		 * 
		 * 각 테스트 케이스는 한 줄로 이루어져 있으며, 각 줄에 A와 B가 주어진다. (0 < A, B < 10)
		 * 
		 * 출력 각 테스트 케이스마다 "Case #x: "를 출력한 다음, A+B를 출력한다. 테스트 케이스 번호는 1부터 시작한다.
		 * 
		 * 예제 입력 1 5 1 1 2 3 3 4 9 8 5 2 예제 출력 1 Case #1: 2 Case #2: 5 Case #3: 7 Case
		 * #4: 17 Case #5: 7
		 * 
		 */

		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
		String str = br.readLine();
		int T = Integer.parseInt(str);
		BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));
		ArrayList<Integer> arrlist = new ArrayList<Integer>();

		for (int i = 0; i < T; i++) {
			String[] temp = br.readLine().split(" ");
			int A = Integer.parseInt(temp[0]);
			int B = Integer.parseInt(temp[1]);
			arrlist.add(A + B);
		}
		for (int i = 0; i < arrlist.size(); i++) {
			bw.append("Case #" + (i + 1) + ": " + arrlist.get(i) + "\n");
		}

		br.close();
		bw.flush();
		bw.close();

	}

}

백준 2742 기찍 N(Java)

개발자 우디 — Mon, 27 Dec 2021 11:23:19 +0900

문제보기

정답

package baekjoon.ex_for;

import java.io.BufferedReader;
import java.io.BufferedWriter;
import java.io.IOException;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.util.ArrayList;

public class Q_2742 {

	public static void main(String[] args) throws IOException {
		// TODO Auto-generated method stub

		/*
		 * 문제 자연수 N이 주어졌을 때, N부터 1까지 한 줄에 하나씩 출력하는 프로그램을 작성하시오.
		 * 
		 * 입력 첫째 줄에 100,000보다 작거나 같은 자연수 N이 주어진다.
		 * 
		 * 출력 첫째 줄부터 N번째 줄 까지 차례대로 출력한다.
		 * 
		 * 예제 입력 1 5 예제 출력 1 5 4 3 2 1
		 * 
		 */

		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
		String str = br.readLine();
		int N = Integer.parseInt(str);
		BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));

		for (int i = N; i >= 1; i--) {
			bw.append(i + "\n");
		}

		br.close();
		bw.flush();
		bw.close();

	}

}