[Toy Project 1] 바닐라 js + HTML + CSS 이용한 Chrome Web 제작 01

chaaerim·2021년 10월 1일
0

바닐라 js

목록 보기
1/7


앞으로 3주간 바닐라 js를 이용하여 크롬 앱을 만들어 볼 것이다!
구현해야 하는 기능들은 다음과 같다.

  • JS To Do List
    텍스트할 일 입력 뒤 버튼클릭/엔터로 아래 할 일 목록에 추가
    할 일 클릭 시 완료로 중간 줄 긋기
    할 일 삭제 버튼 눌러 해당 내용 목록에서 삭제

  • JS Clock
    현재 시간 명시

  • Get Gelocation & Get Weather Information
    Geolocation API 참고
    지역 기반 날씨

  • Display Photo & Display Quotes
    배경 사진 설정
    인용 문구 보이기

  • Deploy to Github Pages
    gh-pages 이용해 배포 진행 후 설명 PR

강의는 노마드코더의 '바닐라 JS로 크롬 앱 만들기'를 참고하였다.

📖Javascript 란?

Javascript는 프론트엔드에서 사용할 수 있는 유일한 언어이고 모든 컴퓨터에서 사용된다.
Javascript 기술을 더 가다듬어서 깊게 배우고 싶다면 프레임워크로 넘어가면 된다.
즉, 프레임워크는 내가 하는 일을 도와주는 도우미라고 할 수 있다.
브라우저에서는 html파일을 열고 html파일이 css파일과 Javascript파일을 가져온다.

1. console.log( )

콘솔에서 Javascript를 확인할 수 있는데 이 때 사용하는 것이 console.log(). 괄호 안에 있는 값이 콘솔 창에 출력된다.

2. 변수 선언

Javascript에서는 변수를 선언하기 위해 const, let, var를 사용한다.
변수는 값을 저장하거나 유지하는 역할을 한다.

✍ example

const age=23;  // 값 변경 불가
let myName='chaerim';   // 값 업데이트 가능
var height=160;   // 값 업데이트 가능 
  • const 는 상수를 의미. 즉 const로 변수가 생성되면 바뀌지 않는 값이라는 것이다.
  • let 으로 변수가 생성되면 업데이트가 가능.
  • var 로 생성해도 변수의 업데이트가 가능. 그러나 언어를 통한 보호가 불가능.

👉 따라서 !! Javascript를 이용할 때에는 const를 디폴트로 사용하고 업데이트가 필요한 변수만 let을 이용. 변수를 선언할 때에는 항상 const를 사용하되, 가끔 let을 사용하고 절대 var를 사용하지 않음을 기억!

3. null, undefined

✍ example

const myName=null; // null
let something; // undefined
  • null 은 아무것도 없는 것으로 변수를 채운 것. 변수 안에 아무 값이 없다는 것을 확실하게 하기 위해 사용.
  • undefined 는 변수를 만들고 값을 주지 않은 경우.

👉 null과 undifined는 다름!

4. Array

✍ example

const dayOfWeek=['mon', 'tue', 'wed', 'thu', 'fri', 'sat'] //[ ] 안에 값을 넣고 , 로 구분
dayOfWeek.push('sun') // 배열에 값 추가
dayOfWeek[1] // 'tue'
  • 배열은 인덱스로 접근. 배열이름[]을 적고 [] 안에 접근하고 싶은 인덱스 번호를 적으면 됨.
    👉 단, 배열에서 인덱스는 제로베이스임을 기억!

  • 배열이름.push( ) 를 이용하면 ()안에 적은 값을 배열에 추가 가능

5. object

✍ example

const player={ 
  name: "chaerim",
  points: 10,
  height: 200,
  dead: false,
};
player.healthy=true;   // 객체에 변수 추가 
  • 객체는 객체이름={} 을 이용해서 생성.
  • 객체의 변수는 . 을 이용하여 접근.
  • 객체 내부에서 값을 변수에 대입할 때에는 =이 아닌 : 을 사용.
  • 객체 내부에서 문장을 구분할 때에는 ; 이 아닌 , 을 사용.
  • 객체 외부에서 객체에 어떤 변수를 추가하고 싶다면 객체이름.변수이름=값 을 이용해서 추가가 가능.

👉 const로 객체를 선언해도 내부에 어떤 것을 수정하는 것은 상관이 없음. 객체 자체는 동일. const로 선언한 뒤, 객체 전체의 값을 바꾸려고 한다면 에러가 발생!!

✔ 마치며

다음에는 브라우저에서 Javascript가 어떻게 동작하는지에 대해 공부하고 작성해보겠습니다. 😊

0개의 댓글