Front-end 8

타입스크립트 변수 Types

전 글에서 타입스크립트를 소개 할 때 타입스크립트가 가진 가장 큰 장점 중 하나는 Type을 선언하는 거라고 했습니다. 그러면 그 Type은 어떤 종류가 있을까요? Explicit Type: Boolean, Number and String 다른 프로그래밍 언어를 배웠다면 익숙한 Type 종류들 일겁니다. 타입스크립트은 이 세가지를 이용해서 Explicit 타입을 선언할 수 있는데요. Boolean은 말 그대로 true 혹은 false를 나타내는 type Number는 숫자 String은 문자열을 나타냅니다. 코드는 아래와 같이 작성할 수 있습니다. let college: string = "University of Minnesota"; let year: number = 2022; let binary: nu..

TypeScript와 JavaScript의 차이점

타입스크립트란? 타입스크립트는 마이크로소프트에서 개발한 언어로 자바스크립트의 상위 집합(superset)으로 정의됩니다. 이 말이 무슨 말이냐면 자바스크립트의 문법을 사용할 수 있을 뿐만 아니라 타입(Types)을 개발자들이 정의해서 사용할 수 있게 만들어줍니다. 그러면 왜 타입스크립트를 사용할까요? 자바스크립트는 기본적으로 변수의 타입(Type)이 정의가 안 되는 loosely typed lanuage이 입니다. 그래서 자바스크립트를 가지고 코딩을 하다 보면은 변수가 어떤 타입으로 정의되어있는지 이해가 어려운 경우가 많은데요. 사실 저는 이런 점을 굉장히 편한다고 생각을 했었는데, 개발 규모가 커지고 다른 사람이 쓴 코드를 봐야 되는 경우가 많을 때 굉장히 불편하게 다가오더라고요. 특히나 함수의 매개변..

웹 접근성(Accessibility) with HTML

이 글에서는 웹 접근성과 HTML을 활용한 웹 접근성을 알아볼 예정입니다. What is Web Accessibility? 웹 접근성을 얘기할 때는 말 그대로 모든 유저가 "웹 사이트를 이용할 수 있는가"를 얘기합니다. 비장애인 분들은 사이트를 이용하실 때 큰 불편함이 없으시겠죠. 하지만 장애가 있으신 분들 혹은 고령자 분들이 웹 사이트를 이용할 때 부분적으로 한계가 있습니다. 그런 부분을 고려해서 모두가 웹사이트를 이용할 수 있게 하는 방법을 얘기합니다. What should we consider for web accessibiltiy? 웹 접근성을 고려해서 코딩을 할 때는 크게 6가지 사항을 고려하셔야 합니다. auditory (청각) cognitive (인지) neurological (신경) phy..

Front-end/HTML 2020.04.24

폼(Form)과 유효성 검사

What is Form? HTML 에서 이라는 요소는 사용자에게서 얻은 정보를 모으기 위해서 사용됩니다. 예를 들어서 네이버에 접속을 하시게 되면 아이디와 비밀번호를 입력하는 창이 있습니다. 사용자한테서 입력하는 그 공간이 으로 이루어져있다고 생각하시면 됩니다. 이렇게 입력된 정보들은 웹 서버와 웹 프로그램을 거쳐서 나중에 사용자가 보고 있는 브라우저에 결과물을 보여줍니다. HTML Form elements HTML Form에는 다양한 종류의 elements들일 존재하는데요. 그 중 몇 가지를 예시로 알아보겠습니다. The Element 은 폼 요소들 중에서 가장 중요한 요소로 여겨집니다. 또한 여러가지 속성을 가지고 있는데 그 속성에 따라서 다양하게 보여집니다. Text Fields Radio Butt..

Front-end/HTML 2020.04.21

의미론적(Semantic) 태그

What are Semantic Elements? 의미론적 태그들은 웹 브라우저나 개발자들에게 명확하게 의미를 묘사하는걸 뜻합니다. , , 같은 요소들은 의미론적인 태그들로 여겨지게 됩니다. 왜냐하면 이 태그들 안에 있는 컨텐츠들을 정확하게 묘사하는 것 자체가 목적이기 때문이죠. 사실 Semantic tag가 없어도 코드가 돌아가기는 합니다. 하지만 브라우저나 개발자가 그 코드를 읽고 해석할 때 Semantic tag가 있냐 없냐에 따라서 그 코드의 의미가 다르게 다가 올 수도 있죠. 그래서 코드를 짤 때 정확하게 의미를 부여하는게 중요합니다. Semantic Elements in HTML HTML Element 태그는 문서 안에 section을 정의하는데 사용됩니다. 다시 말해서 본문을 넣는다고 생각하..

Front-end/HTML 2020.04.20

HTML 첫 걸음

What is HTML? HTML이란 Hypertext Markup Language의 약자로서 인터넷 문서인 웹 문서를 만드는 마크업 언어입니다. How is HTML different than other languages? 엄밀히 말하자면 HTML은 프로그래밍 언어가 맞습니다. 하지만 HTML은 선언형 언어에 속한다고 합니다. 선언형 언어가 무엇이냐면 웹 페이지에 "뭐가 있어야 돼!"라고 선언하는 기초적인 언어라고 합니다. HTML의 이름에서 보이듯이 Markup은 "태그"라는 것을 사용해서 프로그래밍을 하게 됩니다. 위에 사진에서 보듯이 , , 등 다양한 태그로 문서를 작성하게 됩니다. HTML Basic Examples HTML Documents 지금 F12를 눌러서 HTML이 만들어진 코드를 살펴..

Front-end/HTML 2020.04.19

호스팅은 무엇일까요?

What is Web Hosting? 웹 호스팅이란 개인이나 기관이 홈페이지를 운영하려고 할 때 서버 컴퓨터가 없는 사람들을 위해서 홈페이지 공간을 임대로 빌려주는 서비스를 말합니다. 웹 호스팅 서비스를 제공하는 업체는 웹사이트와 관련된 데이터를 서버에 저장하고 임차인의 홈페이지가 인터넷과 연결될 수 있도록 기술력을 제공합니다. 웹 호스팅의 장점으로는 저렴한 가격으로 자신의 홈페이지를 운영할 수 있다는 것과 서버 관리에 대해서 전혀 신경을 쓸 필요가 없다는 것입니다. 후자인 부분은 단점으로도 작용을 할 수가 있는데 서버에 문제가 생겼을 때 홈페이지의 주인이 에러를 건드릴 수 있는게 아니라 업체에서 제어를 해야하기 때문에 단점으로 작용할 수 있습니다. Common features you could expe..

Front-end 2020.04.19

도메인 네임은 무엇일까요?

Domain Name을 사전에서 찾아보면 "인터넷상에서 개인이 소유하고 있는 인터넷 주소의 이름"이라고 나옵니다. 한 마디로 말해서 website name이라고 생각하시면 편할 것 같아요. 저희가 홈페이지를 찾아갈 때 컴퓨터는 여러개의 숫자로 이루어진 IP 주소를 사용합니다. 그리고 이 IP 주소는 숫자들로 구성되어 있죠. 사람이 이 숫자들을 항상 기억하고 입력하기에는 어렵기 때문에 이 Domain names가 개발되었다고 합니다. IP addresses를 사용하는 대신 간단한 domain name을 사용하는 것이지요. 예를 들어 youtube.com에 접속할 때 youtube.com은 domain name이라고 하는 것이고 youtube.com에는 따로 IP 주소가 있는 것이죠. The Composit..

Front-end 2020.04.17