TIL009_210329

keepcalm·2021년 3월 29일
0

TIL

목록 보기
9/33
post-thumbnail

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

0개의 댓글