본문 바로가기

웹6

[JavaScript] 구조 분해 할당 1. 구조 분해 할당 Destructuring Assignment 구조 분해 할당은 배열의 요소나 객체의 Property를 말 그대로 분해해서 각 변수에 할당하는 문법이다. 기존 배열이나 객체에 저장된 데이터 중 일부만 필요한 경우에 활용할 수 있는 문법이다. 먼저 배열의 요소를 분해해서 할당하는 방법부터 알아보도록 하겠다. ① 배열, 구조 분해 할당 (1). 배열 요소를 각 변수에 분해 할당하기 const colors = ["Red", "Green", "Blue"]; let [c1, c2, c3] = colors; console.log(`c1 : ${c1}`); //c1 : Red console.log(`c2 : ${c2}`); //c2 : Green console.log(`c3 : ${c3}`); /.. 2024. 1. 9.
[React] React Component 생성법 1. React Component 2. React.createElement() 3. JSX ① JSX ② JSX 코드에 JavaScript 추가하기 1. React Component React는 사용자 인터페이스 User Interface, 속칭 UI를 만들기 위한 JavaScript 라이브러리로 React로 개발한 웹 페이지는 여러 개의 Component를 조합해서 만들어진다. 여기서 Component란 '구성요소', '부품'이라는 의미를 가지고 있다. 이를 참고해서 React에서 Component는 UI를 만들기 위한 구성 요소 및 부품이라고 할 수 있다. 이해를 돕기 위해서 React로 개발된 웹 페이지 하나를 예시로 가져와봤다. https://www.instagram.com/ Instagram w.. 2024. 1. 5.
HTML 문서가 브라우저에 랜더링되는 과정 1. 랜더링 Rendering의 정의 HTML, XML과 같은 Markup 언어로 작성된 문서를 chrome이나 Firefox와 같은 웹 브라우저에서 열면 해당 브라우저의 엔진 (Chrome = Blink, Firefox = Gecko)이 사람의 눈으로 볼 수 있는 형태로 변환해 준다. 이때 Markup 언어로 작성된 문서를 사람의 눈으로 볼 수 있는 형태로 변환해 주는 과정을 랜더링 Rendering이라고 한다. 2. 웹 문서가 브라우저에 랜더링 되는 과정 프로그래밍에서의 랜더링 Rendering이 무엇인지 간단하게 알아봤으니 이제 본격적으로 웹 문서가 브라우저에 랜더링 되는 과정에 대해 다뤄보도록 하겠다. 아래 HTML 문서, 웹 페이지를 구글 크롬과 같은 웹 브라우저로 연다고 가정해 보자. 아래는 .. 2023. 12. 18.
라이브러리, 프레임워크, UI 0. 개요 우리가 게시판 형태의 웹 사이트를 만든다고 가정해 보자. 게시판을 만들 때 구현할 기능으로는 회원 가입, 게시글 작성, 게시물 목록 표시 등이 존재하고 이를 구현할 때 모든 기능을 처음부터 끝까지 만들 수도 있고 아니면 일부 기능은 다른 사람이 만들어둔 부품, 소프트웨어를 가져오고 그걸 잘 조합해서 우리가 원하는 형태의 웹 페이지로 만들 수도 있다. 여기서 웹 페이지를 만들 때 활용했던 다른 사람이 만들어놓은 부품, 소프트웨어로 라이브러리 Library와 프레임워크 Framework를 예로 들 수 있다. 이번에는 라이브러리 Library와 프레임워크 Framework의 정의를 먼저 다루고 추가적으로 UI, 사용자 인터페이스의 정의에 대해서도 정리해 봤다. 바로 본론으로 들어가도록 하자. 1. .. 2023. 11. 15.
[HTML] <a> 요소 1. 태그 ① 태그의 정의 - a => anchor의 약어, '닻', '정박지'라는 의미를 가지고 있다. - 같은 문서 내에서 혹은 다른 문서로의 이동을 위해서 사용되는 태그로 인라인 요소를 만드는 인라인 태그이다. - 'href' 속성을 통해서 문서 내의 특정 위치, 파일, 이메일 주소 등 다른 URL로 연결된 하이퍼 링크를 만들 수 있다. 하이퍼 링크(Hyperlink) 클릭하면 현재 문서 내에서 특정 부분으로 이동하거나 혹은 다른 문서로 이동할 수 있는 수단 줄여서 '링크'라고도 한다. - 'target' 속성을 통해서 현재 문서에서 새로운 문서로 이동할 때 새로운 문서를 현재 탭에서 열지 아니면 새로운 탭에서 열지에 대한 여부를 설정할 수 있다. ② href 속성 - href => Hypertex.. 2023. 3. 29.
[CSS] 선택자 1 (기본, 그룹 선택자) 목차 1. 선택자 ① 선택자의 정의 ② 기본 선택자 (전체, 태그, Class, ID) (1). 전체 선택자 (Universal Selector) (2). 태그 선택자 (Type Selector) (3). Class 선택자 (Class Selector) (4). ID 선택자 (ID Selector) ③ 그룹 선택자 2. 마치며 1. 선택자 (Selector) ① 선택자의 정의 - 웹 페이지의 HTML 요소를 대상으로, CSS 스타일을 지정하려고 할 때 사용된다. (이번 장에서는 CSS 스타일을 지정하는 선택자 중 '전체', '태그', 'class', 'id', '그룹' 다섯 가지만 다루고, 나머지 선택자들은 추후에 다루도록 하겠다.) - 선택자에 의해 선택된 요소들은 '선택자의 주체'로 지정된다. [in.. 2023. 3. 24.

티스토리툴바