본문 바로가기

: IT

 (44)
http 와 WebSocket, 공통점과 차이점 1. http와 websocket 공통점 : 1) http와 websocket 모두 프로토콜이다 2) 브라우저와 백엔드, 백엔드와 백엔드 사이에서 통신도 가능하다 [http] - 인터넷은 http 기반으로 되어있고, stateless 이다 - stateless : 서버는 유저를 기억하지 않는다는 점 = 유저와 서버가 연결되어있지 않다 - real-time으로 동작하지 않는다 [http 동작 원리] 1) 브라우저(유저)는 서버에게 http request를 보낸다 2) 서버는 브라우저(유저)에게 http response를 보낸다 [WebSocket 동작원리] 1) 브라우저는 서버에게 WebSocket request를 보내면 서버는 수락하거나 거절한다 2) 서버가 accept 하면 브라우저와 서버가 연결된다...
구글 리캡차 reCAPTCHA v2 1. 구글 reCAPTHCA 관리 페이지에서 사이트 등록 https://www.google.com/recaptcha/admin/create 로그인 - Google 계정 하나의 계정으로 모든 Google 서비스를 Google 계정으로 로그인 accounts.google.com 2. 로컬에서 테스트 할 경우, localhost와 127.0.0.1을 도메인으로 등록하고, 실서버에서 사용할 경우 해당 도메인을 등록한다 3. 등록 후 발급된 사이트키와 비밀키를 저장한다 4. (gradle 기준) build.gradle 파일에 아래 의존성 추가 implementation 'net.tanesha.recaptcha4j:recaptcha4j:0.0.7' implementation 'javax.json:javax.json..
TweenMax (1) 1. HTML상에서 작업 전 추가 (CDN 설치) 2. TweenMax [ TweenMax.to() 와 TweenMax.from() 차이점 ] 1) TweenMax.to() .box { width: 100px; height: 100px; background: #8c98f3; opacity: 0; } // TweenMax.to( 대상오브젝트, 시간(seconds), 속성-목표값 ) TweenMax.to( '.box', 5, { opacity: 1 } ); // .box opacity값이 0일 때, 초기값 형식) TweenMax.to( 대상오브젝트, 애니메이션 실행 시간(seconds), 속성-목표값 ); box 클래스의 opacity값이 0일 때 box 클래스를 대상 오브젝트로 가져오고, 애니메이션을 5초..
맥 터미널에서 Vue CLI, node, npm 설치된 버전 확인(mac os) 1. Vue CLI 버전 확인 vue --version Vue CLI 공식 사이트: https://cli.vuejs.org/ 2. node.js 버전 확인 node -v node.js 공식 사이트: https://nodejs.org/en/ 3. npm 버전 확인 npm -v
[코딩테스트] MySQL > SELECT 문 (6) 1. 오랜 기간 보호한 동물(2) SELECT O.ANIMAL_ID, O.NAME FROM ANIMAL_OUTS O LEFT JOIN ANIMAL_INS I ON O.ANIMAL_ID = I.ANIMAL_ID ORDER BY DATEDIFF(O.DATETIME, I.DATETIME) DESC LIMIT 2 - DATEDIFF(A,B) 두 날짜 사이 일수를 구하는 함수 - 두 날짜 사이의 간격이 긴 순서 중 상위 2개를 조회한다 2. DATETIME에서 DATE로 형 변환 SELECT ANIMAL_ID, NAME, DATE_FORMAT(DATETIME, '%Y-%m-%d') AS '날짜' FROM ANIMAL_INS ORDER BY ANIMAL_ID ASC - DATE_FORMAT(A, '포맷') : 날짜..
[코딩테스트] MySQL > SELECT 문 (5) 1. 루시와 엘라 찾기, 문자열 검색 SELECT ANIMAL_ID, NAME, SEX_UPON_INTAKE FROM ANIMAL_INS WHERE NAME IN ('Lucy', 'Ella', 'Pickle', 'Rogan', 'Sabrina', 'Mitty') - NAME 컬럼의 값이 Lucy, Ella, Pickle, Rogan, Sabrina, Mitty인 값들을 조회한다 2. 이름에 el이 들어가는 동물 찾기 SELECT ANIMAL_ID, NAME FROM ANIMAL_INS WHERE LOWER(NAME) LIKE '%el%' AND ANIMAL_TYPE = 'Dog' ORDER BY NAME - 문자열을 대문자로 바꿔주는 함수 UPPER() / 문자열을 소문자로 바꿔주는 함수 LOWER - ..
[코딩테스트] MySQL > SELECT 문 (4) 1. 이름이 없는 동물의 아이디 SELECT ANIMAL_ID FROM ANIMAL_INS WHERE NAME IS NULL ORDER BY ANIMAL_ID - ANIMAL_INS 테이블에서 NAME 컬럼 값이 없는 값을 조회한다 - AMIMAL_ID를 오름차순(ASC)으로 정렬한다 2. 이름이 있는 동물의 아이디 SELECT ANIMAL_ID FROM ANIMAL_INS WHERE NAME IS NOT NULL ORDER BY ANIMAL_ID - ANIMAL_INS 테이블에서 NAME 컬럼 값이 있는 값을 조회한다 - ANIMAL_ID를 오름차순(ASC)으로 정렬한다 3. NULL 처리하기 SELECT ANIMAL_TYPE, IFNULL(NAME, "No name") AS 'NAME', SEX_UP..
[코딩테스트] MySQL > SELECT 문 (3) 1. GROUP BY > 동명 동물 수 찾기 SELECT NAME, COUNT(ANIMAL_ID) as 'COUNT' FROM ANIMAL_INS WHERE NAME IS NOT NULL GROUP BY NAME HAVING COUNT(ANIMAL_ID) >= 2 ORDER BY NAME ASC - 이름(NAME)으로 그룹을 나누고, COUNT함수를 이용해서 동명 동물의 수를 조회한다 - HAVING 절에 같은 이름의 동물 수가 2개 이상으로 조건을 추가한다 - 이름 오름차순(ASC)으로 정렬한다 2. GROUP BY > 입양 시각 구하기(1) SELECT DATE_FORMAT(DATETIME, '%H') AS 'HOUR', COUNT(ANIMAL_ID) AS 'COUNT' FROM ANIMAL_OUTS..

티스토리툴바