전체 글 (265) 썸네일형 리스트형 [WEB] 브라우저 렌더링 과정 바로 알기 브라우저 렌더링의 원리 주소창에 https://www.google.com/을 입력하면 브라우저에서는 무슨 일이 일어날까? 브라우저가 웹 페이지를 불러올 때는 렌더링 엔진이라는 소프트웨어 모듈이 사용된다. 렌더링 엔진은 HTML, CSS, Javascript와 같은 웹 페이지 요소들을 파싱하고 이를 브라우저 화면에 표시하는 역할을 한다. 브라우저 렌더링 동작 과정 렌더링의 기본적인 동작 과정은 다음과 같다. 1. HTML 파일과 CSS 파일을 파싱해서 각각 Tree를 만든다(Parsing)2. 두 Tree를 결합하여 Rendering Tree를 만든다(Style) 3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다(Layout) 4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로.. [Javascript] undefined과 null 바로 알기 undefined과 null 여기 두 개의 휴지걸이가 있다. 휴지 자체가 아예 없는 휴지걸이와 휴지심만 있고 휴지는 없는 휴지걸이. 둘 다 '휴지가 없다'고는 말할 만한 상황이긴 하지만 분명 다르다고 할 수 있다. Javascript에도 '없음'을 나타내는 값이 두 개 있다. undefined과 null. 이 둘은 언뜻 비슷한 것 같지만 사실 의미도 목적도 용도도 엄연히 다르다. 결론부터 말하자면 undefined는 변수에 값이 할당되지 않았다는 의미로 자바스크립트 엔진이 자동으로 할당하는 초깃값이며, null은 변수에 값이 명시적으로나 의도적으로 없음을 나타내는 값이다. undefined는 '할당된 값 자체가 없다'는 뜻으로 null과는 차이가 있다. cf) undeclared는 변수 선언조차 된.. [Javascript] Window 객체 바로 알기 현재는 다양한 사용처와 플랫폼을 지원하고 있지만, 자바스크립트는 본래 웹 브라우저에서만 사용하기 위해 만들어진 언어다. 그만큼 웹 분야에서의 자바스크립트란 독보적인 존재라고 할 수 있는데, 자바스크립트로 웹 브라우저를 다루기 위해서는 window 객체와 document 객체, BOM과 DOM에 대한 이해가 필요하다. 인터넷 브라우저를 보면 주소창, 즐겨찾기, 툴바, 탭 등이 보이고 그 다음부터 웹 사이트가 표시된다. 여기서 브라우저 전체를 담당하는 게 window 객체이고 웹 사이트만 담당하는 게 document 객체다(document 객체도 window 객체 안에 들어 있음). window window 객체는 두 가지 역할로 나눠 생각해 볼 수 있는데, 1) 브라우저 안의 모든 요소들이 소속된 최.. [Javascript] nullish 병합 연산자 '??' nullish 병합 연산자 '??'를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어 있는' 변수를 찾을 수 있다. a ?? b의 평과 결과는 다음과 같다. 1) a가 null도 아니고 undefined도 아니면 a 2) 그 외의 경우 b ?? 없이 이와 동일한 동작을 코드를 작성하면 아래와 같다.// x = a ?? b x = (a !== null && a !== undefined) ? a : b; 이럴 때 ?? 연산자를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있다. ??와 ||의 차이 nullish 병합 연산자는 언뜻 or 연산자 ||와 비슷해 보인다. 그러나 두 연산자 사이에는 중요한 차이점이 있다. 1) ||는 첫 번째 truthy 값을 반환 2) ??는 첫 번째 정의된 값을.. [Oracle] TIMESTAMP를 활용한 데이터 복구 TIMESTAMP 데이터베이스를 이용하다 보면 실수로 데이터를 삭제하거나 잘못 업데이트하는 경우가 있다. 물론 COMMIT을 하기 전이라면 상관이 없다. ROLLBACK을 하면 그만. 하지만 COMMIT을 한 이후에 문제를 확인하여 데이터를 복구해야 하는 경우가 있다. 이럴 때 ORACLE의 TIMESTAMP를 이용하면 데이터를 복구할 수 있다. TIMESTAMP의 사용 조건 1) oracle 9i 이상부터 지원2) DB 설정된 시간에 따라 오래 지난 데이터는 TIMESTAMP로 복구가 불가능함 TIMESTAMP 사용법 단위는 SECOND, MINUTE, HOUR, DAY로 지정해서 사용할 수 있다. 기준은 현재 시점이고 조건문을 함께 사용하는 것이 좋다. -- 10초 전의 데이터 조회SELE.. [Javascript] console.log() 다시 보기 console.log() Console은 브라우저의 내장 디버거로서 웹 개발 시 수도 없이 많이 사용된다.그중에서도 console.log()는 일반적으로 가장 많이 사용하는 함수로 자바스크립트 객체, 문자열 등의 데이터를 콘솔창에 출력시키는 데 사용된다. console.log()를 출력하거나 그 기능을 사용하기 위해서는 개발자 도구를 이용해야 한다.아래 예시는 콘솔창을 통해 실행한 것으로 마지막 라인에 '가 출력되는 이유는 콘솔창에서 특정 함수를 실행하면 그 함수의 return 값을 출력하도록 만들었기 때문. console.log()는 return 값이 없다. console.log()의 객체 참조 console.log()가 다른 값을 찍어 준다? console.log()를 통해 로깅을 할 때 .. [Oracle] ORA-12899: 열에 대한 값이 너무 큼 ORA-12899: 열에 대한 값이 너무 큼 데이터를 INSERT 또는 UPDATE 시 많이 마주치는 오류다.이 오류는 해당 컬럼에 설정된 데이터 허용치보다 더 큰 값을 삽입/수정하는 경우 발생한다. CREATE TABLE USER_TABLE( USER_ID VARCHAR2(10) NOT NULL, USER_NAME VARCHAR2(10) NOT NULL, ADDRESS VARCHAR2(10));INSERT INTO USER_TABLE(USER_ID, USER_NAME, ADDRESS)VALUES('100', '홍길동', '대한민국 서울특별시 강남구');-- ORA-12899: 열에 대한 값이 너무 큼 위 예시에서는 ADDRESS 컬럼은 VARCHAR2(10)인데 실제 입력된 값의 크기는 .. [Oracle] ORA-00904: invalid identifier, 부적합한 식별자 ORA-00904: invalid identifier, 부적합한 식별자 오라클에서 'ORA-00904: 부적합한 식별자' 에러는 컬럼명을 찾을 수 없을 때 발생한다. 원인1) 존재하지 않는 열 이름을 지정함2) 정의된 열 이름과 대소문자가 일치하지 않음3) 작은 따옴표(')와 큰 따옴표(") 사용 오류4) 열 이름에 특수문자 사용5) 열 이름에 예약어 사용 해결 방안1) 해당 열이 테이블에 존재하는지 확인2) 큰 따옴표로 묶인 열 이름은 대소문자로 구분하므로 확인 cf) 따옴표로 묶지 않은 식별자는 항상 대문자로 변환되어 관리됨3) 작은 따옴표(')로 값을 묶으면 값으로 취급되지만 큰 따옴표(")로 값을 묶으면 객체 이름으로 처리되므로 확인 필요4) 열 이름 앞에 숫자나 기호를 사용하고 있지 않은지.. 이전 1 ··· 5 6 7 8 9 10 11 ··· 34 다음
