본문 바로가기

javascript8

알아두면 재미있는 자바스크립트의 역사 자바스크립트의 역사를 왜 알아야 합니까 새로운 언어를 배울 때 바로 문법 공부에 전념하는 것보다 그 언어의 탄생 배경에 대해 이해하는 것이 중요하다고 한다. 과거를 알아야 현재가 보이고, 미래를 예측할 수 있다고 하지 않나. 자바스크립트가 어떻게 탄생했으며 어떤 문제를 해결하기 위해 만들어졌고, 이 언어를 다룰줄 알면 어떤 분야에 더 활용할 수 있는지 알 수 있기 때문이 아닐까 싶다. 문법 공부보다는 상대적으로 우선순위가 낮을 수 있지만, 알아두면 재미있는 자바스크립트의 역사에 대해 정리해 보자. 태초에 모자이크라는 게 있었단다 1993년, 집집마다 컴퓨터가 없었던 그 시절에는 컴퓨터를 잘 모르는 사람들도 쉽게 쓸 수 있는 UI 요소가 더해진 MOSAIC 웹브라우저가 시장에 나오게 된다. 이 MOSAIC.. 2023. 9. 10.
JavaScript의 스코프에 대해 설명해 주세요. 👩🏻‍💻 스코프에 대해서 설명해 주세요. 💁🏻‍♀️ 요약하자면 , 스코프는 변수에 접근할 수 있는 범위를 의미합니다. 자바스크립트 스코프에는 두 가지 타입이 있는데, 하나는 global(전역)과 local(지역) 입니다. 두 가지 차이 전역 스코프는 말그대로 전역에 선언되어있어 어느 곳에서든 해당 변수에 접근할 수 있다는 의미이며, 지역 스코프는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에서는 접근할 수 없다는 의미 입니다. 함수 스코프 자바스크립트에서는 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하는데요. 이때 함수 몸체 안에서 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있으며 이를 함수 스코프라고 합니다. 바로 함수 스코프가 지역 스코프의 예시라고 할 수 있습니다. 중요한.. 2023. 3. 13.
일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치시키는 이유가 무엇인가요? 👩🏻‍💻 일반적으로 CSS를 불러오기 위해 요소를 💁🏻‍♀️ 요약하자면 , CSS 요소가 head 요소의 자식 요소일 때 전반적인 UX(user expression)을 향상시키기 때문이며, 요소가 요소가 끝나기 직전에 위치하는 경우, HTML과 CSS 로딩이 끝난 직후에 JavaScript를 로딩하기 때문에 DOM 렌더링 후 JavaScript 적용까지의 시차를 최소화할 수 있습니다. CSS 일반적으로 HTML과 CSS 정보가 담긴 정보들이 우선적 점진적으로 렌더링되기 때문에 유저에게 최대한 빠르게 정보가 담긴 화면을 전달할 수 있습니다. 만약 CSS 요소를 document의 위가 아닌 아래에 위치시킨다면, 몇몇 브라우저는 스타일이 변경될 때 페이지 요소를 처음부터 다시 그리는 것을 피하기 위해 점진적 .. 2023. 3. 12.
undefined와 null의 차이를 설명해 보세요. 👩🏻‍💻 undefined와 null의 차이를 설명해 보세요. 코딩을 하다보면 불분명한 값으로 추정되는 undefined와 null이 등장합니다. 그런데 이 둘의 의미는 각각 무엇이며, 각각 어떨 때 출력되는 것일까요? 차이점을 명확하게 설명해 주세요. 💁🏻‍♀️ 요약하자면 , undefined는 변수를 선언하고 값을 할당하지 않은 상태이며, null은 변수를 선언하고 빈 값을 할당한 상태 입니다. JavaScript에서 undefined와 null 둘 모두 개별적으로 아무 것도 나타내지 않는다는 공통점이 있으나, undefined는 암시적이고, null은 명시적이라는 것이 가장 큰 차이점입니다. undefined는 아무것도 모르는 경우를 암시적으로 나타내고, null은 "값 없음"을 명시적으로 딱 나타.. 2023. 3. 5.
JavaScript 원시 자료형과 참조 자료형에 대해 쉽게 이해해 보자. 1. 원시 자료형과 참조 자료형이란? number, string, boolean, undefined, null과 같은 자료형은 고정된 저장 공간을 차지한다. 이런 특징을 가진 자료형을 원시 자료형(primitive data type)이라는 이름으로 분류한다. 반면에 대량의 데이터를 다루기에 적합한 배열과 객체, 함수 등의 자료형은 참조 자료형(reference data type)이라고 분류한다. 원시 타입 데이터는 각 변수간의 원시타입 데이터를 복사할 경우, 데이터 값이 복사되기 때문에 기존의 데이터에 영향이 가지 않음. 참조 타입 데이터는 주소를 복사한다. 때문에 복사한 데이터에서 원소를 변경하게 된다면 주소 안에 있는 데이터가 변경이 되는 것이기에 기존의 데이터에도 영향이 가는 것이다. 쉽게 설명하자.. 2023. 3. 2.
JavaScript 객체 기초 개념 - 구분, 조회, 객체 다루기 1. 객체란? 자, 배열을 배웠다면 이제 객체를 배울 시간이다. 비유하자면, JavaScript에서의 객체는 게임 캐릭터와 비슷하다고 할 수 있다. 사용자들의 캐릭터는 동일하게 직업과 능력을 가지고 있지만, 각각 세부적인 내용은 다르다. 누군가는 Ella라는 ID와 마법사라는 직업을 가지고 있지만, 다른 누군가는 Chloe라는 ID와 전사라는 직업을 가지고 있다. 마찬가지로 사용자가 웹사이트에 가입할 때 입력할 항목은 모두 같지만, 입력하는 정보는 사용자마다 다르다. 이렇게 각기 다른 값을 가질 수 있지만, 입력해야 하는 데이터의 종류가 동일한 경우 객체를 사용하면 손쉽게 데이터를 관리할 수 있다. 이렇듯, 공통적인 속성을 가지는 경우 객체를 사용해야 한다. 웹사이트에 가입한 회원 주소록을 만든다고 가정.. 2023. 3. 1.
JavaScript 배열 기초 개념 - 인덱스, 반복, 메소드 1. 배열이란? 순서(index)가 있는 값(element)의 집합이다. 이때, 순서는 1이 아니라 0부터 번호를 매기며, 대괄호 [ ] 를 이용해 배열을 만들고, 각각의 원소(element)는 쉼표(,)로 구분해 준다. a. 배열의 인덱스 값 구하기 let myNumber = [73, 98, 86, 61, 96]; // myNumber 라는 배열의 3번째 인덱스 값은? myNumber[3]; // 61 let myNumber = [73, 98, 86, 61, 96]; // myNumber 라는 배열의 5번째 인덱스 값은? myNumber[5]; // undefined : 이 배열은 4번째 인덱스 값 까지 밖에 없다. b. 배열 안에 있는 배열의 인덱스 값 구하기 let myNumber = [[13, 3.. 2023. 2. 27.
HTML, CSS, JavaScript 차이점 간단히 알아보기 웹 페이지 제작을 집을 만든다고 가정해 봅시다. 1. HTML (Hyper Text Markup Language) 웹 페이지의 구조를 짜는 마크업 언어다. 집을 짓기 위해 도면을 그린다고 생각하면 된다. 마크업 언어란? 태그는 원래 텍스트와는 별개로 원고의 교정부호나 주석을 표현하기 위한 것이었으나, 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라고 하는데, 일반적으로 데이터를 기술하는 정도로만 사용 되기 때문에 자바스크립트와 같은 프로그래밍 언어와는 구별된다. (참고: 위키피디아) 예를 들어, 웹사이트 상의 로그인 페이지를 만든다고 해보자. 그렇다면 기본적으로 아이디와 비밀번호를 입력할 수 있는 입력폼이 필요하겠다. 또한 로그인으로 이어지는 버.. 2023. 2. 27.

티스토리툴바