내일배움캠프/내배캠_ [왕초보] 웹개발 종합반 5

[왕초보] 웹개발 종합반 5주차

내 파이어베이스 들어가는 방법파이어베이스 접속 → 로그인 → 우측 상단 콘솔로 이동 버튼 클릭 → 프라잇 클릭 → 좌측에 Firebase Database 클릭 프로토콜: 웹 서버 간의 통신 방식을 지정 도메인: 고유한 웹 사이트의 주소https://의 s는 security의 약자로, 보안이 조금 더 강화되었다는 뜻 //를 빼도 동작함 프로토콜/ 도메인/ 경로 깃 허브(Git Hub): 코드를 저장하고 공유하는 공간도서관 깃허브 사용하는 이유:공용의 저장소에 저장하는 것이 수정과 반영이 편함한 사람 컴퓨터에 저장했는데, 그 사람이 출근을 안 하면 그 코드를 볼 수가 없기 때문임 깃허브 가입하는 방법깃허브 접속 → 우측 상단 Sign Up → 이메일 계정 입력 → Continue 버튼 클릭 →  비밀번호 입..

[왕초보] 웹개발 종합반 4주차

프론트엔드(Front End)눈에 보이는 것백엔드에 요청함백엔드에 응답받음HTML, CSS, JavaScript 백엔드(Back End)눈에 보이지 않는 것프론트앤드로부터 요청받음프론트앤드에 응답함Server, DB, API 파이어베이스(Firebase)모바일 및 웹 어플리케이션 개발 플랫폼서버 개발 없이 제작 가능웹 서버를 대신 만들어 주는 것구글이 개발백엔드 코드 없이 프론트만 알아도 웹 서비스 제작 가능개발 코드 1. 서버로 데이터 전송하는 코드                     (프론트에서 작성)개발 코드 2. 데이터 전달받고 DB에 저장하는 코드 (파이어베이스에서 작성, 용량초과만 안 하면 괜찮음) 데이터베이스(Database)데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음각 데이터베이..

[왕초보] 웹개발 종합반 3주차

제이쿼리: 남이 만들어 놓은 자바스크립트 라이브러리 fetch: 서버에서 데이터를 받아오는 것서울시 공공 데이터에서 미세먼지를 실시간으로 볼 수 있음 toggle(): 상태를 전환하는 이벤트 핸들러onclick(): 클릭했을 때 반응이 일어나는 이벤트 핸들러append(): 추가하는 이벤트 핸들러+click(): 클릭 이벤트 핸들러 keydown(): 키보드의 키 중 하나를 누를 때mouseover(): 요소 내부에서 마우스가 움직일 때mouseout(): 요소에서 마우스가 벗어날 때 발생 mouseenter(): 요소 내부로 진입할 때 발생 mouseleave(): 요소를 벗어날 때 발생keydown(): 키를 누를 때 발생하는 이벤트                  (키를 누르는 순간에 반응)keyup..

[왕초보] 웹개발 종합반 2주차

부트스트랩: 남이 만들어 놓은 예쁜 css 꾸러미 부트스트랩 사용하는 방법원하는 div 코드 가져오기→ F12 누르고 우측 코드 가져오기 태그가 하나면 클래스를 지정할 필요가 없음 브라우저의 3대 요소HTML, CSS, JavaScript 자바스크립트: 브라우저가 알아들을 수 있는 프로그래밍 언어웹 페이지의 움직임서버와의 통신모바일 청첩장이면, 보고 댓글도 남길 수 있음무언가가 없어지고, 사라지고, 바뀌는 것 사용하는 이유표준이 되어서 자바스크립트와 자바(Java)의 차이없음인도와 인도네시아햄과 햄스터 작성하는 방법 엘리먼트 안에 작성 console.log(); 는 '개발자 도구에 띄워주세요' 프로그래밍 언어 종류변수값을 담음그릇값을 담아서 한 번에 관리하는 것 let a = '은동이';console.l..

[왕초보] 웹개발 종합반 1주차

웹: 개발의 기초 (입문) 웹 브라우저: 사이트에 접속할 수 있게 도와주는 것 서버 클라이언트: 웹 브라우저의 작동 원리서버: 주는 쪽클라이언트: 받는 쪽(F12를 이용해 코드를 수정하면 내 사이트에서만 코드가 변경됨) 라이브러리: 누군가 이미 만들어 놓은 것   VSC(Visual Studio Code)를 사용하는 이유:코드를 더 편리하게 사용하기 위함보고서를 메모장보다 워드 등을 사용하는 것처럼 HTML: 보여주는 것CSS: 꾸며주는 것 엘리먼트: 여는 태그: 닫는 태그:  태그: 파비콘과 제목이 삽입됨*파비콘: 웹사이트 제목 좌측에 있는 이미지body>태그: 뼈대, 각종 태그, 자바스크립트와 css가 입력됨 스타일 생성하는 방법(여는 태그에) 클래스 또는 아이디 생성→ 스타일 태그 생성위치는 상관 ..