코딩응애의 개발블로그

노마드 코더 - 바닐라 JS로 크롬 앱 만들기(#1 ~ #2.4) 본문

JavaScript

노마드 코더 - 바닐라 JS로 크롬 앱 만들기(#1 ~ #2.4)

이너멜 2022. 1. 25. 16:37

자바스크립트 실력을 늘리기 위해서는 무엇을 해야 할까요? 에 대한 많은 설명들이 있지만 하나의 공통점이 있었는데

바로 프로젝트를 간단한거라도 좋으니 만들어 보라는 말이었다. 

나도 이 말을 수도 없이 많이 들었었지만 대체 그래서 뭘 만들라는 건지 검색해보면 다 똑같은 소리만 하고 끌리는 게

없어서 고민하던 와중에 무료강의 노 마드 코더 바닐라 JS로 크롬 앱 만들기라는 강의를 알게 돼서 강의 들으면서 몰랐던 점 새롭게 알게 된 점들을 정리할 것이다. 

프로젝트를 뭘 만들어야 할까는 아직까지 고민되지만 강의 보고 나면 뭔가 얻게되는게 있지 않을까? 

 

터미널(나는 git bash를 사용하고 있다)에서 mkdir 명령어로 폴더를 만든 후에 code 방금만든 폴더명 을 입력하면 

vscode로 바로 연결해서 새 창이 열린다. 

#2.0 Your First JS Project

그냥 CSS 파일과 JS 파일에 코드를 쓰고 브라우저에서 열려고 해도 원하는 결과가 나오지 않는다. 이때 필요한 것은 

바로 HTML이다. 브라우저는 HTML을 열고 이 HTML은 CSS와 JS를 가져온다. CSS와 JS 파일을 브라우저에서 여는 것이 아닌 HTML 파일을 브라우저에서 여는것이다. 이렇게 하기 위해서는

<link rel="stylesheet" href="style.css">
.
.
.
<body>
    <script src="app.js"></script>
</body>

CSS와 JS 파일을 연결을 해주어야 한다. 

#2.2 Variables

변수 이름을 정할때 단어에 공백이 필요하다면 다음 단어의 첫문자를 대문자로 쓴다 

ex) myNameIsAnt 이렇게 중간중간 대문자로 구분 이런것을 camel case 라고 한다고 한다.

#2.3 const and let

const 와 let 차이점 이거는 내가 전에도 한번 정리한적이 있다.

https://broadway.tistory.com/entry/%EB%B0%B1%EC%A4%80-%EB%8B%A8%EA%B3%84%EB%B3%84%EB%A1%9C-%ED%92%80%EC%96%B4%EB%B3%B4%EA%B8%B0-%EC%9E%85%EC%B6%9C%EB%A0%A5%EA%B3%BC-%EC%82%AC%EC%B9%99%EC%97%B0%EC%82%B0

 

백준 단계별로 풀어보기 (입출력과 사칙연산)

무언가 출력을 할때 console.log를 이용한다. 자바스크립트에서도 이스케이프 시퀀스가 있다 몇가지 예를 들면 \n // 줄바꿈 \' // 작은 따옴표 \" // 큰 따옴표 \\ // \문자 백준 1000번 처음으로 입력을

broadway.tistory.com

var은 절대 쓰지 말라고 했는데 이유가 const와 let을 쓰면 코드를 보기 앞서 const로 쓴거는 값이 안바뀌고 let으로 쓴건 값이 바뀔 수 도 있겠구나 라는것을 인지를 할 수 있지만 그냥 var로 통일해 버리면 앞서 쓴 내용을 알 수 가없기 때문이다.

#2.4 Booleans

null -> 아무것도 없다. 값이 주어졌지만 그 값은 '비어있음' 인것이다. 절대 자연적으로 발생하지 않는다 자바스크립트에게 여기엔 값이 없다는것을 알려줄때 null을 사용하는것이다

undefined -> 변수를 만들었지만 값이 주어지지 않은 상태이다.

const amIFat = null;
console.log(amIFat); // null 출력
let some;
console.log(some); // undefined가 출력이 된다

null 과 undefined 둘다 하나의 타입이다. 

저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

노마드 코더 - 바닐라 JS로 크롬 앱 만들기(#2.11 ~ #2.16)  (0) 2022.02.22
노마드 코더 - 바닐라 JS로 크롬 앱 만들기(#2.5 ~ #2.10)  (0) 2022.02.09
생활코딩 WEB2-JavaScript (객체 ~ 수업을 마치며) (for in문)  (0) 2021.12.24
생활코딩 WEB2-JavaScript ( 리팩토링(refactoring) ~ 함수의 활용)  (0) 2021.12.21
생활코딩 WEB2-JavaScript (데이터타입 - 문자열과 숫자 ~ 조건문의 활용)  (0) 2021.12.20
'JavaScript' Related Articles more
Comments