웹 개발4 [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. [TypeScript] TypeScript 설치 목차 1. Node.js 설치 ① node, npm 버전 체크 ② Node.js 설치하기 (1) / LTS 버전과 Current 버전 ③ Node.js 설치하기 (2) 2. TypeScript 개발 환경 세팅 ① 프로젝트 폴더 생성 / package.json 파일 생성 ② TypeScript 설치 ③ ts-node 설치 ④ tsconfig.json 파일 생성 ⑤ TypeScript 예제 생성 및 컴파일 3. Reference 1. Node.js 설치 ① node, npm 버전 체크 Node.js를 설치하기 전에 먼저 내 컴퓨터에 node와 npm이 설치된 상태인지를 확인해야 한다. [시작] 메뉴에서 [Windows 시스템] 폴더 내부에 있는 '명령 프롬포트' 프로그램을 실행하고 아래의 명령어를 입력해 보.. 2023. 9. 9. 이전 1 다음
