🍞 Front-End

📌 AJAX? Asynchronous Javascript And Xml (비동기식 자바스크립트와 Xml)의 약자이다. 브라우저가 가지고 있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도, 페이지의 일부만을 데이터 로드하는 기법이다. Javascript를 사용하여 클라이언트와 서버 사이에서 XML(JSON) 데이터를 주고받는 비동기 통신 기술이다. - XML 데이터를 저장하고 전달할 목적으로 만들어진 마크업 언어 - JSON '키-값' 쌍 형식의 배열 형태를 이루는 데이터 형식 - XMLHttpRequest 브라우저가 가지고 있는 객체 중 하나 📌 동기 VS 비동기 ❗Request 요청이 들어온다면 - 동기 방식 서버에서 요청을 처리하고 응답해야 다음 동작이 이루어진다. 이..

기존의 자바스크립트에서는 prototype을 이용해 유사하게 상속을 구현했다. 그러나 ES6 이후 Class가 나오면서 명료하고 간편하게 객체를 생성하고, 상속을 구현할 수 있게 되었다. + 참고 📌 생성자 함수 생성자 메서드 constructor()는 속성을 설정하며 function 키워드 없이 작성한다. 이 메서드는 this 문맥을 생성하기 때문에 this에 속성을 할당하며 인수를 이용해 인스턴스마다 다른 속성을 부여할 수 있다. 메서드를 정의하려면 생성자 메서드와 마찬가지로 function 키워드 없이 작성한다. this로 현재 클래스 속성에 접근할 수 있다. Classes - JavaScript | MDN Class는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나..

일반 함수와 화살표 함수는 헷갈리지만 그만큼 매우 중요한 개념이다! 📌 일반(Normal) 함수는 호출 위치에서 따라 this 정의 📌 화살표(Arrow) 함수는 자신이 선언된 함수 범위에서 this 정의 일반 함수는 normal이 호출되는 부분에서 this가 정의된다. YeJin이 곧 this이고 name 부분을 꺼내서 쓴다. 이와 다르게 화살표 함수는 호출 위치와 전혀 상관없이 선언될 때 this가 무엇인지 알 수 있다. 현재 선언된 코드에선 this를 정확하게 알 수 없는데 name이라는 속성을 찾으려고 하기 때문에 undefined가 출력된다. YeJin의 noraml 함수 자체가 amy의 normal 함수에 할당된다. 그러므로 호출된 위치에 있는 name이 Amy로 바뀌어 출력되는 것을 볼 수 ..

하나의 객체만 있다면 firstName과 lastName을 각각 정의하기 쉬울 것이다. 그러나 여러 객체가 생긴다면 비슷한 객체를 정의하기에 매우 귀찮아지고 힘들어질 것이다. 그렇기 때문에 생성자 함수를 만들고 new 키워드로 객체 데이터를 생성한다. firstName과 lastName 부분은 인스턴스를 생성할 때마다 다른 내용이 들어올 수 있기 때문에 통일해서 메모리를 관리하기 어렵다. 그러나 getFullName 부분은 통일해서 메모리를 효율적으로 관리할 수 있다. 콘솔창을 보면 firstName과 lastName을 제외하고 prototype이 object인 것을 확인할 수 있다. user 함수에 숨어있는 prototype 속성 부분에 getFullName을 할당해줌으로써 몇 개의 인스턴스를 생성하더..

- 콜백(Callback)이란? 1. 함수의 인수로 사용되는 함수이다. 2. 특정한 실행 위치를 보장해주는 방법으로 콜백함수를 활용할 수 있다. setTimeout(함수, 시간) 여기서의 함수가 콜백을 뜻한다. timeout 함수가 먼저 실행이 되더라도 timeout 함수 내부에서 3초후에 실행하는 setTimeout함수가 있기 때문에 Done!이 먼저 출력되고 그 후 YeJin이 출력되는 것을 볼 수 있다. ❗ YeJin 다음에 Done이 출력되게 하려면? timeout을 호출할 때 화살표 함수를 통해 인수를 만들고, timeout 매개변수로 넣어준다. 아직 호출되지 않은 함수이므로 실행하고 싶은 곳에 매개변수(callback())를 적어줌으로써 실행 위치를 보장해준다. + 매개변수이기에 callbac..

setTimeout(함수, 시간) 일정 시간 후 함수 실행 setInterval(함수, 시간) 시간 간격마다 함수 실행 clearTimeout() 설정된 Timeout 함수를 종료 clearInterval() 설정된 Interval() 함수를 종료 📌 setTimout(함수, 시간) 일정한 시간 후에 실행되는 함수이며 시간 단위는 ms(1000ms = 1s)를 쓴다. setTimeout에서 바로 실행되기 때문에 익명의 함수로 적어주고 화살표 함수도 괜찮다. 3초 후에 setTimeout이 실행되어 콘솔 창에 YeJin이라고 뜬다. 📌 clearTimeout() 설정된 setTimeout 함수를 종료하는 함수이다. setTimeout이 시작되기 전, 3초 이내에 clearTimout을 실행하게 되면 tim..

- 호이스팅(Hoisting)이란? 자바스크립트 문법에서 변수나 함수를 선언 이전에 사용할 수 있다는 뜻이다. 실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하기 때문에 실제 메모리에서는 변화가 없다. 📌 함수 표현식 원래 자바스크립트는 위에서부터 아래로 해석되어 읽혀진다. 그래서 아래 사진처럼 함수가 호출되는 부분을 윗부분으로 옮기게 되면 아직 함수가 만들어졌지 않았기 때문에 콘솔에 오류가 떠 실행이 불가능하다. 함수표현식은 함수선언문과 달리 선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있다. 변수에 할당된 함수표현식은 끌어 올려지지 않기 때문에 이때는 변수의 스코프 규칙을 그대로 따른다. 📌 함수 선언문 그러나 함수 표현식이 아닌 함수 선..

화살표 함수가 일반 함수와 다른 점 중 하나는 일부 내용을 축약해서 최소화하여 사용할 수 있다. 화살표 함수는 매우 편리하기 때문에 앞으로도 많이 쓸 것이다!! 화살표 함수는 실행문이 간단하면 return 생략이 가능하다. 또한 매개변수가 하나라면 괄호를 생략할 수 있다. 추가적인 매개변수 존재하면 ,를 사용하여 넣어준다. 중괄호 기호도 하나의 객체 데이터가 아닌 블럭으로 해석된다. 기호가 겹치기 때문에 객체 데이터를 넣는다면 {} 괄호를 () 로 감싸준다.

프로젝트를 진행 중, 클래스를 먹여도 적용이 안 됐다. 클래스 여러 개 넣어서 그런 줄 알았는데 속성들 중에도 우선순위가 중요하다는 것을 깨달았다. 그래서 오늘은 우선순위에 대해서 정리하고자 한다. 📌 CSS 우선순위 3가지 규칙 1. 기본적으로 뒤에 나오는 css가 우선순위가 높다. 2. !important > inline style attribute > id > class, 다른 attribute, Pseudo 클래스(:first-child같은 것) > tag element, Pseudo 엘레먼트(::before같은 것) 순으로 우선순위가 높다. 3. 우선순위가 같다면 개수가 많은 css가 우선순위가 높다. !important와 inline style attribute은 실무에서 사용을 제한하는 경우..

네 컷 아카이브 프로젝트의 메인페이지 css를 진행하던 도중 배경이미지만 opacity를 줘도 이미지 위에 있는 글자와 함께 같이 투명해지는 문제가 발생했다. 📌 해결방법 가상요소를 이용해 필터를 만들었다 ::before html css 배경화면에만 opacity를 주려고 했으나 아래 방식으로는 글자색까지 투명해지는 것을 볼 수 있었다 .. 이러한 문제를 해결하고자 박스에 before 가상요소를 썼다. 가상요소의 position을 absolute로 주고 width: 100%, height: 100%로 주면 배경 이미지 크기를 동일하게 맞출 수 있다. 또한 박스의 position은 relative로 줘서 배경이미지보다 위로 올라오게 한다. 그러면 글씨에 영향주지 않고 배경이미지에만 opacity를 줄 수 ..