letsgojieun

앞전에 JSON에 대한 포스팅을 작성했지만 한번 더 정리하는 마음으로 JSON 포스팅을 작성하게 됐다 HTTP란? 우선 HTTP가 무엇인지 이해하고 넘어가자 브라우저 위에서 동작하고 있는 웹사이트나 애플리케이션과 같은 클라이언트들이 어떻게 서버와 통신할 수 있는지 정의한 것이다 여기서 Hypertext는 링크뿐만 아닌 전반적인 문서와 이미지 등 모두 포함한다 AJAX란? 웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술을 의미하며 대표적인 오브젝트로는 XHR이 있다 XHR은 서버에게 데이터를 요청하고 쉽게 받아올 수 있으며 비교적 최근에 생긴 fetch API를 사용하면 쉽게 받아올 수 있지만 인터넷 익스플로러에선 지원을 해주지 않는다 (사용불가) XML은 마크업 언어 중 하나인데 요즘은 X..

Join 배열에서 문자열로 변환 . join은 배열에 있는 함수를 문자열로 변환해준다 const result = fruits.join();에서 () 괄호 안에는 생략도 가능하고 구분자를 넣어주고 싶다면 ', ' '^' 등 구분자를 추가하는 것이 가능하다 Split 문자열에서 배열로 변환 위와 반대로 문자열을 배열로 변경하려면 .split을 사용한다. split엔 옵션으로 구분자와 나올 수 있는 개수를 제한하는 것이 가능한데, 만약 구분자를 넣지 않으면 옆의 과일 이모티콘이 하나 하나 구분되는 것이 아닌 전체가 한 개로 묶여서 split은 구분자를 꼭 넣는 것이 좋다. 또한 fruits.split(', ', '2')로 개수를 2로 첫 번째 두 개의 배열을 지정받아서 사과와 키위만 출력된다. Reverse ..

Object 오브젝트와 자료구조 ? 오브젝트는 여기서 토끼와 당근을 말한다. 토끼에는 귀 두개 라는 property와 뛴다, 먹는다 라는 method가 존재한다. 당근에는 주황색과 비타민이라는 property만 존재하고 행동을 하는 method는 없다 이렇게 서로 연관된 특징, 행동을 묶어놓는 것을 object 오브젝트라 한다. 여기서 토끼와 당근같은 비슷한 오브젝트를 묶는 것을 자료구조라 한다. 이렇게 비슷한 종류의 데이터를 한 곳에 모아놓는데 자바스크립트는 동적타입언어라 여러종류의 데이터를 한 곳에 같이 담는 것이 가능하다. (ex. 되도록 하지말기) Array declaration Array를 만들 때, arr1 보다 arr2가 더 흔하게 쓰이는 방법이다. (대괄호에 배열 넣어주기) 총 길이는 2로..

Literals and properties 자바스크립트에서 primitive 타입을 사용하면 인자가 많아질수록 추가해야하는 것들이 점점 늘어나서 관리하거나 그룹으로 묶어서 생각하기도 힘들다. 그래서 이걸 개선하고자 오브젝트를 사용한다. 자바스크립트에선 클래스가 없어도 {}괄호를 이용해서 바로 오브젝트를 생성할 수 있다 또한 자바스크립트는 매우 동적인 언어이므로 데이터 타입이 런타임 때 결정된다. 그래서 뒤늦게 property를 추가하거나 삭제가 가능한데, 금방 코딩하기엔 좋지만 나중에 유지보수가 힘들어진다는 단점이 있다. computed properties 코딩하는 그 순간, 키에 해당하는 값을 받아오고 싶을 때나 평소 코딩할때는 주로 . 을 사용하고 컴퓨티드 프로퍼티즈 ['']를 쓸땐 정확히 어떤 키가..

block elements인데 inline elements처럼 옆에 오는 이유는? 예전 클론코딩 과제를 하면서 생긴 의문점나는 분명 block 요소인 h1, header를 사용했는데 왜 또 다른 블록 요소인 div의 옆으로 배치되는 건지 이해가 안 됐었다분명 둘 다 블록요소니까 다른 줄에 배치되어야 하는 거 아닌가? 그래서 검색을 해보니까 display:flex; 를 주면 flex 아이템들은 가로방향으로 배치되고 자신이 가진 내용물의 width만큼 차지하게 된다고 한다.즉 Body안에 display flex 속성값을 주면 그 안의 블록이 모두 inline-block처럼 변한다처음에 flex 요소의 특징을 잘 몰라서 고민 끝에 제목이 있는 header를 position:absolute; 그리고 top의 값..

class 클래스란? class person { name; age; speak(); } : 자바스크립트의 class란 관련 있는 변수나 함수를 묶어놓은 것으로 위의 코드를 통해 이해할 수 있는 건 name, age 같은 속성 (field)와 speak 같은 행동 (method)가 존재한다. 반면 필드는 있지만 메소드가 없는 경우도 많은데 이는 data class 데이터클래스라 부른다. 여기서 class는 붕어빵을 만들 수 있는 틀이라고 생각하면 이해하기 쉽다 이 class 자체에는 데이터는 존재하지 않고 틀만 정하는 것이다. (그러고보니 학점은행제에서 배우는 객체지향 프로그래밍 언어에서도 class와 object 설명을 해줄 때 다들 붕어빵 틀에 비유해서 설명해줬다. 비유가 찰떡이라 그런가 보다,,!) ..

function 함수의 정의 및 기능? function 함수는 sub-program이라고도 불린다. 프로그램 안에서 각각의 작은 단위의 기능들을 수행한다. 프로그램을 구성하는 매우 기본적인 블록이다. 함수는 여러 번 재사용이 가능하다 한 가지의 일 (하나의 함수엔 하나의 기능을!) 또는 어떤 것을 계산할 때 사용한다. 이름을 정하는 네이밍은 동사 형식으로 지정한다 (함수명을 보고 어떤 동작을 하는 함수인지 알 수 있게끔) 자바스크립트에서 함수는 오브젝트이다 Input(parameters)를 받아서 Output(return)하는 것이 함수이다. API를 사용할 때 함수의 이름을 보고 대충 '이러한 동작을 하겠구나'라고 유추할 수 있고, 전달해야 하는 parameter의 값은 무엇인지, 어떠한 값이 리턴되길..

var, let, const의 차이점을 설명하기에 앞서 여기서 나올 기본개념을 정리해보자면, 우선 자바스크립트의 데이터 타입은 크게 두 가지로 분류가 가능하다 계속 변경이 가능한 Mutable 데이터 타입과, 변경이 불가능한 Immutable 데이터 타입이 존재한다. 이 두 가지의 예시는 밑에서 더 자세히 정리해보겠다 위의 그림을 조금씩 참고해가며 var, let, const에 대해 이해하자 Var ? 요즘엔 var를 사용하는 추세는 아니지만 (아직 현업에서 사용하는 곳도 있긴 하다고 들었다) 왜 사용하지 않는지, ES6부터 새로 나온 let, const와 다른 점은 무엇인지 알아볼 필요가 있다. var의 가장 큰 차이점은 변수의 재선언 var age = 1이라고 작성 후, 밑에서 var age = 2라..

처음 자바스크립트 독학하면서 알게 된 유튜버 드림코딩 엘리님의 강의. 기초까진 괜찮았다가 함수들이 점점 나오면서 이해가 아예 되지 않아서 멘붕의 연속이었다 그래서 같은 강의를 거의 5번 넘게 돌려보고, 그래도 이해가 안 되는 부분은 책을 읽어가며 이해했다. 내 머리가 좋지 않다는 건 알고 있었지만 이렇게까지 심각했나? 싶을 정도였는데, 강의 밑의 댓글들을 보니 동지들이 많았다 ^^.. 절대 혼자만 헤매고 있는 게 아니니 자바스크립트에서 너무 좌절하지 않도록! 프런트엔드의 경우 HTML, CSS는 비교적 쉽게 접근이 가능하여 (이 둘은 프로그래밍 언어가 아니다.) 프런트엔드를 만만하게 볼 수 있지만 자바스크립트를 맞닥뜨리는 순간, 이 분야에 쉽게 얻을 수 있는 건 없다고 느낄 것이다.. 나는 정말 뼈저리게..

html 문서에서 src 속성의 외부 스크립트 script 를 로딩 할 때 다양한 방법이 존재한다. 오늘은 상황에 따라서 어떻게 script를 불러와야 효율적인지 각각의 방법과 그 특징에 대해서 알아보자! 1. 에 를 별다른 조건 없이 넣는 경우 스크립트가 모두 로딩 된 후에서야 사용자들은 스크립트 밑의 페이지를 볼 수 있는데 만약 스크립트의 용량이 크다면 로딩 시간이 오래 걸릴 것이고, 그 시간 동안은 페이지 자체를 막아버리기 때문에 (자바스크립트의 기본 옵션은? 동기처리이다! ) 스크립트에서 DOM 요소에 접근이 불가능해진다. 실행 흐름을 보면, 브라우저가 html 문서를 위에서부터 아래로 쭉 읽는데 여기서 script를 만나면 바로 script 안의 내용을 한 줄 한 줄 해석하기 시작한다. 하지만 ..