다시 강의를 보지 않기 위한 나의 강의 필기노트.
덕분에 강의 진행속도가 꽤 느리지만,
(내 머리가 대신 남겨준다면 좋겠다만 그렇지 않기 때문에)
남기지 않고 듣기만 하면 말 그대로 남는 게 없어.
(강의 자료가 있지만 그거랑 또 다름.
여긴 내가 느낀 거, 새로 알게 된 것, 내가 친 코드. 나의 것들.)
인간이 쓰는 언어와 마찬가지로 프로그래밍 언어도 정해진 문법이 있다.
이 문법에 따라 코딩을 하면 컴퓨터는 이를 해석해 우리가 원하는대로 데이터를 입력받아 처리하고 출력해줄 수 있다.
Node.js 는 우리가 자바스크립트 언어의 문법에 맞게 코딩을 했을 때 컴퓨터가 이를 해석해서 처리할 수 있도록 해주는 일종의 전용번역기라고 생각하면 된다. 이 번역기가 이전에는 웹브라우저에만 있었지만, 우리 컴퓨터에 Node.js만 설치해주면 웹브라우저가 아닌 곳에서도 자바스크립트 코드를 실행하고 그 결과물을 바로 확인할 수 있다.
- let 변수이름 = 값
let name = 'Nayoon Baek'
console.log(name)
name = 'william'
console.log(name)=>Nayoon Baek
william
자바스크립트에서는 변수를 선언하는 const 라는 키워드도 있다.
const는 let과 달리 변수에 값을 재할당할 필요가 없을 때 씀.
해당 변수가 고정된 값을 계속 갖고 있을 때 쓰면 좋다.
- const 변수이름 = 값
const name = 'Nayoon Baek'
console.log(name)
name = 'william'=>TypeError
const는 재할당이 안되기 때문에 내가 잘못된 코딩을 했다고 알려줌.
변수를 선언할 때 var 라는 키워드를 혹시 보신 적이 있나요? let, const가 있기 전에는 실제로 var 를 써서 변수를 선언해야만 했습니다. 하지만 최신 자바스크립트에서는 let과 const를 쓰는 것이 맞습니다. var는 여러 단점들이 있기 때문에 더 이상 사용하지 않아야 해요.
검색하다가 var 본 적 있어.. 이건 뭐야..? 처음보네.. 어려워.. 하고 넘어갔었는데
그런 거 였군. JAVA spring을 주특기로 정한 이 시점에 이걸 듣는 게 맞나 싶었는데
나중되면 더 들을 시간이 없을 것 같고, 프론트도 js로 짜니까 알고 있으면 좋을 것 같아서 듣는 중이다.(아직 좀 회의적..)
파이썬에 비해 VScode는 벌써 좀.. 불편한 것 같아. 파이썬은 진짜 내가 척하면 척! 이런 느낌이었는데 얘는 조금 더 내가 움직여야하는 느낌. 파이썬은 바로바로 자동 저장해줘서 바로 실행하면 됐는데 얘는 매번 저장 누르고 실행. 실행도 그냥 클릭 실행이 아니라 가서 명령어 입력해줘야 나옴. 코드 짤 때도 방향키나 마우스 사용을 최소화하고 싶은데 조금 불편하네. 심지어 티스토리마저... 파이썬 코드는 걍 복사해와도 바로 코드블럭에 넣어주는데 vscode는 안 넣어줌...
조코딩은 시작은 쉬운 걸로를 추천하면서 ruby on rails가 가장 적게 배우고 많은 걸 할 수 있다며 추천하던데 궁금하네. 저번에 채용공고 검색하면서도 의외로 ruby를 구하는 글을 봤던 터라 더 궁금.
근데 Visual Studio... 비주얼 베이직이랑 관련이 있는 건가?
15년 전인가 20년 전인가 땄던 자격증 컴활1급, 정보처리기능사, 정보기기기능사 중에 나는 정보처리기능사 하면서 썼던 것 같은데... 검색해보니 언뜻 컴활1급에도 나오는 것 같아서..?
또 저번에 검색했을 땐 서비스 중단됐다고 본 것 같은데 검색하니 최근 글도 나오네..?
알고보니 발전계획은 더이상 없다는 거였다.
그리고 관련있는 거 맞네. MS사의 것이었구만.
[1-5 데이터타입]
자바스크립트에서는 여러 종류의 데이터 타입들이 존재
이번 챕터에서는 기본 또는 원시형 (primitive) 타입이라고 불리는 number, string, boolean, null, undefined를 알아보자.
1.숫자 (Number)
2.문자열 (String) : 이중 따옴표("")나 작은따옴표('')로 데이터를 감싸야 함.
3.Boolean : 참과 거짓을 나타내는 true / false를 표현하는 데이터
불 방식의(특히 컴퓨터와 전자공학에서 참과 거짓을 나타내는 숫자 1과 0만을 이용하는 방식)
let isMan = true
let isWoman = false
console.log(isMan)
console.log(isWoman)
console.log(true)
console.log(false)=>true
false
true
false
4.null은 텅텅 비어 있는 값
5.undefined은 변수를 선언만 하고 값이 할당되어 있지 않은 것
let name = null
console.log(name)
let age
console.log(age)=>null
undefined
자바스크립트에서는 기본타입 말고 객체형타입도 존재.
[1-6 연산자(1)]
문자열과 숫자를 이어붙이면 숫자를 문자로 인식
console.log('My'+'car')
console.log('1'+2)
console.log(1+2)=>Mycar
12
3
<템플릿 리터럴 (Template literals)>
- 백틱(``) 을 사용하여 문자열 데이터를 표현
const shoesPrice = 200000
console.log('이 신발의 가격은 '+shoesPrice+'원입니다.')
console.log(`이 신발의 가격은 ${shoesPrice}원입니다.`)=>이 신발의 가격은 200000원입니다.
이 신발의 가격은 200000원입니다.
literal : (어구의 뜻이) 문자 그대로의[기본적인/일반적인]
백틱(``)은 정말 코딩하면서 처음 써본 자판키.
sc에서의 템플릿 리터럴 (Template literals)은 파이썬의 f-string과 비슷한 기능인가?
+참고
cons.찍으면 console. 바로 찍히고(cns.도 바로 console.)
console.l( 하면 바로 console.log()가 됨.
ㅋㅋㅋ 조금이라도 덜 치기 위한 연구ㅋㅋㅋ
밑에 목록이 뜨는 걸 툴팁이라고 하나보다.
<산술연산자>
console.log(2+1)
console.log(2-1)
console.log(2*3)
console.log(4/2)
console.log(10%3)
console.log(10**2)=>3
1
6
2
1
100
%:나머지연산
**:거듭제곱
<증감연산자(Increment and Decrement operators)>
자기 자신의 값을 증가시키거나 감소시키는 연산자(++, —)
이 증감연산자를 변수앞에 놓는냐, 변수뒤에 놓느냐에 따라 차이가 있다.
let count = 1
const preCount = ++count
console.log(`count:${count}, preCount:${preCount}`)=>count:2, preCount:2
앞에 ++넣으면
count = count + 1
const preCount = count
의 의미
let count =1
const postCount = count++
console.log(`count:${count}, postCount:${postCount}`)=>count:2, postCount:1
뒤에 ++은
const postcount= count
count = count + 1
의 의미
여기서 count를 let을 쓴 걸 설명하던데(count는 뒤에서 증감되기 때문에 여기서 const쓰면 에러)
나는 오히려 postCount를 왜 굳이 const로 설정한 건지 궁금..
둘 다 사용한 걸 보여주기 위함일까?
보통 증감쓸 때는 반복문이 많을 것 같아서 const가 오히려 불편했어..
<대입연산자 (Assignment operators)>
const shirtsPrice = 100000
const shoesPrice = 80000
let totalPrice = 0
totalPrice += shirtsPrice
console.log(totalPrice)
totalPrice += shoesPrice
console.log(totalPrice)
totalPrice -= shirtsPrice
console.log(totalPrice)=>100000
180000
80000
템플릿 리터럴, 산술연산자, 증감연산자, 대입연산자
쓰고 있던 것들인데 용어는 이제 알았네.
[1-7 연산자(2)]
<비교연산자 (Comparison operators)>
<, >, =, <=, >=
<논리연산자 (Logical operators)>
|| (or), && (and), ! (not)
or는 엔터 위에 | (역슬래시) 2개!
let isOnSale = true
let isDiscountItem = true
console.log(isOnSale && isDiscountItem)
console.log(isOnSale || isDiscountItem)
isOnSale = false
console.log(isOnSale && isDiscountItem)
console.log(isOnSale || isDiscountItem)
isDiscountItem = false
console.log(isOnSale && isDiscountItem)
console.log(isOnSale || isDiscountItem)
console.log(!isOnSale)=>true
true
false
true
false
false
true
간단하게 true = 1, false = 0,
and = *
or = +
정도로 생각하면 맞는 것 같다.
<일치연산자 (Equality operators)>
=== : 엄격한 일치 연산자
console.log(1 ===1)
console.log(1 ===2)
console.log('Javascript'==='Javascript')
console.log('javascript'==='Javascript')=>true
false
true
false
==는 자동적으로 일어나는 일종의 타입변환이 있어서 엄밀한 의미의 코딩을 할 때는 잘 쓰지 않는다. 실제로 좀 많은 문제를 야기할 수 있다. 따라서 앞으로는 ===인 엄밀한 일치연산자만 사용하는 게 좋다.
Q&A)일치연산자는 == 도 있지 않나요? 맞습니다. 자바스크립트에는 두 가지의 일치연산자가 있어요. 우리가 배운 === 는 엄밀한 (strict) 일치연산자여서 비교하는 두 값의 데이터타입과 값 자체가 정확히 일치해야만 true를 리턴합니다. 반면 == 는 비교하는 두 값의 데이터타입이 일치하지 않을 때 해당 값의 데이터타입을 자동으로 변환해주는 자바스크립트만의 특성이 있어요. 이 특성이 자칫 개발자의 실수를 유발할 가능성이 크기 때문에 실무에서는 거의 쓰지 않고 있습니다. 우리도 이번 과정에서는 정확한 프로그래밍을 위해 === 만 쓸거예요!
console.log(1 ==="1")
console.log(1 =="1")=>false
true
자바스크립트와 코딩에서는 데이터 타입이 중요!
const shoesPrice = 200000
const capsPrice = 100000
const totalPrice = shoesPrice + capsPrice
console.log(`총 구입가격은 ${totalPrice*0.8}원입니다.`)=>총 구입가격은 240000원입니다.
강의자료 : https://www.notion.so/bd5a947d2d634d44b7545597579d9672
[스파르타코딩클럽] 자바스크립트 문법 뽀개기
매 주차 강의자료 시작에 PDF파일을 올려두었어요!
www.notion.so
----------------------------
아래는 생활코딩 강의를 추천하는 걸 워낙 많이 봐서 검색하다가 본 글.(정작 생활코딩이 아니라 조코딩.)
아래 영상을 요약하자면
1.웹부터
2.프론트엔드->백엔드 순으로 공부(HTML+CSS->JS->언어->프레임워크)
3.언어는 변수, 조건문 , 반복문, 함수만 공부
4.프레임워크를 활용해서 만들고 싶은 서비스를 만들기
나는 거의 지금 HTML+CSS까지만 한 상태니까..
자바하기 전에 자바스크립트를 짧게 훑는 거 잘하고 있는 거 맞겠지..?
아니어도 언젠간 무언가로 쓰일 거야. 빠른 완강에나 집중하자!
지금 과정이 블록모으기나 조각모음 같은 느낌이다.
지금 당장은 관련없어보이는 조각들을 일단 마구 모으다 보니
공통점, 유사, 차이점들이 보이고 더 잘 이해하게 되는 느낌?
시너지보다 제대로 발휘하려면 단기간에 몰아쳐야(몰입) 좀 더 유기적 연결이 잘 완성되는 느낌이라
항해 99일 동안 얼마나 퀀텀점프한 내가 되어있을지 기대가 된다.
https://www.youtube.com/watch?v=wpUiN5hBnyc