[내일배움캠프] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z (사전캠프)

8/28 월 

 

▼ 자바스크립트 핸드북으로 예습(?)하기 !

https://nbcamp.gitbook.io/javascript-handbook/

Part.01 Hello World - javascript handbook

 

 

---

 

8/29 화 (1주차)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

HTML 기본 구조 익히기, CSS 적용하기.

부트스트랩 사이트를 이용하여 CSS 다양한 스타일 쉽게 적용하기

 

▼ 부트스트랩 사이트

https://getbootstrap.com/docs/5.3/getting-started/introduction/

Get started with Bootstrap

 

 

---

 

8/30 수 (2주차)

 

HTML : 뼈대

CSS : 꾸미기(디자인)

자바스크립트 : 움직임

 

변수, 자료형, 함수, 조건문, 반복문

 

CSS는 <style></style> 안에,

JS는 <script></script> 안에 코드를 써줌.

 

콘솔 -> 개발자 도구

 

2) 자료형

 - 리스트 : 순서가 중요 ["사과", "배", 수박"]  / 인자 호출할땐 리스트이름[0]

 - 딕셔너리 : key-value 로 이루어짐 {name : "강낭콩", age : 100, height : 180} / 인자 호출할땐 딕셔너리 이름["name"]

* 순서는 0부터 시작.  a = ['사과', '배', '수박']   a[0] = 사과  a[1] = 배  a[2] = 수박

 

3) 조건문 / 반복문

 

 

-> 반복문 안에 조건문 ! 

 

 

 

 

 

 

JS를 이용하여 움직이는 웹페이지 만들기 !

 

JQuery 이용하기

jQuery : 누군가 만들어놓은 라이브러리. 

 

 

▶ 반복문을 이용하여 리스트 인자 출력하기

 

 

 

 

 

 

 

▶ 반복문을 이용하여 딕셔너리 인자 출력하기

 

 

 

 

 

 

 

 

 

 

 

 

⭐ 2주차 숙제

 

▶ 딕셔너리의 값을

"()의 키는 ()cm입니다."

형태로 반복문을 이용하여 출력하기

 

 

 

 

 

 

 

 

 

 

---

 

8/31 목 (3주차)

 

jQuery + fetch

fetch : 어떤 서버에서 공개한 데이터를 요청하고 받아오는 과정  ex) 날씨 데이터, 미세먼지 데이터 등

 

+ 중간에 index.html 파일 열다가 spartaflix와 album 폴더의 파일이 둘 다 index라서 하나의 코드가 날아감..(병합하기 눌러버린 듯) 그래서 살짝 멘붕 왔지만 좌측 index.html 파일 우클릭하고 open timeline해서 작업해 놓은 코드 살려냈다 ..^^

(휴지통에도 없어서 멘붕왔음)

앞으로는 폴더 직접 여는 걸로 ..!

 

-> openclose를 실행했을 때, postingbox를 지정한다는 의미임.

(아직 활동은 지정해주지 않았음)

저 상태에서 .toggle() 를 넣어주면, 버튼을 누를 때마다 포스팅박스가 사라졌다 생겼다 하게 됨.

 

입력값을 가져와서 새로운 앨범카드로 붙여넣기.

가져오고 싶은 (input) 부분의 id를 image라고 줬을 경우, 

⑴ image라는 변수를 만들어서 ⑵ id가 image인 값(val)을 가져와서 ⑶ 그 값을 image에 넣어줌.

 

 

 

 

 

-> 새롭게 만들 카드를 임시로 temp_html이라는 이름으로 만들어줌

 

 

 

 

 

 

 

 

-> 붙여넣을 div에 아이디를 설정해주고, 그 div 맨 뒤에 추가해주는 append를 사용하여 임시로 만들어놓은 temp_html을 붙여줌

 

 

이제 다른 서버에서 데이터를 얻어와서 코드를 짜보는 활동을 할 것임.

 

서버 -> 클라이언트  표준의 형식 : JSON

 

-> 서울시 openAPI를 보기 좋게 정렬했을 때 Key-Value 형식 (딕셔너리 형식)

 

API는 통상적으로 허락된 곳들의 접근만 허용함.

openAPI는 공개된 API라고 보면 됨.(누구나 사용할 수 있는)

 

 

GET : 서버의 위치(은행의 강남지점) + 창구의 이름 + 창구에 가져가는 데이터 -> GET 방식 !

 

url을 fetch의 기본골격에 그대로 넣어주면

그 데이터를 사용할 수 있음.

실제로 그 데이터가 딕셔너리의 형태를 갖고 있기 때문에 쉽게 가져올 수 있음.

 

 

 

 

 

 

 

 

 

 

-> if 문 사용하여 40이 넘은 숫자는 빨간 글자로 표현하기

(40이상인 항목에 class를 줘서 해당 class만 빨간 글자가 적용되도록 하면 됨)

 

 

 

 

 

 

-> openAPI를 이용하여 서울의 온도(데이터) 불러오기.

temperature를 id로 가진 구역의 text 변경하기.

 

 

 

⭐ 3주차 숙제

-> 슾플릭스 기온 화면에서 20도를 기준으로 높으면 더워요, 낮으면 추워요가 나오게 하기.

 

 

 

 

 

-> if 문을 이용하여 변수 temp가 20보다 크면 temperature의 text를 더워요로,

작으면 추워요로 표기하기.

 

 

 

 

---

 

9/1 금 (4,5주차)

 

Firebase 

데이터를 적재/보관하고 보관된 데이터를 가지고 와서 활용하기. -> 백엔드 !

 

구글이 만들어놓은 firebase라는 백엔드를 사용할 것임.

 

데이터베이스 : 데이터를 저장해놓은 것.

데이터베이스는 잘 찾기 위해 잘 적재하여야 함.

 

SQL : 관계형 데이터베이스 -> 정리된 정보를 다룰 때 사용 ex) 은행, 대기업

NoSQL : 비관계형 데이터베이스 -> 복잡하거나 유연한 정보를 다룰 때 사용 ex) 스타트업

 

데이터베이스는 바로 접근해서 바로 가져올 수가 있음.(이미 어떤 기준으로 정렬되어있기 때문에) -> 인덱스

 

firestore는 구글의 클라우드 기반 NoSQL 데이터베이스임.

 

프론트엔드 -> 백엔드 addoc(firebase에서 미리 정의해놓은 함수)이라는 함수를 사용하여 데이터를 전송함.

가지고 온 다음, 카드들을 만들어서 붙여주기. 

 

▼ 파이어베이스  세팅해주기

 

-> 라이브러리 가져오기

 

 

 

 

-> 값  넣고

 

 

 

 

 

-> 인스턴스

초기화

 

(앞으로 firebase 사용할 땐 이 코드를 그냥 복사해서 세팅해주면 됨)

그리고 타입을 모듈로 바꿔주기. -> 스크립트가 맨 마지막에 불리게 됨.

온클릭 이런 활동? 들이 작동이 안되기 때문에 클릭을 동적으로 만들어줘야 함.

(동적으로 = 코드로 클릭을 달아준다, 코딩으로 해준다 라는 의미)

 

 

동적으로 image title content date 값을 받아와서

 

 

document를 하나 만든 다음에, 

 

 

 

addoc으로 firebase에 데이터를 넣어줌.

alert로 저장완료됨을 알려주고, reload로 새로고침해주는 것.

 

 

가지고 오는 코드.

doc로 저장된 데이터들을 row에 넣어주고

 

image title content date에 각각의 데이터들을 넣어줌.

 

temp_html로 임시 카드를 만들어서 

 

 

 

 

 

 

 

 

 

append로 임시카드를 카드 구역에 추가해줌.

 

⭐ 4주차 숙제

앨범의 카드들을 내가 저장한 것들만 나오게 하기 (디폴트로 저장되어 있는 카드들 나오지 않게)

골격만 남기고 내용은 싹 지웠는데 ,,

이게 맞나 ?

 

 

암튼 4주차 강의도 끝 !

 

 

(5주차)

 

1. 파이어베이스 로그인하고 초기세팅코드 스크립트 맨 위에 넣어주기. type="module"도 필수!

2. 기록하기 버튼을 누르면 입력한 정보들을 파이어베이스에 보내주기.

2-1) 클릭 달아주기

기록하기 버튼에 postingbtn이라는 id를 달아줌.

(type=module이 되는 순간 onClick은 작동되지 않기 때문)

 

image, title, star, comment를 가져와서 변수에 저장해줌.

 

document의 형식으로 요소들을 저장해줌

 

 

addDoc으로 파이어베이스의 movies라는 db에 값들을 넘겨줌.

 

 

 

3. 데이터 가져와서 화면에 카드 형태로 추가해주기.

3-1) type=module 이렇게 설정을 해주면, 스크립트가 다 로딩이 된 다음에 시작됨.

다 로딩이 되고 시작하라는 명령인 document.ready가 더이상 필요 없어짐.

(내부의 코드들을 그냥 바깥으로 꺼내주면 됨.)

 

 

 

 

 

 

 

3-2) 데이터 가져와서 카드 추가해주기

getDocs 로 movies에 있는 데이터를 가져옴.

row에 데이터들 저장해주고

콘솔로 row에 데이터가 잘 저장되어있나 확인

-> 콘솔 대신 카드를 만들어주는 코드 넣어주면 됨!

 

배포해주기

https -> 프로토콜 : 자료를 요청하고 받는 것에 대한 형식

프로토콜://도메인/경로

 

파이어베이스 한계점

- 다른 곳에서 만든 서버이기 때문에 저장, 받는 것 오ㅣ에 커스터마이징 하기 어려움.

- 구글에 종속적임.

나중엔 서버를 직접 만들어서 코딩할 수 있음.

파이썬을 이용해서 백엔드에서 벌어지는 일들을 컨트롤할 수 있음(더 많은 기능)

 

파이썬 맛보기 ! !

▼ 구글 코랩

https://colab.research.google.com/

Google Colaboratory

새노트에서 코드 입력하고 ctrl + 엔터 누르면 실행됨.

 

beautifulsoup을 이용해서 html코드로 정보 가져오기.

 

⭐ 5주차 숙제

깃허브로 배포한 링크 제출하기 !

 

new repository -> repository name입력하고, 공개로 만들기 -> 만들어놓은 파일 불러오기 클릭한 후, html파일 가져오기 -> settings에 pages로 들어가서 -> branch main 선택하고 save -> 상단에 나오는 링크가 배포된 사이트 !

 

▼ 내 링크 !

https://yeonna18k.github.io/sparta/

스파르타플릭스