웹 프로그래밍12 HTML 문서가 브라우저에 랜더링되는 과정 1. 랜더링 Rendering의 정의 HTML, XML과 같은 Markup 언어로 작성된 문서를 chrome이나 Firefox와 같은 웹 브라우저에서 열면 해당 브라우저의 엔진 (Chrome = Blink, Firefox = Gecko)이 사람의 눈으로 볼 수 있는 형태로 변환해 준다. 이때 Markup 언어로 작성된 문서를 사람의 눈으로 볼 수 있는 형태로 변환해 주는 과정을 랜더링 Rendering이라고 한다. 2. 웹 문서가 브라우저에 랜더링 되는 과정 프로그래밍에서의 랜더링 Rendering이 무엇인지 간단하게 알아봤으니 이제 본격적으로 웹 문서가 브라우저에 랜더링 되는 과정에 대해 다뤄보도록 하겠다. 아래 HTML 문서, 웹 페이지를 구글 크롬과 같은 웹 브라우저로 연다고 가정해 보자. 아래는 .. 2023. 12. 18. [React] 개발 환경 설정 📃 목차 1. ReactJS 개발 환경 설정하기 ① React 설치하기 ② React 개발 모드와 배포 모드 2. Create React App ① node.js 설치 ② React 설치 ③ 프로젝트 폴더 구성 ④ React 예제 실행하기 📕 Reference React 개발 환경을 설정하는 방법은 두 가지가 존재한다. 하나는 이 글을 쓰는 시점에서 위의 ② React 개발 모드와 배포 모드 React로 개발한 웹 페이지를 배포할 때는 'development.js'를 'production.min.js'로 수정해 주자. 앞에서 태그를 통해 설치했던 React와 ReactDOM은 development, 개발 모드로 프로그램 개발 중에 버그로 이어질 수 있는 요소들에 대해 경고를 보내는 검증 코드가 포함되어 .. 2023. 12. 12. [TypeScript] 타입 단언 Type Assertion 1. 개요 ① 문제 발생 (ts2339: Property does not exist on type) ② 문제 해결과정 1 (변수 SearchInput에 저장되는 DOM 객체의 타입을 HTMLElement로 단언) ③ 문제 해결과정 2 (변수 SearchInput에 저장되는 DOM 객체의 타입을 HTMLInputElement로 수정) 2. 타입 단언 (Type Assertion0) 3. Reference 1. 개요 ① 문제 발생 (ts2339: Property does not exist on type) '나만의 크롬 시작화면'의 검색창을 구현하다가 아래와 같은 Error를 보게 되었다. const SearchInput = document.getElementById("Search_Input"); const .. 2023. 10. 6. [TypeScript] Object is possibly 'null' 현재 수강 중인 자바스크립트 강의에서 나온 '나만의 크롬 시작화면 만들기' 프로젝트에 타입 스크립트를 무작정 도입을 시도했다가 자잘한 부분부터 문제가 생기기 시작했다. 이번에 정리한 것은 프로젝트를 빌드한 2023.09.20 일자에 발생했던 문제를 해결하는 과정에 대한 것이다. const dateElement = document.getElementById("Today_Date"); const setNowDate = (month: number|string, date: number|string, day: string) => { dateElement.textContent = `${month}월 ${date}일 ${day}`; //문제가 발생한 부분 }; 이런 식으로 'dateElement'라는 객체가 null.. 2023. 9. 23. [TypeScript] TypeScript 설치 목차 1. Node.js 설치 ① node, npm 버전 체크 ② Node.js 설치하기 (1) / LTS 버전과 Current 버전 ③ Node.js 설치하기 (2) 2. TypeScript 개발 환경 세팅 ① 프로젝트 폴더 생성 / package.json 파일 생성 ② TypeScript 설치 ③ ts-node 설치 ④ tsconfig.json 파일 생성 ⑤ TypeScript 예제 생성 및 컴파일 3. Reference 1. Node.js 설치 ① node, npm 버전 체크 Node.js를 설치하기 전에 먼저 내 컴퓨터에 node와 npm이 설치된 상태인지를 확인해야 한다. [시작] 메뉴에서 [Windows 시스템] 폴더 내부에 있는 '명령 프롬포트' 프로그램을 실행하고 아래의 명령어를 입력해 보.. 2023. 9. 9. [Javascript] var 목차 0. 개요 1. var ① var ② var로 선언한 변수의 특징 (1). var로 선언한 변수는 함수 스코프나 전역 스코프를 가지고 있다. (2). var로 선언한 변수는 중복 선언이 가능하다. (3). var로 선언한 변수는 호이스팅이 가능하다. (호이스팅) 2. let, const ① let, const로 선언한 변수(상수)는 호이스팅을 지원하는가? ② TDZ 0. 개요 이번에는 Javascript의 변수 선언 키워드 중 하나인 var에 대한 것을 공부해봤고 공부하면서 정리한 내용을 바탕으로 Javascript 변수 선언 키워드인 var에 대해 설명해보도록 하겠다. 1. var ① var 'var'은 Javascript의 변수 선언 키워드로 오래된 변수 선언 키워드로 현재는 ES6부터 도입된 .. 2023. 7. 23. [Javascript] 반복문 목차 1. 반복문 2. while 문 / do while 문 ① while 문 ② do while 문 3. for 문 4. 참고한 문헌 1. 반복문 프로그램 내부에서 특정한 코드가 반복적으로 실행될 수 있게 하는 명령문을 반복문이라고 한다. 배열로 저장한 데이터를 차례대로 출력하거나 숫자 1 ~ 10까지 값을 하나씩 증가시켜서 출력하는 등의 동일한 코드를 반복해서 작성해야할 경우에 주로 사용되는 것이 반복문이다. Javascript에서 주로 사용되는 반복문은 while, for문이 존재한다. 해당 반복문에 대해서는 순차적으로 알아보도록 하자. 2. while 문 / do while 문 ① while 문 while (/*조건식*/){ //실행할 명령문 } while 문은 주어진 조건식의 결과가 참, tru.. 2023. 7. 9. [Javascript] 자료형과 형변환 목차 1. 자료형 (Data Type) ① Number (숫자형) ② String (문자형) ③ Boolean (논리형) ④ null / undefined 2. 형변환 (Type Casting) ① 묵시적 형변환 ② 명시적 형변환 0. 개요 let num = 20; console.log(typeof num); //"number" num = "Hello"; console.log(typeof num); //"string" //typeof 연산자는 피연산자의 자료형을 나타내는 문자열을 return하는 연산자이다. //처음에 변수 num의 자료형이 number, 숫자형으로 나왔고 //이후 num의 값을 "Hello"로 바꿨더니 해당 변수의 자료형이 string, 문자형으로 //변경된 것을 확인할 수 있다. 상단.. 2023. 6. 4. [Javascript] 변수, 상수 1. 변수 (Variable) 프로그래밍에서 변수란 "값이나 데이터를 담을 수 있는 공간"을 말한다. 변수는 사용자의 이름이나 나이, 주소 등의 정보를 저장하기 위한 목적으로 사용되며 변수에는 하나의 값만 저장할 수 있지만 대신 저장한 값을 바꾸는 것이 가능하다. (변수에 저장된 값을 바꾼다면 이전에 저장해둔 값은 사라진다.) 자바 스크립트에서 변수를 선언할 때 사용하는 키워드로는 var과 let이 존재한다. 단, var은 현재로써는 잘 사용되지 않는 변수 선언 방식이기 때문에 대부분 let 키워드를 통해서 변수를 선언한다. (나중에 var로 변수를 선언하는 방식이 잘 사용되지 않는 이유를 정리해서 올려보도록 하겠다.) //변수의 선언과 저장한 값 변경 let Sample = 15; console.log.. 2023. 5. 26. 이전 1 2 다음
