정리
-
TypeScript란?TypeScript 2020. 6. 25. 22:35
타입 스크립트(TypeScript)란? - 마이크로소프트(Microsoft)에서 개발하고 유지/관리하는 Apache 라이센스가 부여된 오픈 소스이다. - 일반 자바스크립트로 컴파일되는 자바스크립트 상위 호환으로 2012년 10월에 처음 릴리스 되었다. 타입 스크립트를 쓰는 이유? - Java나 C# 같은 타입이 명확한 강한 타입 시스템은 높은 가독성과 코드 품질을 제공하고, 런타임이 아닌 컴파일 환경에서 에러가 발생해 치명적인 오류들을 쉽게 잡아낸다. - 반면, 자바스크립트는 타입 시스템이 없으며, 변수 선언 시 문자열, 숫자, 불린 등 여러 타입의 값을 가질 수 있다. 이를 약한 타입 언어라고 부르며, 비교적 유연하게 개발할 수 있는 환경을 제공하지만 런타임 환경에서 쉽게 에러가 발생할 수 있는 단점을..
-
React - class 컴포넌트React/기본 2020. 6. 22. 20:00
예전의 React에서는 class component가 중요한 역할을 맡았었다. 그러나 React 16.8.0 업데이트 이후에 Hooks이 추가가 된 이후에 함수형 컴포넌트에서도 LifeCycle API와 state 기능을 구현할 수 있어 이제는 잘 사용하지 않는다. 하지만, class형 component를 써야 하는 상황이 올 수 있기 때문에 정리가 필요하다. 1. import React, { Component } from "react"; - react 라이브러리에서 함수 또는 클래스를 import(확장)한다. - improt 문법은 JavaScript(ES6) 문법 중 하나로 export 된 다른 파일의 함수 또는 클래스를 불러와 사용할 수 있도록 하는 기능이다. 2. class ClassCompone..
-
React - React의 탄생React/기본 2020. 5. 17. 12:00
React의 탄생 React가 생기기 전에 순수 자바스크립트를 통해 브라우저를 관리해왔다. 하지만, 순수 자바스크립트만으로는 대규모의 웹 프로젝트를 관리하기가 어렵고, 성능도 많이 떨어졌다. 이러한 문제들을 해결하기 위해 시간이 지나고 수많은 라이브러리(ex. React)와 프레임워크(ex. Angular, Vue.js)들이 나오기 시작했다. 그중 우리가 공부할 리액트는 페이스북 개발 팀에서 개발한 것이며, 최대한 성능을 아끼고 편안한 사용자 경험을 제공하면서 구현하고자 만들어졌다고 한다. React와 다른 프레임워크의 차이 먼저, React와는 달리 Angular, Vue.js와 같은 프레임워크는 보통 MVC, MVW 아키텍처로 애플리케이션을 구조화한다. 이러한 구조들의 공통점은 모델(Model)과 뷰..
-
자바스크립트 - String타입JavaScript/기본 2020. 4. 22. 19:43
String 타입 자바스크립트의 String 타입은 텍스트 데이터를 나타내는데 사용한다. String의 각 요소는 String의 위치를 차지한다. 예를 들어, 첫 번째 요소는 0번 인덱스에 있고, 다음 요소는 1번, 그 다음 요소는 2번... 같은 방식이다. String의 길이는 String이 가지고 있는 요소의 개수이다. 문자 길이 배열의 길이를 알아낼 때, 쓰는 속성은 length라는 속성이다. 하지만, 문자인 String형도 length라는 속성으로 길이를 알 수 있다. 회원가입을에서 아이디나 이름이 10자가 넘어갔는지 체크하거나, 핸드폰 번호를 잘 못 입력했을 때 등 자주 사용하는 속성 중 하나이다. if (phoneNumber.length !== 10 && phoneNumber.length !=..
-
HTML - <a>태그와 속성HTML/HTML 2020. 2. 24. 00:27
오늘은 속성이라는 문법과 링크라는 HTML에서 가장 중요한 두 가지 기능을 알아보겠다. 태그는 링크를 걸고자 하는 즉, ~ 사이에 내용이 링크라는 사실을 브라우저에게 알려주는 태그이다. 하지만, a 태그만 쓴다고 해서 링크가 생기지는 않는다. 네이버로 이동 만약, 네이버가 링크라고 한다면? 이 링크가 어떤 웹 페이지에 연결되어야 되는지에 대한 바로 그 웹 페이지의 URL이 어딘가에 적혀 있어야 한다. 그 정보가 없기 때문에 브라우저는 아무런 행동도 하지 않는 것이다. 그럴 때, href 이라는 속성을 이용하면 링크를 걸 수 있다. 네이버 이렇게 입력하면, 이제야 링크가 걸리는 것을 알 수 있다. 이 링크를 클릭하면, 해당 홈페이지로 접속하는 것을 확인할 수 있다. 그런데, 만약 해당 홈페이지에서 접속하지..
-
자바스크립트 - 크롬 개발자 도구와 실습환경JavaScript/기본 2020. 2. 19. 21:28
이번 시간에 살펴볼 내용은 바로 크롬 개발 도구와 실습환경에 대해서 다뤄 보려고 한다. 가끔 파일에 직접 작성하는 게 귀찮을 때가 있다 그럴 때, 손쉽게 자바스크립트를 실행할 수 있는 방법을 소개하려고 한다. 일단 필자는 크롬을 기준으로 할 것이다. 우선, [F12] 키를 누르면 이렇게 [크롬 개발자 도구]가 화면에 보여진다. 그럼 여기서! 크롬 개발자 도구란 무엇인가? → 구글에서 만든 웹브라우저인 크롬에는 개발을 도와주는 다양한 도구가 기본적으로 제공한다. 이를 개발자 도구라고 하고, 이 도구를 이용하면 HTML, CSS, JavaScript의 생산성을 극대화할 수 있다. 이렇게 띄어진 화면 밑에 Console 창에 자바스크립트 코드를 작성하고 실행하면, 이렇게 경고창이 화면에 보인다. 이렇게 크롬 ..