일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- Deep Dive
- 코멘토 #코멘토실무PT #실무PT후기 #실무강의 #리액트강의 #웹프로그래밍 #react #웹개발실무
- oauth
- bucket4j
- 프론트엔드 과제
- api 비동기처리
- AWS
- TypeORM
- 우아한 테크코스
- this
- 프론트엔드
- 검색
- 자바스크립트
- api 요청 수 제한
- Dev-Matching
- 유효시간 설정 url
- 음악 url 파일 다운로드
- 프리코스
- 파일 url
- 우아한테크코스
- 프로그래머스
- redis
- 스프링부트
- compateto
- NestJS
- 모던 자바스크립트
- concurrency limit
- 딥다이브
- 타입스크립트
- invalid_grant
- Today
- Total
목록웹/Javascript (20)
개발 알다가도 모르겠네요
Promise객체의 등장 Promise 객체가 등장하기 전에도 setTimeout, addEventListener 메소드 같은 비동기적인 처리를 할 수 있는 방법이 있었습니다. 만약 fetch함수를 이런식으로 만들었다면 fetch('https;//first.com', callback) fetch('https://first.com', (response) => { // Do Something fetch('https://second.com', (response) => { // Do Something fetch('https;//third.com', (response) => { // Do Something fetch('https;//fourth.com', (response) => { // Do Something ..
btn.addEventListener('click', function (e) { // 해당 이벤트 객체가 파라미터 e로 넘어옵니다. console.log('Hello World'); }); // 또는 arrow function 형식으로 이렇게 나타낼 수도 있습니다. btn.addEventListener('click', (e) => { console.log('Hello World'); }); console.log('Start!'); fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(result); }); console.log('End'); 지금 이 코드에는 다음과 같은 2개의 ..
Web API 하나의 서비스를 만들 때는 프론트엔드 개발자들과 백엔드 개발자들이 모여 '프론트엔드에서 이 URL로 이렇게 생긴 리퀘스트를 보내면, 백엔드에서 이런 처리를 하고 이런 리스폰스를 보내주는 것으로 정합시다'와 같은 논의를 하고, 이런 내용들을 정리한 후에 개발을 시작하는데 이것을 'Web API 설계'라고 합니다. API란 Application Programming Interface의 약자로, 원래는 '개발할 때 사용할 수 있도록 특정 라이브러리나 플랫폼 등이 제공하는 데이터나 함수 등'을 의미합니다. 웹 개발에서는 어느 URL로 어떤 리퀘스트를 보냈을 때, 무슨 처리가 수행되고 어떤 리스폰스가 오는지에 관해 미리 정해진 규격을 Web API라고 합니다. Web API를 설계한다는 것은 서비스..
JSON은 JavaScript Object Notation의 약자로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다. JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다. JSON 표현할 때의 주의점 (1) JSON에서는 각 프로퍼티의 이름을 반드시 큰따옴표(")로 감싸줘야 합니다. (2) JSON에서는 값이 문자열인 경우 큰따옴표(")를 사용해야 합니다. (3)자바스크립트에서는 프로퍼티의 값으로 사용할 수 있..
1. 이벤트 핸들러 등록하기 HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록하는 방법 외에 Element.addEventListener('type', 'handler')를 통해서 이벤트 핸들러를 등록할 수 있습니다. 2. 이벤트 핸들러 삭제하기 addEventListener 메소드를 활용해서 이벤트 핸들러를 등록했다면, Element.removeEventListner('type', 'handler')를 통해서 이벤트 핸들러를 삭제할 수 있습니다. 3. 이벤트 객체 (Event Object) 이벤트가 발생하면 이벤트 핸들러의 첫 번째 파라미터에는 자동으로 이벤트 객체가 전달됩니다. 이벤트 객체는 이벤트 종류마다 가지고 있는 프로퍼티가 다르며, 이벤트에 대한 유용한 정보들을 프로퍼티로 가지고 있습..
마우스 이벤트를 다룰 때 자주 사용되는 이벤트 객체의 프로퍼티 clientXY, pageXY, offsetXY 1. clientX, clientY client 프로퍼티는 말 그대로 클라이언트 영역 내에서 마우스의 좌표 정보를 담고있는데요. 클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역을 뜻합니다. clientX : 브라우저가 표시하는 화면 내에서 마우스의 X좌표 위치를 담고 있습니다. clientY : 브라우저가 표시하는 화면 내에서 마우스의 Y좌표 위치를 담고 있습니다. client 값은 그 순간 보여지는 화면을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 보여지는 화면의 좌측 상단의 모서리 위치를 (0, 0)으로 계산합니다. 2. offsetX, off..
window 객체 window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체입니다. 자바스크립트 코드 어느 곳에서나 항상 접근할 수 있는 객체이기 때문에 전역 객체, 영어로는 Global Object라고 부릅니다. 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것이기 때문에 앞에 window.을 생략할 수도 있습니다. DOM DOM이란 Document Object Model의 약자로, 한국어로는 문서 객체 모델입니다. 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것으로 생각하면 됩니다. 이때 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분됩니다. DOM 트리 HTML의 계층 구조는 DOM에서도 반영되는데 이러한..
1. element.innerHTML 요소 노드 내부의 HTML 코드를 문자열로 리턴해 줍니다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.) const myTag = document.querySelector('#list-1'); // innerHTML console.log(myTag.innerHTML); 요소 안의 정보를 확인할 수도 있지만, 내부의 HTML 자체를 수정할 때 좀 더 자주 활용됩니다. (내부에 있던 값을 완전히 새로운 값으로 교체하기 때문에 주의해서 사용해야해요!) const myTag = document.querySelector('#list-1'); // innerHTML console.log(myTag.innerHTML); myTag.innerHTML = 'Exotic'; ..
대부분의 브라우저에 있는 개발자 도구는 console.log와 console.dir메소드를 지원합니다. 두 메소드 모두 파라미터로 전달받은 값을 콘솔에 출력하는 역할을 합니다. 과연 이 둘은 어떤 차이가 있을까요? const str = 'Codeit'; const num = 123; const bool = true; const arr = [1, 2, 3]; const obj = { name: 'Codeit', email: 'codeit@codeit.kr', }; function func() { console.log('I love Codeit!'); } console.log('--- str ---'); console.log(str); console.dir(str); console.log('--- num -..
1. 자바스크립트로 태그 선택 document.getElementById('id') HTML id속성으로 태그 선택하기 id에 해당하는 태그 하나 document.getElementsByClassName('class') HTML class속성으로 태그 선택하기 class에 해당하는 태그 모음(HTMLCollection) document.getElementsByTagName('tag') HTML 태그 이름으로 태그 선택하기 tag에 해당하는 태그 모음(HTMLCollection) document.querySelector('css') css 선택자로 태그 선택하기 css 선택자에 해당하는 태그 중 가장 첫번째 태그 하나 document.querySelectorAll('css') css 선택자로 태그 선택하기..