해민

❓ 오늘의 문제자바스크립트로 클릭하면 텍스트가 빨간색으로 변하는 코드를 짜던 도중 막혔다.  hello 👆 위 코드는 문서가 준비가 다 되었을 시점(onload) 에 id 가 text인 DOM객체를 찾고      해당 DOM객체를 클릭 할 시 this를 통해 클릭된 DOM객체의 color를 빨간색으로 바꾸도록 하였다. 그러나 이렇게 하였을 때 텍스트를 클릭하여도 빨간색으로  바뀌지 않았다. 그리고 콘솔 창에 에러가 발생하였다. 정의되지 않은 타입에 속성을 변경할 수 없다. 즉 this로 가져온 것이 undefined 라는 것 이다.  💡 해결 ?검색을 해보니 화살표 함수는 this 바인딩이 안된다는 이유로 일반 함수로 해야 한다는 내용을 보고 코드를 바꿔보았다.  onload =..

🔷 이벤트 흐름이란?문서 내부에 엘리먼트들은 계층적 구조로 이루어져 있기 때문에발생하게 된다.하나의 엘리먼트에서 이벤트가 발생할 경우 계층을 따라 연쇄적으로 이벤트 흐름이 발생하게 된다. 🔹 흐름 3단계   1️⃣ 캡쳐 단계 : window 부터 모든 DOM객체를 차례대로 거쳐 타켓에 이벤트가 전달되는 과정   2️⃣타깃 단계 : 이벤트가 실제 요소에게 전달   3️⃣버블링 단계 : 타겟 부터 중간에 모든 DOM 객체를 거쳐 window 객체에 이벤트가  전달되는 과정   💡캡쳐 단계와 버블링 단계에서 겨쳐가는 DOM객체들은 해당 이벤트의  addEventListener 속성에 따라     거쳐가는 모든 DOM 객체들의 이벤트 리스너를 실행한다.        기본값은 버블링 단계이며 , 타깃 객체부..

오늘 변수와 함수를 선언 전에 호출 해보는 예제를 테스트 해 보던중 궁금점이 생겼다. 우선 코드를 먼저 살펴보면 document.write(hello()); document.write(i); var i = "hi"; function hello() { return "안녕 함수"; } var 변수와 함수를 선언 한 뒤선언 이전에 변수와 함수를 불러내도록 입력하였다. 👉 결과변수는 undefined 가 출력되고함수는 정의된 실행문대로 출력이 되었다. 🤔 그런데 왜 똑같이 선언 전에 호출을 하였는데 변수는 아무것도 없고 함수만 있을까?우선 변수가 undefined 인 이유 부터 살펴보자면 호이스팅 이라는 개념을 간단히 보자. 호이..

🤔 변수란?데이터를 저장하는 그릇으로써선언과 할당을 통하여 값을 변수에 저장한다. 변수는 언어마다 여러 타입과 종류 들이 있으며 각각의 특성을 가진다.  📙 자바스크립트 변수의 종류var 는 재 선언 ,재 할당이 가능 하며 , 호이스팅이 일어난다.let 은 재 선언은 불가능 하며 재 할당은 가능하고, 호이스팅이 일어나지 않는다.const 는 재 선언 , 재 할당 전부 불가능하고, 호이스팅이 일어나지 않는다. ❓ 재 선언과 재 할당이 가능하다는게 무엇일까자바스크립트는 실행 시 인터프리터 라는 프로그램을 사용하여 실행하며,실행 시 문서의 코드를 한 줄씩 읽어들여 실행하는것이다. 위에서 부터 아래까지 순서대로 한 줄씩 읽기때문에 선언과 호출을 어느 위치에서 하였는지에 대한 제약이 생긴다.  🔹변수들의 특..

🤔 CallBack 함수가 뭘까?자바 스크립트에서는 선언함수 또는 익명함수를 인자로 받아호출한 함수 내부에서 인자로 전달받은 함수를 호출(Callback) 할 수 있다. 간단하게 예시를 들어보자.  //사람의 동작(movement)을 제어 function person(movement, clock) { document.write(`나는 지금 `); movement(clock); } //밥 먹는 동작 function eat(clock) { document.write(`${clock}시에 밥 먹는중이다`); } //3시에 밥 먹고 싶다 person(eat, 3); 👉 사람의 동작을 실행하는 함수에 동작 함수를 인자로 전달받아 ..

현재 내가 만들고있는 미니게임이 있다.   🔴 게임 설명게임 시작 버튼을 누르면 3초 카운트 다운을 한 뒤 10초 동안 랜덤으로 공격이 들어오고 타이밍에 맞춰 방어를 하면 성공 못하면 실패이다. 결과 판정을 위한 시간 계산을 요약해서 설명하자면 🕛 시작 버튼 클릭 시간 + 공격 타이밍 시간(1~10초) + 카운트다운 시간(3초)  =  통과 시간만약 현재시각 10초쯤에 클릭을 하였고 공격 타이밍은 랜덤으로 3초가 나왔다고 가정한다면카운트 다운 3초  까지 합산하면 통과시간은 16초 가 된다. 그리고 난 뒤 방어 버튼 클릭한 시간을 구하여 비교를 하여 결과를 구하는 방식이다. ❓현재 시간의 초 단위를 구하는 방법const date = new Date();date.getseconds();  🤔 하지만 ..

오늘은 리액트를 사용하여 START 버튼을 누르면 3 2 1 카운트가 울리고0이되면 사라지는 카운트 다운을 구현해볼것이다. style 요소는 빼고 오로지 기능을 구현한 코드만 예제로 쓸것이다.1️⃣ 이벤트를 실행 시킬 버튼 생성Main 컴포넌트 onClickStart} play={play} /> Button style 컴포넌트 Button 컴포넌트는 Main에서 props로 clickEvt 와 visible을 전달 받아온다.clickEvt는 클릭 시 이벤트를 발생 시키는 함수이고, visible은 버튼의 표시 여부를 클래스이름에 담는 용도이다. play는 시작(true) 일 경우 버튼을 hide 하고 종료(false) 일 경우 버튼을 show 한다.import styled from "styled-comp..

우선 스타벅스의 Header 부분의 외관 디자인을 따라만들어보았다. 반응형을 확인하기 위해 화면을 줄여보면? 그렇다면 문제점을 이제 하나하나 뜯어보겠다. 1️⃣ 첫번째 문제처음 화면을 줄일때 처음부터 전체적으로 줄어들어 nav가 로고를 침범하는 문제가 발생❓ 원인width 값의 설정값 방식 차이 % 로 설정할 경우 창이 줄어들면 블럭의 크기 또한 같이 줄어든다.px로 설정할 경우 창이 줄어들어도 블럭은 절대크기를 유지한다. 따라서 header 안에 inner 요소 width를 % 로 설정한 것이 원인이다. 💡 해결 header .inner { width: 75%; height: 100%; position: relative; }⬇️ header .inner { ..

오늘은 버튼 클릭 시 버튼요소가 사라지게 하는 코드를 짜볼것이다.   📘 방법 간단 설명버튼을 클릭하면 이벤트가 발생하여 useState로 지정한 visible의 상태값이 false로 변환한다.Button 컴포넌트에 visible의 상태값이 props로 전달된다.Button에서 visible이 false(숨김) 일 경우 className을 hide로 한다.css로 className="hide" 는 display:none; 하여 요소를 없앤다.1️⃣ Button 컴포넌트와  메인 컴포넌트를 준비한다.MainHome.jsconst MainHome = () => { return ( onClickStart} visible={visible}> );};export default MainHome; Butto..

Css 에서 이미지를 붙일 수 있는 방법이 2가지가 있다. 1️⃣ 태그를 이용한 방식2️⃣ background-image 를 이용한 방식 둘 다 똑같이 경로를 통하여 이미지를 불러오는 방식인데 두 방식의 차이점은 무엇일까? 알아보자 🔶 두 방식의 차이점▪️img 태그     - 이미지 로딩이 실패할때 alt를 통해 결과물 출력 가능      - 태그 자체가 "이미지"라는 의미를 가지고있어 검색 엔진에 인식되어 노출된다.  ▪️background-image    - 이미지를 불러오지 못할때 대체할 무언가가 존재하지않는다.    - 태그가 아닌 속성이기때문에 "이미지"라는 의미를 갖지 못하여 검색에 노출되지않는다.     따라서 각각 어떠한 경우에 사용하면 좋을까 ?  ✔️ 태그 컨텐츠에 관련이 있는 ..