해민

🔷 Fetch ❓Fetch란?자바스크립트에서 비동기적으로 HTTP요청을 수행하기 위한 최신 API로XHR 보다 더욱 간결하고 효율적인 기능을 제공한다.Promise를 기반으로 하여 then 또는 async/await 사용 가능하다Response를 두 번에 나눠 받으며 , Json으로 변환은 직접 해주어야한다.  ❓ Fetch를 사용하는 이유Fetch는 브라우저가 기본으로 제공하는 API 이기 때문에 간편하게 사용할 수 있으며간단한 네트워크 요청의 경우 가벼운 코드로 활용이 가능하다.  ✏️ Fetch 기본 구조fetch("요청 보낼 서버의 url") .then((response1) => { //첫번째 response 처리 }).then(response2) => { //두번째 response 처..

Ajax를 배우면서 Promise 를 같이 활용하여 비동기 통신을 하는 방법도 있다고 한다.이해 하는것이 힘들기 때문에 포스팅으로 작성하며 정리해 보려고 한다. ❓ Ajax란웹 페이지의 내용이 갱신될 때 전체 페이지가 새롭게 생성되어 바뀌는 것이 아닌 서버로 부터 응답 데이터를 받아와 페이지의 일부분만 갱신할 수 있도록 해주는 비동기 프로그래밍 기법이다.  ❓ Promise 란비동기 처리를 실행 하고 처리가 끝난 후에 다음 처리를 실행하기 위한 기능을 제공한다.  🤔 왜 Ajax와 promise를 같이 활용할까?Ajax는 비동기적 처리이기 때문에 자바스크립트는 응답을 기다리지 않고 다음 코드를 실행한다.이때 생길 수 있는 문제점은 Ajax를 통해 요청한 응답값이 언제 올지는 모른다는것이다.응답이 오지도..

오늘은 JavaScript의 동작원리에 대해서 알아보겠다. 실행 동작은 크게 두가지로 나뉜다. 1️⃣ 동기적 처리2️⃣ 비동기적 처리 언어마다 각각 지원하는 처리 방식이 다르며,오늘은 JavaScript에 처리 방식이 무엇인지 알아보려고 한다.   🔷 동작원리 종류 🔹 동기적 처리 ❓ 동기적 처리란 싱글 스레드 기반의 언어로, 한 번에 하나의 작업만 처리할 수 있다. 동기적 처리는 자바스크립트의 처리 방식으로자바스크립트는 실행 단계에서 코드를 위에서 순차적으로 한 줄씩 처리하는 방식을 사용한다. 한 줄의 코드 작업이 완료되기 전까지는 그 다음 작업이 실행되지 않게 된다.  🔍 실생활 예시 줄 서서 대기하고 있는 상황에선 앞 사람의 주문이 끝날 때까지 주문을 할 수 없고 대기한다.  ✔️ 동기 장점순..

🔷 Map주어진 배열의 값을 재정의 할 때 사용하는 방법이다.배열의 요소를 인덱스 순으로 인자로 전달하여 callback함수로 반환 받아 새로운 값을 정의한다. let money = [1, 2, 3, 4]; console.log(money); result = money.map((m) => m + m * 0.5); console.log(result); 👉 money의 요소가 m 인자를 통해 인덱스 순으로 전달되어 연산을 통해 새로운 값이 result에 배열 요소로 할당 🔹 map의 callBack 인자인자 위치 순서에 따라 들어가는 값이 다르다.map ((요소의 값, index , 순회하는 대상) result = money.map((m, i, s) => { docume..

자바스크립트는 매우 유연한 언어이다. 예시를 들어서 코드를 하나 봐보자.  👉 위 코드에서 콘솔로 찍히는 값은 1 이다. 🤓 이때 함수의 인수는 1개인데 호출할 때 넣은 인자의 수는 5개이다.      원래라면 에러가 발생했을 것이다. 인자 수에 맞게 해야하기 때문이다.       하지만 자바스크립트는 다르다 .        인수 보다 더 많은 수를 전달하여도 에러가 발생하지않고 인수의 개수 만큼 할당 된 다음      나머지는 무시 된다.🤔 그렇다면 무시되는 나머지 값은 어디로 가는 것일까?나머지 값은 두 가지 방식을 통해 값을 가져올 수 있다. 1️⃣ Arguments Arguments란 함수로 전달 되는 모든 인수들을 배열 형태로 나타낸 것으로 초과되는 인자 까지도 모두 저장된다.Argume..

🔷 이벤트 흐름이란?문서 내부에 엘리먼트들은 계층적 구조로 이루어져 있기 때문에발생하게 된다.하나의 엘리먼트에서 이벤트가 발생할 경우 계층을 따라 연쇄적으로 이벤트 흐름이 발생하게 된다. 🔹 흐름 3단계   1️⃣ 캡쳐 단계 : window 부터 모든 DOM객체를 차례대로 거쳐 타켓에 이벤트가 전달되는 과정   2️⃣타깃 단계 : 이벤트가 실제 요소에게 전달   3️⃣버블링 단계 : 타겟 부터 중간에 모든 DOM 객체를 거쳐 window 객체에 이벤트가  전달되는 과정   💡캡쳐 단계와 버블링 단계에서 겨쳐가는 DOM객체들은 해당 이벤트의  addEventListener 속성에 따라     거쳐가는 모든 DOM 객체들의 이벤트 리스너를 실행한다.        기본값은 버블링 단계이며 , 타깃 객체부..

오늘 변수와 함수를 선언 전에 호출 해보는 예제를 테스트 해 보던중 궁금점이 생겼다. 우선 코드를 먼저 살펴보면 document.write(hello()); document.write(i); var i = "hi"; function hello() { return "안녕 함수"; } var 변수와 함수를 선언 한 뒤선언 이전에 변수와 함수를 불러내도록 입력하였다. 👉 결과변수는 undefined 가 출력되고함수는 정의된 실행문대로 출력이 되었다. 🤔 그런데 왜 똑같이 선언 전에 호출을 하였는데 변수는 아무것도 없고 함수만 있을까?우선 변수가 undefined 인 이유 부터 살펴보자면 호이스팅 이라는 개념을 간단히 보자. 호이..

🤔 변수란?데이터를 저장하는 그릇으로써선언과 할당을 통하여 값을 변수에 저장한다. 변수는 언어마다 여러 타입과 종류 들이 있으며 각각의 특성을 가진다.  📙 자바스크립트 변수의 종류var 는 재 선언 ,재 할당이 가능 하며 , 호이스팅이 일어난다.let 은 재 선언은 불가능 하며 재 할당은 가능하고, 호이스팅이 일어나지 않는다.const 는 재 선언 , 재 할당 전부 불가능하고, 호이스팅이 일어나지 않는다. ❓ 재 선언과 재 할당이 가능하다는게 무엇일까자바스크립트는 실행 시 인터프리터 라는 프로그램을 사용하여 실행하며,실행 시 문서의 코드를 한 줄씩 읽어들여 실행하는것이다. 위에서 부터 아래까지 순서대로 한 줄씩 읽기때문에 선언과 호출을 어느 위치에서 하였는지에 대한 제약이 생긴다.  🔹변수들의 특..

🤔 CallBack 함수가 뭘까?자바 스크립트에서는 선언함수 또는 익명함수를 인자로 받아호출한 함수 내부에서 인자로 전달받은 함수를 호출(Callback) 할 수 있다. 간단하게 예시를 들어보자.  //사람의 동작(movement)을 제어 function person(movement, clock) { document.write(`나는 지금 `); movement(clock); } //밥 먹는 동작 function eat(clock) { document.write(`${clock}시에 밥 먹는중이다`); } //3시에 밥 먹고 싶다 person(eat, 3); 👉 사람의 동작을 실행하는 함수에 동작 함수를 인자로 전달받아 ..

우선 스타벅스의 Header 부분의 외관 디자인을 따라만들어보았다. 반응형을 확인하기 위해 화면을 줄여보면? 그렇다면 문제점을 이제 하나하나 뜯어보겠다. 1️⃣ 첫번째 문제처음 화면을 줄일때 처음부터 전체적으로 줄어들어 nav가 로고를 침범하는 문제가 발생❓ 원인width 값의 설정값 방식 차이 % 로 설정할 경우 창이 줄어들면 블럭의 크기 또한 같이 줄어든다.px로 설정할 경우 창이 줄어들어도 블럭은 절대크기를 유지한다. 따라서 header 안에 inner 요소 width를 % 로 설정한 것이 원인이다. 💡 해결 header .inner { width: 75%; height: 100%; position: relative; }⬇️ header .inner { ..