TIL
👍🏼 감상
일주일 지난 건데 거의 기억이 안 나는 충격적인 상황 발생... 복습만이 살 길이다
📙 열품타 12hour
👍🏼
👎🏼 -
🚀 목표
- 노마드 코더 React 복습 (-3/27)
- Udemy에서 Javascript 강좌 수강하기 (222/682)
- 매일 커밋 연속 30일 달성하기 (9/30, 3.29 완료)
- 3.24 발견 노션으로 옮기기
- 내일배움카드 신청
- Jump to Python 완료
- CSS 파트 완료, 위키로 복습해보기
- 1일차 복습
[링크 목록]
The Web Developer Bootcamp 2021
Jump to Python WikiDocs
C프로그래밍 입문 by나도코딩
📣 The Web Developer Bootcamp 2021: 15.153-18.189
1+"h1" //"1h1"
-> 둘 다 문자열로 인식
Q1
const animal = "hippopo";
animal[7] //"t"
const city ='Kyoto';
const counttry ='Japan';
const combo =city+country; //"KyotoJapan"
let year = "1998";
year + 1; //❗️ 19981
String Methods
properties -> Methods
Syntax
thing.method()
thing.method(arg)
thing.length -> accessing property
thing.lenghth() -> executing a method
let msg = "keep calm"
msg.toUpperCase() //"KEEP CALM"
msg //keep calm
-> made a new copy
let angryMsg = msg.toUpperCase()
angrMsg //"KEEP CALM"
-> capture the value
trim() : 시작과 끝의 공백을 제거, user data 관리할 때 유용
" hello ".trim().toUpperCase() //"HELLO"
✅ String Methods Practice(Done)
indexOf
let tvShow = 'catdog';
tvShow.indexOf('cat'); //0
tvShow.indexOf('dag'); //3
tvShow.indexOf('z'); //-1(not found)
Slice
Syntax : str.slice(beginIndex[,endIndex]) //endIndex is optional
let str = 'supercomputer'
str.slice(0,5); //'super' //new copy
str.slice(5); //'computer' //new copy
let msg = 'haha that is so funny!'
msg.slice(5,9) //'that'
msg.slice(5,10) //'that '
msg.slice(-5) //'unny!'
replace
let annoyingLaugh = 'teehee so funny! teehee!';
annoyLaugh.replace('teehee', 'haha')
// 'haha so funny! teehee!'
// Notice that it only replaces the first instance
repeat
"lol".repeat(3) //lollollol
✅ More String Methods Practice(Done)
const word = 'skateboard';
let facialHair = word.slice(5).replace('o','e'); //'beard'
Template Literals
`I counted ${3+4} sheep` // "I counted 7 sheep"
⭐️ Super useful, newer sytax
Use back-tick
back-tick ` -> indicate valid string "
single quote '
`hello ${1+2+9}` //"hello 12"
'hello ${1+2+9}' //"hello ${1+2+9}"
`You bought ${qty} ${product.toUpperCase()}. Total is: $${price*qty}`
Null & Undefined
null : intentional absence of any value. must be assigned
undefined: variables that do not have an assigned value are undefined, i don't know
math object
contains properties and methods for mathematical constants and functions
Math.PI //3.14159265
Math.round(4.9) //5 //Rounding a number
Math.abs(-456) //456 //Absolute value
Math.pow(2,3) //8 //Raises 2 to the 3rd power=2**3
Math.floor(3.999) //3 //Removes decimal
Math //object 볼 수 있음
Math.ceil(34.1) //35 //Round up
Random numbers
random decimal between 0 and 1 (non-inclusive)
Math.random(); //0.328923749
Random integer
const step1 =Math.random();
const step2 =step1*10
const step3 =Math.floor(step2);
const step4 =step + 1;
Math.floor(Math.random()*10)+1; //1 to 10
Math.floor(Math.random()*5)+1; //1 to 5
Math.floor(Math.random()*3)+20; //20 to 22
Boolean Logic
making decisions in javascript
differend branching path depending on input
Comparison
> < >= <= == != === (strict equality) !==
Unicode로 string도 비교 가능
'@' < 'A'
Equals
== double equal
equality of value, not equality of type
coerces both value to the same type
=== triple equal
checks for equality of value and type
1 != '1' //false
1 !== '1' //true
console, alert, prompt
console.log() //prints arguments to the console.
alert. log. warning. error. prompt
let userInput = prompt("please enter a number")
userInput //"2343"
parseInt(userInput) //2343 //숫자로 변함
conditional statements
const age = prompt('Enter a age');
if (age<5) {console.log("You are a baby");
} else if (age<10) {console.log("You are a child");
} else if (age<65) {console.log("You are an adult");
} else {console.log ("You are a senior.");
}
const day = prompt('Enter a day').toLowerCase();
if (day==='monday') {console.log("You are a baby");
} else if (day==='saturday') {console.log("You are a child");
} else if (day==='friday') {console.log("You are an adult");
} else {console.log ("You are a senior.");
}
Nesting
//password must be 6+characters
//password cannot include space
if (password.length >=6 ) {
if (password.indexOf(' ') === -1 {
console.log ("Valid password")
} else
console.log ("Password cannot contain spaces")
}
} else {
console.log("password to short")
}
Truthy and Falsy values
falsy value:
false
0
""
null
undefined
NaN
if(userinput) {console.log("TRUTHY")} else {console.log("FALSY")}
userinput이 존재하는 지 보는 것
Logical Operators - AND
AND &&
if (password.length >=6 && password.indexOf(' ')===-1) { console.log("Valid password")} else { console.log("incorrect")}
OR ||
``
1 !== 1 || 10 === 10 //true
10/2 === 5 || null //true
0 || undefined //false
if ((age >= 0 && age < 5) || age >=65) {
console.log("free");
} else {console.log("$10")}
``
NOT !
``
!null //true
!(3<=4) //false
let firstName = prompt("enter your first name");
if (!firstName) {
firstName = prompt("try again"); }
const age = 45;
if (!(age >= 0 && age < 5) || age >=65)) {
console.log("$10")}
``
shoehorn : 좁은 공간에 밀어넣다
tab = 스페이스바 4
Switch
not commonly used, least useful and least important
switch (day) { case 1: console.log("monday"); case 2: console.log("tuesday"); }
day=1이면 case 1 뿐만 아니라 case 2 결과값도 나온다
왜냐하면 switch는 맞으면 break만날 때까지 코드 뒤의 것들도 실행
switch (day) { case 1: console.log("monday"); break; case 2: console.log("tuesday"); break; case 6: case 7: console.log("weekend"); break; defalt: console.log("IDK"); }
이렇게 하면 되긴 함
Javascript Arrays
Array
data structure
Orederd collections of values
let stuff = [true, 68, 'cat', null];
let students = [];
stuff.length //4
stuff[0] //true
stuff[3][0] //'c'
stuff[3] = 'dog' //'dog'로 바뀜, entire element 바꾸기 가능
stuff[10] = 'red'
stuff //(11) [true, 68, 'cat', null, empty*6, 'red']
array Methods
Push : add to end //thing.push('oliver');
Pop : remove from end
Shift : remove from start
Unshift : add to start
movieLine에 적용 가능, 대기줄, VIP 오면 unshift로
Concat, indexOf, includes & reverse, Slice & Splice
let cats = ['blue', 'kitty']
let dogs = ['rusty', 'wyatt']
let party = cats.concat(dogs) //(4) ["blue", "kitty", "rusty", "wyatt"]
cats.includes('blue') //true
party.indexOf('kitty') //1 //첫번째만 찾는다
party.reverse() //["wyatt", "rusty", "kitty", "blue"]
party.slice(1) //["rusty", "kitty", "blue"]
party.slice(2,4) //["kitty", "blue"]
party.slice(-1) //["blue"]
party.splice(1,1) //["wyatt", "kitty", "blue"]
party.splice(1,0,"bruno") //["wyatt", "bruno", "kitty", "blue"]
sort : -10, 0, 1, 14, 2000, 300, 4
toString, reduce, filter
Reference Types & Equality testing
array에서 자바스크립트는 content를 보지 않음
[1] === [1] //false 왜냐면 둘이 다른 메모리임, 새로 만든 것
let numsCopy = nums; //이 둘은 같은 것
Multi Dimentianal Arrays
store arrays inside other arrays
const gameBoard=[['X','O','X'], ['O',null,'X'],['O','O''X']]
gameBoard[1][1] //null
gameBoard[1][1] = 'O' //가능...
Javascript Object Literals
Objects
objects are collections of properties.
properties are a key-value pair.
not an order, not a piority
Object = fitBitData
Properties, pairs of informaiton = totalSteps: 308727, totalMiles=211.7, avgCalorieBurn=5755, workoutsThisWeek='5 of 7', avgGoodSleep='2:13'
key : totalSteps
value : 308727
Syntax:
person["lastName"] //Jagger
person.lastName //Jagger
person.['last'+'Name'] //Jagger //{} 안에 먼저 실행됨
All keys are converted to strings. *Except for Symbols
const years = {1999: 'Good', 2020: 'Bad'}
years["1999] //"Good"
years[1999] //"Good" //자동으로 문자열로 변환되므로 //boolean도
✅ Object Access Exercies (좀 헤맸음)
`const restaurant = { name: 'Ichiran Ramen', address:${Math.floor(Math.random() * 100) + 1} Johnson Ave`,
city: 'Brooklyn',
state: 'NY',
zipcode: '11206',
};
//YOUR CODE GOES DOWN HERE:
let fullAddress = restaurant.address+" "+restaurant.city+" "+restaurant.state+" "+restaurant.zipcode;
let fullAddress = ${restaurant.address} ${restaurant.city} ${restaurant.state} ${restaurant.zipcode};
``
array처럼 content의 값을 바꿀 수 있다!
midterms.thomas = 79; //바뀜
midterms.thomas = C+; //바뀜
midterms['thomas'] = A; //바뀜
midterms.ezra = 'B+'; //추가됨
Nesting Arrays & Objects
ordered data : array
unordered data : object
const comments =[
{username: 'Tammy', text: 'lololol'. votes: 9},
{username: 'FishBoi', text: 'glub glub'. votes: 123}
]
comments[1].text //"glub glub"
📣 Jump to Python: 02.2-
자료형
문자열
포맷 코드와 숫자 사용하기
"%10ㄴ" % "hi" //' hi'
"%-10sjane." % 'hi' //'hi jane.'
%0.4f % 3.24345 //'3.2434'
%10.4 % 3.24345 //' 3.2434'
number = 10
day = "three"
"I ate {0} apples. so I was sick for {1} days.".format(number, day)
//'I ate 10 apples. so I was sick for three days.'
"I ate {number} apples. so I was sick for {day} days.".format(number=10, day=3)
정렬
🍊 복습: TIL: 001
function, variable, class, div, span, flexbox, display block, background color, return, argument, constants, let, array, object에 대한 개념 -> 이제 어느 정도 알게 됐다!
리액트는 자바스크립트 기반
리액트 기반 만들기
- 터미널 보면 됨
npx create-react-app music_app_2021
cd music_app_2021
npm start
README.md 생성
github에 업로드하기
- github 보면 됨
git init
package.json 의 name으로 git repository 생성 (달라도 되긴 하지만 헷갈림)
git remote add origin https://github.com/jiyoondev/music_app_2021.git
git remote add origin {깃허브 repository 주소}
git add . //add everything
git branch -M main
git commit -m "summary"
git push -u origin main
