DDOstory

Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스를 제공하며, XMLHttpRequest보다 강력하고 유연한 대체제Fetch API 개념 Fetch API는 Request와 Response 객체, 그리고 기타 네트워크 요청에 관련된 것들을 사용하고 CORS와 HTTP Origin 헤더 행동 등 관련한 개념도 포함Fetch API 사용법요청을 생성하고 리소스를 취득하려면 fetch 메서드를 사용fetch()는 window와 worker 컨텍스트 양쪽에서 모두 사용할 수 있는 전역 메서드리소드를 취득할 상황이 생기는 거의 모든 컨텍스트에서 사용 가능fetch() 메서드는 하나의 필수 매개변수로 가져오려는 리소스 경로를 받음반환 값은 해당 요청에 대한 Response로 이행하는 prom..

🧸  속성과 값이 같으면 1개만 기입객체를 정의할 때 속성과 값이 일치하면 축약 가능const language = 'JavaScript';const josh = { language};console.log(josh);🧸  컴포넌트 등록 방식에서의 축약 방법const doComponent = { template: 'Do Component'};new Vue({ components: { doComponent }});🧸  뷰 라우터 등록 방식에서의 축약 방법const router = new VueRouter({ //...});new Vue({ router});🧸  속성에 함수를 정의할 때 function 예약어 생략객체를 정의할 때 객체의 속성에 함수를 연결하여 사용하는 경우 많음const j..

🪁  이벤트어떤 동작이나 상태 등의 사건을 발생하는 것을 의미html dom 요소들은 이벤트가 발생했을 때 웹 브라우저에서 이벤트가 발생한 걸 알아챌 수 있도록 이벤트 신호를 발생자바스크립트는 발생한 이벤트의 반응을 해서 어떤 동작을 수행할 수 있음해당 이벤트를 감지할 수 있는 EventListener를 EventHandler를 지정 = 이벤트 리스너를 등록한다🪁  addEventListener()이벤트 리스너를 등록하기 위해 메소드 사용메소드의 첫 번째 인자에는 이벤트의 종류를 문자열로 지정두 번째 인자에는 이벤트가 발생했을 때 실행시킬 EventHandler 함수를 전달 해주어야 함내부에 직접 작성하여도 됨함수를 작성하여 함수를 인자로 전달하는 방식으로 작성EventHandler함수는 이벤트가 발..

메소드를 외우는게 아니라 이런 것들이 존재한다는 것 정도만 알아두면 됨 💣 toUpperCase(), toLowerCase()대소문자 변환하는 메소드toUpperCase()는 모든 문자를 대문자로 변경toLowerCase()는 모든 문자를 소문자로 변경const str = 'Hello World!';console.log(str.toUpperCase());console.log(str.toLocaleLowerCase());💣 trim(), trimStart(), trimEnd()문자열의 공백을 제거하는 메소드trim()은 문자열의 앞쪽과 뒤쪽에 있는 공백을 제거trimStart()는 문자열의 앞부분의 공백만 제거trimEnd()는 문자열의 뒤부분의 공백만 제거const str = ' hello ..

📕  변환이란?플러그인의 도움 없이 웹 브라우저에 3차원 공간을 구현할 수 있게 되었음HTML5에서 3차원을 구현하는 방법은 크게 2가지자바스크립트를 사용한 webGLCSS3를 사용한 3차원 배열📕  2차원 배열대부분의 컴퓨터 프로그램은 화면 좌표를 이용X축과 Y축이 있는 화면 좌표를 2차원 화면 좌표라고 부름Z축을 추가하면 3차원 화면 좌표로 확장3차원 화면 좌표에서 Z축은 웹 브라우저를 보는 사용자에게 가까울수록 큰 값임📕  transform 속성CSS3부터는 transform 속성을 사용해 객체를 변환할 수 있음변환이 가능한 이야기는 HTML 페이지 스스로 애니메이션 같은 플래시 콘텐츠를 만들 수 있음 코드를 실행하면 사각형이 60도 회전📕  2차원 변환 함..

⏱️  원시 데이터 타입객체가 아니면서 메서드도 가지지 않는 데이터string, number, bigint, boolean, undefined, null, symbol⏱️  숫자 데이터 타입정수와 부동소수점 숫자를 나타내는 타입typeof (타입오브) 라는 데이터 타입을 알려주는 연산자를 사용const number = 123;console.log(typeof number);bigint (빅인트)라는 데이터 타입은 숫자 데이터 타입으로 표현할 수 있는 범위를 넘어서는 아주 작은 숫자나 큰 숫자를 표현할 때 사용되는 타입별도의 데이터 타입으로 지정됨빅인트 타입으로 지정하기 위해서는 일반적인 숫자와 구분하기 위해 숫자를 쓰고 뒤에 소문자 n을 붙이면 됨const number = 123n;console.log(..

🔋변수란?프로그램의 피요한 값들을 저장해두는 공간공간마다 서로 다른 이름을 붙여서 그 값을 가져와서 연산을 하거나 연산한 결과값을 저장프로그램 안에서 값이 변경될 수 있는 자료 의미를 부여한 어떤 값으로 정의해 두고 그 값을 출력할 수 있음 -> 저장할 수 있는 공간그 값이 고정된 것이 아닌 나중에 원할 때 변경할 수도 있는 그런 저장 공간이름을 정의하고 들어갈 값을 우측에 정의한 후 변수를 선언하고 할당선언된 값을 어디서든지 사용 가능let 키워드 사용🔋상수란?한 번 정해놓으면 변하지 않고 변경할 수 없는 값을 저장하는 공간선언할 때 const 키워드 사용키워드를 작성하고 사용할 상수 이름을 지정하여 뒤에 값을 넣어주는 것을 의미수정을 하려고 해도 수정되지 않음🔋var, let, constJava..

CSS에서 움직임을 구현할 수 있는 기능은 애니메이션 속성과 변형 속성으로 나뉨HTML 페이지 구성  hover 상태 선택자와 active 상태 선택자를 사용마우스를 태그 위에 올리거나 클릭하면 각각의 스타일 적용 transition-duration 속성 사용구형 브라우저와 호환하려면 벤더 프리픽스를 이용한 transition-duration 속성 사용코드를 실행하면 마우스를 태그 위에 올릴 때, 내릴 때 또는 누를 때 등등 2초 동안 변형 속성이 사용 변형 속성은 다음 스타일 속성과 함께 사용 가능위치 속성 : top, left, bottom, right크기 속성 : width, height박스 속성 : margin, padding테두리 속성 : border-width, border-r..

🚩 크기 단위%백분율 단위em배수 단위px픽셀- 가장 많이 사용하는 단위- %, em, cm, mm, inch, px - %(퍼센트 단위) = 기본 설정된 크기에서 상대적으로 크기 지정- em(배수 단위) = 배수를 나타내는 단위- px(픽셀) = 절대적으로 크기를 지정할 때 사용🚩 색상 단위#000000HEX 코드 단위RGB(red, green, blue)RGB 색상 단위RGBA(red, green, blue, alpha)RGBA 색상 단위HSL(hue, saturation, lightness)HSL 색상 단위 HSLA(hue, saturation, lightness, alpha)HSLA 색상 단위- 단어로 표현할 수 있는 색상은 한정적🚩 URL 단위background-image: url()url..

💻  JavaScript (자바스크립트)웹 페이지에서 복잡한 기능을 구현할 수 있는 스크립팅 또는 프로그래밍 언어사용자 인터렉션에 의해 반응하개 만들어 주는 것페이지 전환, 화면 영역 지정, 마우스 입력, 키보드 입력 등 반응할 수 있도록 만들어주는 것브라우저 안에서 동작하는 프로그래밍 언표준 웹 기술동적으로 변경되는 콘텐츠를 만들고, 멀티미디어를 제어하고, 이미지에 애니메이션을 적용하는 등 거의 모든 작업을 수행할 수 있는 스크립팅 언어💻 JavaScript 특징모든 웹 브라우저에서 작동웹 브라우저에서 실행 결과를 즉시 확인 가능풀스택 웹 개발 뿐 아니라 다양한 용도의 프로그램 만들 수 있음다양한 자바스크립트 공개 API 사용 가능다양한 라이브러리와 프레임워크 사용 가능 💻 자바스크립트 실행크롬에..