<웹개발 2주차 배운내용>
- 실제로 데이터가 움직일 수 있게 만들어보기
- Javascript, JQuery, Fetch
- Javascript : 웹을 움직이게 하는 코드
- JQuery : html 뼈대를 선택해서 쉽게 조작할 수 있음
- Fetch : 짧은 코드로 요청을 보내고 받아 올 수 있음
자바스크립트로 라이브러리(남이 만들어 놓은 코드 조각을 가져다 쓰는 것)를 하면 코드가 조금 복잡함.
따라서 제이쿼리를 이용해 쉽게 조작을 할 수 있음.
Fetch는 서버에서 내려오는 데이터를 가져다 쓸 수 있게 해줌
- Javascript
-
브라우저가 알아들을 수 있는 언어로, 무언가를 움직이게, 무언가에게 동작을 명령하는 것.
-
역사적인 이유&이미 만들어진 표준이므로 자바스크립트가 표준 언어로 설정되어 있음
-
자바와 자바스크립트의 관계는 아무 관련이 없음 (바다와 바다코끼리, 인도와 인도네시아 같은 느낌)
- 자바스크립트는 head 안에 태그를 만들어 사용 -
button onclick=”hey” → 버튼을 클릭하면 hey를 불러라
-
function 은 함수로 정해진 일을 반복함을 의미함 ex) “function hey()” 는 “hey라는 정해진 일을 불러라” 의미
-
자바스크립트의 기초적인 문법
-
자바스크립트의 기본 개념은 어느 프로그래밍 언어와 똑같음(파이썬과도 거의 유사함)
-
오른쪽 마우스 클릭 후 검사, 콘솔 탭은 개발자들만 알 수 있도록 만들어 놓은 탭(잘 실행이 되고 있는지, 개발자들이 내가 쓴 코드가 맞는지 등을 파악하기 위함)
-
새로고침을 하면 콘솔탭 내용 사라짐
-
변수: 값을 담는 박스 ex) let a = 2 여기서 a를 변수라고 함
-
문자의 경우 작은따옴표(’’)로 감싸주어야 함. 변수와 문자를 구분하기 위함
- 비슷한 변수는 비슷한 것 끼리 꾸러미로 관리하기 편함 -
프로그래밍언어는 사람이 만들었기 때문에 사람이 쓰는 언어 습관들이 프로그래밍에도 들어가 있음
- 프로그래밍에서 무언가를 셀때는 0부터 세는 것! (어느 프로그래밍 언어에도 똑같음) -
요소를 알기 위해서는 .length 사용 (4개 일 경우, 4가 뜸)
-
dictionary(사전)인데 key-value 만 기억
-
우리 머릿속에는 key-value 의 커뮤니케이션 개념이 있음 ex) 나이를 물어보면 숫자로 대답을 함
-
중괄호, 대괄호에 대해 꺽쇠를 사용하는 것은 있는 그대로의 현상을 받아들이는게 중요.. (하.. 무슨말이지..)
-’그냥 dictionary는 중괄호를 사용해서 값을 쓰는구나’ / ‘dictionary 에서 값을 가져올때는 꺽쇠를 쓰는구나’ 이런식으로 받아들여야함 -
dictionary에서 값을 가져올때 꺽쇠, 작은따옴표, 괄호 등은 어떠한 특정 목적을 가지고 설계된 것이 아님, 프로그래밍 기능을 만든 사람이 언어나 함수 등 특정 목적을 위해 만들 때 그 사람들이 그때 그때 생각나는 괄호나 중괄호 대괄호를 사용해서 만든 것임.. 하..
- 자료형: 순서가 매우 중요. 꺽쇠로 list형 0,1,2,3… 이 있고 key-value 로 이어지는 dictionary형이 있음. 이 두 개를 함께 쓸 수도 있음.
- 자바스크립트는 HTML을 조작하기 위해 사용 why? 움직이게 만들려고. 그러나 움직이기 위해서 자바스크립트 만으로는 코드가 복잡함
- 그래서 나온게 JQuery 이다. 훨씬 직관적임
- JQuery
- 무언가를 움직이게 하려면 class 처럼 지칭할 수 있는 명찰이 필요하다. → JQuery 에서는 id로 잡아줌 ex) id = “q1”
-
바꾸는 수식: (’#q1’) → 얘를 잡아둔 것! 얘 있잖아 하고 잡아둔 것(’#q1’).text(a) → 잡아둔 것을 a로 바꿔줘 의미함.
-
여러개를 한꺼번에 바꿀 수도 있음. ex) $(’#q1’).text(a[1]) $(’#q1’).css(’color’,’red’)
-
Javascript의 반복문과 조건문
-
반복문은 반복을 시켜주는 것. → 리스트에 있는 요소 하나 하나를 다 꺼내와서 찍어줘라 / 조작해라
-
forEach 사용 → fruits.forEach ((a) ⇒ { }) 각각의 리스트들이 a로 들어오는 것(리스트의 갯수 만큼 한번씩 꺼내 쓰는 것)
-
조건문은 조건에 충족되는 값을 찾아주는 것
-
let age = 24 일 때 if (age > 20) {console.log('성인입니다')} else {console.log('청소년입니다')}
-
반복문과 조건문을 같이 응용해서 사용도 가능
let ages = [12, 15, 20, 25, 17, 37, 24]
ages.forEach((a) => {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})- JQuery에서 반복문과 늘 같이다니는 append 가 있는데 이는 반복을 하면서 html을 만들어 착착착 붙여준다 (그 데이터의 수 많은 html을 보여준다)
- temp=html =
<p>사과</p>백팁 사용 - $('#q2').empty() → 기존 있는 내용을 없애는 것
- 인터넷에 떠도는 데이터를 어떻게 가져오는지 파악
-
JSONVue를 통해 서버데이터를 보기 좋게 만들 수 있음.
-
서버에서 데이터를 가져왔을 때 규칙이 있음. 늘 눈에 익은 dictionary 형식인데 이러한 형식을 JSON이라고 함
-
JSON은 편하게 서버에서 클라이언트로 데이터를 내려줄 때 dictionary 형식으로 내려주는 것으로 생각해도 됨.
-
서버가 클라이언트의 요청을 받으려면 받을 수 있는 문이 있어야 함. ex) 은행의 경우 예금 창구, 대출 창구.
- 창구의 이름과 창구에 접근하는 방식을 API 라고 함 -
파란 배경: 컴퓨터의 위치(우리은행 종로지점) / 노란 배경: 창구 위치(예금 창구) / 분홍 배경: 데이터(주민번호)
-
각각의 영화 정보의 경우 분홍 배경(데이터)만 다름
-
데이터의 경우 프로그래머끼리 서로 약속을 함
-
URL이 데이터를 가지고 오는 URL 임
- Fetch
- Fetch에서 데이터를 가지고 와서 코드로 활용할 수 있다.
- 서버에서 데이터를 받아올 수 있는 URL이 있다면 그 URL을 집어 넣으면 데이터를 받아오는 친구
**※ JQuery는 누군가가 만들어 놓은 코드이므로, 만약 가져와서 html 파일을 새로 만든다고 하면
가 들어가 있는지 확인을 할 것!**fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})result를 가져올 것(URL) . 그리고 json 형태로 만들어 그리고 이걸 활용할 것이라는 의미 → 위 fetch 코드가 한 세트로 생각하고 사용 할 것! (기본 골격)
-
URL은 ctrl을 누르고 클릭하면 링크가 열림.
-
계속 반복해서 익숙해지는 과정 필요!
-
모든 코드를 다 기입하기보단 지금껏 내가 해왔던 코드를 가져와서 수정을 하는 게 핵심!
-
$(document).ready(function) { }→ 클릭해서 가져오는 것이 아니라 오자마자 바뀌어 있게 해주는 코드, { } 안에 fetch를 넣어주면 자동으로 실행됨
<2주차 나의 생각>
1주차에 비해서 확실히 난이도가 올라갔다..
Javascript, JQuery, Fetch 모두 어려웠다..
대강의 느낌은 알겠으나 직접하기는 무리가 있을 정도로 어려운 느낌이다.
감이 전혀 잡히지 않는 느낌이다.
아직 제대로 모르는데 3주차를 시작해도 될지 의문이다.
4주, 5주차에도 계속 반복해서 하니까 너무 걱정하지 않아도 된다고 했지만 걱정이 된다.
다시 2주차를 반복해서 들어보면서 익혀야 할 것 같다...
개발자가 쉽지 않은 이유를 간접 경험한 2주차 였다..
