주말에 내가 맡은 부분의 코드를 구현해보면서 이해가 안되었던 부분들을
튜터님을 찾아가 여쭤봤었다!
튜터님의 설명을 들으니 주말에 묵은 체증이 싹 내려가는 느낌이 들었다
(튜터님 앞에서 박수칠뻔)
but, 아직 해결못한 과제..
나는 회원가입을 하면 바로 main 페이지로 돌리지 않고 로그인창을 띄워주고 싶은데
url창에다가 #하고 main페이지에 접근하는 걸 붙이면, 왠걸 바로 접근이 되버린다.
회원가입 완료가 되었을 때, 창을 돌려주기 전에 로그아웃 메소드를 안에 넣는 걸 시도해봤는데 잘 안되었다.
내 생각엔 파이어베이스 자체 제공 기능중에 이미 user에 값이 담겨서 그런게 아닐까 추측한다.
내일 오전에 다시 시도해보고 튜터님을 찾아가봐야징
<내일 꼭 할일>
1. 쿼리 사용해서 (where 조건 달고) 특정 게시물만 뽑아오는거 성공시키기
2. 게시물 crud 구현해보기
3. 회원가입 완료됐을때 ,바로 user에 해당 사용자 값 담지말고 다시 로그인 하게하기
(도메인에 직접 쳐서 못들어가게 하면 되나??)
<오늘 스터디 시간에 읽은 모던자바스크립트 복습내용>
https://ko.javascript.info/intro
자바스크립트란?
ko.javascript.info
브라우저 환경과 다양한 명세서
자바스크립트는 본래 웹 브라우저에서 사용하려고 만든 언어이다..
이후 진화를 거쳐 다양한 사용처와 플랫폼을 지원하는 언어로 변모하였다.
자바스크립트가 돌아가는 플랫폼은 호스트(host) 라고 불린다. 호스트는 브라우저, 웹서버, 심지어는 커피 머신이 될 수도 있다.
각 플랫폼은 해당 플랫폼에 특정되는 기능을 제공하는데, 자바스크립트 명세서에선 이를 호스트 환경(host environment) 이라고 부른다.
호스트 환경은 랭귀지 코어에 더하여 플랫폼에 특정되는 객체와 함수를 제공한다.
웹브라우저는 웹페이지를 제어하기 위한 수단을 제공하고, Node.js는 서버 사이드 기능을 제공한다.
최상단엔 window라 불리는 ‘루트’ 객체가 있는데, window 객체는 2가지 역할을 한다.
- 전역 객체 챕터에서 설명한 바와 같이, 자바스크립트 코드의 전역 객체이다.
- '브라우저 창(browser window)'을 대변하고, 이를 제어할 수 있는 메서드를 제공한다.
문서 객체 모델(DOM)
문서 객체 모델(Document Object Model, DOM)은 웹 페이지 내의 모든 콘텐츠를 객체로 나타내준다. 이 객체는 수정 가능하다.
document 객체는 페이지의 기본 ‘진입점’ 역할을 한다.
document 객체를 이용해 페이지 내 그 무엇이든 변경할 수 있고, 원하는 것을 만들 수도 있다.
DOM은 브라우저만을 위한 모델이 아니다.
DOM 명세서엔 문서의 구조와 이를 조작할 수 있는 객체에 대한 설명이 담겨있다. 그런데 브라우저가 아닌 곳에서도 DOM을 사용하는 경우가 있다.
HTML 페이지를 다운로드하고 이를 가공해주는 서버 사이드 스크립트에서도 DOM을 사용한다.
브라우저 객체 모델(BOM)
브라우저 객체 모델(Browser Object Model, BOM)은 문서 이외의 모든 것을 제어하기 위해 브라우저(호스트 환경)가 제공하는 추가 객체를 나타낸다.
예시:
- navigator 객체는 브라우저와 운영체제에 대한 정보를 제공한다. 객체엔 다양한 프로퍼티가 있는데, 가장 잘 알려진 프로퍼티는 현재 사용 중인 브라우저 정보를 알려주는 navigator.userAgent와 브라우저가 실행 중인 운영체제(Windows, Linux, Mac 등) 정보를 알려주는 navigator.platform이다.
- location 객체는 현재 URL을 읽을 수 있게 해주고 새로운 URL로 변경(redirect)할 수 있게 해준다.
alert(location.href); // 현재 URL을 보여줌
if (confirm("위키피디아 페이지로 가시겠습니까?")) {
location.href = "https://wikipedia.org"; // 새로운 페이지로 넘어감
}
alert/confirm/prompt 역시 BOM의 일부이다. 문서와 직접 연결되어 있지 않지만, 사용자와 브라우저 사이의 커뮤니케이션을 도와주는 순수 브라우저 메서드이다.
→ BOM은 HTML 명세서의 일부이다.
DOM 트리
HTML을 지탱하는 것은 태그(tag)이다.
문서 객체 모델(DOM)에 따르면, 모든 HTML 태그는 객체이다.
태그 하나가 감싸고 있는 ‘자식’ 태그는 중첩 태그(nested tag)라고 부른다.
태그 내의 문자(text) 역시 객체이다.
이런 모든 객체는 자바스크립트를 통해 접근할 수 있고, 페이지를 조작할 때 이 객체를 사용한다.
DOM 예제
DOM은 HTML을 태그 트리 구조로 표현한다.
→ 트리에 있는 노드는 모두 객체입니다.
태그는 요소 노드(element node) (혹은 그냥 요소)이고, 트리 구조를 구성한다.
<html>은 루트 노드가 되고, <head>와 <body>는 루트 노드의 자식이 된다.
요소 내의 문자는 텍스트(text) 노드가 된다.
텍스트 노드는 문자열만 담는다. 자식 노드를 가질 수 없고, 트리의 끝에서 잎 노드(leaf node)가 된다.
새 줄과 공백은 글자나 숫자처럼 항상 유효한 문자로 취급된다.
텍스트 노드 생성엔 두 가지 예외가 있다.
- 역사적인 이유로, <head> 이전의 공백과 새 줄은 무시된다.
- HTML 명세서에서 모든 콘텐츠는 body 안쪽에 있어야 한다고 했으므로, </body> 뒤에 무언가를 넣더라도 그 콘텐츠는 자동으로 body 안쪽으로 옮겨진다. 따라서 </body> 뒤엔 공백이 있을 수 없다.
문서 내에 공백이 있다면 다른 문자와 마찬가지로 텍스트 노드가 된다. 그리고 공백을 지우면 텍스트 노드도 사라진다.
'📖 나의 개발일지 (WIL&TIL)' 카테고리의 다른 글
| [18일차] 프로젝트 주는 정말 정신없당!!! 오늘의 개발일지(TIL) (0) | 2022.11.23 |
|---|---|
| [17일차] 오늘의 개발일지(TIL) (2) | 2022.11.22 |
| [3회차 주말] 다음 주 프로젝트를 위한 빌드업 작업! 주말 개발일지(WIL) (1) | 2022.11.19 |
| [15일차] 두근두근 새로운 프로젝트 시작! 정신없었던 오늘 개발일지(TIL) (0) | 2022.11.18 |
| [14일차] 너무 바쁜 오늘의 개발일지(TIL) (1) | 2022.11.17 |
댓글