본문 바로가기

전체 글234

(2)자바스크립트_리퀘스트_ Get 리퀘스트 방법=>await + fetch() // 나중에 요약 정리 작성해보자 ● 이론1_API 데이터의 Body의 출력 구성○ count , next, previous ,result { count: 357, next: 'https://learn.codeit.kr/api/color-surveys/?offset=10&limit=10', previous: null, results: [ { createdAt: 1733330621000, updatedAt: 1733330621000, colorCode: '#ABCD00', id: 369, mbti: 'INFP' }, .... { createdAt: 1732967649000, updatedAt: 1732967709000, colorCo.. 2024. 12. 6.
(1)자바스크립트_리퀘스트_fetch()메소드 복습, API의 구성 => status, headers,body, body의 내용 Destructure문법으로 부분추출 ● 이론0_fetch('API URL')로 변수에 데이터 저장하기○ 순서 요약 :순서1_ [package.json] 생성 후, 아래의 코드 작성 => import , export 문법과 await 문법 작성을 위한 셋팅 작업이다.- [package.json]{ "type" : "module"} 순서2_ [mainjs]에서 res변수에 API 데이터를 불러와 저장한다. => await, fetch()const res = await fetch('https://learn.codeit.kr/api/color-surveys');\console.log(res);- 출력결과 : ● 이론1_ API 데이터 분석하기 //많은 것들이 들어있지만, 중요한 부분은 3가지=> status , headers, body○ stat.. 2024. 12. 6.
(12)인터렉티브_자바스크립트_Input관련 이벤트.type 연습용 코드 :- html 코드 : Hello ! Stay Signed in  - CSS 코드 :#form { width: 250px; height: 250px; margin: 70px 30px; padding: 30px; box-shadow: 2px 2px 10px #bfbfbf; border-radius: 5px;}.title { margin: 10px 0 15px; text-align: center; color: #6502C2;}.input { width: 100%; height: 35px; margin: 5px 0; padding: 5px 10px; box-sizing: border-box; cursor: pointer;}.. 2024. 12. 5.
(11)인터렉티브_자바스크립트_키보드 관련 event ● 키보드 관련 event.프로퍼티 값 (2가지)○ event.key : 키보드를 누른 후 출력되는 값○ event.code : 키보드를 눌렀을 때, 키보드 상 누른 위치 :● 키보드 관련 event.type (3가지) ○ 키보드를 눌렀을 때, 발생 type => ''keydown" , "keypress""keydown" : 기능적인 key(ESC , Tab) 등 과 출력 관련 키 모두 발생 , 연타 눌렀을 떄도 발생"keypress" : 연타 눌렀을 때, 발생X , ESC 눌렀을 때, 발생X , 영어가 아닌 문자 입력 시, //어지간하면, 사용 X○ 키보드를 누른 후의 떼었을 때, 발생 type => "keyup" ● 연습문제 :코드잇 우등생 규리는 최근에 공부한 HTML/CSS, 그리고 자바스크립트를.. 2024. 12. 4.