[12/15] DAY11 자바스크립트 공부
·
기타/[JS-0기] 한입 FE 챌린지
11일 차 진도 프로젝트라 따로 정리할 게 없다. 코드만 올릴 예정이다. 1. 검색바 2. 명언 API 3. 북마크바 [11일 차 미션] 더보기 11일 차 미션 11일 차 제출
리액트 API 호출
·
프로그래밍 언어/React 기초
리액트 API 호출 API(Application Programming Interface) 서로 다른 프로그램이 데이터를 주고받을 수 있도록 도와주는 인터페이스(매개체)이며, 일종의 규약이다. [프로그램 A 프로그램 B] 데이터를 주고받음 서로 다른 프로그램끼리 데이터를 주고받으려면, 당연히 서로 어떻게 통신하고, 어떤 데이터를 주고받을 것인지 미리 합의된 규약이 존재할 것이다. 프로그램 간 데이터를 주고받는 과정에서도 미리 합의된 규약이 존재해야 한다 그것이 API 두 프로그램이 서로 데이터를 주고받기 위해 소통할 때, 어떤 방식으로 서로 주고받을지 합의해서 매개체 역할을 해주는 일종의 규약 REST API란 웹 서비스를 개발할 때 가장 범용적으로 사용되는 API이다. HTTP 프로토콜을 기반으로 동작한..
[12/14] DAY10 자바스크립트 공부
·
기타/[JS-0기] 한입 FE 챌린지
10일 차 진도 position 웹 문서상에 요소를 배치하는 방법을 지정 position 속성 값 : static, relative, absolute, fixed, sticky 요소의 최종 위치 결정 : top, right, bottom, left - position 값이 static일 때의 위치를 기준으로 웹 요소들의 위치를 변경하고 싶을 때 relative 설정 - position 값이 static이 아닌 속성을 가진 부모를 기준으로 움직이게 하고 싶을 때 absolute - sticky, fixed는 스크롤할 때 요소를 고정시킬 수 있는 기능을 제공한다는 공통점을 가짐 sticky 속성을 적용한 div는 스크롤을 내리다가 부모 요소의 마지막까지 도달하면 해당 요소도 스크롤에 따라 움직이지만, fix..
[12/13] DAY9 자바스크립트 공부
·
기타/[JS-0기] 한입 FE 챌린지
9일 차 진도 Date 객체 특정 날짜의 시간과 현재 날짜와 시간을 알 수 있다. let nowDate = new Date(); console.log(nowDate); // 2023-12-13T00:50:37.026Z 오늘의 연도 월, 일 시간이 출력된다. Date 객체의 메서드 getMonth(월), getDate(일), getDay(요일) let nowDate = new Date(); let month = nowDate.getMonth(); let date = nowDate.getDate(); let day = nowDate.getDay(); console.log(`${month}월 ${date}일 ${day}요일`) // 11월 13일 3요일 getMonth 메서드는 월을 0~11 사이의 숫자로 표..
[12/12] DAY8 자바스크립트 공부
·
기타/[JS-0기] 한입 FE 챌린지
8일 차 진도 DOM 웹 인터넷에 연결된 사용자들이 서로의 정보를 공유할 수 있는 공간 웹사이트란? 주소 URL에 접속해서 볼 수 있는 웹페이지들을 통틀어 말하는 말로, 흔히 말하는 ‘홈페이지’라고 할 수 있다. HTML(Hyper Text Markup Language) 브라우저에게 웹 사이트의 요소들이 어떻게 구성되어 있는지 알려주는 역할 CSS(Cascading Style Sheets) 웹 사이트 요소들을 꾸며주는 역할 DOM(Document Object Model) HTML을 자바스크립트가 이해할 수 있게 브라우저가 객체로 변환한 것 웹 브라우저는 HTML 문서를 불러온 뒤, 상하관계를 한눈에 볼 수 있는 DOM Tree 구조로 나타낸다. DOM Tree에서는 아이템 하나하나를 노드라고 부르며, 노..
[12/11] DAY7 자바스크립트 공부
·
기타/[JS-0기] 한입 FE 챌린지
7일 차 진도 Promise 비동기 작업을 편리하게 할 수 있게 도와주는 JS 내장 객체 executor = (resolve, reject) => { setTimeout(()=>{ console.log(“3초만 기다리세요”) },3000) } const promise = new Promise(executor); excutor함수는 promise 객체의 인수로 전달되어야 하며, promise 객체를 생성함과 동시에 실행되는 실행함수 executor 함수의 매개변수인 resolve, reject는 js에서 자체적으로 제공하는 콜백함수로, 비동기 처리가 성공하면 resolve를, 실패하면 reject를 호출한다. Promise 객체는 State, Result 두 가지의 내부 프로퍼티를 가진다. state : ..