블로그를 주로 더 쓰다보니까 벨로그가 어색하지만 그래도 써놔야지..ㅎ

이 페이지 바꾸기 이것도 또한 오잉?했지만 아예 변형시키진 않고 추가만 해서 바꾸기로 다짐했다..

또 사진들을 찾아서 저작권 없는 것들만 가져와서 삽입했지만 그럼 글씨가 잘 보이지 않는 느낌이다..

내가 직접 배경색 입히고 거기에 아이콘 추가해서 길이 맞추고 크기 맞춰서 넣었다..

다시 또 수정했지만 또 마음에 들지 않았다..

아마 이게 찐 최종.. 아마도..

하지만 한가지 또 있어서 올린다 또.. 이게 진짜 마지막이었다..

아, 이거 하면서 어려웠던 점은 반응형으로 만들어야 하다보니까 앱으로 전환했을 때 휴대폰 pixel이 다 다르기 때문에 틀어지고, 안보이고 하는 부분들인 문제가 있기 때문에 반응형 처음에 모르고 막 했다가 다시 다 수정했었다..

끝..!

내가 내 스타일대로 꾸미는 웹.. 웹을 만들면 자동으로 앱으로 바꿔주는 것도 신기했다 어쨋든 웹 생성이라기보다 기존 웹 디자인이 너무 허술해서 그 부분들 수정해달라고 하셨다

딱 처음 받았던 웹의 모습은 헉!!! 이정도로 놀랄정도였다 시간이 없어서(?) 대충 만들었다고 하셨었는데 증말 대충이었기 때문..

보여드리자면 이정도.. 그래서 내가 바꾸고 싶은대로 막 바꿨다

처음에 바꾸던게 이런 모습.. 하지만 너무너무 마음에 들지 않았기 때문에 수정하고 또 수정하고 반복에 반복을 했었다..

한 페이지를 하루 질질 끌고 있다가, 이제 하루마다 몇 페이지씩을 수정하고, 그것도 마음에 들 때까지 수정을 했다..

저 페이지만 보여드리자면 그 후에는..

이랬지만, 실제 사진이 왜이리 마음에 들지 않는건지.. 실제 이미지보단 아이콘이 주로 들어갔기 때문에 아이콘으로 통일하고자 또 변경했다..

아마도 최최최종.. 아직도 손보고 싶지만 다른 페이지들을 하느라 그냥 뒀다

레이아웃 자꾸 틀어지고, 크기가 안맞고 위치가 마음에 들지 않아서 수정을 엄청하고 또 했다..

끝!

그냥 일상 이야기.. 저번주에 일하다가 MySQL 글 작성하고, 데이터 관련 쪽 업무를 계속하는데 역시 난 이 길이 아닌 것 같아서 고민이 많았다..
회사 분과 이야기 하고, 멘토링 받다가 데이터 사이언티스트로 왔는데 어떠냐 등등..
원하던 직무는 프론트였지만 프론트보다 AI쪽으로 전망을 정하는게 어떠냐라는 대표님 말씀.. 어느분야든지 전공만 살리면 된다는 생각이었지만 데이터 분석 관련된 건 증말.. 자격증도 땄지만 그건 별개다
그래서 회사 분이 잘 말씀해주신 덕분에 프론트로 직무를 옮겨서 웹 페이지 제작을 하고 있다!
첫 직장이자 인턴 생활이 어렵긴하다 낯선 환경과 낯선 사람들 속에서 생활하는게 쉽지만은 않다. 사람들이 다 좋으신 분들이라 그건 걱정 없긴하지만 맞겨진 프론트를 잘해나갈 수 있을지도, 걱정은 넘치고도 넘친다!
조금 더 대학 생활 때 열심히 할 걸 그랬나보다..ㅎ

회사 스키마 말고, 내가 Test 해보려고 만든 스키마 가져오기

Table 추가하는 방법을 설명해야겠다. Create Table..

Table name은 테이블명 뭐라고 할 지 정하는고.. 이미 같은 스키마에 test Table이 있어서 'test_table'라고 해야겠다.

이건 Column Name, Datatype 설정할 수 있는고 아니, 설정도 맞지만 정할 수 있는고(?)

대충 만들거기 때문에 Column Name을 c1, c2, c3,c4라고 임의로 설정해줬다.

여기서 Datatype을 설명하자면.. 일단 INT는 정수, VARCHAR(10)은 가변길이 문자형 10까지 한다는고, DOUBLE은 실수 값도 입력 가능한고, DATE는 날짜 형식 예. +업무하면서 알게된거지만 DATE랑 DATETIME은 다르다.. DATE는 년월일(YYYY-MM-DD)지만, DATETIME은 시간까지 나온다.(YYYY-MM-DD HH:MM:SS)

그 옆.. PK NN 어쩌구.. PK는 Primary key 기본키 설정해주기 NN은 Not null 빈 값을 가지지 않는다는고 UQ는 Unique 특별한, 한 로우에 같은 것을 포함할 수 없다는고 B는 BINARY 얘는 텍스트가 아니라 바이너리 데이터를 나타낸다는고 UN은 Unsigned 정수를 출력하는고 INT와 비슷 ZF는 ZoroFill 0으로 채우는고 G는 생성된 열을 뜻한다는데 왜 G인지 나는 모름..

그냥 대충 이렇게 생성한다고 하고 Apply 누르면, 맞는지 뜨는고다.. 여기서 사실 코드로 작성해도 가능 난 NULL값을 안주려고 다 NOT NULL..

만들어졌다는겨

테이블 이름 옆에 세개 동글동그라미 처음꺼 누르면 정보 같은거 확인할 수 있다.

전 이런거.. 컬럼갯수 등등..

두번째는 입력하던 그 설정창과 동일하고

세번째는 Query창.. 그건 뭐 차차 설명하고.. 뭐 테이블 안에 들어갈 Data 바로 넣을 수도 있다.. 아직 테이블 안에 아무것도 없으니 그것도 앞으로 추가해서 보여주는걸로..

여기까지!

html파일을 보면 greetings.js와 clock.js를 import하고 있습니다. 파일 하나로 해도 상관은 없습니다!

시계를 넣기 위한 h2를 새로 만들기

• 이제 시계를 만들어 봅시다.

  먼저 Text로 넣어보니 잘 동작하고 있습니다!

그렇다면 clock은 default로 00시 00분을 나타내도록 해봅시다.

• html 부분 변경

  

• js 부분 변경

  드래그 부분을 삭제해주도록 합니다.

Javascript이벤트가 시작하기 전에는 시계가 이런식으로 등장하게 됩니다!

이제부터 intervals와 timeout에 대해 이야기 해봅시다.

그리고나서 clock를 만든다면, 두가지의 개념이 왜 정말 멋있는지 알 수 있을 것입니다.

• interval : '매번' 일어나야 하는 무언가를 말합니다.

  예를 들어 '매 2초'라고 하면 이게 interval이라는 것입니다. 즉, 매 2초마다 우리가 무슨 일이 일어나게 하고 싶을 때 쓰는게 interval입니다.

함수를 만들어 보도록 하겠습니다.

기본적으로 기능을 제공하고 있는데 그 tool이 바로 setInterval()입니다.

setInterval은 두개의 argument를 받는데. 첫번째 argument는 우리가 실행하고자 하는 function입니다.

두번째 argument는 호출되는 function 간격을 몇 ms(milliseconds)로 할건지 쓰면 됩니다.

여기서는 sayHello를 호출시키고, 매 5000ms 마다 즉, 5초마다 호출되도록 합니다. 저장하고 새로고침을 하면, 처음엔 console에서 아무것도 보지 못할 것입니다. 그리고 5초가 지나면 console에서 첫번째 hello를 볼 수 있습니다.

잘 실행되고 있습니다!

숫자가 표시되는건 한 함수를 특정 시간마다 실행하고 있다는 것입니다. timeout에 대해서는 다음 포스트에 살펴봅시다!

시작!

local storage에 유저정보 유무 확인하기

유저정보가 없다면 form을 보여주고 하던대로 하기

local storage에서 dukin을 지우고 다시 실행해보기

보다시피 local storage에 username이 없으면 null 값을 결과로 받고 있습니다. 이게 우리가 원하는 local storage에 유저정보의 유무를 확인하는 것입니다.

코드를 작성하고 새로고침을 하면 null이 나옵니다. 만약 savedUsername의 값이 null인 경우에는 form을 보여주도록 합니다. 그 외의 경우에는 greeting 보여줄 것입니다.

하지만 "username"이 반복되고 있습니다. string을 반복해서 사용하는 경우에, 그리고 그것들이 무조건 같아야 할 때, 전처럼 여기에 변수로 고정을 시켜주도록 합니다.

이제 username이라고 작성한 부분을 USERNAME_KEY로 교체해주기

이것은 매우 중요합니다. 왜냐하면 우리는 이 string을 한번만 작성하고 싶기 때문입니다. 만약 string을 작성하다가 오타 나면 자바스트립트는 이걸 지적하지 않을 것입니다. 하지만 변수명이 오타가 나면 지적해주기 때문입니다.

본인이 생성한 string을 반복해서 사용하게 될 경우에는 반복되는 string들을 대문자 변수로 저장해 놓는 것이 좋습니다!

다시 코드로 돌아가서 방금 작성한 코드를 볼 때, 문제는 지금 이 if문과 상관없이 form이 표시된다는 것입니다.

form과 greeting을 모두 숨긴채 다시 해보도록 합니다.

이렇게 작성하면 둘 다 숨겨지게 됩니다.

html에는 있지만 화면에는 표시되지 않고 있는 것입니다.

• 만약 유저정보가 local storage에 없다면 local storage는 null 값을 반환합니다.

• 그래서 만약 savedUsername 값이 null이라면 form의 hidden class명을 지워줍니다.

• 왜냐하면 지금은 form이랑 h1 모두 hidden이라는 class를 가지고 시작하기 때문입니다.

로그인을 클릭하면 이전이랑 똑같이 작동하고 있습니다.

차이점은 이제 local storage에 유저정보가 저장되어 있다는 것입니다.

이제 우리가 할 일은 greeting을 보여주는 것입니다. greeting을 보여주기 위해서는 hidden class명을 제거해줘야 합니다.

새로고침하면 제대로 작동은 되고 있습니다. greeting에 이제 hidden class명은 없습니다. 하지만 greeting에 텍스트도 없습니다. 왜냐하면 그 텍스트는 우리가 추가해줘야 하기 때문입니다.

위와 같이 작성해주고 실행해보도록 하겠습니다.

유저정보를 기억하고 있는 것을 볼 수 있습니다. 하지만 문제점이 있습니다. 그것은 똑같은 동작을 두번 반복하고 있다는 점입니다.

paintGreeting이라는 함수를 만들도록 해보겠습니다.

우리는 방금 username을 인자로 받는 함수를 만들었고 이건 우리가 해오던 일을 합니다. 하지만 우리가 함수를 호출하는 위치에 따라 유저정보는 다른 곳에서 오게 될 것입니다.

끝!

localStorage를 콘솔에 입력하면 미리 정의되어있습니다.

여기서 Storage를 반환하고 있는데 중요한건 localStorage가 존재한다는 것입니다.

localStorage는 우리가 브라우저에 뭔가를 저장할 수 있게 해줍니다. 그래서 나중에 가져다가 쓰기가 가능합니다.

localStorage에 뭐가 들어있는지 보고싶다면 개발자도구를 이용하면 됩니다.

사진 속에 "응용 프로그램"이 없다면 +버튼을 눌러 찾으면, LocalStorage가 나옵니다.

한국어라 로컬 저장소라고 뜨지만 그게 LocalStorage..

여기 나와있는 여러 다양한 방법으로 유저 정보를 저장할 수 있지만, LocalStorage가 가장 다루기 쉽습니다.

지금은 LocalStorage가 비어있지만, 추후에 여러가지를 저장하기 시작하면 여기가 바뀌는 것을 보게될 것입니다.

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

이제 local storage API를 살펴보면 다양한 메소드를 볼 수 있습니다. 그 중에 setItem을 해볼 것입니다. setItem을 활용하면 LocalStorage에 정보를 저장할 수 있게 됩니다.

코드를 실행하면 DB에 새로운 항목이 저장되게 됩니다. 원하는 값을 저장할 수 있게 되었습니다.

getItem을 입력하면 저장한 값을 불러낼 수도 있습니다.

필요한 경우에는 저장된 값을 지울 수도 있습니다.

사라진 것을 확인해볼 수 있습니다. 미니 DB 같은 것입니다.

이제 우리가 할 일은 유저가 이름을 제출할 때 그걸 저장해주면 되는 것입니다.

저장되는 것을 볼 수 있습니다. 하지만 새로고침을 하면 여전히 form이 표시되고 있습니다.

다음에는 우리의 LocalStorage에 username이 존재하는지 확인하고, form을 표시하지 않을 것입니다. h1 요소가 표시되도록 해봅시다..

이걸 구현하는 방법은

• 1.HTML 요소 자체를 없애는 것입니다.
• 2.CSS를 이용해서 숨기는 것입니다.

CSS 방법부터 해보겠습니다.

CSS에 어떤 요소에게든 이 classname을 주면, 그 요소를 숨기게 됩니다.

form class에 hidden을 추가하고 새로고침을 하면,

완전히 사라지게 됩니다.

두번째 방법을 해보겠습니다.

일단 나중에 하기위해 classname은 잠시 지워주고, 유저가 이름을 form을 통해 제출했을 때 기본 동작은 막아두고, 유저 이름은 const username = loginInput.value로 저장해주고, 확인하기 위해 console.log(username); 을 작성해주도록 하겠습니다.

text 입력 후 Login 버튼을 누르면 form은 사라지고, 입력값은 console에 기록되게 됩니다.

추가 단계

여기에 다른 HTML 요소를 추가하는 것을 해보겠습니다. h1 추가해주고, 이름을 hidden이라고 주도록 하겠습니다. 이제 할 일은 form은 숨기고 h1은 표시되도록 하는 것인데요, 하지만 h1에 표시할 텍스트가 있을 때만 표시되도록 해보겠습니다!

HTML과 JS에 각각 코드를 추가해주었습니다. 이제 h1 안에 greeting에 있는 텍스트를 추가해주고, 그리고 h1에 hidden을 빼주도록 하겠습니다!

실행해보겠습니다!

짜잔! 성공!

두개의 string을 합치고 있습니다. 즉 변수를 string 안에 포함시키는 방법입니다. 이걸 대체할 다른 방법을 알아보겠습니다.

두가지 방법 모두 똑같은 동작을 수행합니다. 여기서 쌍따옴표나 따옴표가 아닌 백틱이라고 하는 부호입니다. '' X "" X `` O
둘 중에 편한 방법을 쓰시면 됩니다! (전 전자요...)

오늘은 끝!

링크의 기본 동작은 클릭 시 다른 페이지로 이동하는 것입니다. 위 코드에서 보시면 Go to courses를 클릭하게 되면 제 블로그 링크로 이동한다는 것을 확인해 볼 수 있습니다.

이렇게 되는 것을 막아보도록 하겠습니다.

JS에 링크를 찾는 코드를 작성해주었습니다. 결과를 보면!

지금 이 alert가 이 page가 다른 동작을 하지 못하도록 막고 있습니다.

그래서 아무 일도 일어나지 않고 있지만 내가 확인을 눌러서 alert가 없어지면 브라우저의 기본 동작이 실행되게 된다.

• 가끔은 뭐가 클릭되었는지, 어디가 클릭되었는지 등 정보를 알고 싶을 때가 있습니다.
• 그럴 때 JS는 단순히 함수를 실행시키기만 하는 것이 아니라, JS는 함수를 실행시키는 동시에 그 함수에 첫번째 인자로 object를 넣어줍니다. 그리고 이 object에는 방금 일어난 event에 대한 여러 정보가 담겨있는 것입니다.
• 방금 일어난 event에 대한 정보를 담은 이 object는 handleLinkClick을 위한 EventListener 함수의 첫번째 인자로 주어지게 될 것입니다.

우리는 자리만 제공해주면 됩니다. 우리가 해야할 건 받는 것 뿐!

실행해보면 PointEvent라고 뜹니다. 많은 Event들이 존재하는데 그 중에서 PointEvent가 뜬 것이죠. 예전엔 MouseEvent라고 하여 클릭한 좌표가 나왔다고 하는데 지금은 PointEvent로 바꼈다고 합니다.

이번엔 alert에서 확인 버튼을 누르면 링크로 이동하게 되는 것을 막아보겠습니다.

먼저 event의 내부를 살펴보겠습니다.

(수강하는 강의와 내용이 조금 달라, 그 내용은 빼고 이어서 진행하겠습니다! 빼도 상관없는 내용입니다.)

여러가지의 정보를 제공하고 있는데, 그 중에서 defaultPrevented 값이 true!

우리가 브라우저가 하려고 하는 동작을 허용하지 않았다는 것입니다. 허용하지 않고 막았죠.

자! 이제 event.preventdefault를 이해했으니 링크들을 지우고 다시 우리의 form을 작성해보도록 합시다. 다음 시간에!

loginButton은 삭제하고 login-form 그 자체를 이용하도록 합니다.

클릭이 아닌 submit 감지하도록 코드를 작성해보겠습니다.

이제 form의 submit event를 감지하고 있는데, submit은 엔터를 누르거나 버튼을 클릭할 때 발생한다는 사실을 기억하도록 합시다!

결과를 보면 입력한 값이 콘솔창에 잠깐 떴다가 사라지는 것을 확인해볼 수 있습니다. 이것은 우리가 목표한 것의 50%를 완료한 것입니다!

미션1은 form을 submit할 때 입력값을 받아내는 것입니다.

하지만 아직 새로고침을 못 막고 있습니다.

여기서 새로고침이 일어나는 건 form submit 기본 동작입니다.

브라우저가 그러도록 프로그래밍이 되어있습니다.

우리가 해야할 일은 이 기본 동작이 발생하지 않도록 하는 것입니다.

( ) 이것들을 더하면 브라우저가 보자마자 자동으로 이 function을 실행시켜버리게 됩니다. 하지만 addEventListener를 활용할 때는 function의 이름만 적어주고, 그럼 지정한 이벤트가 발생했을 때만 브라우저가 해당 function을 실행시키게 되는 것입니다. 그러니까 코드처럼 쓸 필요는 없습니다!
브라우저가 정확히는 onLoginSubmit()을 하고 있는 것은 아닙니다. 브라우저는 우선 onLoginSubmit function을 호출하고, 브라우저가 function을 실행하긴 하지만 () 여기 안에서 우리에게 정보를 주고 있는 것입니다. 브라우저는 브라우저 내에서 event로부터 정보를 잡아내서 onLoginSubmit function 실행 버튼을 누르고 있는 것입니다.

신기한 코드를 작성하여 보면 onLoginSubmit function에 대한 argument을 받고 보여주는 것을 확인해볼 수 있습니다.

즉, 누군가 form을 submit하면 JS가 이 function을 호출하도록 하고 있는 것입니다.

여기서 JavaScript가 하게 될 일은 onLoginSubmit 함수의 첫번째 argument로 발생한 일에 대해 네가 필요로 할만한 정보를 주는 것입니다.

** preventDefault는 어떤 event의 기본 행동이든지 발생되지 않도록 막는 것입니다. **

이렇게 해주면 새로고침이 되지 않는다는 것을 확인해볼 수 있습니다!

우선, username이 비어있으면 안되고, 너무 길어도 안된다.

코드 작성하기

value 값이 없을 경우는 if문을 이용하여 작성합니다.

이제 이걸 user가 볼 수 있게 alert로 바꿔줍시다.

이번에는 여기에 else if를 해주고 value를 확인합니다.

여기서 username이 15글자를 초과하지 않는지 확인할 수 있습니다.

만약 15글자를 초과한다면 경고창을 보여주도록 합시다.

string의 길이를 구하는 방법

• username 뒤에 .length를 더해주는 것입니다. 콘솔에서도 확인해보도록 합시다.

string 다음에 .length만 입력해주면 되는 것입니다.

우리가 작성하고 있는 코드에서도 마찬가지입니다.

단, 확인할 조건을 추가해주어야 합니다.

만약 username의 길이가 15보다 길다면, 이름이 너무 길다고 alert해줄 것입니다.

이미 가지고 있는 것을 사용하여 다른 방법

- 예를 들면 input을 필수 입력 항목으로 만들어봅시다.

- 또는 input 자체적으로 최대 글자수를 15로 조절할 수도 있습니다.

이것은 HTML이 이미 우리를 위해 해주고 있습니다.

그런데 문제는 Lon In을 클릭할 때 HTML에서 확인 작업을 안하고 있는 것입니다.

div부분을 form으로 변경해주고 이어서 해봅시다.

(코드 수정..)

username을 아직 받는다는 것을 확인하기 위해 아래의 코드만 남겨주고 그 전에 작성한 것은 지우도록 합니다.

실행해보겠습니다.

브라우저 자체에서 도와주고 있는 것을 확인해볼 수 있습니다.

비어있는 칸을 알려주기도 하고, 15자 이상으로 입력할 수 없게끔 되어있습니다.

하지만 문제는 내가 Log In을 클릭하면 URL에 이상한게 따라 붙고 있다는 것입니다.

그리고 페이지가 새로고침되고, 값이 사라지게 됩니다. 이렇게 되는 이유는 form이 submit되고 있기 때문입니다.

이 순간에 우리는 브라우저가 새로고침을 하지 않고 user 정보를 저장하도록 하고 싶은 것입니다.

이 부분은 다음 시간에 올리겠습니다!

우선 우리는 user에게 당신은 누구인지, 이름이 뭔지 질문을 하고, 그 정보를 받는 법을 알아보고, 화면에 표시하도록 해봅시다.

• input 생성
• button 생성

이 앱에는 input과 button이 매우 많을 것입니다.

지금까지 만든 것들을 div안에 집어 넣습니다.

그리고 이 div에 "form"이란 class를 추가해줍니다. => div class="form"

아니면 id를 입력해도 상관없습니다. => div id="login-form"

JS 작성하기

• input과 button 끌어오기

더 짧게 코드를 작성할 수 있는 다른 방법도 있다.

이렇듯 document 또는 하나의 element를 통해서 검색이 가능합니다.

click event 사용해보기

이제는 우리는 여기 입력하는 이 value를 얻고 싶습니다.

이 텍스트를 콘솔에 표시하는 법을 알아봅시다!

이 코드는 onLoginBtnClick()이 실행되면서 loginInput의 내부를 보여줍니다. value는 기본적으로 내 input 안에 있는 text를 나타내주는 것입니다.

• HTML에서 미리 value의 값을 입력해줄 수도 있습니다.

입력한 value의 값이 그대로 표시된 것을 확인해볼 수 있습니다.

다음으로는 아까 작성한 기본 value는 지워주고, JS에서 value를 console.log 해주게 합니다.

값을 입력하고 클릭하면 입력한 값이 출력되는 것이 확인 가능합니다!

이런식으로 input의 value를 얻을 수 있다는 것을 알아보았습니다!

classList는 두가지 옵션이 있습니다.

- classList는 말 그대로, 우리가 class들의 목록으로 작업할 수 있게끔 허용해줍니다. 왜냐하면 className은 그냥 모든 것을 교체해버리기 때문입니다. 이전에 class들은 상관을 하지 않고 말이죠!

참고 사이트 https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList

예를 들어, contains은 이 function은 우리가 명시한 class가 HTML element의 class에 포함되어 있는지 말해준다는 것입니다.

이제 여기서 우리는 classList가 clicked를 포함하고 있는지만을 확인하게 됩니다. 동작은 똑같이 합니다!

만약에 이 clickedClass가 h1의 classList에 포함되어 있다면, 우린 clickedClass를 제거합니다.

반대로 만약에 clickedClass가 h1의 classList에 포함되어 있지 않다면, 우린 모든 className을 교체하지 않습니다.

우리는 JavaScript를 사용하여 JavaScript가 특정한 class name만 변경하도록 한 것입니다.

다음으로 이 코드들을 지우고, function을 사용하도록 합니다.

- toggle function은 class name이 존재하는지 확인하는 것입니다.

만약 class name이 존재한다면 toggle은 class name을 제거합니다. 그리고 만약 class name이 존재하지 않는다면 toggle은 class name을 추가합니다.

이 한 줄이 방금 전 5줄의 코드와 동일하다는 것입니다!

CSS 작성

• css에 h1의 기본색을 파란색으로 해줍니다.
• active는 색을 토마토로 설정해줍니다.

이제 JavaScript에서 하고 싶은 건, 이 h1에 active class를 전달해주고 싶은 것입니다.

다시한번 클릭하면 원래 상태로 돌아가는 법

이 h1.className은 getter이면서 setter입니다.

이 말의 뜻은 우리가 console.log로 h1.className을 출력한다면 우리가 얻는 것은 className의 현재값이라는 것입니다.

이 경우에는 h1에 click하게 되면 아무것도 출력되지 않습니다. 하지만 다시 className을 입력하면 click할 때 className을 얻어올 수 있습니다.

만약 h1의 className이 active라면 if문을 사용하고, 그리고 만약 h1의 className이 active가 아니라면 else문을 사용하여 작성합니다.

결과는 어제와 동일하게 잘 작동되는 것을 확인해볼 수 있습니다.

자, 그런데 여기서 active는 우리가 지어낸 이름입니다. 잘못하면 error가 날 수도 있기 때문에 이름을 clicked로 바꿔주겠습니다.

하지만 이 모든게 제대로 동작하려면 clicked라는 단어가 정확하게 사용되어야합니다.

이렇게 적음으로써 error가 발생할 수 있는 부분을 축소시킬 수 있습니다.

참고하실 사이트를 이제 올려드리네요!! 위 사이트에는 많은 event들을 찾아볼 수 있고, 많은 정보를 제공하고 있습니다.

• event listener들을 지우겠습니다.
• 이제는 handle TitleClick function에 초점을 맞출 것이기 때문이죠

유저가 title을 click했을 때 title을 파란색으로 칠해주는 것을 해봅시다.

하지만 한번 더 누르면 title의 색깔을 토마토색으로 변경하는 것

그리고 다시 클릭하면 파란색으로 그 다음엔 토마토색으로 click할 때마다 색이 변하는 것을요!

• 이 말은 무언가가 true인지를 확인해야 한다는 것입니다.

클릭하면 title이 파란색으로 변하고 console에 blue라고 클릭시마다 나타나는 것을 확인해볼 수 있습니다.

여기서 원하는 것은 이 값을 검사해서 만약 h1.style.color가 blue이면 이걸 tomato로 변경해주라고 하는 것입니다.

그리고 만약 h1.style.color가 blue가 아니라면 blue로 변경해주라고 하는 것입니다.

===은 h1의 값이 blue와 일치하는지 확인하는 것입니다.

if의 다음은 else를 사용하는 것입니다. 앞부분이 true라면 이걸 tomato 색으로 바꾸는 것이죠, 그리고 이게 flase라면 이걸 blue로 바꾸는 것입니다.

코드를 개선해서 더 깔끔하게 만들어 봅시다.

• 먼저 이 color 현재 상태를 저장하는 것을 해보죠

  currentColor가 blue인지 확인합니다.

  여기서 true 또는 false를 반환해줍니다.

  그리고나서 이걸 두번씩 하는 것 대신에 여기에 let으로 변수를 하나 생성해도록 했죠

• 이제, 만약에 currentColor가 blue라면, newColor는 tomato로 변경해주도록 해보겠습니다. 결과는 동일하게 나와서 결과는 생략했습니다!

• title.addEventListener()을 해주고, click을 넘겨주는 것, 하지만 이걸 title.onClick() 이런식으로 바꿀 수 있습니다.
• addEventListener을 더 선호하는 이유는, 나중에 removeEventListener를 통해서 event listener를 제거할 수 있기 때문입니다.

Window로 다시 돌아가서 window의 event를 listen해보도록 하겠습니다!

• devicemotion이란, 여러분의 모바일이 움직이거나 할 때 발생하는 event입니다.

resize해보기

• window.은 기본적으로 제공합니다. 마치 document가 JavaScript에서 기본적으로 제공되듯이.
• 여기서 body부분이 중요한데, html의 h1처럼 document를 밑으로 가져올 수는 없습니다.
• 우리가 만약 document.title을 호출하면 js의 title이 출력되는 것이 아니라 html의 title을 가져오는 것입니다.

헷갈리는 것을 방지하기 위해서 const title 부분을 h1으로 바꾸도록 하겠습니다.(이미 바꿔서 코드 작성함)

• h1은 document.title이랑은 다르다!

우리는 window element의 resize event를 listen하고 있고, 만약 이 event가 실행되면 handleWindowResize가 실행될거고, 그리고 이 handleWindowResize function은 body의 backgroundColor를 변경할 것입니다.

실행 된 결과를 보시죠! 토마토 색으로 변경 완료!

console창에 document.body를 입력하면 배경색도 tomato로 변경된 것이 확인 가능합니다.

다른 Event도 가져와 해보겠습니다.

• Clipboard event : 해당 event는 유저가 copy 행위를 했을 때 발생합니다.

command+c 또는 ctrl+c를 했더니 동작한 것을 볼 수 있습니다.

• 이처럼 우리가 원하는 어떤 event들을 다 가져와 할 수 있다는 것을 알 수 있죠!

wifi event 해보기

• 우리가 wiif에 연결되어 있는지 브라우저가 알 수 있는 것입니다.

(사실 이건 귀찮은 코드라서 실행하기는 싫었지만.. 보여드리기 위해 해봤습니다..) 노트북의 와이파이 연결을 끊으면 SOS no WIFI라는 alert창이 뜨고 노트북의 와이파이 연결을 하면 ALL GOOD 이라는 alert창이 뜨게 됩니다.

다른 엄청난 많은 Event들도 적용할 수 있지만 극소수의 Event들을 해보았습니다! 끝!

• 마우스가 title 위에 올라갈 때, click은 하지 않고 그냥 위에 위치할 때의 event.

JavaScript가 두 event를 listen하고 있습니다. 하나는 click이고, 하나는 onmouse입니다.

• 이번에는 onmouse를 onmouseleave로 바꿔보도록 하겠습니다.

마우스를 title위에 올리면 Mouse is here!로 Text가 변경되며 마우스를 올려두지 않을 때에는 Mouse is gone!으로 Text가 뜨게 된다는 것을 알 수 있습니다. 또한, title을 click하면 title이 파란색 Text로 변경되게 됩니다. 이처럼 JavaScript가 3가지의 function을 잘 조작해주고 있습니다!

우리가 script.js를 import하지 않았다면, 당연히 document는 여기 존재할 수도 없었다죠.

포인트는, document가 HTML이 script.js를 load하기 때문에 존재하는 것입니다.

그 다음에 browser가 우리가 document에 접근할 수 있게 해줍니다.

• CSS color를 바꾸기 h1의 style을 javascript에서 변경할 수 있습니다.

Event 배우기

• event : 예를 들어, 사용자가 click을 하면 그게 event입니다. h1 위로 마우스가 올라가도 event입니다.
  

event를 listen하는 방법

• eventListener은 말 그대로 event를 listen하는 것입니다. 하지만 JavaScript에 무슨 event를 listen하고 싶은지 알려줘야합니다.
• 왜냐하면 모든 event에 대해 알고 싶은 것이 아니라 하나의 event만 알고 싶기 때문입니다.

위 내용은 click event에 대해서 listen하고 싶은 것입니다.

유저가 title을 click할 경우에, Javascript가 나 대신 실행버튼을 눌러주게 하는 것이죠. 보여드리겠습니다! 현재 콘솔에는 아무것도 뜨지 않고 있습니다. Grab me!를 클릭하면 어떻게 될까요? 콘솔 창에 title was clicked!이라는 문구가 뜨면서 click 횟수도 표시해주는 것을 확인해볼 수 있습니다. 신기하죠? 예를 들어 바깥쪽을 click한다면 작동하지 않습니다.

• 유저가 만약에 title을 click한다면 title.style.color="blue"라고 하는 것을 한가지 더 보여드리겠습니다! 현재 아무 일도 일어나지 않고 있습니다. 하지만 클릭을 한다면?! Blue~ 완료!!

• title object는 굉장히 많은 정보를 가져오고, 바꿀 수 있습니다.

• 유저들의 행동들을 listen할 수 있습니다. 그 중에 쉬운 것이 바로 click event였다는 것을 알아보았습니다.

• className 사용하기 이것은 우리의 코드 내에 어떤 값이 null이라는 뜻입니다. 아무것도 없는 것(null)의 innerText를 접근하려고 한 것입니다. 이 title이 null이라는 말이죠. 이 null variable의 innerText property는 변경할 수 없다고 알려주는 것입니다.

• hello class를 사용하는 방법 이 class name은 당연히 js의 class name과 동일해야합니다. 출력이 완료되었죠!

그런데 대부분의 경우에는 class name을 모든 곳에 추가하지는 않습니다.

• 예를 들어 div 생성 div 내부에 h1을 생성해주고, h1 안에 Grab me!라고 적어주겠습니다.

Tag는 anchor, div, section, button 같은 것들을 의미합니다.

element를 갖고오는 가장 멋진 방법은 querySelector와 querySelectorAll입니다.

• querySelector는 element를 CSS방식으로 검색할 수 있습니다. = hello란 class 내부에 있는 h1을 가지고 올 수 있다는 것이죠. 그래서 우리는 CSS selector를 사용해서 class hello를 찾고, 그 안에 있는 h1을 가져와달라고 하는 것입니다.

• 이번에는 div가 똑같은 것을 3개 쓴다면? title이 array일까요? element일까요? 결과는 첫번째 것 하나만 나옵니다. h1이 많을 수도 있지만 첫번째 것만 가져온다고 정의가 되어있기 때문입니다.

• querySelector는 단 하나의 element를 return해줍니다. 찾지 못했다면 null로 표시되는 것이죠.

• 모든 것을 가져오고 싶으면 querySelectorAll을 사용하면 됩니다. 끝!

보다시피 javascript로 id="title"을 가진 h1 태그를 가져왔습니다. 이것을 콘솔에서 하지말고 js파일에서 해봅시다.

이렇게 js에서 하면 동일하게 나옵니다.

하지만 console.log대신 element를 더 자세하게 보여주는 console.dir()을 사용해봅시다.

앞으로 우리가 사용할 수 있는 많은 것들이 뜹니다. 이 모든 것들은 HTML에 포함되어 있는 것이죠.

코드에 입력을 해주면 값이 바뀌는 것을 확인할 수 있습니다. 여기서는 autofocus와 className을 입력하였습니다.

값을 바꾸는 것을 확인해봅시다.

HTML에 의해 변경된 것이 아니라 js에 의해 변경된 것이라는 것을 확인해볼 수 있습니다.

또한, console를 통해 원하는 것을 볼 수 있습니다. console.log 후 원하는 항목을 입력하면 페이지에 그 값이 출력되는 것을 확인해보았습니다.

• javascript는 이 HTML element를 가지고 오지만, HTML 자체를 보여주진 않습니다.
• javascript는 object를 보여줍니다.
• element를 찾고 나면 HTML에서 바꿀 수 있습니다.

  이게 어떻게 동작하는 것인지 아는 것이 매우 중요합니다!!