●javascrip란??
프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성
버튼에 함수를 연결하기. 버튼을 누르면 함수가 불립니다. <button onclick="hey()">영화 기록하기</button>
★console.log(변수)
console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록!
console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 붙여넣어보세요.
console.log("Hello World!");
●변수선언
let으로 변수를 선언한다. 변수는 값을 저장하는 박스다. 한 번 선언했으면, 다시 선언하지않고 값을 넣는다.
let first_name = 'bob' // snake case라고 합니다. 또는 let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.
과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다!
●리스트&딕셔너리
★리스트:순서를 지켜서 가지고 있는 형태
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_list = [1,2,'hey',3] // 로 선언 가능
b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기
b_list.push('헤이')
b_list // [1, 2, "hey", 3, "헤이"] 를 출력
// 리스트의 길이 구하기
b_list.length // 5를 출력
★딕셔너리: 키(key)-밸류(value) 값의 묶음
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
b_dict // {name: "Bob", age: 21, height: 180}을 출력
★리스트와 딕셔너리의 조합
names = [{'name':'bob','age':20},{'name':'carry','age':38}]
// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'
new_name = {'name':'john','age':7}
names.push(new_name)
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'
리스트와 딕셔너리가 왜 필요할까? => 단일정보는 변수로 알아볼수있지만 복합적인 정보를 포함하고있을시 딕셔너리 혹은 리스트로 표기하면 보기도 깔끔해지고 다루기도 쉬워지고 새로운 값을 입력할때 .push 함수로 간단하게 대응할 수 있다.
●기억에 남는 내용
★특정 문자로 문자열을 나누고 싶은 경우
let myemail = 'sparta@gmail.com'
let result = myemail.split('@') // ['sparta','gmail.com']
result[0] // sparta
result[1] // gmail.com
let result2 = result[1].split('.') // ['gmail','com']
result2[0] // gmail -> 우리가 알고 싶었던 것!
result2[1] // com
myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!
●JQuery,Ajax
jQuery를 이용해 Javascript로 HTML을 쉽게 제어하고, Ajax를 이용해 다시 서버에 데이터를 요청하고 받는 구조
● JQuery
jQuery란? HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리!
javascript로도 모든 기능(ex-버튼 글씨 바꾸기 등)을 구현할 수 있지만
1)코드가 복잡하고 2)브라우저 간 호환성 문제도 고려해야해서, JQuery라는 라이브러리가 등장하게 되었습니다.
강의내용을 보고 정리하던중 이 부분에 대해서 명확하게 안나타나있는거같아서 추가로 조사를 해봤다..
자바 스크립트 란?
JavaScript는 동적 웹 페이지를 구축하는 데 사용되는 경량 프로그래밍 언어입니다. 오픈 소스이며 크로스 플랫폼입니다. 다중 패러다임 프로그래밍 언어입니다. 객체 지향 프로그래밍을 지원합니다. HTML과 CSS 외에 웹의 3 대 핵심 언어 중 하나로 간주됩니다. HTML은 Hyper Text Markup Language를 의미합니다. 웹 페이지의 구조를 구축하는 데 사용됩니다. CSS는 Cascading Style Sheets를 의미합니다. JavaScript는 웹 페이지에 상호 작용을 추가하는 프로그래밍 언어입니다. 클라이언트 측 언어입니다. 웹 서버에서 코드를 실행하는 PHP, ASP.NET과 달리 JavaScript는 클라이언트 측에서 실행됩니다.
JavaScript는 웹 페이지의 양식 필드를 확인하는 데 유용합니다. 예를 들어 클라이언트가 유효한 이메일을 입력했는지 여부를 확인합니다. JavaScript는 방문자의 피드백을 즉시 얻을 수 있도록 도와줍니다. 버튼 클릭과 탐색도 처리 할 수 있습니다. 이 언어는 웹 페이지를보다 대화 형으로 만듭니다. 예를 들어 클라이언트가 웹 사이트를 통해 마우스를 가리키면 응답하고 변경됩니다. JavaScript의 주요 장점 중 하나는 풍부한 인터페이스를 생성 할 수 있다는 것입니다. JavaScript 프로그램을 개발하는 것은 매우 쉽고 간단합니다. 값 비싼 개발 도구를 사용할 필요가 없습니다. 프로그래머는 메모장과 같은 텍스트 편집기를 사용하여 JavaScript 코드를 작성할 수 있습니다. 웹 브라우저를 사용하여 이러한 프로그램을 실행할 수 있습니다.
JavaScript에도 몇 가지 단점이 있습니다. 스크립팅 언어이기 때문에 C 또는 C ++와 같은 컴파일러 기반 언어처럼 빠르지 않습니다. 또한 다중 스레딩 또는 다중 처리 기능을 지원하지 않습니다. 파일 작업을 수행하는 데 사용할 수 없으며 데이터베이스에 직접 액세스 할 수 없습니다. 전반적으로 웹 개발에 가장 많이 사용되는 언어 중 하나입니다.
jQuery 란 무엇입니까?
jQuery는 JavaScript 라이브러리입니다. JavaScript를 사용하여 수행 된 작업은 적은 양의 코드로 jQuery를 사용하여 보관할 수 있습니다. 가볍고 빠릅니다. 응답 성이 뛰어나고 기능이 풍부한 웹 사이트를 구축하는 데 도움이되는 비동기 JavaScript (AJAX)를 지원합니다. 크로스 플랫폼이며 Internet Explorer, Safari, Chrome, Firefox 및 Opera와 같은 최신 웹 브라우저에서 작동합니다. 브라우저 별 기능을 추상화 할 수 있습니다. 따라서 개발자가 디자인에 집중하기 쉽습니다. 이미지 페이딩 기능, 애니메이션 및 이벤트를 제공합니다.
jQuery는 DOM (문서 개체 모델)을 기반으로합니다. 웹 페이지의 모든 요소를 나타내는 트리 구조입니다. jQuery는 DOM 요소의 검색, 선택 및 조작을 단순화합니다. JavaScript에서 수행하는 것과 동일한 작업을 수행하는 데 사용할 수 있습니다. 그러나 jQuery를 사용하면 대부분 JavaScript보다 적은 양의 코드로 수행 할 수 있습니다. 빠르고 확장 가능하기 때문에 JavaScript의 대안으로 사용할 수 있습니다. 특수 작업을 수행하는 데 사용할 수있는 많은 타사 라이브러리가 있거나 개발자가 jQuery 플러그인을 사용하여 자신의 프로그램을 작성할 수 있습니다.
오늘날 Google, IBM, Microsoft와 같은 회사에서도 jQuery를 웹 기술 중 하나로 사용합니다. 전반적으로 jQuery는 HTML, CSS 및 DOM 조작과 같은 몇 가지 이점을 제공합니다. 최신 웹 개발 프로세스를 더 쉽게 단순화하면서 JSON 구문 분석 등을 수행합니다.
JavaScript와 jQuery의 유사점은 무엇입니까?
- JavaScript와 jQuery는 모두 동적 웹 페이지를 만드는 데 사용됩니다.
- JavaScript와 jQuery는 모두 오픈 소스이며 크로스 플랫폼입니다.
- JavaScript와 jQuery 모두 객체 지향 지원
- JavaScript와 jQuery를 모두 사용하여 웹 페이지의 유효성을 검사 할 수 있습니다.
- JavaScript와 jQuery를 모두 사용하여 이벤트를 만들 수 있습니다.
- 많은 웹 브라우저에서 JavaScript와 jQuery를 모두 지원합니다.
출처: https://ko.strephonsays.com/javascript-and-vs-jquery-7953
크게본다면 javascript는 풍부한 인터페이스를 지원하며 값이 싸지만 느리고 jQuery는 빠르고 가벼우며 비동기 JavaScript인 AJAX또한 지원한다. 최신 웹 브라우저에서도 사용할수있고 다양한 이벤트 제공하며 좋은 평가가 있지만 또 하나 흥미로운 글을 발견했다 약 2019년에 작성된 이야기다
결론만 말하자면 크게 현직개발자로써 JQuery의 크게 3가지의 문제를 어필하였다.
첫 번째, jQuery 가 아무리 간편하다고해도, 대부분의 우리가 필요한 기능들에 비해 너무 크기가 비대하다.
두 번째, 한 가지 기능에만 집중적으로 개발된 라이브러리들이 많이 있다.
세 번째, jQuery 는 성능 최적화를 고려하고 만들어진 라이브러리가 아니다.
정리한 이야기로썬
jQuery 를 처음 접했을 땐 신세계를 경험했다. 쉽고 너무나도 직관적이었으니까. 그러나 시간은 흘러 많은 것들이 변했고, 웹의 시대 또한 새로운 국면을 맞이했다. jQuery 는 이런 시대의 흐름을 타지 못한 것 뿐이다.
그러나 jQuery 가 사장되어야 한다고 주장하는 것은 절대 아니다. 아직도 많은 퍼블리셔나 개발자들은 일부 프로젝트에서 jQuery 를 활발하게 사용하고 있고, 사실 개발 생산성 면에선 훌륭하다고 할 수 있다. 그럼에도 불구하고지만, 프로젝트에서 jQuery 의 사용을 검토하고 있다면 조금 더 면밀히 검토해볼 필요는 있을 것이다.
이런말들을 하셨는데 예전에는 나도 c언어나 자바를 접했을때 복잡해서 파이썬이 쓰기도 편하고 구조도 쉽고 간편하다 이런느낌을 많이 받았어서 JQuery가 지금 현업에서 중요하게 쓰일줄알았지만 시대가 빨리 변하는만큼 더 간편하고 가벼운게 중요하다고 본다.
프로젝트에서 jQuery 의 사용을 그만두겠다고 결심한 이유
jQuery 를 이제 그만 사용해야겠다고 느낀 이유들을 정리해보았다.
medium.com
그래서 JQuery를 대체할만한 것들이 무엇이 있나 찾던 도중 DOM이 가장 큰 역할을 하게됐다는것을 발견할수있었다.
제이쿼리의 인기가 낮아지는 원인을 3가지로 꼽았으며
웹 표준 API의 확장
웹브라우저 환경의 변화
가상 돔(Virtual DOM)을 사용하는 라이브러리의 등장
출처: https://www.samsungsds.com/kr/insights/jQuery.html
제이쿼리[jQuery]를 아직도 사용하나요 - 제이쿼리의 현재와 미래
제이쿼리[jQuery]를 아직도 사용하나요 - 제이쿼리의 현재와 미래
www.samsungsds.com
돔이란 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.
정리하자면, DOM은 브라우저에 의해 기록되는 모든 것입니다. JavaScript는 이를 조작할 수 있는 문법이고 언어일 뿐이며, 이는 Node.js 등의 브라우저 밖의 DOM API가 없는 환경에서도 동작할 수 있습니다.
출처:https://velog.io/@godori/DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
DOM이란 무엇인가?
DOM MDN 에서 말하는 DOM의 정의는 다음과 같습니다. > 문서 객체 모델(The Document Object Model, DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. 그래서 DOM이 정확히 뭐라고요? 옳은 것을 모두 골라보세요.
velog.io
결국 우리가 지금 쓰고 있는 html이 결국 dom을 사용하여 쓰는걸 알게되었다.
JavaScript는 브라우저가 읽고 어떤 작업을 할 수 있는 언어.
DOM은 바로 이 작업이 이루어지는 장소입니다.
사실 우리가 "JavaScript로 하는 것" 이라고 생각하는 것은 정확히는 "DOM API" 입니다.
엘리먼트에 click 이벤트가 일어나는지 감시하도록 JavaScript를 작성했다고 합시다. 하지만 이 엘리먼트는 DOM 노드입니다. 우리는 DOM에 있는 DOM property를 통해서 listener를 붙여놓은 것 뿐이죠.
출처:https://hasudoki.tistory.com/entry/JavaScript-DOM%EC%9D%B4%EB%9E%80-1
JavaScript - DOM이란?
DOM 이란 뭘까? HTML 태그? JavaScript로 접근 하는 것? Node? 트리구조? 등등 용어만 들었을뿐 정확히 설명을 못했다.(이것뿐만 아니라 공부한 모든것들을 설명할 수가 없어 차근차근 정리해볼 계획이
hasudoki.tistory.com
dom은 파싱된 html이기도하며 이렇다보니 node.js에 관한 상관관계도 알고싶게되었다.
Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임입니다.
즉, 노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는 데 제일 많이 사용된다.
Node.js는 확장성이 있는 네트워크 어플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 특히 서버사이트에서 많이 사용되고 있다. 파치 등의 별도 소프트웨어 없이 동작하는 것이 가능
- 중요한 이유는 이전까지 Server-Client 웹사이트를 만들 때 웹에서 표시되는 부분은 JavaScript 를 사용하여 만들어야만 했으며, 서버는 Reby, Java 등 다른 언어를 써서 만들었어야 했는데 마침내 한 가지 언어로 전체 웹 페이지를 만들 수 있게 된 것이다.
노드는 기본적으로 싱글 스레드, 논 블로킹 모델을 채용하므로 I/O 요청이 많이 발생하면 노드를 서버로 사용하는 것이 좋다.
하지만 노드는 CPU 부하가 큰 작업에는 적합하지 않다.
우리가 작성하는 코드는 모두 스레드 하나에서 처리되기 때문에 코드가 CPU 연산을 많이 요구하면 스레드 하나가 혼자서 감당하기 어렵다.
즉, 개수는 많지만 크기는 작은 데이터를 실시간으로 주고받는데 노드는 적합하다. 예를 들어 네트워트나 데이터베이스, 디스크 작업 같은 I/O에 특화되어있다. 실시간 채팅 애플리케이션, 주식 차트도 포함된다.
결론적으로 노드의 장점은 첫 째, 멀티 스레드 방식에 비해 적은 컴퓨터 자원을 사용한다. 둘 째, I/O 작업이 많은 서버로 적합하다. 셋 째, 웹 서버가 내장되어 있어 별도의 웹서버를 설치할 필요가 없다. 넷 째, 자바스크립트를 사용하기 때문에 JSON 형식과 쉽게 호환된다.
출처:https://hanamon.kr/nodejs-%EA%B0%9C%EB%85%90-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/
Node.js 노드 개념 이해하기 자바스크립트 JavaScript 런타임 이벤트
Node.js 노드 개념 이해하기 JavaScript 런타임 - 노드는 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는데 제일 많이 사용된다. 이벤트 기반 이벤트 루프 논블로킹 I/O 싱글
hanamon.kr
정신없이 알아본것같다. 그럼 이제 ajax에 대해 알아보자 강의 내용중 get 과 post를 사용하여 ajax call을 했던 기억이있기에 정리를 해볼려고한다.
출처: https://araikuma.tistory.com/640
[jQuery] Ajax 사용 - Ajax 메소드 $.ajax() $.get() .load()
Ajax 메소드 메소드 설명 $.ajax() 비동기식 Ajax를 이용하여 HTTP 요청을 전송함. $.get() 전달받은 주소로 GET 방식의 HTTP 요청을 전송함. $.post() 전달받은 주소로 POST 방식의 HTTP 요청을 전송함. $.getScr..
araikuma.tistory.com
그중에서도 $.ajax() 메소드는 모든 jQuery Ajax 메소드의 핵심이 되는 통합적인 메소드이다 .
$.ajax() 메소드는 HTTP 요청을 만드는 강력하고도 직관적인 방법을 제공한다.
$.get() 메소드
jQuery에서는 Ajax를 이용하여 GET 방식의 HTTP 요청을 구현한 $.get() 메소드를 제공한다.
이 메소드를 사용하면 서버에 GET 방식의 HTTP 요청을 보낼 수 있다.
형식
jQuery.get( url [, data] [, success(data, textStatus, jqXHR)] [, dataType] )
- url : 요청 URL (클라이언트가 HTTP 요청을 보낼 서버의 주소)
- data : 요청과 함께 서버에 보내는 string 또는 map
- success(data,textStatus,jqXHR) : 요청이 성공일때 실행되는 callback 함수
- dataType : 서버에서 내려온 data 형식. ( default : xml,json,script,text,html )
$.post() 메소드
jQuery에서는 Ajax를 이용하여 POST 방식의 HTTP 요청을 구현한 $.post() 메소드를 제공한다.
이 메소드를 사용하면 서버에 POST 방식의 HTTP 요청을 보낼 수 있다.
형식
$.post() 메소드의 원형은 다음과 같다.
$.post(URL주소[,데이터][,콜백함수]);
- URL 주소 : 클라이언트가 HTTP 요청을 보낼 서버의 주소이다.
- 데이터 : HTTP 요청과 함께 서버로 보낼 데이터를 전달한다.
- 콜백 함수 : HTTP 요청이 성공했을 때 실행할 함수를 정의한다.
다음은 강의내용에서 봤던 것들..
type: "GET" → GET 방식으로 요청한다.
url: 요청할 url
data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다. http://naver.com?param=value¶m2=value2
네이버
네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요
www.naver.com
POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다. data: { param: 'value', param2: 'value2' },
success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.
success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음 console.log(response) }
오늘은 javascript, jquery, ajax(get방식,post방식) 에 대해서 알아봤다.
방대한 양이여서 앞으로도 공부할 부분이 많은거같다
'스파르타 내일배움캠프' 카테고리의 다른 글
| TIL 3일차 미니프로젝트 만들기!! (0) | 2022.04.20 |
|---|---|
| 3주차 과제 (0) | 2022.04.19 |
| python,크롤링,mongoDB (0) | 2022.04.19 |
| 2주차 과제 (0) | 2022.04.19 |
| TIL 1 | 1주차 HTML CSS JS (2) | 2022.04.18 |
