AngeRay

서버통신의 시작_JSON 브라우저 위에서 동작하고 있는 웹사이트나 웹 어플리케이션과 같은 클라이언트들이 어떻게 서버와 통신할 수 있는지 정의한 것이 바로 http 이다. http는 hypertext transfer protocal 약자로서 어떻게 hypertext 를 서로 주고 받을수 있는지를 규약한 프로토콜의 하나이다. http는 클라이언트가 서버에게 데이터를 request 요청할 수 있고, 서버는 클라이언트가 요청한 것에 따라서 그에 맞는 response 응답을 클라이언트에 보내주는 이런 방식으로 진행되는 것을 의미한다. hypertext는 웹사이트에서 이용되어지고 있는 hypertext 링크들만 이야기 하는것이 아니라 전반적으로 쓰여지고 있는 리소스들... 문서나 이미지 파일들 이런 아이들을 다 포..

Array APIs & Array Function 'use strict' // Q1. make a string out of an array // 구분자 전달 가능 /** * Adds all the elements of an array into a string, separated by the specified separator string. * @param separator A string used to separate one element of the array from the next in the resulting string. If omitted, the array elements are separated with a comma. */ // join(separator?: string): string;..

Array 자료구조 중 하나인 array 자료구조란? 프로그래밍 언어에서도 비슷한 종류의 데이터들을 묶어서 한 데다가 보관해 놓고 이런것들을 자료구조 라고 한다. 자료구조에는 어떤 방식으로 어떤 형식으로 데이터를 담느냐에 따라서 굉장히 다양한 타입들이 있다. 자료구조와 object의 차이점 비슷한 종류의 데이터를 묶어놓은 것은 오브젝트라고 했다. 그렇다면 오브젝트와 자료구조의 차이점은 무엇일까? 오브젝트는 토끼와 당근이 될 수 있다. 토끼는 동물이고 귀가 2개인 properties가 들어 있을 수 있고 먹는다, 뛴다 라는 함수들 메소드가 들어 있을 수 있다. 당근은 주황색이고 비타민A가 있는 properties가 있을 수 있지만, 당근 자체로는 어떤 행동을 할 수 없기때문에 메소드가 없을 수 있다. 이렇..

Object object 생성방법 obj를 만드는 방법은 {}을 사용해서 만들 수 도있고, 이 방법을 object literal 문법 이라 한다. 클래스를 이용해서 new라는 키워드를 이용해서 class를 template를 이용해서 obj를 만들 수 도있다. 이 방법을 object constructor 문법 이라 한다. 우리가 obj를 new 라는 키워드를 통해서 생성하면 Object()에 정의된 constructor가 호출이된다. 그래서 이름이 지어진 것이다. 자바스크립트 에서는 클래스가 없어도 {} 괄호를 이용해서 obj 생성이 가능하다. 자바스크립트는 동적으로 런타임일때 결정되는 언어인데 (Runtime : 프로그램이 동작하고 있을 때) 그래서 뒤늦게 하나의 properties가 추가 가능하다. 이..

class vs object, 객체지향 언어 클래스 정리 class와 object는 무엇인지? 이 두가지의 개념은 무엇인지? if 자바스크립트에 class나 object가 없다면? 내가 정의한 변수들이 둥둥 떠다니면서 규모있는 프로젝트 만들기가 힘들다. 클래스는 조금더 연관있는 데이터를 한데 묶어놓는 contaniner 같은 개념이다. person이라는 class안에는 name, age 라는 properties가 들어있고 speak() 라는 함수가 들어있다. 이렇게 class에는 name, age 같은 속성 field가 들어있고, 그리고 speak() 즉 말하는 행동 method가 들어있다. 그래서 class는 조금더 연관있는 데이터들을 묶어놓은 fields와 methods가 종합적으로 묶여있는 것을 말..

Function 프로그램 안에서도 각각 저마다의 기능을 수행하는 함수들이 있다. 절차적인 언어같은 경우 함수가 프로그램에서 굉장히 중요한 기능을 담당한다. 자바스크립트에서 function은 굉장히 중요한 기능을 하기때문에 sub-program 이라고 부른다. 프로그램 안에서 각각의 작은 단위의 기능들을 수행하는 것이 바로 function 이다. input prameter를 받아서이것들을 잘 처리한 담에 output return을 하는것이 function 이다. 함수의 이름을 보고 '이 함수는 이런일을 하겠구나' 하고 생각가능하고 그리고 전달해야 될 parameters이 무엇인지? 어떤 값들이 return 되기를 기대가능한지? 이런 interface들을 보고서 이런 일들이 수행가능 하겠구나 하고 예상 가능..

코딩의 기본 operator, if, for loop variable은 메모리에 값을 읽고 쓰는것이 가능하다. 내가 ellie라고 값을 할당한 다음에 hello로 변경이 가능한 것이 바로 variable이 메모리에 읽고 쓰는 것이 가능하기 때문이다. const는 읽기만 가능하다. 그래서 const를 선언함과 값을 할당한 뒤로는 자물쇠가 생겨버려서 읽기만 가능하고 다시 다른값으로 쓰는것이 불가능하다. 그래서 자바스크립트 에서는 앞으로 변수 값이 바껴야될 좋을 이유가 없다면 왠만하면 const 키워드를 이용해서 constant로 작성하는것이 더 바람직하고 좋은 습관이다. 메모리에 값이 저장되는 방법은 2가지가 있는데 바로 primitive 타입인지 object 타입인지에 따라서 메모리에 값이 다른 방식으로 ..

The concept of PWA (Progressive Web App) PWA가 뜨고 있는 추세이고 계속 성장세를 이어 나갈것 같다고 예상되어 진다. 많은 기업들이 이미 PWA의 강력한 잠재력을 알아보고 성공적으로 런칭했다. PWA는 새롭고 강력한 소프트웨어 앱을 만드는 방식이다. HTML, CSS, JavaScript를 이용해서 만든 웹앱을 모던한 웹 브라우저 APIs와 결합해서 크로스 플랫폼에서 동작하는 어플리케이션을 손쉽게 만들 수 있다. 즉 이미 만든 웹사이트나 어플이 있다면 몇 가지만 추가하면 손쉽게 데스크탑에서 동작하는 또한 모바일에서도 동작 가능한 어플을 만들 수 도 있다. 안드로이드나 아이폰 처럼 특정한 플랫폼에서 동작하는 네이티브 어플리케이션은 플랫폼에서 제공하는 다양한 API를 이용해..

CSS 단위 em & rem 이렇게 많은 units 중에 언제 어떤것을 사용하면 좋을까? 1. 부모요소의 사이즈에 따라서 사이즈가 변경되어야 된다면 %와 em과 같은 unit을 사용하면 된다. 부모와는 상관없이 브라우저 사이즈에 따라서 반응해야 한다면 v*(viewport) 나 rem을 사용한다. 2. 요소의 너비가 높이에 따라서 사이즈가 변경되어야 한다면 %, v* 사용하면 되고 font-size에 따라서 사이즈가 변경되어야 한다면 em과 rem 사용하면 된다. em vs rem 어떤 디자인 이냐에 따라서 우리가 정확히 원하는 기능이 무엇인지에 따라서 다르다. if button의 component만든다면? 버튼의 글자를 rem을 써서 사이즈 만들게 되면 rem은 root요소 root에 있는 font-s..

CSS Responsive Units 시작하기 전에 CSS 문법 정리 :) - 페이지 위에 있는 많은 요소들 중에 어떤 요소들을 선택할 것인지를 결정하는 selector - 어떤 속성들을 꾸며줄 것인지를 결정하는 속성과 그 값 (property and value) 위의 3가지로 구성되어 있다. 요소의 크기나 사이즈, 길이 등을 결정하는 Unit에 대해 정리 :) 사이즈를 결정하는 unit은 크게 2가지의 카테고리로 정리해 볼 수 있다. 바로 absolute값과 relative값 두가지로 나눠 볼 수 있다. Absolute length units - absolute 값은 px을 제외 나머지 값들은 물리적인 세상에서만 의미가 있다. - CSS의 주된 용도는 스크린 즉 모니터위에서 웹사이트를 꾸며줄때 주로 쓰..