소파에서 개발하기
[노마드] 모멘텀 클론코딩 본문
강의 메모
니꼬쌤 사랑해요
#2 [2021 UPDATE] WELCOME TO JAVASCRIPT
#2.3 const and let (09:45)
const : 바뀌지 않을 변수
let : 후에 변경 가능한 변수
var : 예전엔 이것만 있었다. 변경 가능. 쓰지 말 것.
#2.4 Booleans (07:22)
null : '아무것도 없음'의 의미. 절대 자동적으로 발생하지 않고, '이 변수는 비어 있음'을 js에게 알려주기 위해 코더가 일부러 적어 넣는 데이터타입.
undefined : 어떤 변수가 생성(let)되기는 했는데, 정의(=)된 값이 없을 때 js가 표시하는 데이터타입.
#2.10 Recap II
- 함수 : function( );
- 코드의 캡슐화!
- () 안 매개변수(place holder)는 아무거나 상관 없고, 함수 안에서만 존재한다.
- () 는 재생버튼과 같다
- 배열 : array[ ];
- 안에 어떤 데이터타입이든(undefined 포함) 다 들어갈 수 있다!
- const 로 생성해도 array 안의 구성요소는 업데이트 가능!
- 객체 : object { } ;
- Property들이 무엇을 의미하는지 이름표를 달고 싶다면 객체 활용!
- object.new = "oneMore";로 언제든지 추가 가능
** 결과값을 반환(return)받고 싶은 경우, 담아 갈 바구니(var)를 준비
#3 [2021 UPDATE] JAVASCRIPT ON THE BROWSER
#3.0 The Document Object
'document'란, javascript의 관점으로 본 html 코드다.
- 즉, js는 html을 커다란 하나의 object로 본다.
- html의 title 태그는 js에서 document.title이다.
- js에서는 object의 property의 값을 update 할 수 있다.
- js에서 document.title의 값을 업데이트하면!? - 읽고, 수정하고, 반환해서 BOOM! - html의 값이 바뀐다.
보다 보니 분명히 생코 할 때 썼던 건데 이해를 못 하고 썼군
css도 js 방식으로 활용할 수 있다.
getElementBy~ : js 방식으로 가져오기. 해당하는 모든 값을 array로 가져옴.
querySelector : css 방식으로 가져오기. css식으로 class나 id를 지정 + 그 밑의 정보까지 특정해서 1개만 가져옴.
querySelectorAll : css 방식 + array로 다 가져오기
맞아 그래서 뒷동산 색깔 바꾸기가 안 됐지.. array에 색이 어딨어 ^^
그리고 html태그에 적용된 css 속성도 html과 같은 방식으로 js에 끌어다 변경할 수 있음.
예를 들면 title.style.color = "green"; 놀랄 노.
#3.3 Events (12:38) ~~
- 반응시키고 싶은 HTML element를 가져온다(버튼이 아니어도 된다!!)
- 원하는 자극을 설정한다 (click, point, down, ...)
- 원하는 반응을 function으로 만든다 (알림창 띄우기, 색깔바꾸기, ...)
- 자극이 오고 있는지 들어 줄 감시자에게 명령한다.
HTMLelement . addEventListener ( "자극" , 반응 ) ; <--- 여기 반응 함수에는 () 붙이지 않는다! 우리가 재생버튼 눌러버리면 애초에 그 실행값이 들어간다! 요렇게 감시자 붙어 있는 채로 JS한테 넘겨주고 때 되면 알아서 재생버튼 누르라고 해야 한다!
아니면 onclick이라는 property(자극)에 handleTitleClick이라는 함수(반응)을 정의할 수도 있다!
HTMLelement . on~~~ = 반응 ; <------- 니꼬쌤은 listener 삭제할 수 없어서 추천하지 않음
이벤트 짱재밋다,, 이렇게 재밌는 거였어??
* html의 <body> <head> <title> 등은 js에서 따로 변수 지정해 읽어오지 않아도 document.body 의 객체.태그 형태로 불러 올 수 있음!
#3.7 CSS in Javascript part Two (09:34)
계속 너무 satisfying한 내용이 나와서 강의를 못 끊겠다 ㅋㅋㅋㅋㅋ
위의 내용을 모두 이해하고 활용할 수 있게 됐음에도 불구하고, 스타일 변경은 css에서 하는 게 좋다!
- css 에서 class값으로 원하는 '반응(.~~)'을 넣어둔다.
- js의 자극function을 통해 목표 태그에 '반응(.~~)'을 업데이트한다. 즉, js->html->css 의 흐름으로 영향을 미침!
- 조건에 따라 class 값을 넣었다 뺐다 해야 한다면!? ---> 덮어쓰기 해서 다른 class에는 영향을 미치는 일이 없도록 classList를 이용한다! --> classList는 class 내의 element를 조작하도록 허락 --> contains는 있는지 없는지 확인, add는 넣고 remove는 뺌.
- 아니면 그냥 classname.toggle을 쓴다 ^^ 매개변수가 있으면 없애고, 없으면 만들어주는 코드
치트키 배우는 거 안 좋아했는데, 과정도 배우고 치트가 필요한 이유도 배웠다 ^^
#4 [2021 UPDATE] LOGIN
필기 내용이 저장이 안 됐나보다 슬프다 ^^
#4.1 Form Submission (08:38) + #4.2 Event object (10:56)
input 안에 있는 button을 누르거나 type이 submit인 input을 클릭하면
값이 submit되는 동시에 페이지가 새로고침됨 <------ 이 부분이 맘에 안 든다면
WHY?
submit event가 일어나면 js가 onLoginSubmit의 괄호(argument, 매개변수) 안에 다양한 정보를 objet 형태로 담아 줌(제출자, 제출시간, 마우스 좌표 등 + 몇 가지 함수).
그런데 새로고침되면 이런 정보들이 날아가므로, 담겨 있는 preventDefault()를 써서 브라우저의 기본동작을 막음.
#4.4 Getting Username (11:12)
어떻게 하면 input받은 username을 새로고침해도 계속 기억할 수 있을까?
-> localStorage 활용하기!
localStorage의 많은 method 중 'localStorage.setItem(Key, Value)'을 활용하면 브라우저에 object를 만들 수 있음.
사용자명, 유튜브 볼륨 크기 등등 사용자 설정 저장 가능. 가져오려면 localStorage.getItem(Key) 이용.
#4.6 Loading Username (10:07)
const savedUsername = localStorage.getItem(USERNAME_KEY);
if(savedUsername === null)
localStorage에 username이 없으면 -> login 페이지 show, greeting 페이지 hidden
localStorage에 username이 있으면 -> login 페이지 hidden, greeting 페이지 show
#5 [2021 UPDATE] CLOCK
#5.0 Intervals (05:37)
#5.1 Timeouts and Dates (08:46)
* Interver = 일정한 시간 간격으로 동작을 반복실행 시켜주는 도구 (첫번째 실행도 시간 센 다음에 실행)
setInterval( 실행할 동작 , 시간간격 ms ) ; <--------- 1000ms = 1초
timeout = 일정 시간 이후에 동작이 실행하도록 하는 타이머
setTimeout( 실행할 동작, 기다릴 시간 ms )
* new Date() 함수에서 각각의 요소 떼어오기
Date는 function 이다.
JavaScript에는 생성자 함수라는 것이 있다(여러개의 동일한 property를 가지는 object를 생성하기 위해서 필요).
new 를 선두에 쓰고 생성자 함수를 호출하면 instance object를 반환한다.
1초 간격으로 새 object를 생성해 반환하는 시계
#6 [2021 UPDATE] QUOTES AND BACKGROUND
#6.0 Random Quotes (10:14)
랜덤으로 인용구 가져오기
1. 랜덤 number 불러오기
*Math.random()에다가 '숫자'를 곱하면, 0과 그 '숫자' 사이에 있는 number가 랜덤하게 반환됨.
즉 0 이상 < ___ < '숫자' 미만
* 랜덤값은 float다. int로 만드는 방법은
Math.round( ) <--- 반올림
Math.ceil( ) <--- 올림
Math.floor( ) <--- 내림
*number를 string으로 만드려면 String()으로 감싸기
2. 인용구 array에서 [몇 번째 것을 꺼내 올 것인가] <-----여기에 Math.random을 활용
#6.1 Random Background (08:45)
* 윈도우 시작화면 이미지 저장하는 법 : https://questionblock.tistory.com/52
***append 스파르타에서 대충 배워서 아리까리 하다!
append : 끝에 달기
preppend : 앞에 달기
#7 [2021 UPDATE] TO DO LIST
#7.3 Saving To Dos (07:26) ~
새로고침해도 살아남는 todolist를 만들려면 localstorage에 저장을 해야 하는데,
배열 자체로는 못 하고 텍스트 형식으로만 저장 가능.
그래서 배열생성 -> 텍스트로 변환(JSON.stringify) 후 localstratge에 저장 -> localstorage에 뭔가 들어 있다면 배열로 변환(JSON.parse) 후 사용하는 3단계를 거쳐야 함.
참고(json에 대해): https://velog.io/@surim014/JSON%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
그리고 코드에서 todos(즉, todo 배열)이 empty 인 상태로 시작하게 되는데,
새로고침 했을 때 localstorage에 뭔가 들어있다면 그걸 각각(forEach) 꺼내서 print 해줘야 한다.
#7.6 Deleting To Dos part One (10:23)
이제 반대로 페이지에서 삭제하면 localstorage에서도 삭제되어야 한다.
즉, 삭제하고 싶은 걸 뺀 array를 update하면 된다.
그런데 어떻게 사용자가 지우고 싶은 todo를 특정해 빼낼 것인가?
---> 저장 시점(Date.now)을 각각의 todo에 id 값으로 주기
- 사용자가 todo를 submit하면, text와 id 값을 담은 newTodoObj가 만들어진다.
- newTodoObj를 todos에 push한다 (storage에 있다가 새로고침 시 paint됨)
- newTodoObj는 todos에 들어간 채 stringify되어 localStorage에 저장되었다가
- 새로고침되면 parse되어 다시 object의 형태를 찾는다.
- 이대로 paintTodo에 들어간다.
- newTodoObj를 paintTodo에 넣는다
- 이제 paintTodo는 단순히 text값을 받아 그걸로 li를 만들어 print하는 게 아니라, objet를 받아 각각의 key를 다른 곳으로 보낸다.
- newTodoObj.text는 기존대로 span의 innertext로 보낸다.
- newTodoObj.id는 todoLi의 id 값으로 보낸다.
#7.7 Deleting To Dos part Two (13:04)
filter 문법 : array.filter(function) <--- function에 필터링 조건이 들어 있어야 함
filter()의 기능은 forEach()와 비슷하지만, 안에 들어가는 함수 sexyFilter에 array의 item [1, 2, 3, 4]를 넣어 실행한 뒤 조건에 true인 것만 유지하고 false인 것은 빼는 것이다.
이걸 delTodo에 적용해 보면, todos에 저장된 값 중에 선택된 id값을 제외한 새 array로 업데이트 해야 한다.
새로 정의해야 할 건 없다.
todoLi : 선택된 항목의 상위 <Li> 태그
todoLi.id : 선택된 항목의 상위 <Li>태그의 id값 <--- Date.now 값이므로 number임. todo.id는 stringify되어 string이므로 다시 parseInt 해줘야 함수가 작동.
이후 update된 array를 localStorage에까지 업데이트 해 줘야 완전히 끝.
#8.0 Geolocation (07:27)
오늘의 실수(22.01.24)
함수 안에서 정의된 변수는 그 밖에서는 사용할 수 없고, 다른 방식으로 불러오던가 정의해야 한다.
그걸 잊고 로그인 함수에서 정의한 local variable을 로그인 확인 함수에서 썼더니 정의 안 됐다고 오류 나고 난리 났음 ㅠ
함수의 value -> 로컬스토리지에 저장-> 로컬스토리지 value 불러오기 요렇게 가자.
똑같은 argument 여기저기서 쓰다가 헷갈리면 큰일 날 수도 있겠다;
*js에서 모든 함수는 실행 시 최상단으로 끌어올려진다고 한다. 그러니 맥락상 이해하기 편한 곳에다 정의해도 상관 없음.
'프론트엔드 공부 > 클론코딩 실습' 카테고리의 다른 글
| [내일의집] Sass 활용하기 : 변수, 그리드 (0) | 2022.03.18 |
|---|---|
| [내일의집] asset 준비 (0) | 2022.03.17 |
| [내일의집] 환경 세팅 (0) | 2022.03.16 |
| [노마드] 영화서비스 만들기 (0) | 2022.03.03 |
| [노마드] 모멘텀 클론코딩 개인화 trouble shooting (0) | 2022.01.27 |
