어느 카테고리에 넣어야 하는지 모르는.... react 전 사전...지식..?

오전 Spring Boot에 대해 설명과 설치 및 롬복까지 배웠다. 

솔직히 복습 안하고 잘려고 했는데 안하면 또 나만 힘들겠지.. 싶어서 침대에 누워있다가 급 일어나서 정리한다. 

 

 

<!--

    템플릿 리터럴(Template literal ) 새로운 문자열 표기법

    1> backtick(`)

    2> 변수 처리는 ${변수}

-->

템플릿 리터럴(javascript)

javascript에서 backtick(`) 문자를 사용하여 문자열을 표현한것을 템플릿 리터럴이라고 한다.

이렇게 사용하면, 두가지 기능이 있는데 (1)줄바꿈을 쉽게 할수 있고, (2)문자열 내부에 표현식을 포함할 수 있게 된다.

 

일반 문자열 사용시 아래와 같이 표현되어야 하는 것을, 

일반 문자열 사용 예시

 

템플릿 리터럴을 사용하면 아래와 같이 간단하게 표현할 수 있다.

템플릿 리터럴 사용 예시

 

(1) 줄바꿈 기호(\n)을 쓰지 않고 코드에서 그냥 줄을 바꾼것

(2) (a + b)라는 표현식을 쓰기 위해 따옴표를 닫고 + 기호로 연결했던 것을 
     문자열 안에 ${a + b}라는 표현으로 그대로 쓸수가 있게 된 것이다. ${2 * a * b }도 마찬가지.

 

* 앞에서도 말했지만 백틱을 작은 따옴표로 착각했다가는 원인을 모른채 헤메다가 멘붕이 오는 상황이 발생할 수 있다....

그래서 실습 예시로 

 let a = 20

        const b = 30

        const str1 = a + '와 ' + b + '의 합은 ' + (a+b)

        console.log(str1)

        //backtick(`) -변수, 수식, 문자열을 같이 쓸 때 사용

        const str2 = `a와 ${b}의 합은 ${a+b}`

        console.log(str2)

 

        const name ='홍길동'

        const age = 20

        const addr = '서울'

        const str3 = `나의 이름은 ${name}이고 나이는 ${age}이고 사는 곳은 ${addr}입니다.`

        console.log(str3)

이렇게 배웠다 

 

02. 연산자.html 

<!--

① React 연산자

=== 같다

!== 다르다

② 삼항 연산자

[형식]

조건 ? true 일 때 : false 일 때

③ && **and가 아님**

[형식]

true && 참일 때 수행하는 결과

④ || **또는이 아님 **

[형식]

( false, null, undefined ) || 거짓일 때 수행하는 결과

 -->

 const a = 25

        const b = true

        const c = false

        const d = undefined

        const result = a>30 ? '참' : '거짓'

        console.log(result)

        const result2 = b &&  '참에 대한 결과입니다'

        console.log(result2)

        const result3 = c ||  '거짓에 대한 결과입니다'

        console.log(result3)

        const result4 = d ||  '값이 존재하지 않습니다'

        console.log(result4)

        const result5 = c === false ? '참' : '거짓' //이런 식으로 쓰는 건 절대 비추천

        console.log(result5)

 

 

3.화살표 변수 

<!--

① 매개변수가 없을 경우

function(){} → () => { ... }

② 매개변수가 한 개인 경우, 소괄호를 생략 가능

function(x){} → (x) => { ... }

③ 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

function(x,y){} → (x, y) => { ... }

-->