[공통 & 핵심 피드백] 2주차 tick tack toe

기본 코드 스타일 지적 ↑ = 에어비엔비 스타일 가이드


DOM Element 이란?

Document Object Model
DOM이란 HTML 문서를 위한 프로그래밍 인터페이스



이벤트 위임 / 캡처, 버블링

이벤트 위임 => 모든 엘리먼트에 이벤트 리스너를 달아주는것 보단 상위의 엘리먼트 하나에만 달아주고 id나 className을 통해서 컨트롤 할수 있다 이를 event delegation이라고 하는데 장점과 사용법에 대해 조사해볼것


이거 약간 뉴런 개념같아 주변에 전파시키는..다만
이벤트 버블링은 ↑ 상위요소로 전파를시키는
=> 하위에서 상위 요소로의 이벤트 전파 방식


이벤트 캡처는 반대의 의미로 상위에서 ↓하위요소로 전파시킨다



event.currentTarget과 event.target의 차이

event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다.

하지만 currentTarget은 이벤트가 부착된 부모의 위치를 반환한다.



innerHTML, textContent, innerText

성능적인 면에서 주로 textContent를 사용하고, innerHTML 같은 경우는 자바스크립트상에서 html적인 효과를 같이 주어야 할 때 사용하지만, 렌더링이 발생하는 것을 유의하여야 하며
innerText는 거의 안쓴다고 보면 된다.



querySelector 와 querySelectorAll 차이

  • querySelector(): 특정 name 이나 id 를 제한하지않고 css선택자를 사용하여 요소를 찾습니다.
    반환객체는 한개의 요소만 찾을수있으며 동일한 클래스명 을 가진 객체가 있을경우 html문서내의 첫번째를 나타나는 요소를 반환합니다.

  • querySelectorAll(): 해당 선택자에 해당하는 모든 요소를 유사배열로 가져옵니다.
    반환객체는 nodeList(유사배열) 이기때문에 for문 또는 foreach 문을 사용해야 합니다.
    또한 (',') 을 사용하면 여러요소를 한번에 가져올수있습니다.

Nodelist?

element.childNodes 프로퍼티나 document.querySelectorAll 메서드로 반환되는 노드 모음이다.

childNodes는 라이브 콜렉션으로, DOM의 변경사항을 실시간으로 반영한다.

반면 querySelectorAll()의 NodeList는 정적 콜렉션으로, DOM이 변경되어도 collection의 내용에는 영향을 주지 않는다.

유사배열

말 그대로 [ ] 식으로 배열과 유사하게 생긴 객체를 유사배열이라 한다.
유사배열은 index와 length 프로퍼티를 가지고 있다. 하지만 배열은 아니라는 것!



early return



조건문 간결하게 작성하기

⛔ if (playerOne === undefined)  
  
  
✅ if (!playerOne) return;

이후의 로직들이 인덴팅이 한칸 앞으로 당겨져서 가독성도 좋아지고, 필요하지 않은 로직은 아무 동작도 하지 않는다고 명시적으로 표현되어 있어 가독성 좋음



appendChild(), append() 차이

append()와 appendChild() 는 같은 기능을 하는 메서드입니다.
기능이나 확장성에서 append() 가 뛰어나기 때문에 append() 를 사용하는 것이 좋습니다.
출처) https://blogpack.tistory.com/682

append() 사용 장점

  1. 텍스트 내용이 있는 엘리먼트를 추가할 경우 append()를 사용하면 코드 작성량을 줄일 수 있습니다.
    예를 들어보겠습니다.

노드.appendChild(노드) 를 이용하면 아래와 같은 방법으로 대상 노드에, 텍스트 노드가 들어있는 새로 만든 노드를 추가합니다.

let li = document.createElement('li');
let litext = document.createTextNode('무지');
li.appendChild(litext);
let targetul = document.getElementById('friends');
targetul.appendChild(li);

append() 를 사용하면 

let li = document.createElement('li');
li.append('무지');
let targetul = document.getElementById('friends');
targetul.append(li);

이렇게 텍스트 노르를 생성해 추가하는 과정을 하나로 줄일 수 있습니다.




display 속성, visibility 속성 차이

요소를 보이지 않게 하기 위해 보통 세가지 css속성 사용

  • display: none;
  • visibility: hidden;
  • opacity: 0;

세 속성 모두 요소를 보이거나 보이지 않게 하지만 영역이 남아있는지, 클릭이 가능한지에 따라 특징이 다릅니다.
자세한 특징과 차이에 대해 꼭 알아보시길 바랍니다.

  1. display: 표시, 나타냄 (상속 x)
  2. visibility: 볼 수 있음 (상속 o)

diplay 속성은 요소를 어떻게 표시할지를 선택
visibiliity 속성은 요소를 보일지 말지 결정하는 속성


1. display 는 요소의 종류를 선택하는 속성이다.

  • inline: 다닥다닥
  • block: 가로 너비 100% (div tag처럼)
  • none: 공간을 아예 없애버림.
  • inline-block: block과 같은 크기로 inline상태

  1. visibility 는 어떤 요소를 보이게 할지 숨길지를 결정하는 속성
  • visible: 기본 값으로 요소가 그대로 보임
  • hidden: 요소가 보이진 않지만, 여전히 그 공간을 차지하며 투명하게 남는다.
  • collapse: <table>태그에서만 사용할 수 있는 값으로, 선택 테이블의 행과 열을 숨긴다.


⛔ 즉, display: none과 visibility: hidden의 차이는 공간이 사라지냐 공간이 그대로 남아있냐에 차이다.

  1. opacity 속성은 투명도를 조절하는 속성이다. 기본이 1.0의 값을 가지면 0에 수렴할수록 점점 투명해진다.


추가로, text-align은 block 요소 안에 있는 inline 요소를 정렬하는 것이다. 알고 사용하자.
=> block 요소에만 적용가능


return에 대해서

return 명령문
1) 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환한다.

2) 또, 현재 구문을 중지하고 빠져나오는(escape)방법으로 사용 가능하다.

값을 명시하지 않으면 대신 undefined를 대신 반환한다

함수 본문에서 return 명령문에 도달하면 함수의 실행은 그 지점에서 중단됩니다. 값을 제공한 경우 함수를 호출한 곳에 그 값을 반환합니다

3) 자동 세미콜론이 삽입된다
따라서, return 키워드와 표현식 사이에는 줄바꿈 문자가 올 수 없다.

return
a + b;

↓

return;
a + b;


// 이 문제를 해결하려면


return (
a + b
);
// 위와 같이 괄호를 사용하여야 한다.

때문에 줄바꿈으로 값을 입력할 시 undefined가 출력

또, 많이 헷갈려하는 개념을 예시로 들자면,

var test = function () {
 var x = 1;
}

test();

이 함수를 실행할 경우 아무런 일도 일어나지 않는다. return이 사용되지 않았기 때문이다. 즉 내부 구문들을 실행하였으나 반환할 값이 선언되지 않았고 return 역시 선언되지 않았기 때문에 아무런 값이 나오지 않는다.



요소 추가하기

  • createElement(): 자바스크립트로 요소를 생성한다
  • createTextNode(): 선택한 요소에 텍스트를 추가
  • 노드.appendChild노드), append(): 부모의 마지막 자식으로 추가
  • prepend(): 현재 엘리먼트의 첫번째 자식 엘리먼트 앞에 추가함 perpendChild()는 존재하지 않으므로 insertBefore, firstChild 사용

1) .createElement()는 요소를 만듭니다.

예를 들어

.createElement( 'h1' )

↓

<h1></h1>

2) .createTextNode()는 선택한 요소에 텍스트를 추가합니다.

예를 들어, 아래코드는 "My Text"라는 문자열을 만듭니다.

.createTextNode( 'My Text' )

3) .appendChild()는 선택한 요소 안에 자식 요소를 추가합니다.

=> creatElement()는 진짜 딱 요소만 만들기 때문에 createTextNode()를 이용하여 텍스트를 추가하는 것!


자바스크립트는 html이 아니니까 태그안에 텍스트를 마음대로 추가 못하는거지
그래서 텍스트노드 엘레먼트를 따로 만들어주는거고.

아니면 textContent나 innerHTML을 사용해서 텍스트 값을 입력할 수도 있긴해.

그래서 이 세가지 속성은 거의 짝꿍처럼 붙어다닌다~

 <script>
      var jbBtn = document.createElement( 'button' );
      var jbBtnText = document.createTextNode( 'Click' );
      jbBtn.appendChild( jbBtnText );
      document.body.appendChild( jbBtn );
    </script>

위 코드는 버튼에 클릭이라는 텍스트가 들어간 버튼이 완성된다

**그리고 이렇게 동적으로 만든 요소를 css로 꾸며주려면
똑같이 classList를 써서 add로 (케밥케이스-) 네이밍 선정해주고 이를 css 에서 html꾸미듯 똑같이 꾸미면 된다

textcontent는 자바스크립트 상에서 여러 값을 이용해서 텍스트를 짤 수 있는거고
creatTextNode는 말그대로 스트링안에서 쓸 "텍스트"만 작성하는.

또 위에서도 정리했듯이 creatTextNode 는 .appendChild()가 주로 쓰고, .append("string 가능) 는 바로 스트링 값을 입력해 줄 수있으므로 쓸 필요가 x



요소 삭제하기

  • .removeChild()
  • .remove()

텍스트 값이라면, textContent = ""도 응용 가능

  • remove()는 엘리먼트 자신을 삭제합니다.

  • removeChild()는 부모 요소의 자식 요소를 삭제합니다. 부모요소.removeChild(자식요소); 형식으로 부모 요소와 자식 요소 모두를 선택해야 합니다.



Array.forEach()

[].forEach(callback,(currentValue, index, array), thisArg)
매개변수로는 callback과 thisArg 가 있다

for문과 마찬가지로 반복적인 기능을 수행할 때 사용합니다.

하지만 for문처럼 index와 조건식, increase(증가식)를 정의하지 않아도 callback 함수를 통해 기능을 수행할 수 있습니다.

const arr = [0,1,2,3,4,5,6,7,8,9,10];

arr.forEach(function(element){
    console.log(element); // 0 1 2 3 4 5 6 7 8 9 10
});
// 혹은 arrow 함수 가능
arr.forEach(element => console.log(element));

forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행합니다.

array의 인자값 만큼 callbackFunction이 반복되고, thisArg 는 거기서의 this 값이 되는것이죠

1) callback은 다음 세 인수와 함께 호출됩니다.

  • currentValue: 배열 내 현재 값
  • index: 배열 내 현재 값의 인덱스
  • array: forEach()를 호출한 배열.

forEach는 for문에 비해 좀 더 깔끔하고, 직관적입니다.

⛔ 하지만, forEach는 for문 처럼 반복을 제외할 수 없고, throw(예외)를 발생시키지 않으면 중간에 반복을 종료할 수 없습니다.

2) thisArg는 this의 값으로 쓰일 것을 지정하고, 전달하지 않으면 undefined를 사용하게 된다

< for 반복문을 forEach()로 바꾸기>

 const items = ['item1', 'item2', 'item3'];
const copy = [];

// 이전
for (let i=0; i<items.length; i++) {
 copy.push(items[i]);
}

// 이후
items.forEach(function(item){
 copy.push(item);
});

그 외 map, reduce와 같은 메소드도 배열을 순회하며 데이터를 처리하는 방법도 있습니다.

.setTimeout() <-> .clearTimeout()



추가로 새로이 알게 되었더나, 정리하고 싶은 내용들

.setAttribute()

지정된 요소의 속성 값을 설정합니다. 속성이 이미 있는 경우 값이 업데이트됩니다. 그렇지 않으면 지정된 이름과 값으로 새 속성이 추가됩니다.

속성의 현재 값을 얻으려면 getAttribute(); 속성을 제거하려면 를 호출하십시오 removeAttribute().

Element.setAttribute(name, value);

name
DOMString값 설정되는 속성의 이름을 지정. 속성 이름은 setAttribute()HTML 문서의 HTML 요소에서 호출 될 때 자동으로 모두 소문자로 변환됩니다 .

value
DOMString속성에 할당할 값을 포함하는 A 입니다. 지정된 문자열이 아닌 값은 자동으로 문자열로 변환됩니다.

그럼, 이걸 어떨 때 쓰나? 👉 예시 1

예시를 보면서,
어? 그러면 classList 대신으로도 쓸 수 있지 않을까? 했지만, setAttribute를 이용하여 스타일 속성을 추가하는 것은 좋지 않은 예라고 한다.

참고: setAttribute 방법으로 요소에 값이 있는 스타일 속성을 추가할 수 있지만 인라인 스타일 대신 Style 개체의 속성 을 사용하는 것이 좋습니다 .
라고 나와 있지만, 엄밀히 말하자면 자바스크립트 상에서 style을 만지는건 좋지 않기 때문에 classList를 이용해서 css상에서 꾸며주는 것이 좋다.



dataset이란?

👉 dataset 예제 1 , 예제 2, 예제 3



자바스크립트 디버깅하는 방법



Self-Closing Tags => <tagname/>

ex) <img src="my_image.jpg" alt="My image" width="100" height="100" />
닫는 태그 없이 단일로만 쓰는 태그들 작성 시 유의하기



img tag alt 잘 써주자~

<<img> 요소의 사용법>

  • src 특성은 필수이며, 포함하고자 하는 이미지로의 경로를 지정합니다.
  • alt 특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 매우 유용합니다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줍니다.




CSS px, em, rem 차이

  • px
  • em
  • rem

em과 rem 모두 길이가 유연한 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환됩니다.

만약에 1em 혹은 1rem 값을 지정했다면, 브라우저에 의해 16px부터 160px 까지, 아니면 기타 다양한 값으로 변환될 수 있습니다.

반면에 px 값은 브라우저에선 절댓값으로 인식

em과 rem 단위 모두 이러한 유연성을 가져다주면서 비슷한 성질을 가졌는데,그렇다면 언제 em 값을 쓰고 또 언제 rem 값을 써야 할까요?



자바스크립트상에서 요소를 잡을 때 태그의 이름이 아닌 무조건 class 또는 id 네임으로 잡기

예를 들어


❌  const sujin = document.querySelector("p");


✅  const sujin = document.querySelector(".name");

위와 같이 태그의 이름이 아닌 태그의 class 또는 id 네임을 가져와야 나중에 혼돈없이 사용 할 수 있다.



삼항연산자 사용법

삼항연산자가 무엇인지는 알지만, 어떻게 활용해야할지를 몰랐었다. 때문에 이를 정리해보고자 한다.

보통, if 명령문의 단축 형태로 쓰인다

문법 ) 조건문 ? true : falsy

또 마찬가지로, false외에도 null, NaN , 0, 비어있는 문자 값 (""), 그리고 undefined으로 조건문에 false 값으로 사용 가능 합니다

예제 1)
let greeting = person => {
let name = person ? person.name : `stranger`
return `Howdy, ${name}`
}

console.log(greeting({name: `Alice`}));  // "Howdy, Alice"
console.log(greeting(null));             // "Howdy, stranger"

예제 2) 연속된 조건문 처리하기
function example(…) {
 return condition1 ? value1
      : condition2 ? value2
      : condition3 ? value3
      : value4;
}

// 위의 코드는 아래의 코드와 동일합니다.

function example(…) {
 if (condition1) { return value1; }
 else if (condition2) { return value2; }
 else if (condition3) { return value3; }
 else { return value4; }
}


이번 과제에서 상수 사용법

"O", "X" 마크를 계속 이런식으로 입력을 해주다보면 오타가 있을 수 있다. 때문에 이런 고정적인 값은 가독성과 오타를 위해서라도 상수처리를 해서 사용해주는 것이 좋다

예를 들어, const MARK_O = "O";



동기와 비동기

👉 또 다른 예시



:after, :before 의 의미, 가상요소?

읽어봐도 잘 모르겠으니 일단 keep,,



2개 이상의 return 값

=> 객체로 묶어서 return

return current, sw;  =>


return { 
     currentPlayer: current,
     currentPlayerId: sw 
   };


❓ 중복클릭 방지 대체 어떻게 하나?

중복클릭 방지 = > removeEventListener 또는 클릭했을 때 안에 값이 있을 경우 return 해주는 식으로?
아 모르겠어 뭔데



Edge Case ?

알고리즘이 처리하는 데이터의 값이 알고리즘의 특성에 따른 일정한 범위를 넘을 경우에 발생하는 문제를 가리킨다.



구조 분해 할당이란?

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20


// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}


[TIL 2021.09.28] Real MySQL: 실행 계획
TOYPRO 해설문 - Dn't quarrel(300점)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage