웹언어 (191) 썸네일형 리스트형 [HTML5] 23강 data-* 사용자 정의 속성 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/xXN2jMb0eCg 1. data-* Attribute - 사용자 정의 속성 - 원래 HTML에서 태그에 제공되는 속성은 지정되어 있는 것만 사용할 수 있었습니다. - 그러다 보니 개발자들이 불편하다고 의견이 나오기 시작했죠. - 그래서 W3C는 개발자들이 사용자 정의 속성을 만들 수 있게 처리합니다. - 개발자가 임의적으로 속성을 만들어서 사용할 수 있게 하는 것입니다. - 하지만 기존 속성과 겹치면 안 되겠죠? 그렇기 때문에 앞에 [ data-영문 ]로 접두사를 반드시 붙여야 합니다. ## 문법 - [ data-* ] 속성은 전역 속성이며, 모든 HTML 요소에 사용할 수 있습니다. - 속성이름에는 대문자가 포함.. [JSON강좌] 4강 JSON parse() 메서드 - 오쌤의 니가스터디 1. JSON.parse( ) - JSON을 사용하는 이유는 웹 서버와의 데이터를 교환하는 것입니다. - 웹 서버에서 데이터를 수신할 때 데이터는 항상 문자열입니다. - data를 분석하는 것은 JSON.parse( )를 사용합니다. 그래야 자바스크립트 객체로 데이터가 바뀝니다. 1) JSON 순수 데이터 타입 알아보기 ## 예시 JSON 데이터 '{ "name" : "진", "age" : 31, "birth": 1992 }' - 웹 서버에서 이런 데이터를 가져왔다고 보도록 하겠습니다. - 결국 데이터는 큰 문자열로 담겨서 오게 됩니다. ## JSON 데이터 타입 알아보는 코드 보기 - 경고창에 JSON 데이터 타입을 알아보겠습니다. ## JSON 데이터 타입 알아보는 결과 보기 - 결과에 [ strin.. [JSON강좌] 3강 JSON 데이터 유형 - 오쌤의 니가스터디 - 첫 번째 강좌에서 문법을 설명하면서, 데이터 유형에 대해 언급한 적이 있습니다. - 이번 강좌에서 데이터 유형을 더 디테일하게 보도록 하겠습니다. - JSON 값은 다음 데이터 유형 중 하나여야 합니다. 문자열 숫자 객체 배열 true/false null 1. JSON 문자열 - JSON의 문자열 값은 큰 따옴표로 묶어야 합니다. ## 예시 { "name" : "진" } 2. JSON 숫자 - JSON의 숫자는 따옴표 내에 적지 않고, 정수 또는 부동 소수점이어야 합니다. ## 예시 { "age" : 31 } 3. JSON 불(Boolean) - 불은 보통 결과가 true/false로 나오는 표현식을 의미합니다. - 하지만 JSON의 불은 true 와 false를 키워드로만 작성해주면 됩니다. - 그.. [JSON강좌] 2강 데이터형식 비교(JSON VS XML) - 오쌤의 니가스터디 - 컴퓨터 프로그래밍 언어에서 데이터를 서버에서 수신할 때 사용되는 형식은 크게 3가지가 있습니다. - JSON, XML, CSV입니다. - 이번 강좌에서는 3가지 형식을 비교해보는 시간을 갖도록 하겠습니다. 1. CSV - CSV는 Comma Separated Values의 약자로 각 항목을 쉼표로 구분해서 데이터를 표현하는 방법입니다. - 용량이 적고, 간단해 보이지만 각 데이터가 무엇을 의미하는지 알기가 어렵습니다. ## 문법 value1, value2, value3,... - 위에 보이는 것과 같이 값을 쭉 나열해서 사용하면 됩니다. - 엑셀에서도 csv형식으로 내보낼 수 있어 편리하게 사용될 수 있습니다. ## 코드 예시 - 이번엔 코드 예시라기보다는 엑셀로 쉽게 CSV를 만들 수 있다는 것을 .. [JSON강좌] 1강 JSON 소개와 문법 - 오쌤의 니가스터디 1. JSON 소개 - JSON은 JavaScript Object Nation의 약자입니다. - 자바스크립트에서 객체 표기법을 나타내는 것을 의미합니다. - 표기법만 자바스크립트에서 파생되었을 뿐 자바스크립트가 아닌 경량 데이터 교환 형식입니다. - 많은 언어들이 데이터 저장 및 전송을 하기 위한 용도로 사용하는 텍스트 형식의 데이터입니다. - 서버에서 순수 텍스트를 받아 Javascript 객체로 사용할 수 있습니다. - 다른 데이터 형식으로는 XML과 CSV가 있습니다. 이건 다음 강좌에서 다뤄보도록 하겠습니다. 2. JSON 구문 1) JSON 문법 - JSON구문은 Javascript 구문의 하위 집합입니다. - 데이터는 이름/값 쌍으로 이루어져야 합니다. - 데이터는 쉼표로 구분됩니다. - 중괄.. [ES6강좌] 8강 반복문 - for of - 오쌤의 니가스터디 1. for of 구문 - [ for of ] 구문은 ES6부터 추가된 반복문입니다. - 공식적으로 된 설명을 보면 반복 가능한 객체의 값을 반복한다고 되어 있습니다. - array, string, map, NodeList 등을 반복할 수 있습니다. - 이 외에도 [ for in ] 구문이라고도 있죠? 그 구문과 비교해서 보도록 하겠습니다. ## for of 문법 for(let value of object){ //code } - 그러니까 결국 [ for of ]구문은 객체나 배열의 값을 반복해서 반환합니다. ## for in 문법 for(let key in object){ //code } - 하지만 [ for in ]구문은 객체나 배열의 키(key)를 반복해서 반환합니다. - 2개의 차이는 아래 예시로 .. [Svelte강좌] 9강 Bindings - input요소 - 오쌤의 니가스터디 1. 바인딩(Binding)이란? - 바인딩은 상태 값과 그 값을 제어하는 요소와의 결합을 의미합니다. - 보통 데이터를 입력하는 다양한 폼(input, select, textarea 등)과 함께 사용됩니다. - svelte는 양방향 바인딩을 이용해서 동시에 값이 변경되게 처리됩니다. - 지난 [ 7강 if block ]에서 입력 상자에 값을 입력하면 반환되는 것을 [ keyup ] 이벤트를 통해 강제로 발생시켰는데, 사실 그렇게 작업할 필요가 없이 svelte는 바인딩이 잘 되어 있습니다. - 바인딩은 다른 요소와 컴포넌트에도 가능하지만 이번 강좌에서는 form관련 바인딩만 보도록 하겠습니다. ## 문법 - 보통 위의 형태로 작성한다고 보면 됩니다. 1) input text value 바인딩 - 입력상.. [Svelte강좌] 8강 Logic - each blocks - 오쌤의 니가스터디 1. each block(반복 블록) - 컴퓨터 프로그램을 이루는 요소 중 대표적인 구문이 바로 조건문과 반복문입니다. - 기본적으로 HTML은 위에서 말한 두 구문이 없지만, 자바스크립트는 두 구문을 가지고 있습니다. - 지난 강좌에서는 조건문을 봤고, 이번 강좌에서는 반복문을 보도록 하겠습니다. - 반복은 컴퓨터가 제일 잘하는 일입니다. 마크업 영역에서 정말 반복할 일이 많습니다. - 예를 들어, 쇼핑몰 같은 경우 상품이 정말 많죠? 그리고 넷플릭스도 보면 영상 관련 정보가 정말 많습니다. - 하지만 HTML은 조건문과 마찬가지로 반복문을 처리할 수 있는 기능이 없습니다. - svelte에는 그래서 [ each block]을 사용합니다. 1) 기본 each block - 기본적인 반복 구문부터 확인해.. 이전 1 2 3 4 5 6 ··· 24 다음
