혼자배우는 자바스크립트: 기본부터 포트폴리오까지 한번에 끝내기

변수

변수는 어떤 값을 담아둘 수 있는 양동이라고 생각하시면 됩니다.

변수 선언 방식

• let : 변수를 선언하고 재할당도 가능 언제든 값을 바꿀 수 있음

• const : 변수에 한번 값을 할당하면 다시 값을 바꿀 수 없음

• var : let의 옛날버전. let과 작동원리는 같으나 호이스팅과같은 문제가 있음 (다음 비디오에서 자세히 다룰 예정)

변수는 모든 프로그래밍 언어에 존재하는 개념입니다.

단지 언어별로 변수를 선언하는 방식이 조금 다른데,

JAVA와 Javascript의 변수 선언방식의 차이가 궁금하다면
https://youtu.be/kcEMkv9CYp8 이 링크 확인!

사진파일이 첨부되지 않아 추가 자료로 설명링크 남기겠습니다 링크를 확인해주세요!

본 영상은 유투브 '코딩알려주는 누나' 채널에 올라온 영상입니다.

배열?

배열은 여러개의 데이터를 하나의 변수에 담고싶을 때 사용합니다.

인덱스 0️⃣

배열에 들어가있는 아이템에는 모두 인덱스 번호가 부여된다
시작점은 0부터 부여가 된다.
인덱스 번호로 배열에 있는 아이템들을 접근할 수 있다.

예시

let array = ["apple","banana","mango"] // 인덱스번호 0,1,2

console.log(array[0]) // apple 프린트

array[1]="grape"

console.log(array)// ["apple","grape","mango"] 가 나옴

배열함수 ?

• pop() : 배열 끝에있는 아이템을 제거, 그 아이템값을 리턴

• push(‘아이템’): 배열 끝에 아이템 추가, 배열의 최종 길이 리턴

• includes(‘아이템’): 배열에 아이템이 포함되어있으면 true리턴 아니면 false 리턴

• indexOf(‘아이템’): 아이템의 인덱스 번호를 리턴

• slice(시작점, 끝점): 시작점~끝점(미포함) 까지 배열을 복사해서 리턴
  좀더 다양한 사용법 참고 - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

• splice(시작점,개수): 시작점부터 개수만큼 실제 배열에서 아이템 제거

• length : 배열 함수는 아니지만 배열의 크기를 리턴해주는 속성

예시

let array = ["apple","banana","mango"]
console.log(array.length) // 3이 나옴, 배열에 아이템이 총 3개라서

객체

객체 또는 영어로는 오브젝트(object)라고도 불린다.
세상에는 단 하나의 데이터로 표현되지 않는 정보가 많다. 나라는 사람을 표현하기 위해서도 이름, 나이, 사는곳 등의 정보가 필요하듯이. 그래서 객체는 관련있는 정보를 묶어서 하나의 데이터를 표현하기 위해 나왔다.
객체에는 값 뿐만 아니라 함수도 들어갈 수 있다.(함수에 대해서는 곧 배우니 걱정말고 눈도장만 찍고 넘어가자?)

let user = {

    name: "Coding Noona",

    age: 22,

    getName : function(){

                      return "My name i "+this.name

                     }

    }; // 객체 정의법

console.log(user.name) // 객체에서 값 가져오는 법 1

console.log(user['name']) // 객체에서 값 가져오는 법 2

user.age = 40 // 객체에 특정 키 값을 바꾸는법 1

user['age']=50 // 객체 특정 키 값을 바꾸는법 2

console.log(user.getName()) // 객체에 함수 호출

객체와 객체지향 프로그래밍은 같은말일까?

자바스크립트에서는 객체를 많이 볼수 있다. 그렇다고 이게 객체지향 프로그래밍일까?

그건 아니다. 객체는 단순히 자료형일 뿐이고

객체 지향 프로그래밍은 프로그래밍의 한 방식일 뿐이다.(class 라는걸 많이 이용해서 하는 프로그래밍이다. 궁금하면 찾아보자)

사진 첨부를 위해 관련 자료를 링크로 공유합니다 링크 확인해주세요!

switch와 삼항연산식

이번시간에는 if문과 마찬가지로 조건식을 다를 수 있는 친구들을 소개시켜드렸습니다

switch

• 조금더 간결하고 의미가 명확해 보인다는 장점이 있음

• case가 값으로 딱 정해진 경우에만 사용가능

• 조건이 비교식일 경우 사용 불가

let food = '햄버거'

switch(food){

    case '피자':

        console.log("피자를 주세요")

        break;

    case '햄버거':

        console.log("햄버거를 주세요")

        break;

    default:

        console.log("메뉴에 없는 음식입니다")

}

case마다 break를 넘겨줘야하는 이유는 그렇지 않으면 밑에 케이스도 다 들르기 때문이다

• 햄버거에 break를 지우고 코드를 한번 실행해보자

default는 else처럼 매칭되는 case가 없을때 실행이 된다.

삼항 연산자

• if문을 간단하게 표현할 수 있다.

• 조건에 따라 실행하는 내용이 한가지일때 쓰기 좋다

• 조건에따라 실행하는 내용이 다르다

• 조건식? 참일때 : 거짓일때

let food = '햄버거'let answer = food == '햄버거'? '햄버거 좋아':'햄버거 싫어'

• 연산식을 붙여서 더 많은 조건 표현도 가능하다

let food = '햄버거'

if(food == '피자'){

  console.log('피자좋아')

}else if(food == '햄버거'){

  console.log('햄버거 좋아')

}else{

console.log("다 싫어")

}

// 위의 if문을 삼항연산자로 표현하면

let answer = food =="피자"?"피자좋아":food == '햄버거'?'햄버거 좋아':"다 싫어"

console.log(answer)

사진첨부를 위해 링크를 추가합니다 자료에 링크를 확인해주세요!

함수

함수는 어떤 일의 단위입니다. 또한 자주쓰는 내용들을 묶어서 함수로 만들어두면 필요할때 언제든 불러다 쓸 수 있습니다.

함수 생김새

function 함수이름 (매개변수) {

    내용입력

    return 반환

}

• 매개변수: 함수에 전달해야되는 내용이 있을때, 이 함수가 실행될때 알아야되는 내용이 있을 때 매개변수를 통해 전달한다

• return: 반환값, 함수 완료 후, 반환되야하는 값이 있을 때 사용한다

예시

function greet(firstName,lastName){    console.log("hello",firstName,lastName,"Welcome to our website")}greet("Noona","Kim")

함수는 반드시 불러야 실행된다

함수의 또다른 이름들

• method: 메서드, 함수와 같은 뜻이다

• 익명함수 Anonymous function : 이름이 없는 함수. function (y) {console.log(y)}. 함수를 변수에 넣어줄때, 일시적으로 쓰이고 말 함수들에 대해선 익명함수로 만들어준다

• 람다식 함수: => 를 사용하여 함수를 정의하는 경우이다.(이건 곧 배울 예정이다.) let arrowFunc = (y) => { console.log(y); }

• 콜백함수 : 다른 함수의 매개변수로 전달된 함수.
  예시

button.addEventListenr("click",setCount)// 버튼에 클릭 이벤트가 발생했을때 setCount함수를 콜을 한다

function setCount() {

    count++

}

콜백은 말그대로 부른다는 뜻이다. 주로 어떤 함수에 매개변수로 들어가 어떤 특정한 조건이 되었을때만 호출이된다 (클릭이벤트나 타이머이벤트 등등)

다음 강의는 유투브 '코딩알려주는 누나'채널에 올라온 영상입니다

사진파일 첨부를 위해 강의자료는 링크로 제공됩니다 링크를 확인해주세요

다음 강의는 유투브 '코딩알려주는 누나'채널에 올라온 영상입니다

사진첨부를 위해 강의자료는 링크로 제공합니다 링크를 확인해주세요

숫자 맞추기 게임

안녕하세요 여러분들!! 우리의 첫 자바스크립트 프로젝트를 할 준비가 되셨나요?.?(두근두근)

저희의 첫 프로젝트는 또 재미있게 우리가 만들어보기 위해서

제가 술게임에서 영감을 받은 숫자맞추기 게임입니다! (업다운 게임이라고도 하죠)??

• 게임 데모: https://okta-numberguessing-game.netlify.app/

구현할 기능

• 유저는 숫자를 입력할 수 있다

• 유저가 입력한 숫자가 컴퓨터가 뽑은 숫자보다 작으면 Up! 이라고 알려준다

• 유저가 입력한 숫자가 컴퓨터가 뽑은 숫자보다 크면 Down! 이라고 알려준다

• 유저가 입력한 숫자가 컴퓨터가 뽑은 숫자와 일치하다면 That’s right이라고 뜨고 게임이 종료된다.

• 유저는 총 5번의 기회가 있다

• 게임이 종료되면 버튼은 비활성화된다

• 리셋버튼을 누르면 게임이 초기화된다

• 유저가 1~100범위 밖에 숫자를 입력할시에 경고메세지가 뜬다

• 유저가 이미 입력한 값을 또 입력할 시에 경고메세지가 뜬다

• 반응형 UI

지금부터 이 구현할 기능들을 보면서 어떻게 자바스크립트상에서 구현을 할 수 있을지 고민 해보세요!?

기본 로직이 어떻게 흘러갈지 UI는 생각하지 마시고

console.log() 로만 결과를 출력한다는 가정하에 한번 고민해보시기 바랍니다!

사진첨부를 위해 자료는 링크로 제공했습니다 링크를 확인해주세요

숫자맞추기 게임 3탄

드디어 우리의 게임이 구색을 갖춰가고있습니다!
코드를 잘 이해했나 한번 몇개의 문제를 내보겠습니다!

반드시 문제를다 풀고 다음 비디오로 넘어가세요

1. 남은 기회를 5번이 아닌 10번으로 바꾸고 싶다면? 어디를 바꾸면 될까?

2. 숫자를 맞춘후로 게임을 더이상 플레이 못하게 하기위해 버튼을 disable하는 방법은?

3. if(gameover == true)를(46번째줄 근처) if(gameover)로 해도 똑같이 동작이 될까? 동작이 된다면 왤까?

4. computerNum 를 1~10사이의 랜덤번호를 받고싶다면?

5. input창에 포커스를 두면 내가 그전에 입력한 값이 자동으로 지워지게 하려면 어떻게 해야할까? (유저는 매번 입력한 값을 일일이 지우기 귀찮다)

2번과 5번 문제의 정답은 다음 비디오에서 확인해주세요!
나머지는 여러분들이 스스로 풀 수 있다고 누나는 믿는다 ^^

숫자맞추기게임 4탄

우리의 첫! 자바스크립트 프로젝트 하느라 너무 수고하셨습니다!
하지만 그 수고 쪼금만 더 해주세요 ^^
여러분들 꼭 코드를 다 지우시고 스스로 다시한번 더 만들어보시길 바랍니다
책도 한번읽는거랑 두번읽는게 느낌이 완전 다르듯이 코딩도 그냥 보면서 따라치는거랑 다 지우고 스스로 생각해서 짜는거랑은 완전 차원이 달라요.?
누나는 여러분을 믿습니다?

또 반드시 HTML/CSS로 웹사이트도 꾸며주세요
게임 웹사이트인데 재미없게 생겨서 되겠습니까? 여러분들이 할수있는 최대한 재미있게 웹사이트를 꾸며주세요!
반응형 웹페이지 잊지마시고! 이렇게해서 HTML/CSS는 항상 연습을 꼭 하셔야합니다!

• 게임 데모: https://okta-numberguessing-game.netlify.app/

• 깃허브 : https://github.com/legobitna/Okta-number-guessing-game

* URL 관련 문서: https://developer.mozilla.org/en-US/docs/Web/API/URL

api가 자바스크립트 내부에서 어떻게호출이 되는지 이해하기 위해선 자바스크립트의 동작 원리에 대해서 간단히 아셔야 합니다! 그래서 우리 코드는 잠시 여기서 멈춰두고

자바스크립트의 동작원리를 배우러 가볼까요??

10탄 - 키워드별 검색

키워드별 검색은 사실 저번챕터에서 했던 카테고리별검색에서 약간 변형된 버전입니다. (거진 아다르고 어다른 정도). 그래서 이 영상을 보기 전에 여러분들이 스스로 도전을 했고 성공했다고 저는 믿어 의심치 않습니다!? 그래도 헷갈리시거나 본인이 한 방식이 맞는지 영상을 보고 확인해주세요!

과제 ?

어느정도 기능은 다 짰는데 흠~? 코드가 지저분하고 중복이 많이보이는건 기분탓인가?

코드의양을 최대한 심플하게 줄일 수 있을까?

이 부분에 대해서 고민해보기! 가 오늘의 과제!!

코드에 중복을 없애보세요!?

2탄 - API 문서읽기

이번에 저희가 사용할 api입니다

• News api 웹사이트: https://newsapi.org/docs

API문서의 키 포인트 ?

API사용에 앞어서 가장 중요한것은 API문서 읽어보기?입니다.
API는 상호 약속한 룰을 가지고 정보를 주고받는것이기 때문에 각각 API별로 룰이 다릅니다 그래서 API문서를 읽어보실 때 주의깊게 보셔야하는건

• API endpoint 별 주는 데이터

• API 인증 방법 (api key로 인증을 하나? 아니면 토큰으로 인증을하나?)

• Query로 쓸 수 있는 인자들

• API 응답내용들 (어떤 결과를 내가 받아볼 수 있는지)

이번 프로젝트 설명?

이번에 저희가 만들 프로젝트는 Times News 웹사이트입니다!?

• 이번 프로젝트: https://noona-times.netlify.app/#js-bottom
  (api가 만료가되면 제 웹사이트에 뉴스가 안나올 수도 있습니다 그렇게되면 실제 뉴욕 times website를 참고해주세요!)

• 실제 Times website: https://www.nytimes.com/international/

주요기능?

• 유저는 최신 뉴스를 볼 수 있다.

• 뉴스에는 사진, 제목, 내용, 출처,날짜가 있다.

• 뉴스를 sport, tech, business등 카테고리별로 볼 수 있다.

• 뉴스를 검색할 수 있다.

• 웹사이트는 반응형 웹페이지다.

• pagenation으로 다음 뉴스정보를 받아볼 수 있다.
  

이번 프로젝트에 웹사이트에 아주 중요한 개념이 왕창?들어갈 예정입니다! api호출부터 검색, pagenation까지 아주많이 들어갈꺼니까 여러분들 어려워도 끝까지 와야합니다! 그럼 준비 단단히하고 출발!?