Today I Learned. @cheers_hena 치얼스헤나

querySelectorAll element의 자식 요소 중 주어진 CSS 선택자에 대응하는 모든 요소 반환. querySelector(css) 주어진 css선택자에 대응하는 요소 중 첫번째 요소 반환 후 검색 종료. closest element.closest(css) 요소 자신을 포함하여 css 선택자와 일치하는 가장 가까운 조상 요소 검색. 해당 요소부터 시작해 DOM트리를 한 단계씩 거슬러 올라가면서 원하는 요소 반환. 1장 2장

서버를 운영하다 보면 갑작스런 트래픽 증가, 사업 확장 등으로 더 많은 서버 용량과 성능이 필요하게 된다. 이럴때에는 Scale Up 스케일 업/ Scale Out 스케일 아웃 방법으로 서버를 확장시킬 수 있다. 1. Scale UP 스케일 업 서버에 CPU, RAM, Storage 등을 추가하거나 기존 서버보다 높은 사양으로 업그레이드 하는 것. 수직 확장이며, 성능 확장에 한계가 있음. 서버 한 대에 모든 부하가 집중되므로 장애 시 서버다운 리스크가 크다. 고성능 서버는 비용이 크다. 2. Scale OUT 스케일 아웃 기존 서버와 비슷한 사양의 서버 대수를 증가시키는 방법으로 처리 능력을 업그레이드. 서버가 여러대가 되기 때문에 각 서버 걸리는 부하를 균등하게 해주는 로드밸런싱 필요. 수평 확장이며..

1. 이클립스를 종료. 2. 다음 경로의 projects 폴더를 안전한 장소로 이동. eclipse-workspace / .metadata / .plugins / org.eclipse.core.resources / .projects 3. 이클립스 재기동 후 다시 종료. 4. 2번에서 이동한 projects 폴더를 다시 원위치로 복원(덮어쓰기).

이클립스과 메이븐 연동은 개발자에게 편리함을 제공한다. 하지만 .settings의 자동변화에 종종 삽질을 하게됨. 이번에 겪은 삽질은 Dynamic Web Projects와 M2E 통합으로 인해 메이븐 업데이트시, .settings/org.elipse.wst.common.component 파일의 의 값이 자동으로 변경된다는 점이다. ContextRoot 고정시키는 방법 이클립스 내에서 m2e-wtp플러그인을 사용하여 웹프로젝트를 관리할 때 다음과 같이 context root가 관리된다. 기본적으로 m2e-wtp는 maven-war-plugin환경에 정의된 값으로부터 독립된 웹 애플리케이션의 context root가 적용된다. maven-war-plugin 1.2 myWebapp 2. 설정에 값이 지정되어..

테이블 마이그레이션 작업에 많이 사용되는 테이블 머지 SQL문을 알아보자. 테이블 마이그레이션 작업이란 테이블1의 모든 데이터를 테이블 2로 옮기는 작업이라고 생각하면 된다. 1차로는 INSERT로 모든 데이터를 새 테이블이 넣어준다. 문제는 데이터의 변동이 없다면 INSERT로 덮어칠 수 있지만 데이터의 변동이 있는 경우 선별적으로 변동된 데이터만 업데이트 시켜주어야 하는 경우가 발생한다. 이런 경우에는 어떤 데이터의 변동이 있었는지 체크한 후, 데이터의 변동이 있는 컬럼만 UPDATE시켜주고, 새로운 데이터가 추가되었다면 INSERT 해 주어야 한다. IF 조건문을 통해 나누어 작업할 수도 있겠지만 이러한 작업을 한번에 해 주는 것이 MERGE 문이다. 비교-삽입-갱신 과정을 한번에 처리하는 것이다...

JNDI Java Naming and Directory Interface. 이름지정 및 디렉토리 서비스에서 제공하는 데이터 및 객체를 참조(lookup)하기 위한 자바 API이다. 일반적으로 자바 애플리케이션을 외부 디렉터리 서비스(DB server,LDAP server..)에 연결할 때 쓰이는데 그중에서도 데이터베이스 연결에 가장 많이 쓰인다. 데이터베이스 연결 시에는 데이터베이스 커넥션을 미리 만들어서 저장해두고, 필요할때 저장된 공간 (DB Pool)에서 가져다 쓰고 반환하는 기법이다. 커넥션 풀을 이용하면 미리 커넥션을 만들어두고 사용하기 때문에 매번 사용할때마다 드라이버를 로드하고, 커넥션 객체 생성-연결-종료 하는 과정을 반복하지 않아도 되어서 데이터베이스의 부하를 줄이고 자원을 효율적으로 관..

정규표현식이란 특정 규칙을 가진 문자열의 집합을 표현하는 형식언어이다. 문자열이 가진 규칙을 파악하여 해당 규칙을 만족하는 문자열만 추출할 수 있다. 검색, 필터링, 치환 등에 사용된다. mySQL에서는 REGEXP(Regular Expression)이라는 키워드로 정규표현식을 사용함. REGEXP SELECT 컬럼명 FROM 테이블명 WHERE 컬럼명 REGEXP '정규표현식'; 정규표현식 기본 문법(일부) ^ : 문자열의 시작 $ : 문자열의 끝 [aeiou] : aeiou 중 하나 ^[aeiou] : aeiou중 하나로 시작하는 문자 ^[aeiou].* : aeiou중 하나로 시작하는 문자열 [aeiou]$ : aeiou중 하나로 끝나는 문자 .*[aeiou]$ : aeiou중 하나로 끝나는 문자열..

자바스크립트에서 변수를 선언할때 var, let, const 를 사용한다. 어떤 차이점이 있을까? 1. 변수선언 방식 var, let, const 는 javascript의 변수선언 방식이다. 같은 기능을 하는것 같지만 조금씩 다른 기능을 하고 있다. var 중복 선언 가능. 재할당 가능. var title = 'book'; console.log(title); // book var title = 'movie'; console.log(title); //movie title = 'music'; console.log(title);//music var 는 원조 변수선언방식으로, 위 코드와 같이 선언한 변수가 동일한 이름으로 중복 선언이 가능하다. 즉, 마지막에 할당된 값이 최종 변수에 저장된다. 변수를 유연하게 ..

프론트에서 백엔드로 비동기식 호출을 하는 경우, 클라이언트단에서 특정 기능의 url를 호출하면 백엔드에서 실행된다. 만약, 프론트엔드 범위까지 개발 담당이 아닌경우 테스트를 위해서 임의로 테스트 페이지를 만들곤 하는데 굳이 화면개발 없이 크롬 개발자모드의 콘솔에서 간단히 호출 및 테스트 할 수 있는 방법이 있어 공유한다. 웹에서 크롬 개발자 모드 (단축키 F12)의 console 에서 비동기 통신 객체인 XMLHttpRequest 객체를 생성하여 서버로 요청을 보내는 방법이다. 먼저 XMLHttpRequest 객체에 대해서 간단히 알아보자. XMLHttpRequest(XHR)객체란? ajax 요청을 생성하는 javaScript API로 브라우저와 서버간의 네트워크 요청을 전송한다. 서버와 상호작용하여 ..

웹 개발시 클라이언트단의 브라우저에서 외부 서버로 ajax 요청 시 자주 발생하는 실패 메세지. Fail to load '호출URI': No 'Access-Control-Allow-Origin' header is present in the requested resource. Origin '요청URI' is therefore not allowed access. 원인은 자바스크립트 엔진 표준스펙에 동일출처 정책(SOP:same-origin-policy) 보안 규칙 때문이다. SOP(Same-origin Policy) 자바스크립트에서 XMLHttpRequest로 외부서버 접근시에는 같은 출처(Same Origin)의 페이지로만 접근이 가능도록 하여 동일한 출처(프로토콜, 호스트명, 포트) 가 모두 일치해야 데..