일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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
- 검색
- 프론트엔드
- compateto
- concurrency limit
- 프론트엔드 과제
- 프리코스
- api 요청 수 제한
- 딥다이브
- oauth
- invalid_grant
- 자바스크립트
- bucket4j
- 스프링부트
- this
- AWS
- redis
- 우아한 테크코스
- api 비동기처리
- NestJS
- 유효시간 설정 url
- 우아한테크코스
- 파일 url
- Dev-Matching
- TypeORM
- 프로그래머스
- 타입스크립트
- 코멘토 #코멘토실무PT #실무PT후기 #실무강의 #리액트강의 #웹프로그래밍 #react #웹개발실무
- 음악 url 파일 다운로드
- 모던 자바스크립트
- Today
- Total
목록웹 (68)
개발 알다가도 모르겠네요
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/o1gZS/btq8R050SaH/51JNUIJhHA6m6gt0IkLopK/img.png)
마우스 이벤트를 다룰 때 자주 사용되는 이벤트 객체의 프로퍼티 clientXY, pageXY, offsetXY 1. clientX, clientY client 프로퍼티는 말 그대로 클라이언트 영역 내에서 마우스의 좌표 정보를 담고있는데요. 클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역을 뜻합니다. clientX : 브라우저가 표시하는 화면 내에서 마우스의 X좌표 위치를 담고 있습니다. clientY : 브라우저가 표시하는 화면 내에서 마우스의 Y좌표 위치를 담고 있습니다. client 값은 그 순간 보여지는 화면을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 보여지는 화면의 좌측 상단의 모서리 위치를 (0, 0)으로 계산합니다. 2. offsetX, off..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/MikCi/btq8RsIJvhA/L7JEdxyYFSMKhR9jKVh0j1/img.png)
window 객체 window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체입니다. 자바스크립트 코드 어느 곳에서나 항상 접근할 수 있는 객체이기 때문에 전역 객체, 영어로는 Global Object라고 부릅니다. 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것이기 때문에 앞에 window.을 생략할 수도 있습니다. DOM DOM이란 Document Object Model의 약자로, 한국어로는 문서 객체 모델입니다. 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것으로 생각하면 됩니다. 이때 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분됩니다. DOM 트리 HTML의 계층 구조는 DOM에서도 반영되는데 이러한..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bJWlfz/btq8UOcxWm7/QupnWJ9TaynyGZHFunbMO0/img.png)
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'; ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dMyLUr/btq8Pu1j6z5/JYxzllXziCFNeyZ1MlLqJK/img.png)
대부분의 브라우저에 있는 개발자 도구는 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 선택자로 태그 선택하기..
get 방식 (기본 방식) 특징 - 데이터는 URL 뒤에 쿼리스트링으로 추가되어 전달 - 입력 값들이 많지 않은 경우나 공개 적으로 URL 에 붙여 넘겨도 무방한 경 우에 사용 장점 - 간단한 데이터를 빠르게 처리할 수 있다 단점 - 데이터 양에 제한이 있다 (URL 전체 데이터 사이즈는 2048 바이 트로 제한된다.) post 방식 특징 - URL 과 별도로 전송 - HTTP 헤더 뒤에 입력스트림 데이터 로 전달 장점 - GET 방식보다 많은 데이터를 전송할 수 있다 데이터 양에 제한이 없다 - 최소한의 보안유지에 효과가 있다 단점 - 같은 데이터 양이면 get 방식보다 처 리 속도가 느리다
REST API는 오늘날 많은 웹 개발자들이 Web API 설계를 할 때, 준수하기 위해 노력하는 일종의 가이드라인입니다. REST architecture란 미국의 컴퓨터 과학자인 Roy Fielding이 본인의 박사 논문 'Architectural Styles and the Design of Network-based Software Architectures'에서 제시한 개념입니다. 그는 웹이 갖추어야 할 이상적인 아키텍처(구조)로 REST architecture라는 개념을 제시했습니다. 여기서 REST는 Representational State Transfer(표현적인 상태 이전)의 줄임말로, 해석하면 '표현적인, 상태 이전'이라는 뜻입니다. 만약 웹을 하나의 거대한 컴퓨터 프로그램이라고 생각한다면, ..
https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io CSS를 처음 접한다면, 부담스럽지 않고 쉽게 접근해 기본적인 문법을 배울 수 있습니다. Level 1 : plate Level 2 : bento Level 3 : #fancy Level 4 : plate apple Level 5 : #fancy pickle Level 6 : .small Level 7 : orange.small Level 8 : bento orange.small Level 9 : plate, bento Level 10 : * Level 11 : plate * Level 12 : plat..