[TIL] #14. 입력폼 만들기 & DOM과 JS 역사 & 컴퓨터 공학 기초 지식

2022.5.17. (수)

1. 오늘의 소감

• 오늘은 페어 프로그램으로 입력폼을 만드는 실습을 했다. 기초적인 형태를 만드는 과제는 통과했기 때문에, 나와 페어분은 naver 회원가입창을 보고 클론 코딩을 해보는 자체 과제에 돌입했다. 그런데 은근 CSS가 시간을 많이 잡아먹어서 완성하지는 못했다. CSS 숙지가 좀 느린 것도 있고…😇. 해당 프로젝트는 내일과 주말을 이용해 완성할 생각이다.
• 실시간 세션에서 크루님이 DOM 과 자바스크립트의 간략한 역사에 대해 설명해주셨다. 굉장히 흥미로워서 재밌게 들었다. 확실히 무언가가 ‘왜' 생겨났는지 알면 개념을 이해하기 쉬워지는 것 같다.
• 내가 속한 Vanilla 스터디에서 전공 지식을 겸비한 팀원분이 기초적인 컴퓨터 지식에 대해 강의해주셨다. 덕분에 CPU 와 RAM, 하드디스크에 대한 이해가 늘었다! 매번 느끼는 거지만 우리 팀원분들 열정🔥이 정말 대단하다. 이렇게 든든한 분들이 옆에 계시다니, 스터디 들어가길 잘했다 정말👍! 비전공자 입장에서 항상 많이 배웁니다. 정말 감사합니다 여러분들😭!

2. 학습한 키워드

• 변수, let, 자료형, number, string, boolean, null, undefined, bigint, symbol, object, 함수, keyword, name, parameter, body, argument, 매개변수 = 인자, 인수 = 전달인자, typeof, 자료형 변환, 함수 선언식, 함수 표현식, 화살표 함수, 선언, 호출, 변수명 작성 규칙, 화살표 함수 작성 규칙, return

3. 키워드를 바탕으로 학습 내용 설명해보기

• DOM과 자바스크립트의 역사에 대해 수업에서 들을 대로 간략하게 정리해보자.동적인 구현을 자바스크립트가 대신 맡으니 통신 요청이 적어지면서, 통신비 문제도 해결되었고 속도도 빨라졌다. 이 자바스크립트의 개발로 넷스케이프사는 어마어마한 돈을 벌게 된다. 이런 넷스케이프사의 성공을 눈여겨보던 다른 회사들은 앞다투어 웹 브라우저를 개발하게 되고… 많은 수의 브라우저들이 등장한다. 이름하여 브라우저 전쟁 시대! 문제는 이 브라우저들마다 자바스크립트를 자기들 입맛에 맟춰 사용하다보니, 자바스크립트가 브라우저끼리 호환이 안 되게 되어버렸다는 것이다. 즉 개발자들은 브라우저마다 같은 기능을 하는 코드를 다시 짜야했다. 이 사태의 최대 피해자인 개발자들(특히 웹 개발자들)은 이 사태를 해결하기 위해 ‘표준 규칙'을 만들게 된다. 그게 바로 현재의 ECMAScript다. (ES5, ES6의 ES가 바로 이 ECMAScript의 약자다. 특히 ES6에는 많은 규칙들이 변하면서 하나의 변곡점으로 취급을 받는다.)🤔❓ DOM도 규칙이라고? DOM이 정확히 뭔데?
• DOM 은 HTML 문서의 계층적 구조와 정보를 표현한 것으로, HTML 문서 요소를 조작하기 위한 프로퍼티와 메서드를 제공하는 트리 자료 구조라고 할 수 있다. 브라우저는 DOM이라는 규칙을 사용해 HTML 파일을 랜더링한다. 현재 개발자들도 이 규칙과 기준에 따라 웹을 구현하고 있다.
• 웹을 빌드하기 위한 3가지 규칙이 생겼는데, 1) ECMAScript, 그리고 web API(개발자용 인터페이스)인 2) DOM 과 3) BOM 이다. DOM 은 문서 객체를 다루기 위한 속성과 메서드를 제공하는 API 이고, BOM 은 브라우저 객체를 다루기 위한 속성과 메서드를 제공하는 API다.
• 옛날 옛날 상업용 브라우저는 넷스케이프라만 존재했을 시절. 당시 정적인 웹에서 움직이는 인터렉티브한 웹을 만들고자하는 시도가 있었다. 그래서 내 컴퓨터와 웹 페이지 서버 사이에 ‘모뎀’이라는 걸 연결해서 서버 통신을 할 수 있게 해줬는데, 동적인 변화가 필요할 때마다 모뎀을 통해 서버와 통신해야하니 통신비도 매우 많이 나왔고 시간도 오래 걸렸다. 이에 넷스케이프사는 **‘이 동적인 요소를 구현할 때, 굳이 모뎀을 통해 서버와 통신할 게 아니라 웹 브라우저 내에서 처리할 수 있으면 통신비도 저렴해지고, 속도도 빨라지지 않을까?’**라는 생각을 하게 되었다. 그래서 만들어진 게 바로 자바스크립트다.
• 오늘 스터디에서는 짱짱 천재이신 컴공 전공 팀원님의 기초 컴퓨터 지식 강의가 있었다. 내용을 잊어버리기 전에 후다닥 정리해본다.만약 재할당을 하면 어떻게 될까. x = '안녕' 이렇게 x 변수에 재할당을 시켜주면 기존의 1번 주소에 저장된 10이라는 값을 '안녕' 으로 바꾸는 게 아니라 새로운 주소의 메모리에 '안녕' 이라는 값을 저장한다. 그리고 변수와 주소를 맵핑하는 공간에서 새로운 주소를 변수에 맵핑한다. 기존의 10 이라는 값은 사라지지 않았다. 다만 변수와의 참조가 끊겼을 뿐.가비지 컬렉터는 참조하고 있는 값이 있으면 메모리를 해제하지 않아서 그 변수의 값을 계속 기억하고 있다. 그래서 클로저 현상이 일어나는 것이다. 다만 이렇게 해제하지 못하는 메모리가 많아질 수록 퍼포먼스 저하가 오는 것은 당연한 일.
• 이렇게 참조가 끊겨 더이상 사용되지 않는 값이 저장된 메모리 공간을 가비지 컬렉터 가 해제한다. 즉 안 쓰는 데이터가 있는 저장 공간을 비워줘서 다시 사용할 수 있게 만드는 것이다. 다른 언어는 이 메모리 해제를 개발자가 직접 해줘야하는 경우가 많은데 자바스크립트는 자동으로 알아서 비워준다고 한다.
• 먼저 변수에 대한 설명. let x = 10 이렇게 코드를 짜면 컴퓨터에서 어떤 일이 벌어질까? 우선 x 라는 변수가 선언되면 변수와 주소를 맵핑시켜주는 특수한 공간에서 x : 1번 주소 이렇게 주소와 연결된다. 그리고 다른 메모리 공간에서 10이란 값은 이 1번 주소의 메모리에 저장되는 것이다. 선언하는 공간(변수와 주소 맵핑)과 할당(메모리 주소에 값을 저장)하는 공간이 따로라는 것을 인지해야한다. (여기서 말하는 특수한 공간에는 이렇게 변수와 주소가 맵핑된 정보들이 모여있다.)
• 그리고 간단하게 CPU, RAM(메모리), 하드디스크에 대한 설명도 해주셨다.
• 쉬운 비유를 들자면 CPU 는 요리사고, RAM 은 주방, 하드디스크는 식량창고다. 그런데 이 식량창고는 좀 멀리 있어서, 요리를 하려면 식량창고에서 사용할 식량을 챙겨 주방으로 가져와야한다. 여러 파일이 담겨있는 하드디스크(식량창고)에서 내가 실행할 프로그램을 가져다가 RAM(주방)에 올려놓아야 CPU가 연산(요리)를 할 수 있다.
• 주방은 요리할 때 잠깐만 쓰기 때문에 사용하고 나면 재료들을 치운다. 주기억 장치인 RAM은 CPU 연산을 위해 잠깐의 기억만 가지고 있고, 계산한 결과를 보조 기억장치인 하드디스크에 저장한다. 그래서 RAM은 휘발성 메모리다. 또한 흔히 말하는 다다익램 이라는 말도 이렇게 이해할 수 있다. 주방이 크면 ‘탕수육' 재료뿐만 아니라 ‘깐풍기' 재료도 미리 올려놓고 요리할 수 있다. 즉 한 번에 많은 연산을 하드디스크에 접근하지 않고 해치울 수 있기 때문에 속도가 빨라지는 것이다.
• 방장님이 해주신 암묵적 형 변환에 대한 추가 설명도 좋았다. 자바스크립트는 자료형이 다른 데이터를 연산을 해도 웬만해서는 암묵적 형변환을 해서 에러가 안난다. 그 이유가 자바스크립트가 암묵적 형변환이라도 해서 웹 페이지가 최대한 안죽으려고 발악을 하기 때문인 것 같다고 하셨는데, 완전 비유가 찰떡이었다! 웹페이지가 자꾸 죽으면 사용자가 사용하기 불편하니까 우리 자바스크립트가 엄청 노력하고 있는 것이었구나...여튼 그런 의미에서 자바스크립트는 무척 유연하면서도 원칙에 예외가 많은 언어인듯 하다.
• 그리고 기타 공부 메모들
  • input 안에 쓰여진 값 가져오기 - value 속성 이용 elPwInput.value
  • input이나 button 같은 인터렉티브한 요소를 제외하고는 focus 가 먹지 않는다. 비 인터렉티브한 요소에 focus 효과를 먹이려면 해당 요소에 tabindex = “index” 속성을 넣어줘야한다. tabindex 를 넣어주면 tab 을 눌렀을 때 index 순서대로 focus가 먹는다.
  • 자식이 focus 되었을 때 부모도 효과를 받고 싶다면 :focus-within 이라는 가상클래스 선택자를 사용하면 된다. 단, IE는 지원하지 않는다.
• a 태그나 버튼 태그는 부모로부터 텍스트 속성들을 상속받지 않는다. 따로 line-height 같은 속성들을 적용해줘야 한다? user-agent 속성이 우선순위가 더 커서 그런가? 더 알아보기…