디벨로퍼 HYMN

• 2022 CSS Layout MasterClass
• 2.1Life Before Flexbox ~ 2.4 Rows and Columns

• React JS 마스터클래스
• 3.6Theme ~ 3.7 Recap
• 5.0 Setup

• 타입스크립트에서는 JS 에처럼styles.css를 import 하는 대신에 styled.d.ts 를 props 로 타입을 정해준 다음에 속성을 전달해준다
  • @types/react-router-dom 처럼 리액트에서 다운받아지지 않는 라이브러리는 @types 를 붙여서 npm i 하면 된다.
  • 버전 붙여서 다운받을 때 5.3.0에서 맨 뒤에 0일 때는 붙여서 다운로드 받는거 아니다
• flexbox 세계에는 2가지가 있다. (row, column) : 기본값은 row

→ main axis 위의 flex childern 위치를 변경하려면 justify-comtent 를 사용하면 된다.

→ cross axis 위의 flex item 위치를 변경하려면 align-item 을 사용하면 된다.

• display:flex; flexbox이전에는 inline-block 이 있어서 너비와 높이가 있는 객체가 옆으로 나란히 있을 수 있었지만 요상한 빈 공간이 있었다. 그러나 바로 객체에 적용하는 것이 아니라 그 객체(요소)의 바로 붙어있는 부모 요소에 적용하는 것이다.

타입스크립트에서 styled component 를 이용한 CSS 스타일링 하는 법

• interface 라는 object shape 를 변수 타입을 설명해줘야 props 로 전달이 가능하다.

• interface 를 선언해준 다음에 왜 styled component 를 선언해주는 형식을 또 만들어주고, 왜 Circle.tsx 를 만들어서 App.tsx 에 전달되는지에 대한 원리가 이해되지 않았다
• 왜 Circle.tsx 에는 interface 가 있는데, App.tsx 에는 interface 가 없는걸까??
• → 이미 완성되어있는 interface 를 갖다 쓰는거라서?

• 무언가 막힐 때는 노마드 댓글과 슬랙을 보면서 진행하는 습관을 기르자

console에서 오직 JS로 명령을 내려 할 수 있는 일은?

콘솔 > document.title 

       > "Momentum"  === 내가 html에 저장했던 이름 그대로 나옴

바꾸기 > document.title = "Hi"  ===> 타이틀을 바꿀수도 있다.

 (1) value 호출

 (2) change the value (document.kkk = 'lll')

(결론) JS에서 HTML을 호출 할 수 있을 뿐만 아니라, 바꾸는 것도 가능하다.

(Recub) function 을 호출하는 법

오늘의 퀘스트

very nice 한 나이 계산기 만들기.! (prompt()_를 사용하여)

*prompt는 사용자에게 메시지를 보여주고 값을 넣으라고 말한다.

const age = prompt("How old are you?"); //massame는 string, 이 상태에서 값을 기다린다. 잘 안씀 css를 적용시킬수도 없음. 

//console.log(age); 대신에
console.log(typeof "15" typeof parseInt("15")); //이렇게 작성해야한다. string이 기본값.

//JaveScript를 일시정지시킴,브라우저로 할 수 있는 가장 직접적인 방법.cancle 을 누르면 null값을 리턴.

//console에 출력된 값은, num type 이 아니라  str type 이다. 

type을 변경해보자 str에서 num 으로,,
parseInt 을 사용한다..

const age = parseInt(prompt("How old are you?"));


if (isNaN(age)) {
    console.log("Pleas write a number");
} else {
    console.log("Thank you for writing your age.");
}

(Recub) function 을 호출하는 법

오늘의 퀘스트

very nice 한 나이 계산기 만들기.! (prompt()_를 사용하여)

*prompt는 사용자에게 메시지를 보여주고 값을 넣으라고 말한다.

const age = prompt("How old are you?"); //massame는 string, 이 상태에서 값을 기다린다. 잘 안씀 css를 적용시킬수도 없음. 

//console.log(age); 대신에
console.log(typeof "15" typeof parseInt("15")); //이렇게 작성해야한다. string이 기본값.

//JaveScript를 일시정지시킴,브라우저로 할 수 있는 가장 직접적인 방법.cancle 을 누르면 null값을 리턴.

//console에 출력된 값은, num type 이 아니라  str type 이다. 

type을 변경해보자 str에서 num 으로,,
parseInt 을 사용한다..

const age = parseInt(prompt("How old are you?"));


if (isNaN(age)) {
    console.log("Pleas write a number");
} else {
    console.log("Thank you for writing your age.");
}

(Recub) function 을 호출하는 법

오늘의 퀘스트

very nice 한 나이 계산기 만들기.! (prompt()_를 사용하여)

*prompt는 사용자에게 메시지를 보여주고 값을 넣으라고 말한다.

const age = prompt("How old are you?"); //massame는 string, 이 상태에서 값을 기다린다. 잘 안씀 css를 적용시킬수도 없음. 

//console.log(age); 대신에
console.log(typeof "15" typeof parseInt("15")); //이렇게 작성해야한다. string이 기본값.

//JaveScript를 일시정지시킴,브라우저로 할 수 있는 가장 직접적인 방법.cancle 을 누르면 null값을 리턴.

//console에 출력된 값은, num type 이 아니라  str type 이다. 

type을 변경해보자 str에서 num 으로,,
parseInt 을 사용한다..

const age = parseInt(prompt("How old are you?"));


if (isNaN(age)) {
    console.log("Pleas write a number");
} else {
    console.log("Thank you for writing your age.");
}

만약 내가 망고주스를 만들고 싶은데,

주스 기계에서 망고주스가 안 꺼내진다면?(undefined)

집에 믹서가 있다.

나는 주스를 만들고 싶은 상황이다.

만들어진 주스를 꺼내야 한다.

console.log()를 함수 안에서 쓰면, 안꺼내지는 것과 같은 상황이다

그래서 console.log 대신에 return 을 사용해서, variable에 function을 할당해서 꺼내주는 거다.

variavle은 function의 return value를 가지게 된다. 

calculator.plus가 5를 return 하면 plusResult는 5가 된다. 

const calculator = {
    plus: function (a,b) {
      return a+b;
    },
    minus: function (a,b) {
      return a-b;
    },
    divide: function (a,b) {
      return a/b;
    },
    powerof: function (a,b) {
      return a**b;
    },
  };

  const plusResult = calculator.plus(2,3);
  const minusResult = calculator.minus(plusResult,10);
  const timesResult = calculator.times(10,minusResult);
  const divideResult = calculator.divide(timesResult,plusResult);
  const powerResult = calculator.powerof(divideResult,minusResult);

콘솔에서는 아무일도 벌어지지 않지만 

>에 입력을 하면 값이 출력된다. 

짜잔..

마..마지막으로 니꼬가 한 번 더 복습하쟤..

plus function  은 a와 b라는 변수를 받고있다. 

const plusResult = calculator.plus(2,3);

a = 2, b = 3 이 대입된다.

이 funtion은 a+b, 즉 2+3을 return한다. 

위의 fuction을 호출하는 코드가 그 funtion의 반환 값이 된다. 

즉, return값은 5가 된다.

function내부에서 console.log()하는 것과 큰 차이가 있다.

function의 외부에서 값을 얻은 뒤에, 그 값으로 내가 원하는 모든 것을 할 수 있다.

<<결론>>

콘솔에서 값을 도출할 수 있게 된다 

위의 코드들은 상호의존적이다. 

const calculator = {
    plus: function (a,b) {
      return a+b;
    },
    minus: function (a,b) {
      return a-b;
    },
    divide: function (a,b) {
      return a/b;
    },
    powerof: function (a,b) {
      return a**b;
    },
  };

  const plusResult = calculator.plus(2,3);

  console.log(plusResult);

(1) console.log() : 콘솔에 () 안의 매개변수를 출력하라는 의미.

(2) minus = function 일 때 syntaxError  가 발생한 이유 는 :가 들어가야 할 자리에 = 가 들어가서임.

그러니까. 꼭 {} 안의 함수는 문법이 다르다는 것을 인지하고 있어야 이런 오류가 안나. 

SyntaxError: Invalid shorthand property initializer

object를 추가,업데이트 _2

const player = {
    name: "aeong",
    points: 10,
    fat: true,
};

인 상황에서,  

player에  15점을 추가해서 업데이트 하고 싶을 때 

->

console.log(player);
player.points = player.points + 15;
console.log(player.points);
player.points = player.points + 15;

Q : 우리가 넘겨주는 어떠한 이름이든, Hello를 해주는 function을 작성해보자

(1) function이 없는 세상 버전

= console.log("Hello my name is Nico";

console.log("Hello my name is Nico";
console.log("Hello my name is Nico";
console.log("Hello my name is Nico";
console.log("Hello my name is Nico";
console.log("Hello my name is Nico";

이름 자리에 이름만 바뀌고 오지게 중복되는 코드를 작성하게 된다. 

(2) function 이 있는 세상

*function은 어떤 코들를 캡슐화해서, 실행을 여러 번 할 수 있게 해준다.

*규칙 .()를 사용해야 한다. 실행하게 될 코드블록이 필요하다. {} 안에 작성하는 것이 . 

 sayHello 를 실행할 때마다 실행되는 거다.

function sayHello(){

    console.log("Hello!");           // array.push (), alert()

}

() 이 괄호표시가 펑션의  플레이버튼이다. 

sayHello();

sayHello();

sayHello();

sayHello();

이렇게 작성하면, 

Hello!

Hello!

Hello!

Hello!

이렇게 출력됨. 

"Hello my name is C" 를 출력하려면??
*argument, : function 을 실행하는 동안 어떤 정보를 function  에게 보낼 수 있는 방법

function sayHello(nameofPerson,age) {//2개의  argyment를 받고있다.
    console.log("Hello my name is"+nameofPerson+" and I',"+age)
}


sayHello("nico",10);
sayHello(" dag",23);
sayHello("lynn",21);