Dev. Handbook/Javascript10 [JSON] JSON 활용하기 - JavaScript 로 JSON 다루기 JSON은 여러 프로그래밍 언어에서 활용할 수 있습니다. 기본적으로 웹 개발에서 JavaScript로 다루는 경우가 많고, Node 환경이나 React 등의 JavaScript 기반의 언어에서 자주 활용하고 있으므로 JavaScript에서 다루는 방법을 소개합니다. 1. JSON 객체 JavaScript는 표준 내장 객체를 가지고 있습니다. 표준 내장 객체(Standard Built-in Object)란 JavaScript 엔진에 기본으로 포함되어 있는 객체입니다. JavaScript(ECMAScript) 기술 개요를 알아보려면 아래 링크를 정독하면 좋습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/JavaScript_technologies_over.. 2023. 11. 13. [JSON] JSON 이해하기 - 1. JSON 기본 : 개요, 특징 및 장단점, 구조 웹 개발을 하면서 정말 생각 없이 사용하게 되는 것이 JSON 인 것 같습니다. 무지성으로 사용해 오다가, 한 번 정리가 필요한 것 같아서 여러 글들을 읽어보면서 정리했습니다. 1. JSON 개요 JSON(JavaScript Object Notation)의 약자입니다. JSON은 사람이 읽기 쉬운 텍스트 기반의 개방형 데이터 교환 형식의 일종입니다. 처음에는 JavaScript에서 출발하여 JavaScript의 구문 형식을 따르지만 프로그래밍 언어와 플랫폼에 독립적입니다. 과거에는 의미 있는 데이터 전달을 위해 XML 형식을 사용했지만, 가독성이 떨어지고 중첩되는 태그 덕분에 불필요한 데이터가 많아 용량이 커지는 단점이 있습니다. 이를 해결한 것이 JSON입니다. 사람이 읽기 편리하며, 비교적 복잡한 구.. 2023. 11. 4. [JavaScript] 데이터 타입(data type)과 형 변환(Type Conversion), Implicit coercion vs Explicit coercion 1. JavaScript 데이터 타입 1.1 동적 타입(dynamic type) JavaScript(JS)는 느슨한 타입(loosely typed)의 동적(dynamic) 언어다. JS의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당(및 재할당)이 가능하다. let foo = 42 // number foo = 'barr' // String foo = true // boolean 1.2 데이터 타입의 종류 JS에서 데이터 타입은 원시 값(Primitive values)과 객체(Object)로 나뉜다. 원시 값(Primitive values) - 객체(Object)를 제외한 모든 타입은 불변 값(immutable value : 변경할 수 없는 값)이다. - JS에서는 String도 원시.. 2023. 2. 25. [Javascript] ES5+ 기초강의 7 - JavaScript에서 Obejct 1. JavaScript에서 Object Object는 JavaScript 데이터 타입의 하나 Object와 관련된 data and funcationality의 집합 object = { key : value }; JavaScript에서 거의 대부분의 ojbects는 instances of Object이다. 1.1 Literals and Properties Object 사용 전 Object 없이 Primitive 데이터 타입으로 Object 구현 시 문제점 - 데이터를 각각 선언해야 함 - 새로운 값을 추가할 경우에 데이터의 관리가 힘듦 - 관련 함수 구현 시 각각을 파라미터로 전달해야 해서 함수 선언 및 호출에서 수정이 발생 function print(name, age) { console.log(name.. 2022. 7. 4. [Javascript] ES5+ 기초강의 6 - class vs object, 객체지향언어 1. Class, Object, JavaScript class Class 란 - 실 세계의 물건들을 속성과 행동으로 정의한 것 - filed와 method를 묶어주는 컨테이너 - field : 속성 - method : 행동 - template - 한 번만 선언 - 실제 데이터는 없음 : no data in Object (instance) - class가 실체화한 것 : instance of a class - 여러 개를 만들 수 있음 - 실제 데이터를 가지고 있음 : data in class : template (템플릿) object : instance of a class (템플릿의 실체화) JavaScript Class ES6에서 추가됨 클래스가 도입되기 전에는 object를 바로 생성할 수 있었음 sy.. 2022. 7. 1. [Javascript] ES5+ 기초강의 5 - Arrow Function? 함수의 선언과 표현 1. Function 프로그램을 구성하는 기본적인 블록. 서브 프로그램으로 여러 번 재사용할 수 있음. 한 가지 task(작업)이나 value(값)을 연산하는 역할을 수행. 1.1 Function declaration : 함수 선언 함수는 프로그램을 구성하는 기본적인 블록 하나의 기능을 수행하는 프로그램 블록을 하나의 함수로 작성 다수의 기능을 수행하는 이름으로 작성해야 한다면, 각각의 기능을 수행하는 함수로 나누고 기능에 맞는 이름을 변경. Javascript에서 함수(function)는 object 타입. // 1. Funtion declaration // funcation name(param1, param2, ...) { body... return; } // 하나의 function은 한가지의 일만 .. 2022. 6. 26. [Javascript] ES5+ 기초강의 4 - 연산자, 조건문, 반복문, 코드 리뷰 팁 1. 연산자 1.1 String concatenation : 문자열 연결 // 1. String concatenation console.log('my' + ' cat'); // 'my cat' console.log('1' + 2); // '12' // Grave Accent(`) 사용시 홑따옴표(')는 그냥 표시됨 console.log(`string literals: ''' 1 + 2 = ${1+2}`); // 'string literals: ''' 1 + 2 = 3' // 홑따옴표 사용(')하여 문자열 지정할 경우 // 문자열 중간에 홑따옴표는 (\')를 사용 console.log('ellie\'s book'); // 'ellie's book' // 쌍따옴표(")도 사용할 수 있다 // 특수문자는 백슬.. 2022. 6. 21. [Javascript] ES5+ 기초강의 3 - 데이터 타입, let vs var, hoisting 프로그래밍에서 가장 중요한 것은? - 입력, 연산, 출력, (전송) 연산 - CPU에 최적화된 로직을 사용한 연산 - 메모리의 사용을 최적화 1. 변수 (Variable) 1.1 변수 선언 및 값 할당 let name = 'ellie'; // let으로 변수(name)를 선언하고, // '=' 연산자로 변수에 값('ellie')을 할당. console.log(name); name = 'hello'; // 변수(name)에 값('hello')를 할당 console.log(name); 애플리케이션 실행 시, 애플리케이션에 메모리가 할당됨. 애플리케이션에서 사용할 수 있는 메모리는 제한이 있음. 1.2 Block Scope // 2. Variable // let (ES6에서 추가 됨) // 요즘은 ES6 이전.. 2022. 6. 20. [Javascript] ES5+ 기초강의 2 - Hello World!, Preparation, async vs defer 1. Hello Javascript! 1.1 node.js 에서 확인 // heloo javascript console.log('Hello Javascript!'); 위의 코드를 main.js로 저장하고 node.js를 이용하여 실행해봅니다. 실행은 소스파일이 있는 경로에서 실행해야 합니다. node.js 는 Javascript 엔진이 있어서 브라우저 없이 Javascript를 실행할 수 있습니다. node.js가 설치되어 있지 않다면 홈페이지에 접속하여 node.js를 설치합니다. https://dev-handbook.tistory.com/61 [nodejs] node.js 다운로드 및 설치 간단하게 Javascript 공부를 위해서 시작하다 보니 실습환경으로 node.js를 요구하고 있어서 급하게 다.. 2022. 6. 16. [Javascript] ES5+ 기초강의 1 - 자바스크립트의 역사와 현재 그리고 미래 한 번은 봐 두면 좋은 콘텐츠입니다. 1. JavaScript 역사 1994년 9월 - Netscape사에서 Brendan Eich가 LiveScript를 개발하고, LiveScript를 이해할 수 있는 LiveScript Interpreter를 탑재한 Netscape 브라우저를 출시 1995년 - Java의 인기에 편승하기 위해 LiveScript의 명칭을 JavaScript로 변경하고 Javascript Interpreter를 탑재한 Netscape 브라우저 출시 1995년 - Microsoft사는 리버스 엔지니어링을 통해 Netscape의 JavaScript 엔진의 소스를 복원하여 자체적으로 엔진을 만들고 이를 JScript라고 명명함. - 동시에 이를 탑재한 Internet Explorer를 출시.. 2022. 6. 13. 이전 1 다음
