[JS] JavaScript DOM

단순 정보 전달만이 목적인 정적인 웹을 개발하려면 HTML, CSS로 충분하겠지만동적인 웹을 개발하기 위해서는 자바스크립트와 DOM은 필수이다. • DOM이란?Document Object Model의 약자로 해석하면 문서 객체 모델(Document = 웹 페이지 자체)HTML 요소에 접근할 수 있도록 API를 제공하는 일종의 인터페이스DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있음계층 구조로 표현됨 (트리 자료 구조로 구축)HTML 문서는 하나의 최상위 노드(root 노드)에서 시작해서 자식 노드들을 가짐(노드? -> root 노드를 포함한 하나하나 요소를 뜻함) • JavaScript와 DOM의 관계DOM = JavaScript 라고 오해할 수 있지만 아니다.DOM은 어..

• format_list_bulleted HTML,CSS,JS
• · 2023. 5. 16.
• textsms

JavaScript Hoisting(호이스팅)

• JavaScript의 변수 생성 단계 JavaScript에서는 3단계에 걸쳐서 변수를 생성함 선언(Declaration) 변수 객체를 생성하고 변수를 등록 스코프가 변수 객체를 참조 초기화(Initialization) 변수 객체 값을 위한 공간을 메모리에 할당 이 때, 할당되는 값은 undefined 할당(Assignment) undefined로 초기화된 변수에 실제 값을 할당 • Hoisting(호이스팅)이란? 코드를 실행하기 전, 변수/함수 선언을 해당 스코프의 최상단으로 끌어올려진 것 같은 현상 JavaScript의 독특한 특징 중 하나 컴파일 단계에서 코드 실행 전, 함수와 변수 선언을 스캔하고, 모든 함수와 변수 선언들은 스코프에 등록(메모리에 저장) JavaScript에서는 나중에 선언되는..

• format_list_bulleted HTML,CSS,JS
• · 2023. 5. 15.
• textsms

[WEB] PWA란?

PWA란?Progressive Web App의 약자HTML, CSS, JavaScript와 같은 웹 기술로 구현앱 스토어에서 설치하는 것 뿐만 아니라, 웹 기술만으로 앱과 같은 기능을 갖춤웹이지만 모바일 환경에서 설치가 가능하고, 앱과 유사한 사용자 경험을 제공해주는 웹 앱가장 대표적인 예시 - twitter.com보안상의 이유로 브라우저에서 접근하지 못하는 시스템 하드웨어와 소프트웨어에도 접근 가능네이티브 앱 vs PWA실행네이티브 앱은 설치를 해야 실행을 할 수 있지만PWA는 설치없이 브라우저에서 실행이 가능(설치도 가능)작성 방법네이티브 앱은 각 기기의 OS에 맞는 프로그래밍 언어로 개발(iOS - 스위프트, 안드로이드 - 자바)PWA는 HTML, CSS, JavaScript 사용배포네이티브 앱은 ..

• format_list_bulleted WEB
• · 2023. 5. 14.
• textsms

[WEB] CORS? 어떻게 해결하지?

웹 개발 시, 다른 도메인 서버에 있는 자원을 가져다 쓰거나 제공해주는 경우가 많음웹 브라우저는 HTTP 요청에 대해 각기 다른 특징을 가지기 때문에 CORS ERROR가 생김 CORS란?Cross-Origin Resource Sharing교차 출처 리소스 공유 (교차 출처 = 다른 출처)다른 출처의 리소스 공유에 대한 허용/비허용 정책 • 출처(Origin)?Origin = scheme + host + port- scheme(protocol) : http, https- host : 사이트 도메인- port : 포트 번호https://www.google.com/maps라는 주소에서 protocol = https, host = www.google.com, port = :443  • 동일출처(Same-Ori..

• format_list_bulleted WEB
• · 2023. 5. 10.
• textsms

[WEB] Node.js vs 브라우저 환경

•  Node.js vs 브라우저Node.js- Node.js 공식 사이트에서는Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임라고 설명되어 있다.(런타임? -> 프로그래밍 언어가 실행되고 있는 환경) 쉽게 다른 버전의 JavaScript  또는 JavaScript 실행환경이라고 생각하자! 브라우저- 우리가 일상생활에서 검색을 하는 사이트에 접속할 수 있는 도구- HTML 문서, 이미지 등 여러 콘텐츠를 우리에게 화면으로 표현해줌- 웹 정보를 화면에 표시하는 소프트웨어• 둘 다 JavaScript를 실행시키는데, Node.js가 왜 나왔나?구글이 크롬 웹 브라우저의 베타 버전을 발표 -> V8 엔진 탑재V8 엔진은 이전의 개발되었던 다른 엔진들보다 속도가 빨..

• format_list_bulleted WEB
• · 2023. 5. 8.
• textsms

[WEB] Vue vs React

• 라이브러리 vs 프레임워크 FrameworkLibrary공통점다른 사람이 만들어 둔 코드차이점다른 사람이 만든 틀(Frame)안으로 들어가서 작업내 작업에 다른 사람이 만들어 둔 코드를 가져와서 사용하는 것Vue는 Framework임프레임워크는 모든 환경과 도구를 제공해주지만 그것들만 사용해야 함해당 기술을 새롭게 배워야 함 React는 JavaScript 라이브러리임라이브러리는 하나의 도구를 제공받는 것으로 우리가 원하는 내용 선택할 수 있음다른 도구들을 기본적으로 제공하지 않아서 개발자가 스스로 선택해서 조합해야 함• 코드 스타일조건에 따라 Button의 visibility 유뮤를 변경해주는 예제가 있다고 하자. React//&&연산자 사용 {isVisible && 조건에 따라 사라짐}//삼항 ..

• format_list_bulleted WEB
• · 2023. 5. 7.
• textsms