미니 프로젝트 - 가위바위보 게임

미니 프로젝트 - 로또 추첨기

비동기 코드 - 비동기는 동기의 반댓말로 실제로 코딩한 순서와 다르게 작동하는 코드를 비동기 코드라고 한다.

fill ( )

const arr1 = ['a', 'b', 'c', 'd']; arr1.fill('A'); // ['A', 'A', 'A', 'A'] document.write(arr1 + '
');

const arr2 = ['a', 'b', 'c', 'd']; arr2.fill('A', 1); // ['a', 'A', 'A', 'A'] document.write(arr2 + '
');

const arr3 = ['a', 'b', 'c', 'd']; arr3.fill('A', 1, 3); // ['a', 'A', 'A', 'd'] document.write(arr3 + '
');

arr1.fill('A'); arr1 배열 전체를 'A'로 채웁니다.   arr2.fill('A', 1); arr2 배열의 arr2[1]부터 끝까지 'A'로 채웁니다.   arr3.fill('A', 1, 3); arr3 배열의 arr3[1]~arr3[2] 를 'A'로 채웁니다.

Sort (a, b) - 정렬

솔트는 정렬하는걸 말하는데 예를들어 a-b를 하면 오름차순으로 정렬한다. 반대로 b - a 는 내림차순으로 정렬한다.

Sort(a, b) { Return a-b; }

반환값이 0보다 크면 b, a순으로 정렬되고, 0보다 작으면 a, b순으로 정렬됩니다.

미니 프로젝트 - 숫자야구 게임

룰은 4개의 숫자를 한사람이 무작위로 선택해서 말하고

반대편 사람이 정해놓은 숫자 4개의 순서와 값이 모두 같으면 - 홈런

반대편사람이 정한 숫자 하나가 같다면 - 1스트라이크

반대편 사람이 정해놓은 숫자는 같지만 순서가 다를경우 - 볼

이렇게 총 10번의 기회가 주어지고 주자는 이 값들을 유추해서 4개의 숫자의 순서와 값을 알아맞춰야한다

splice() 메서드에 대해 말해보자면 splice(startNum, deleteCount, insertValue) 라고 볼 수 있으며   startNum(시작 순서) 부터, deleteCount(제거개수) 몇개를 제거하고 , insertValue(넣을 값) 값을 몇개 넣어라 라는 의미를 가지고 있다고 볼 수 있다.

const numbers = []; // 1, 2, 3, 4, 5, 6, 7, 8, 9 for(let n = 0; n < 9; n += 1) { // 9번 반복한다. numbers.push(n + 1); }

const answer = []; for (let n = 0; n < 4; n += 1) { // 네번 반복 const index = Math.floor(Math.random() * numbers.length); // 0-8 랜덤정수 answer.push(numbers[index]); numbers.splice(index, 1); } console.log(answer);

처음에는 const index = Math.floor(Math.random() * 9); 이런식의 방향이었지만,

이렇게 될경우 예를들어 랜덤값 9가 나오고 answer.push(numbers[index]);

여기서 배열의 9번째 값을 answer엔 추가 numbers엔 삭제시켜야되는데

삭제는 계속 시켜서 numbers의 순서는 줄어드는데 배열의 순서는 똑같이 요구한다면

결국엔 배열이 부족한 상황인데도 9번째 배열 8번째 배열같은 높은 순서를 가리킬수도 있다

그래서 numbers의 글자 수만큼을 랜덤값으로 지장해서 저장하면 undefined가 안나온다.

글로적어도 나중에 보면 이해하지 못할텐데 이건 익숙해져야 할것같다.

새로고침하면 초기화되는 기본동작을 막는다.

event.preventDefault(); // 기본 동작 막기

new Set(input).size 를 설명하면

Set은 중복을 허용하지 않는 특수한 배열이다. New는 예약어 인데 이것은 추후에 설명이있다.

New Set(‘1231’) 을 하면 Set 내부에는 1, 2, 3만 들어간다. 이를 통해 Set의 요소 개수를 세면 중복된 값이 있는지 아닌지를 검사할수있다.

( 왜냐하면 중복된값을 제거했을때 4글자가 안되면 중복됨을 증명하는것이 되므로)

그리고 Set의 요소개수를 구할 때는 length가 아니라 size를 사용한다.

append 는 뒤에서부터 오는 텍스트를 추가한다. 문자열이나 여러가지를 추가할수있는데 appendChild 와 다른점은 appendChlid메서드는 한번에 오직 하나의 노드만 추가할수있다. 또한 return값을 반환할수있다.

forEach는 배열의 모든 요소를 반복하며 콜백함수를 실행하는것이다. Ex) const arr = [1, 3, 5, 7, 9]; Arr.forEach(function(e) { console.log(e); });

함수(e)를 저장하고 1~9까지 반복해서 실행한다.

미니 프로젝트 (끝말잇기 놀이)const number = prompt('몇 명이 참가하나요?');

alert(number);

console.log,

alert - (x,y)같은형식은 지원하지 않는다 . 결과값에 하나만 적어야된다.

confirm - boolean 값만 취급한다. True or false 값을 나눌 때 사용하면 적합하다.

* prompt 함수로 받은 모든 값은 모두 문자열로 취급된다. 그래서 숫자로 취급하려면 타입을 변경시켜야 한다. Number(n)과 같은 방식으로 *

const onClickButton = () => { console.log('버튼 클릭'); };

Const 안에 console.log 를 넣을때 사용하는 식 = () =>

태그.addEventListener(‘이벤트함수’ , 리스너함수);

‘Click’, onClickButton 함수를 넣어 실행하는데 이때 중요한 점은 onClickButton()를 해서는 안된다는 것이다. 
 ()를 붙이는 순간 함수가 실행되기때문에

이때 onClickButton 같은 함수를 콜백함수라고한다. 콜백 함수는 특정 작업이 실행되고 난 뒤에 추가로 실행되는 함수를 의미한다. 이 같은 경우는 버튼을 클릭한 후에 onClickButton이 추가적으로 실행되므로 콜백함수라고 볼수있다.

완성된 끝말잇기 놀이

const number = Number(prompt('몇 명이 참가하나요?')); const $button = document.querySelector('button'); const $input = document.querySelector('input'); const $word = document.querySelector('#word'); const $order = document.querySelector('#order'); let word; //제시어 let newWord; // 현재 단어

const onClickButton = () => { // word 에 아무런 값을 넣지 않았으니 undefined 이다ㅏ if 문안에 들어가면 false로 취급되기 때문에 // !word 로 true로 취급되게끔 만들었다. if(!word) { // 제시어가 비어 있는가? word = newWord; // 입력한 단어가 제시어가 된다. $word.textContent = word; // 화면에 제시어 표시

   const order = Number($order.textContent);
   if(order + 1 > number) {
       $order.textContent = 1;
   } else {
       $order.textContent = order + 1;
   }
}
else {
    // 비어 있지 않다.
    if(word[word.length - 1] === newWord[0]) { // 입력한 단어가 올바른가?
    // 올바르다.
    word = newWord; // 현재 단어를 제시어에 저장한다.
    $word.textContent = word; // 화면에 제시어 표시
    const order = Number($order.textContent);
    if (order + 1 > number) {
        $order.textContent = 1;
    }
    else {
        $order.textContent = order + 1;
    }

    } else {
        alert('올바르지 않은 단어입니다!')  // 올바르지 않다.
    }
}

}; const onInput = (event) => { newWord = event.target.value; // 입력한 단어를 현재 단어로 };

$button.addEventListener('click',onClickButton); $input.addEventListener('input',onInput);

태그들의 내부 값을 가져올 때 어떤 속성을 사용해야 할까?

입력 태그 ( input, select, textarea)의 내부 값을 가져올때 .value 를 사용한다.

기타 (span, button, div) 등은 textContent 를 사용한다.

문자열을 정수로 바꾼다 - parseInt(‘3.14’); - 3 정수로 바꾸는 것이기 때문에 3.14 같은 소수자리까지 간 수는 3으로 대체된다.

문자열을 실수로 바꾼다 - parseFloat(‘3.14’) - 3.14

이진법으로 계산 - parseInt(111, 10); - 111 111을 이진법 10으로 계산한 값 1 +10 + 100 = 111

NaN 은 Not a Number 의 약자 하지만 typeof NaN 하면 number 을 출력한다. 모순이지만 자바스크립트에서 그렇게 정했기에 외워야한다.

Boolean - true and false

1. True 는 false 보다 높은값이다 (true = 1, false = 0)
2. ==, === 의 차이는 자료형까지 비교하냐 안하냐이다. 문자열 ‘1’ 숫자 1 같이 값이 같다면 == “문자열” ‘1’만 비교하고싶을땐 ===
3. 연산자 && | | = &&는 ‘그리고’ | | 는 ‘또는’을 의미한다. 이때 중요한점은 둘중에 하나만 참일땐 결과가 참이지만 거짓임을 나타내고싶다면 둘다 ‘false’로 입력해야한다.
4. 빈 값 사용하기 
undefined 와 null 
undefined 는 반환할 결과값이 없을때 출력된다. 그러나 ‘false’, ‘0’, ‘ ’와 같지 않다. 이 값들처럼 없는 값이나 거짓인값이 아니다.
null 는 빈 값이라는 점에서 위의 undefined와 같지만, typeof 를 출력했을때 null 이 아닌 object 를 출력한다. 이는 자바스크립트의 유명한 버그중 하나이다. Undefined 는 기본값이라는 의미라도 있지만 null은 아무런 역할이없다. 값이 null인지 확인하는 유일한 방법은 ===null이 전부이다.

변수

변수를 만드는 방법 let, const, var 이다.

Const - 상수의 줄임말이다. 변수와 상수의 차이점은 뭘까? 변수는 변하는 수 상수는 변하지 않는 수라는 의미를 가지고 있다. 그러나 const는 변수라는 카테고리에 들어간다. 엄밀히 말하면 const 는 상수가 아니기 때문이다. const는 객체의 내부 값에는 적용되지 않는다.

Const 의 장점은 상수로 만들어서 수정되지 않음이 보장되기 때문에 더 안전하게 코딩할 수 있다는 점이다.

Swith 문

If 문과 swith문은 조건이 충족되면 실행된다는 공통점이 있지만, swith문의 기본형식이 if문과 구조가 다르다 예를들어 , swith (value) { case ‘A’ : console.log(‘A’);} 라는 swith문이 있으면 case 를 여러개 늘릴수있고 일치하는 모든 case를 출력한다. 따라서 원하는 결과만 얻으려면 break문으로 빠져나와야한다. “Break” swith (value) { case ‘A’ : console.log(‘A’); break;}
 if문의 else 와 같은역할을 하는 default 라는 특수한 예약어가 있는데 그 기능또한 같다. case에 일치하지 않으면 default 값을 출력한다.

조건부 연산자 사용하기

If 문과 switch문 외에도 분기처리에 사용하는 식

이를 조건부 연산자 또는 삼항 연산자라고 말한다.

기본형식은 조건식 + ? 일때 사용되는 식 ‘참입니다’ : 일때 사용되는 식 ‘거짓입니다’

함수 (function)

함수의 형식 1. function() {}, 2.() => {}

function a() { } - 함수를 상수에 대입하지 않고 function 키워드에 이름을 넣는 방식을 함수 선언문이라고 한다.

const b = function() { }; const c = () => { };

• 함수를 상수나 변수에 대입하는 방식을 함수 표현식이라고 한다. 변수와 마찬가지로 함수를 만드는 행위도 ‘선언한다’ 로 정의한다.

javascript

1) 학습한 내용

var arr = [
    {
        quote: "아이들은 누구나 예술가이다.",
        author: "피카소",
    },
    {
        quote: "내면의 목소리는 들리지 않게 된다.",
        author: "반 고흐",

    },
    {
        quote: "완벽을 두려워하지 말라",
        author: "달리",

    },
    {
        quote: "영감이 오는 것을 기다리고 있을 수는 없다.",
        author: "런던",

    },
    {
        quote: "의욕만 있으면 이런 노력만으로도 얼마든지 많은 생각을 찾을 수 있다.",
        author: "수스",

    }
];




var quote = document.getElementById("quote");
var author = document.getElementById("author");
var btn = document.getElementById('btn');

btn.addEventListener('click', function() {


var random = Math.floor(Math.random() * arr.length);

quote.textContent = arr[random].quote;
author.textContent = arr[random].author;


})

그 전에 한 내용들이나 튜토리얼 부분은 github에 올려두었습니다.

JS 학습 Github

2) 학습내용 중 어려웠던 점

전체적으로 함수를 쓰는것 자체에 의문점이 많았습니다.

3) 해결방법

MDN 을 참고하거나 강의를 복습했습니다.

4) 학습소감

YouTube (4)

1) 학습한 내용

2) 학습내용 중 어려웠던 점

3) 해결방법

4) 학습소감

YouTube (3)

1) 학습한 내용

2) 학습내용 중 어려웠던 점

3) 해결방법

4) 학습소감

YouTube (2)

1) 학습한 내용

1) YouTube nav-top

2) 학습내용 중 어려웠던 점

없음

3) 해결방법

4) 학습소감

YouTube (1)

1) 학습한 내용

**

1) 상단 nav , 좌측 nav, main **

** overflow-y: auto; - 좌측 nav에 개별적인 공간과 스크롤을 만듬**

youtube(1) Github 실습내용

2) 학습내용 중 어려웠던 점

딱히 없음

3) 해결방법

4) 학습소감

CSS - Tutorial

1) 학습한 내용

*1) Reset.css *

사전에 있는 모든 태그들의 기본의 속성들을 초기화한다.

이때 css파일 적용시 cascading 이 발생하는데 뒤에오는 코드가 적용되는 이특성을 살려서

Style.css 보다 reset.css를 우선으로 적용시켜야한다.

그래야 후에 style.css를 적용해도 혼동이 일어나지않는다.

2) Normalize.css

브라우저간 일관된 스타일을 보장하고 부트스트랩과 같은 도구에서도 normalize.css를 사용된다. reset.css 보다 손이 덜간다는 장점이 있어서 실무에서 사용되는 빈도가 잦다.

:root(변수){
   --black:#18181a;
   --purple: #9147ff;
   --font-size-40: 40px;
}

h1 {
   background-color: var(--black);
   font-size: var(--font-size-40);
   color: var(--purple);
}

일괄적으로 모든 부분의 브랜드컬러가 바뀌었다고 가정했을때

직관적인 코드진행에 유용하게 활용되면서 익스플로러에서는 제약이 크게작용된다.

#intro 라는 영역안에서만 사용가능한 변수

#intro {
    --font-color: blue;
    --font-size: 50px;

}
#intro(적용됨) p{
    font-size: var(--font-size);
    color: var(--font-color);
}

#footer(적용안됨) p{
    font-size: var(--font-size);
    color: var(--font-color);

CSS - Tutorial Github 실습내용

2) 학습내용 중 어려웠던 점

없었습니다.

3) 해결방법

4) 학습소감

css변수를 배우게됨으로 훨씬 편리하고 손이 덜가게 코딩을 할 수 있을거같다.

Twitch (4)

1) 학습한 내용

1) twitch main section (2)

*2) twitch category section *

3) twitch footer

Twitch (4) Github 실습내용

2) 학습내용 중 어려웠던 점

transform 사용시 hover:transform혹은 focus:transform의 값을 정해두고 그 원본코드에다가 transition: transform 이런식으로 저장해야된다.

그 이유는 transition 을 hover에 저장하면 클릭했을때만 효과가 나타나고 돌아갈때는 적용이되지않는다

기본코드에 적용해야 갈때 올때 둘다 저장된다.

3) 해결방법

너무나도 정리를 잘해놓은 사이트를 발견했다.

transform, animation, transition 정리 사이트

4) 학습소감

Twitch (3)

1) 학습한 내용

1) twitch main banner

2) twitch main section

네비게이션 바를 피해서 남은 공간에 스크롤을 적용하는법

.content { position: absolute; top: 50px; bottom: 0; left: 240px; right: 0; width: 800px; height: 800px;

}

Background 의 활용

background : yellow url(../img/notebook.jpg) no-repeat center; background-size: cover;

background는 background-color와 다르게 배경색 이미지 효과 위치등을 한번에 조정할수있다.

Background-size: cover 은 배경이미지가 들어가야하는 공간보다 클때 사이즈를 늘리거나 줄여서 이미지에 알맞게 삽입할수있게한다.

원본 비율을 유지하면서 사이즈를 늘리거나 줄이는 자연스러운 효과를 만들수있다.

Twitch (3) Github 실습내용

2) 학습내용 중 어려웠던 점

딱히 없었습니다.

3) 해결방법

4) 학습소감

Twitch (2)

1) 학습한 내용

1) twitch left nav (1)

2) twitch left nav (2)

왼쪽 nav바를 상단과 하단에 딱맞춰 고정시키는 방법

Position: relative , absolute, fixed

등 3차원적인 속성이면 다가능하다.

Top: 사이트마다 상단 네비바 width만큼

bottom: 0; bottom값을 0 으로 줬을 때 높이값은 가변값이 되어 사이트를

늘리고 줄일수있다. 이것으로 화면에 고정되어있는 컨텐츠를

쉽게 늘리거나 줄일수있다.

left: 0;

왼쪽 nav바만 스크롤을 별개로 사용하고싶으면

overflow-y: auto;

Twitch nav Github 실습내용

2) 학습내용 중 어려웠던 점

딱히 없었습니다.

3) 해결방법

4) 학습소감

twitch ( 1 )

1) 학습한 내용

1) twitch header nav

수업은 input부분의 크기와 색만 잡았지만

twitch 사이트를 보고 focus됬을때 효과, border색변화를 적용했다. hover 됬을때도 테두리가 옅은 회색으로 바뀌는것도 적용해보았다.

수업 마지막쯤에 min-width가 나왔는데 "지구"라는 사이트를 예시로

특정사이트의 중요한 부분은 레이어가 줄어들어도 최소값의 크기가 바뀌지않는다

이때 적절하게 사용되는것이 min-width 값이다.

38일차 twitch 카피캣 Github

2) 학습내용 중 어려웠던 점

딱히 없었습니다.

3) 해결방법

4) 학습소감

탑클래스 사이트는 카피캣하기 쉽지않다.

네이버 오디오 클립 (3)

1) 학습한 내용

2) audio clip footer

3) audio category

Flex-between 의 주의점

딱딱 맞는 갯수의 div박스를 정렬할때 유용하지만 정렬할때의 수가 불규칙하면 원하는 정렬을 만들 수 없다.

nth-child 다양한 사용방법

nth-child(odd) - 홀수마다

nth-child(even) - 홀수마다

nth-child(6n) - 6의 배수 마다

37일차 네이버 audio clip Github

2) 학습내용 중 어려웠던 점

딱히 없었습니다. 오랜만에 transform을 사용해서 복습하는 기회가 되었습니다.

3) 해결방법

4) 학습소감

네이버 오디오 클립 (2)

1) 학습한 내용

*1) audio clip main *

네이버 오디오클립 (2) Github

2) 학습내용 중 어려웠던 점

부모간의 마진 병합현상이 헷갈려서 다시 복습하는 기회가 있었습니다.

position: relative; 를 부모태그에게 부여하는것을 까먹어서 자주 돌아갔습니다.

absolute 가 어디로든 배치하기 편하다는 장점이 있지만, 그만큼 생각해야할것이 많고 복잡하다는 단점이 있었습니다.

3) 해결방법

웹 검색을 통해 해결했습니다.

4) 학습소감

거의 매일 비슷한 내용의 사이트를 만드는것이 이젠 많이 적응되고 좋지만, 좀 더 다양한 수업내용이 있었으면 하는것이 바램입니다.

*네이버 e스포츠 (완) 네이버 오디오 클립 (1) - 대체공유일 진도 *

1) 학습한 내용

1) e-sport 우측 파트

border-radius의 새로운 적용 방법 원래는 모든방향의 radius를 적용해야하는줄 알았지만 코드내용을 조금 바꿈으로써 부분적으로 효과를 줄 수 있었다.

border-bottom-right-radius: 4px;
border-top-left-radius: 4px;

magin: 0 auto; 를 줄 수 없는 상황 div안의 내용에 겉보기에 margin: auto 값을 주면 알맞을 것 같지만 밑에 border때문에 margin 값을 주지 않는 상황에서 정렬을 진행해야한다.

text-align: center;

으로 글자들을 x축으로 정렬하고 상하의 공백을 margin 으로 메꾸었다.

2) audio clip header

3개의 파트를 나누어서 각각 flex-between 값을 줬다. id명과 class명 이 알맞게 잘 들어갔는지 확인하는게 중요하다.

35일차 e-sport page and audio clip Github

2) 학습내용 중 어려웠던 점

딱히 없었습니다.

3) 해결방법

x

4) 학습소감

네이버 e스포츠 (2)

1) 학습한 내용

1) e-sport main lists

34일차 네이버 e-sport Github

2) 학습내용 중 어려웠던 점

딱히 없었습니다.

3) 해결방법

x

4) 학습소감

네이버 E스포츠 홈페이지(1)

1) 학습한 내용

1) nav 바 ** 2) header part**

네이버 E스포츠 Github

2) 학습내용 중 어려웠던 점

딱히 없었습니다.

3) 해결방법

x

4) 학습소감