728x90 반응형 SMALL 분류 전체보기135 8)JavaScript_JSON 개념 정리와 활용법 HTTP 브라우에서 동작하고있는 웹 사이트(Client)들이 어떻게 서버(Server)와 통신할 수 있는지를 정의한것 Hypertext Transfer Protocal 어떻게 이 하이퍼 텍스트를 서로 주고받을수있는지를 정의한 프로토콜의 하나 Client는 Server에게 데이터를 요청(request) 하고 Server은 Client로부터 데이를 받은 다음 응답(response) 한다 주고 받는건 이 하이퍼링크 뿐 아니라 이미지나 문서 파일들 까지도 말한다 그리고 주로 AJAX를 사용 했었다 (Asynchronous JavaScript And XML) 웹 페이지에 서버에게 동적으로 데이터 주고받는 기술 XHR( XMLHttpRequest ) 라는 오브젝트가 있는데 이건 Browser API에서 제공하는 오.. 2023. 6. 5. 7)JavaScript_ 배열(Array) 함수 모음 join() 모르는 기능이나 뭐 프로그래밍을 공부할때 라이브러리를 열어 공부 할때 역시 해당 API가 정의된곳으로 가서 사용법을 익혀야 한다 배열에 있는 모든 item들을 더해 string형으로 바꿔주는것 그냥 string으로 만들지 않고 전달해준 separator(구분자)를 통해 전달해준다 배열안의 데이터를 스트링형으로 바꿔라 구분자를 넣지 않았을땐 기본으로 , 가 들어가고 넣었을때 이렇게 구분을 지을수 있다 split() 아까와는 반대되는 개념 separator(구분자)와 limit(제한)을 전달 받는다 이 string을 여러개의 문자열로 나눠주는데 전잘된 구분자를 받아와서 우리가 return받을 배열의 사이즈 지정하는것도 가능하다 스트링형을 배열로 바꿔라 구분자를 줘서 저렇게 배열로 만들수 있고 이.. 2023. 6. 3. 6)JavaScript_Array, APIs 먼저 자료구조 를 알아야지 비슷한 데이터끼리 묶어 둔걸 말함 ?? 비슷한 종류의 데이터를 묶어둔게 Object라매.. 그럼 자료구조랑 뭔차이? Object : 여기 사람이 있어요. 눈으로 보고 코로 냄새맡고 입으론 뭘 먹으며 귀론 뭘 들어요 사람이란걸 두고 눈,코,입, 귀 라는 공통된걸 묶었음 자료구조 : 여기 사람이 있어요. 토끼도 있고, 강아지도있고, 고양이도 있네요. 전부 포유류네요? 포유류라는 공통 자료구조(?)지 않음? 이 차이임. . 그런데 JS는 dybamically type language 굳이 자료구조 같은거 끼리 아니여도 다 담을수 있음 Array 배열의 선언은 이렇게 new 라는 키워드를 써서 생성하는 방법과 대괄호를 써서 만드는 방법이 있다 한번 만들어 보자 cocktail 에 배열.. 2023. 6. 1. 5)JavaScript_Object 리터럴과 속성 변수에는 하나의 값만 넣을수 있다 그리고 이 값을 출력하고 싶은 함수를 만든다면 저렇게 parameter 값으로 만들 각 전달해줘야한다 함수를 정의 할때도 역시 두가지의 parameter 값을 받아오게 만들어야 하는데. . Object를 쓰지 않고 저렇게 만드는건 정말 비효율적인 방법이다 새로운게 만들어지면 저렇게 추가를 해야 하고.. 뭐 갯수 점점 늘어나면 관리도 힘들고 복잡해지니깐... 그래서 Object를 쓰는거 이렇게 만들고 함수쪽도 이제 필요없는거 없애고 수정해주면 끝! 이건 이제 쓸 필요 없음 그냥 아까 담은 object명인 downy를 뽑으면 저래 나옴 간단해짐 Objcet를 만드는 방법으론 2가지가 있은데 중괄호 써서 바로 만드는 방법과 class를 이용해서 new 키워드써서.. 2023. 5. 31. 4)JavaScript_Class & Object 차이점, 객체지향언어 클래스 정리 class는 연관이 있는 놈들끼리 묶어논 컨테이너 같은 녀석이다 person 이라는 class가 하나 있다고 치자.. 저기 name이랑 age라는 속성(field)과 speak()라는 행동(method)가 들어있다 요게 이제 일반적인 class의 모습. . 그래서 class가 뭐라고? fields와 methods가 함께 묶여있는것을 말한다 근데 fields만, 그러니까 그냥 데이터만 들어있을 때 도 있다 methods 필요 읎이 그냥 저 데이터 뭉탱이만 있을수도 있다고 이 클래스 안에서도 내부적으로 보여지는 변수와 그냥 밖에서만 보여지는 변수로 나눌수있는 이걸 보고 Encapsulation(캡슐화) 라고 한다 이런 캡슐화를 통해 상속과 다향성이 일어날수있는데 이게다 객체지향언어이기 때문에 가능한거다 객체.. 2023. 5. 30. 3)JavaScript_ Arrow Function, 함수 선언과 표현 Function - 굉장히 기본적인 빌딩 블럭이다 - subprogram이라고도 하며 여러번 재사용이 가능하다 - 한가지의 테스크나 어떠한 값을 계산하기 위해 사용된다 function 키워드를 쓰고 이름을 지정한 다음 (파라미터들을 나열하고) { 함수안에서 작동할 기능로직을 작성하고... return 값을 내준다 } 하나의 함수는 === 한가지 일만 해야 한다 함수명을 쓸땐 동사형태(verb)쓰는게 좋다 만약 함수명을 쓰는데 들어간 기능이 많아 어렵다면 기능을 좀 쪼갤 필요가 있다 신용카드와포인트 -> 신용카드, 카드포인트 이렇게 독립된 기능으로 쪼개는 편이 좋다 function은 object의 일종이 function 대충 함수 사용법을 나타내자면 이렇게 선언하고 일단 파라메터 지정은 안한뒤 기능으로 H.. 2023. 5. 29. 2)JavaScript_operator, if, for loop 연산 연산자 증감 연산자 앞에 붙는것과 뒤에 붙는것 변수 앞에 연산 기호가 붙는것 저기 counter에 1을 더한 값을 counter에 다시 집어 넣은 다음 그 값을 preIncrement에 넣는것 그래서 preIncrement와 counter에는 둘다 3이 들어가 있음 변수 뒤에 연산 기호가 붙는것 저기 counter의 값을 먼저 postIncrement에 넣은 다음 counter에 1을 더한 값을 counter에 다시 집어 넣은 것 그래서 postIncrement값은 3인데 counter의 값은 4 할당 연산자 비교 연산자 || (or), && (and), ! (not) || (or) 첫번째가 true가 나오면 그 뒤는 보지도 않고 true를 뱉어낸다 && (and) 첫번째가 false 라면 그 뒤는.. 2023. 5. 27. 1)JavaScript_ Data Types , let VS var , hoisting , JavaScript ES5+ Variable (변수) let let을 써서 name 를 선언하고 그 안에 'downy'를 넣어주고 console에 띄워보면 그 값이 나온다 그리고 다음에 입력되는 값을 바꿔 다시 뽑아보면 hola라는 문구를 뽑아 낼수 있다 let을 써서 입력값을 메모리에 저장하게 되면 나중에 그 안의 값을 다시 정의해 집어 넣어 바꿔줄수 있음 Block scope 괄호를 사용해 블록 안에 넣게 되면 그 값을 밖에서는 볼수 없게 된다 global scope를 쓰게 되면 괄호 안에 있든 밖에 있든 상관없이 뽑아 낼수 있다 이렇게 글로벌 변수는 어플리케이션이 실행되는 순간부터 끝날때 까지 항상 메모리에 탑재되있기 때문에 최소한으로 쓰는게 좋다 가능한 필요한 부분에서만 쓰는게 좋다 var 대부분의 프로그래밍언어에서는 먼저 .. 2023. 5. 27. 0)JavaScript_Consol에 출력, script async, defer 차이점 https://developer.mozilla.org/ko/ MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps. developer.mozilla.org Hello World 출력하기 vscode를 실행 시켜 html파일과 js파일을 만들어 연결 한다 index파일을 열어 F12 눌러 검사창 띄우면 Hello World 출력 완료 async VS defer script 태그를 head 태그 안에 넣기 저 head 태그 안에 script 태그를 그냥 넣으면.. 2023. 5. 24. 이전 1 ··· 12 13 14 15 다음 728x90
