전체 글 보기(34)
-
[TypeScript]-이넘과 인터페이스, 클래스
1. 이넘(Enum)이넘은 특정한 값들의 집합을 의미하는 자료형입니다.타입스크립트의 이넘에는 문자형 이넘과 숫자형 이넘이 존재하고 이 둘의 조합으로도 정의될 수 있습니다. 1-1. 숫자형 이넘enum Direction {Up = 1,Down,Left,Right}//Up - 1//Down - 2//Left - 3//Right - 4//초기 값부터 1씩 증가합니다//만약 초기 값을 주지 않으면 0부터 증가합니다위 코드에서 볼 수 있는 것처럼 초기 값부터 1씩 증가하지만, 임의로 값을 지정할 수도 있습니다.enum Color {Red = 1,Blue = 3,Green = 5}//수동으로 값 지정이 가능합니다1-2. 문자형 이넘문자형 이넘은 숫자형 이넘과 거의 비슷하지만 문자형 이넘은 값을 전부 다 특정 문자열..
2023.06.01 -
[TypeScript]-프로젝트 환경 구성
1. 프로젝트 폴더 생성mkdir typescriptcd typescript폴더를 생성한 뒤 프로젝트 폴더로 이동합니다.2. 프로젝트 초기화npm init -y프로젝트 폴더 내부에서 위 명령어를 실행해 초기화합니다.3. TypeScript 설치npm install typescript --save-dev초기화가 완료되었으므로 터미널에서 위 명령어를 실행해 TypeScript를 설치합니다.4. tsconfig.json 파일 생성compilerOptions 내의 속성은 자유롭게 수정할 수 있습니다.5. src 폴더 내에서 TypeScript 언어로 된 파일 작성
2023.05.30 -
[JavaScript]-Set 객체
1. Set 객체와 배열 Set 객체는 중복되지 않는 유일한 값들의 집합입니다. Set 객체는 배열과 유사한 점이 많지만 다음과 같은 차이가 있습니다. 구분배열Set 객체동일한 값을 중복하여 포함할 수 있다OX요소 순서에 의미가 있다OX인덱스로 요소에 접근할 수 있다OX또한 Set 객체는 수학적 집합을 구현하기 위한 자료구조이기에 Set를 통해 교집합, 합집합, 차집합, 여집합 등을 구현할 수 있습니다.Set 객체는 Set 생성자 함수로 생성하며 이 때 인수를 전달하지 않으면 빈 Set 객체가 생성됩니다.const set = new Set();console.log(set); // Set(0) {}Set 생성자 함수는 이터러블을 인수로 전달받아 Set 객체를 생성합니다. 이 때 이터러블의 중복된 값은 Se..
2023.05.05 -
[HTML5]-웹 표준과 웹 접근성
1. 웹 표준웹 표준이란 W3C(World Wide Web Consortium)에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙을 의미합니다. 사용자가 어떤 운영체제나 브라우저, 기기를 사용하든 웹페이지가 정상적으로 작동하고 동일하게 보일 수 있도록 하는 제작 기법을 가리킵니다. 2. 웹 표준의 장점2-1. 유지 보수의 용이성웹 표준에 따라 HTML과 CSS, JavaScript를 영역에 따라 구분할 수 있게 되었고, 각 영역에 해당하는 코드가 분리됨에 따라 유지 보수가 용이해졌고 코드가 경량화되면서 트래픽 비용이 감소하는 효과도 발생했습니다.2-2. 웹 호환성 확보웹 표준을 준수함으로써 웹 브라우저의 종류나 버전, 운영 체제나 사용 기기 종류에 구애받지 않고 항상 동일한 결과가 나오도록 할 수 ..
2023.04.29 -
[JavaScript]-DOM (문서 객체 모델)
1. What is DOM?DOM은 Document Object Model의 약자로, HTML 요소를 JavaScript Object처럼 조작할 수 있는 모델입니다.DOM은 웹페이지의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스입니다. 즉 자바스크립트와 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당합니다.만들고자 하는 웹 사이트가 단순하게 정보의 전달만을 목적으로 하는 정적인 웹이라면 HTML과 CSS만으로도 충분합니다. 하지만 그 이상의 동적인 기능을 구현하려고 한다면 자바스크립트와 DOM이 반드시 필요하게 됩니다.2. DOM의 구조DOM은 HT..
2023.04.28 -
[React]-JSX 문법
JSX?JSX는 JavaScript XML의 줄임말입니다. JSX는 React에서 UI를 구성할 때 사용하는 문법으로, JavaScript를 확장한 문법입니다.JSX는 브라우저가 바로 실행할 수 있는 코드는 아닙니다. JSX로 작성된 코드를 브라우저가 이해할 수 있는 JavaScript 코드로 변환해주는 과정이 필요한데, 이 때 사용되는 것이 바로 Babel입니다. Babel은 JSX를 JavaScript 코드로 컴파일해주고 브라우저가 변환된 코드를 읽고 화면에 렌더링할 수 있게 해줍니다.React에서는 DOM과 다르게 CSS, JSX 문법만으로 웹 애플리케이션 개발을 할 수 있습니다. 각각의 컴포넌트 구현을 위해 필요한 파일이 줄어들고, 한눈에 컴포넌트를 확인할 수 있죠. JSX를 활용하면 JavaS..
2023.04.22