Frontend 26

[Javascript] 함수선언식, 함수표현식

Javascript 함수란? 어떤 목적을 가진 작업들을 수행하기 위해 모인 코드들의 블럭 입력 -> 연산 -> return -> 출력 형태를 갖는다. 함수는 실제로는 또 하나의 객체(Object)로 변수나 배열에 할당시킬 수 있다. 함수를 변수에 할당 시킬 수 있다는 말은 무엇일까? 자바스크립트에서 함수를 선언하는 방법에 대해서 알아보자 함수 선언식 function hello() { return "안녕하세요" } hello(); // "안녕하세요" function 키워드를 사용해 함수를 선언한다 function 함수명 (파라미터) { return }; return이 불필요할 땐 생략 가능 함수 선언식으로 선언한 함수는 호이스팅이 발생한다. (호이스팅에 대한 설명은 관련 글이 아니기 때문에 생략) hell..

Frontend/Javascript 2023.09.13

[Javascript] 형변환

💡 형 변환(Type Conversion) : 프로그래밍에서 자료형을 다른 형태로 변경하는 것. 명시적 형 변환 사용자가 원하는 형태로 직접 데이터의 타입을 변경하는 것 # 1. to String String( ) 어떤 형태든 문자로 형변환 가능 (null, undefined ... ) String(111) // "111" String(Undefined) // "Undefined" String(NaN) // "NaN" String(true) // "true" ( ).toString() 2~36 사이의 값을 대입하면 숫자를 해당 진수로 변환한 문자열을 얻을 수 있음 일반적으론 인자없이 사용해서 문자열을 얻음 String()과 달리 null, undefined를 .toString() 할 경우 오류 발생 le..

Frontend/Javascript 2023.09.13

[Javascript] 자바스크립트 자료형(data-types)

자바스크립트의 자료형 원시타입? 비원시 타입? 원시타입(Primitive Data Type) : 값이 하나인 자료형. 변수에 값(value) 자체가 담긴다. 비원시 타입(Non-Primitive Data Type) : 여러 값을 한번에 담고 있는 자료형. 변수에 값는 담고 있는 보관함의 주소(reference)가 담긴다. 원시타입 자료형 (Primitive Data Type) # 1. 숫자형 (Number) 숫자형 데이터. 소수형, 정수형 등 따옴표없이 수학 연산이 가능한 모든 숫자 데이터는 Number타입으로 간주한다. 64bit 부동소수점으로 관리됨. 사실상 내부적으론 실수형으로 관리하고 있음. Infinity, -Infinity, NaN과 같은 형태도 숫자형으로 분류 NaN(Not a Number)..

Frontend/Javascript 2023.09.12

[Javascript] var, let, const

변수와 상수 자바스크립트에서 변수는 "프로그래밍을 위해 하나의 값을 저장하는 저장소"라고 볼 수 있다. JS는 이 변수를 선언하는 방식이 3가지로 나눠져 있는데, 오늘은 var, let, const 이 세가지 선언 방법에 대해서 정리하고자 한다. 변수? 💡 프로그램 실행 도중에 계속해서 바뀔 수 있는 값을 저장하는 저장소 상수? 💡 처음 할당한 값이 바뀌지 않는 저장소. 따라서 초기 선언 시 값을 비우고 선언하는 것도 불가능하고, 프로그램 실행 중 값을 바꾸는 것도 불가능 변수명 규칙 변수명에는 기호를 쓸 수 없다. (but, 언더스코어_, 달러$ 는 제외) 변수명은 숫자가 아닌 문자로 시작해야 한다. (ex- 6age는 불가, age5은 가능) 예약어는 변수명으로 사용할 수 없다. (ex- if, el..

Frontend/Javascript 2023.09.11

브라우저 렌더링(Rendering) 과정

개발자는 HTML, CSS, Javascript 파일 등을 작성해 웹페이지를 만든다. 웹페이지가 보여지는 브라우저는 해당 파일을 어떻게 불러와 화면에 띄우는 것 일까? 사실 개발자들이 만들어내는 파일들은 단순히 "Text"에 불과하다. 단순 텍스트였던 파일들을 브라우저가 웹 페이지로 예쁘게 그려내는데 이것을 렌더링(Rendering)이라고 한다. 왜 렌더링을 알아야 할까? 개발자들의 숙명인 "속도 개선"을 위해선 브라우저가 렌더링을 하는 과정에 대해서 꼭 알아야 한다. 렌더링 과정을 알면 우리의 어떤 코드가 브라우저가 웹페이지를 그려내는데 오랜 시간을 들이게 하는지 알 수 있기 때문에, 속도 개선이나 효율을 위해서 알아두면 좋은 개념이자 필수 개념이라고 할 수 있다. 브라우저의 렌더링(Rendering)..

Frontend/Web 2023.09.09

DOM, CSSOM, Render Tree란 무엇인가?

렌더링(Rendering) : HTML-CSS-Javascript 등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정 브라우저의 렌더링 과정은 아래와 같다. 1. 서버로 부터 받은 HTML, CSS 등 웹사이트에 필요한 리소스를 다운로드 받는다. 2. HTML를 DOM, CSS를 CSSOM으로 생성한다. 3. Render Tree를 생성한다. 4. Layout을 계산한다. (Viewport내에서 각각의 노드들의 위치를 계산한다) 5. Paint한다. (요소들을 화면에 그린다) 위 단계를 거쳐 우리가 보는 웹페이지를 만들어낸다.그런데 단순히 이해하기엔.. Layout이나 Paint는 대충 예상이나 가지만 나는 DOM도, CSSOM도 Render Tree 몰?루 그래서 개념을 정리하고자, 나..

Frontend/Web 2023.09.09