개발/알아둘 기본 개념
-
px,em,rem개발/알아둘 기본 개념 2024. 3. 18. 21:42
css를 작성할 때 단위로 쓰이는 여러가지 단위들이있는데, 절대단위와 상대단위로 나눌수있다. 절대단위로는 px 상대단위로는 vw,vh,em,rem등이 있다. px 보통 픽셀이라고 부르며, 모니터에 따라 상대적으로 표시된다. 그러므로 반응형 웹에는 적절하지 않을 수 있다. em, rem em은 부모의 글꼴크기에 영향을 받는다. rem은 루트요소의 글꼴크기에 영향을 받는다. 이해를 돕기위해 예제를 해보기로했다. 예제. PX EM REM .px { font-size: 16px; } .em { font-size: 1em; } .rem { font-size: 1rem; } EM : 부모태그에 font-size에 따라 달라진다. 즉 부모태그에 적용된 font-size가 1em이 된다. 예제. 기본 권장값으로 설정되..
-
호이스팅이란?개발/알아둘 기본 개념 2024. 2. 24. 14:50
면접에서 단골질문 호이스팅이다. 간단하게 설명들을 보면 함수 혹은 변수를 가장 상단으로 올려주는 현상(?)이라고 알수있다. 이번에 확실하게 알아두고자 공부를 해보았다. 단어 말 뜻 그대로 끌어올린다는 뜻이다. - 인터프리터가 변수와 함수의 메모리 공간을 선언하기전에 미리 할당하는것을 의미한다. - 변수와 함수의 선언부가 각자의 현재 스코프 영역 최상단으로 옮겨지는 것을 의미한다. 결국, 코드가 시작되기 전에 변수, 함수 선언이 해당 *스코프의 최상단으로 끌어 올려지는 것을 말한다. 더 정확히 말하자면 끌려 올려지는 것처럼 보인다. 코드가 실제로 끌어올려지진 않는다. *스코프 : 범위를 뜻한다. 즉 변수에 접근할 수 있는 범위 자바스크립트는 코드를 실행하기 전에 함수와 변수 선언을 Lexical Envi..
-
간단한 예제를 통해 API호출해보기 ( API & fetch )개발/알아둘 기본 개념 2023. 12. 25. 14:22
API ( Application Programming Interface ) 란 프로그램들이 서로 상호작용을 할 수 있게 도와주는 매개체. 비유를 통하자면, 손님(클라이언트)가 메뉴를 요청(request)하면 점원(서버)가 냉장고(데이터베이스)에서 쿼리를통해 요청에 대한 메뉴를 찾아, 메뉴(response)를 손님에게 전달해주는 과정을 통해 알 수있다. 여기서 점원의 역할이 API라 할 수 있다. // api 호출 해보기 // fetch("주소") : 내장함수, api호출 할 수 있도록 도와주는 내장함수 async function getData() { let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts"); let jsonRe..
-
동기 & 비동기개발/알아둘 기본 개념 2023. 12. 23. 15:23
👉 들어가면서... 동기방식은 코드순서대로 실행되기때문에, 위의 코드가 완료되지않으면, 완료될때까지 기다렸다가, 다음코드가 실행된다. 하지만, 이러한 방식은 효율적이지 못하기때문에 비동기방식을 사용한다. 비동기방식은 먼저 완료된 코드부터 실행되는 방식이다. 동기방식은 이어달리기라고 생각하면될거같다. 👉 코드 //동기적 방식 function taskA() { console.log("A작업 끝"); } taskA(); console.log("코드 끝"); //비동기적 방식 function taskB(a, b, cb) { setTimeout(() => { const res = a + b; cb(res); }, 3000); } function taskC(a, cb) { setTimeout(() => { cons..
-
Spread 연산자 사용개발/알아둘 기본 개념 2023. 12. 23. 14:07
Spread 연산자란, 기존 객체나 배열의 요소들을 다른 배열이나 객체로 복사 할 수 있다. //spread 연산자사용 (객체) const cookie = { base: "cookie", madeIn: "korea", }; const chocochipCookie = { ...cookie, toping: "chocochip", }; const blueberryCookie = { ...cookie, toping: "blueberry", }; const strawberryCookie = { ...cookie, toping: "strawberry", }; console.log(chocochipCookie); console.log(blueberryCookie); console.log(strawberryCookie..