앞으로 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 기술을 더 가다듬어서 깊게 배우고 싶다면 프레임워크로 넘어가면 된다.
즉, 프레임워크는 내가 하는 일을 도와주는 도우미라고 할 수 있다.
브라우저에서는 html파일을 열고 html파일이 css파일과 Javascript파일을 가져온다.
콘솔에서 Javascript를 확인할 수 있는데 이 때 사용하는 것이 console.log()
. 괄호 안에 있는 값이 콘솔 창에 출력된다.
Javascript에서는 변수를 선언하기 위해 const, let, var를 사용한다.
변수는 값을 저장하거나 유지하는 역할을 한다.
✍ example
const age=23; // 값 변경 불가
let myName='chaerim'; // 값 업데이트 가능
var height=160; // 값 업데이트 가능
const
는 상수를 의미. 즉 const로 변수가 생성되면 바뀌지 않는 값이라는 것이다. let
으로 변수가 생성되면 업데이트가 가능. var
로 생성해도 변수의 업데이트가 가능. 그러나 언어를 통한 보호가 불가능. 👉 따라서 !! Javascript를 이용할 때에는 const를 디폴트로 사용하고 업데이트가 필요한 변수만 let을 이용. 변수를 선언할 때에는 항상 const를 사용하되, 가끔 let을 사용하고 절대 var를 사용하지 않음을 기억!
✍ example
const myName=null; // null
let something; // undefined
null
은 아무것도 없는 것으로 변수를 채운 것. 변수 안에 아무 값이 없다는 것을 확실하게 하기 위해 사용.undefined
는 변수를 만들고 값을 주지 않은 경우. 👉 null과 undifined는 다름!
✍ example
const dayOfWeek=['mon', 'tue', 'wed', 'thu', 'fri', 'sat'] //[ ] 안에 값을 넣고 , 로 구분
dayOfWeek.push('sun') // 배열에 값 추가
dayOfWeek[1] // 'tue'
배열은 인덱스로 접근. 배열이름[]
을 적고 [] 안에 접근하고 싶은 인덱스 번호를 적으면 됨.
👉 단, 배열에서 인덱스는 제로베이스임을 기억!
배열이름.push( )
를 이용하면 ()안에 적은 값을 배열에 추가 가능
✍ example
const player={
name: "chaerim",
points: 10,
height: 200,
dead: false,
};
player.healthy=true; // 객체에 변수 추가
객체이름={}
을 이용해서 생성..
을 이용하여 접근. :
을 사용.,
을 사용.객체이름.변수이름=값
을 이용해서 추가가 가능. 👉 const로 객체를 선언해도 내부에 어떤 것을 수정하는 것은 상관이 없음. 객체 자체는 동일. const로 선언한 뒤, 객체 전체의 값을 바꾸려고 한다면 에러가 발생!!
다음에는 브라우저에서 Javascript가 어떻게 동작하는지에 대해 공부하고 작성해보겠습니다. 😊