Peep

2020년과 이후 JavaScript의 동향 - JavaScript(ECMAScript)

• 여전히 가장 인기있는 언어 1위를 차지 - JetBrains, StackOverflow
• 등장이후 2020년까지 3번의 큰 변화를 겪었다고 말한다.
  • http://10.1.123.63:7080/users/sign_in
• 다양한 의견을 잘 정리해주셔서 새로운 시각을 많이 접할 수 있었다. 
  • TC39 기술위원회, Javascript Engine, Javascript의 종말, 모듈, ECMAScript 등..
• ECMAScript2020-2021의 주요 스펙을 간단히 소개해주는데, 흥미로운것들이 많다.
  • 다음 아티클들은 ECMAScript2020 명세를 확인하는 것으로 해야겠다.
  • pawelgrzybek.com/whats-new-in-ecmascript-2020/
  • 2ality.com/2019/12/ecmascript-2020.html
  • h3manth.com/ES2020/

공부한다고 강의보고 예제만 따라했던 Typescript는 이제 필수가되었다.

토이프로젝트에 적용해야하는 것들이 많은데 그중 하나가 되겠지.

배워야하는건 끝이없구나 🔥🔥🔥🔥🔥

2020년과 이후 JavaScript의 동향 - JavaScript(ECMAScript) 

https://d2.naver.com/helloworld/4268738

프론트에서 안전하게 로그인 처리하기

보안에 위협이 되는 문제

1. XSS (Cross Site Scriptiong)

공격자가 <input>태그나 url등에 Javascript를 삽입해 실행되도록 공격한다.

악성데이터를 실행하거나 사이트의 전역 변수를 이용해 API 요청을 하여 사이트의 로직인 척 행동하여 악의적인 행동을 한다.

2. CSRF (Cross Site Request Forgery)

서버에서 클라이언트 도메인을 통제하고 있지 않으면 공격자가 다른 사이트에서 API 요청을 할 수 있다.

이때 공격자가 사용자만이 가능한 행위(수정, 삭제, 등록 등)들을 할 수 있다.

(이러한 행위로인해 최악의 상황 -> 비밀번호, 송금 등에 접근)

원본 글 요약

• JWT(JSON Web Token)로 유저 인증
• Refresh Token은 httpOnly
• Access Token은 JSON payload
• Access Token은 지역변수로 저장
• 새로고침이나 브라우저 종료 후 재접속(mount) 처리, 각각의 API 이용 
  • 최초 접근 API
  • 재 접근 API
• 재 접근 시 Refresh Token과 Access Token을 새로 발급 받을 수 있도록 한다.
• CSRF, XSS 공격에서 다소 안전하나 XSS는 어떤식으로든 취약점이 생길 수 있어 서버에서도 같이 처리 필요

Access Token, Refresh Token이란?

• OAuth(Open Auth)에서 나온 개념이며 두개를 묶어 사용자 토큰이라고 부른다.
• Access Token은 보안상 짧은 유효기간, Refresh Token은 긴 유효기간을 가지고 있다.
• Access Token이 만료되면 Refresh Token을 통해 Access Token을 갱신한다.
• 왜 두개가 필요한지에 대해서는 Stack overflow 글 참고 하면 되고 참고 링크에서도 확인가능하다.
• 보안상 두가지를 사용하는 것으로 이해하면된다.

-참고 https://dreamaz.tistory.com/22

보안관련 작업을 해본적도 관심도 없었던 나에게 보안에 얕게나마 관심을 가지게해주는 좋은 글이었다.

원본 글

https://velog.io/@yaytomato/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0

더보기 버튼을 생성하여 버튼 클릭 시에 ajax 통신을 해보겠습니다.

더보기 버튼을 생성해줍니다.

App.vue

그 다음 더보기 이벤트에 실행될 함수를 만들어주고 ajax 통신을 위해 axios를 install 해줍니다.

npm install axios

install이 끝나면 가져올 데이터가 담긴 json 파일을 만들어 줍니다.

ajax를 통해 방금 만든 json 내용을 가져와보도록 하겠습니다.

App.vue

axios를 사용해 이벤트를 생성한 후에 버튼에 바인딩 해줍니다.

axios에서 get가져온다 moreData.json을 then끝나면 moreData가 들어오고 그것을

this.postData 배열리스트에 push해준다. 

아까 unshift는 상단에 리스트를 추가해주고 push는 하단에 리스트를 추가해줍니다.

이렇게 하면 더보기 버튼 클릭 시 ajax 통신을 합니다. (get 방식 = 공개)

<slot>에 대해 배워보겠습니다.

저는 강의를 들으면서 slot에 대해 처음알게되었습니다.

slots는 하위컴포넌트에게 HTML, Component를 전달 할 수 있다고합니다.

그리고 <slot>을 사용하는 이유는 props 정의안하고 parent에서 child로 데이터를 간단히 표현할 때 사용한다고 합니다.

컴포넌트를 사용할때 <Component/>로 사용하고는 했는데, 가끔 강의를 보면 <Component></Component>로 사용하고는 하는 사람들을 봤습니다.

<slot>은 여닫는 함수가 모두 존재할 때에만 사용할 수 있다고 합니다.

문법

child

<div>
    <slot></slot>
</div>

parent

<child>
    <p>여기에 HTML을 넣으면 slot 안에 표현된다</p>
</child>

<slot>을 vue파일에 추가합니다.

App.vue

App.vue 파일에서 <Editor></Editor> 태그 사이에 타이틀을 삽입해보겠습니다.

Editor.vue

<slot>을 사용해줍니다.

아래와 같이 확인이 됩니다.

정상적으로 된거 맞아? 하고 궁금해서 렌더링된 태그를 봤습니다.

Editor.vue 컴포넌트 영역에 포함된 것 같은 모습입니다.

<slot>에 data도 {{ }}로 삽입할 수 있습니다.

이렇게 하면 동적인 데이터도 넣을 수 있을 듯 싶습니다.