본문 바로가기

IT 개발85

[드림코딩]자바스크립트 기초 정리 ⑧ JSON 개념정리와 활용방법 앞전에 JSON에 대한 포스팅을 작성했지만 한번 더 정리하는 마음으로 JSON 포스팅을 작성하게 됐다 HTTP란? 우선 HTTP가 무엇인지 이해하고 넘어가자 브라우저 위에서 동작하고 있는 웹사이트나 애플리케이션과 같은 클라이언트들이 어떻게 서버와 통신할 수 있는지 정의한 것이다 여기서 Hypertext는 링크뿐만 아닌 전반적인 문서와 이미지 등 모두 포함한다 AJAX란? 웹페이지에서 동적으로 서버에게 데이터를 주고받을 수 있는 기술을 의미하며 대표적인 오브젝트로는 XHR이 있다 XHR은 서버에게 데이터를 요청하고 쉽게 받아올 수 있으며 비교적 최근에 생긴 fetch API를 사용하면 쉽게 받아올 수 있지만 인터넷 익스플로러에선 지원을 해주지 않는다 (사용불가) XML은 마크업 언어 중 하나인데 요즘은 X.. 2021. 6. 23.
[드림코딩]자바스크립트 기초 정리 ⑦ 배열함수 Array APIs 총정리 Join 배열에서 문자열로 변환 . join은 배열에 있는 함수를 문자열로 변환해준다 const result = fruits.join();에서 () 괄호 안에는 생략도 가능하고 구분자를 넣어주고 싶다면 ', ' '^' 등 구분자를 추가하는 것이 가능하다 Split 문자열에서 배열로 변환 위와 반대로 문자열을 배열로 변경하려면 .split을 사용한다. split엔 옵션으로 구분자와 나올 수 있는 개수를 제한하는 것이 가능한데, 만약 구분자를 넣지 않으면 옆의 과일 이모티콘이 하나 하나 구분되는 것이 아닌 전체가 한 개로 묶여서 split은 구분자를 꼭 넣는 것이 좋다. 또한 fruits.split(', ', '2')로 개수를 2로 첫 번째 두 개의 배열을 지정받아서 사과와 키위만 출력된다. Reverse .. 2021. 6. 22.
[드림코딩]자바스크립트 기초 정리 ⑥ 배열의 개념과 배열 APIs Object 오브젝트와 자료구조 ? 오브젝트는 여기서 토끼와 당근을 말한다. 토끼에는 귀 두개 라는 property와 뛴다, 먹는다 라는 method가 존재한다. 당근에는 주황색과 비타민이라는 property만 존재하고 행동을 하는 method는 없다 이렇게 서로 연관된 특징, 행동을 묶어놓는 것을 object 오브젝트라 한다. 여기서 토끼와 당근같은 비슷한 오브젝트를 묶는 것을 자료구조라 한다. 이렇게 비슷한 종류의 데이터를 한 곳에 모아놓는데 자바스크립트는 동적타입언어라 여러종류의 데이터를 한 곳에 같이 담는 것이 가능하다. (ex. 되도록 하지말기) Array declaration Array를 만들 때, arr1 보다 arr2가 더 흔하게 쓰이는 방법이다. (대괄호에 배열 넣어주기) 총 길이는 2로.. 2021. 6. 21.
[드림코딩]자바스크립트 기초 정리 ⑤ Object 오브젝트란? Literals and properties 자바스크립트에서 primitive 타입을 사용하면 인자가 많아질수록 추가해야하는 것들이 점점 늘어나서 관리하거나 그룹으로 묶어서 생각하기도 힘들다. 그래서 이걸 개선하고자 오브젝트를 사용한다. 자바스크립트에선 클래스가 없어도 {}괄호를 이용해서 바로 오브젝트를 생성할 수 있다 또한 자바스크립트는 매우 동적인 언어이므로 데이터 타입이 런타임 때 결정된다. 그래서 뒤늦게 property를 추가하거나 삭제가 가능한데, 금방 코딩하기엔 좋지만 나중에 유지보수가 힘들어진다는 단점이 있다. computed properties 코딩하는 그 순간, 키에 해당하는 값을 받아오고 싶을 때나 평소 코딩할때는 주로 . 을 사용하고 컴퓨티드 프로퍼티즈 ['']를 쓸땐 정확히 어떤 키가.. 2021. 6. 20.
[CSS] block elements 인데 옆에 오는 이유 + nth-child와 nth-of-type 차이점 block elements인데 inline elements처럼 옆에 오는 이유는? 예전 클론코딩 과제를 하면서 생긴 의문점나는 분명 block 요소인 h1, header를 사용했는데 왜 또 다른 블록 요소인 div의 옆으로 배치되는 건지 이해가 안 됐었다분명 둘 다 블록요소니까 다른 줄에 배치되어야 하는 거 아닌가? 그래서 검색을 해보니까 display:flex; 를 주면 flex 아이템들은 가로방향으로 배치되고 자신이 가진 내용물의 width만큼 차지하게 된다고 한다.즉 Body안에 display flex 속성값을 주면 그 안의 블록이 모두 inline-block처럼 변한다처음에 flex 요소의 특징을 잘 몰라서 고민 끝에 제목이 있는 header를 position:absolute; 그리고 top의 값.. 2021. 6. 19.
[드림코딩]자바스크립트 기초 정리 ④ 클래스 오브젝트 차이점 (class vs object) , 객체지향 언어 클래스 정리 class 클래스란? class person { name; age; speak(); } : 자바스크립트의 class란 관련 있는 변수나 함수를 묶어놓은 것으로 위의 코드를 통해 이해할 수 있는 건 name, age 같은 속성 (field)와 speak 같은 행동 (method)가 존재한다. 반면 필드는 있지만 메소드가 없는 경우도 많은데 이는 data class 데이터클래스라 부른다. 여기서 class는 붕어빵을 만들 수 있는 틀이라고 생각하면 이해하기 쉽다 이 class 자체에는 데이터는 존재하지 않고 틀만 정하는 것이다. (그러고보니 학점은행제에서 배우는 객체지향 프로그래밍 언어에서도 class와 object 설명을 해줄 때 다들 붕어빵 틀에 비유해서 설명해줬다. 비유가 찰떡이라 그런가 보다,,!) .. 2021. 6. 18.
반응형

티스토리툴바