221117_TIL

·2022년 11월 17일
0

자바스크립트가 브라우저에서 할 수 있는 일

  1. 페이지에 새로운 HTML을 추가하거나, 기존 HTML, 혹은 스타일 수정
  2. 마우스 클릭이나 포인터의 움직임, 키보드 키 눌림과 같은 사용자 행동에 반응하기
  3. 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드 및 업로드하기. (Ajax나 Comet 기술 사용)
  4. 쿠키를 가져오거나 설정하기, 사용자에게 질문을 건네거나 Alert 메시지 보여주기
  5. 클라이언트 측에 데이터 저장하기(로컬 스토리지)

자바스크립트가 브라우저에서 할 수 없는 일

브라우저는 보안을 위해 자바스크립트 기능에 제약을 걸어놓음.
- 보안을 위해 만들어진 제약사항.

  1. 웹페이지 내 스크립트는 디스크에 저장된 임의의 파일을 읽거나 쓰고, 복사하거나 실행할 때 제약을 받을 수 있다. 운영체제가 지원하는 기능을 브라우저가 직접 쓰지 못하게 막혀있기 때문.

    파일을 다룰 순 있지만, 접근은 제한되어있다. <input>처럼 특정 태그를 통해 파일을 선택할 때와 같이 특정 상황에서만 파일 접근을 허용.

    그리고 카메라나 마이크 같은 디바이스와 상호작용하려면 사용자의 명시적인 허가가 있어야 한다. (사용자 몰래 정보를 수집할 수 없기 때문)

  2. 브라우저 내 탭과 창은 대개 서로의 정보를 알 수 없다. 그런데 자바스크립트를 사용해 한 창에서 다른 창을 열 때는 예외가 적용됩니다. 하지만 이 경우에도 도메인이나 프로토콜, 포트가 다르다면 페이지에 접근할 수 없다.

이런 제약사항을 '동일 출처 정책(Same Origin Policy)'이라 부릅니다. 이 정책을 피하려면 두 페이지는 데이터 교환에 동의해야 하고, 동의와 관련된 특수한 자바스크립트 코드를 포함하고 있어야 합니다. 자세한 사항은 추후 학습하도록 하겠습니다.

다시 한번 강조하지만, 이런 제약사항은 사용자의 보안을 위해 만들어졌습니다. http://anysite.com에서 받아온 페이지가 http://gmail.com에서 받아온 페이지 상의 정보에 접근해 중요한 개인정보를 훔치는 걸 막기 위함입니다.

MJS

  1. 자바스크립트를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고받을 수 있다. 하지만 다른 사이트나 도메인에서 데이터를 받아오는 것은 불가능하다. (원격 서버에서 명확히 승인을 해준 경우는 제외, HTTP 헤더 등을 이용)

구글링 TIP

Google 검색 엔진에 접속해 'MDN [원하는 용어]'를 입력해 봅시다. parseInt 함수에 대한 정보를 얻고 싶다면 https://google.com/search?q=MDN+parseInt 같이 검색하는 식으로.

!!(논리연산자)

자바스크립트의 논리연산자 중, NOT연산자인 (느낌표)는 입력값을 boolean으로 변환하여 값이 True면 False로, False이면 True로 값을 Return한다.

자바스크립트에서 느낌표 두 개(!!)는 다른 타입의 데이터를 boolean 타입으로 명시적으로 형 변환(Type Conversion)하기 위해 사용한다.


폼(Form)태그

정의
⭐️ 폼 태그는 주로 사용자가 입력하는 값을 받아 처리하기 위해 사용된다.
현업에서 매우 자주 사용되고, 중요한 태그라서 기본 개념을 잘 잡는것이 Point.
입력폼 - 전송방식, 필수입력, 이름, 이메일, 유효성 검사등
25분 안에 HTML 양식 배우기(영문)

  • 기본 개념

    폼 태그는 유저로부터 데이터를 입력할 수 있는 범위를 지정할 때 사용되며, 주로 내부 input 요소들이 배치되어 있습니다. 추가로 이러한 정보들을 입력받아 서버와 통신할 수 있음.


CSS

clip 속성

  • clip속성으로 요소의 특정 부분만 나오도록 할 수 있음.

    기본값 : auto, 상속 : No, 애니메이션 : Yes

    문법 ) clip : auto / shape / initial / inherit

  • auto : 요소의 모든 부분이 나온다.

  • shape : 특정 부분이 나오도록 한다.

  • initial : 기본값으로 설정한다.

  • inherit : 부모 요소의 속성값을 상속받음.

실제 사용 코드 예시

.box {
        position: absolute;
        clip: rect( 20px, 220px, 220px, 20px );
      }
  • rect로 특정 부분만 나오게 지정 가능.

    rect(top,right,bottom,left)

profile
개자이너 하고싶어요

1개의 댓글

comment-user-thumbnail
2022년 11월 18일

양질의 자료글들 잘 정리해가고 계시네요
ㅎㅎ어제도 고생하셨어요

답글 달기