프론트엔드 개발자의 기록 공간

❓ ❗ Ajax vs Fetch vs axios 프로젝트 수행시 클라이언트와 서버 간 데이터를 주고 받는 과정이 필요하다. 이를 위해 HTTP 통신을 사용하게 된다. HTTP 통신을 위해 JS에서 사용되는 Ajax, Axios, fetch를 알아보자. 여기서는 통신 방법이나 사용법은 다루지 않을 예정이다. 통신 종류의 차이점에 대해서만 다룰 예정이다. ❓ Ajax (Asynchronous JavaScript And XML) Ajax는 빠르게 동작하는 동적인 웹 페이지를 만들기 위한 개발 기법이다. 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해준다. ❓ XMLHttpRequest 객체 Ajax의 가장 핵심적인 구성 요소는 바로 XMLHttpRequest 객체이다. Aj..

✏️ JS에서 Stack. Queue의 시간 복잡도 흔히 알고있는 stack, queue를 JS에서 사용하려고 할 때, 보통 다음과 같이 사용한다. const stack = []; stack.push(1); stack.push(2); console.log(stack[stack.length - 1]); stack.pop(); const queue = []; queue.push(1); queue.push(2); console.log(queue[queue.length - 1]); queue.shift(); Stack의 경우 psuh, pop을 사용하고, Queue의 경우 push, shift을 사용한다. 하지만 최근에 알게 된 사실인데, shift 메소드의 경우 최악일때는 O(n)의 복잡도를 가진다. (pus..

💡 간단한 개인 TodoList 사이트를 만든다고 가정하자. 하루마다 해야 할 목록을 어떻게 웹 브라우저가 닫혀도 저장할 수 있을까? DB만이 답일까?... No! Cookie와 Local Storage를 활용하면 된다.! 1) 🍪 Cookie 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버를 통해 인터넷 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 일컫는다. 쇼핑몰 사이트를 방문하여 이것저것 보았을때, 하단에 최근 본 상품이라는 것을 본 적이 있을 것이다. 또한 팝업창에 오늘 하루 안보기 체크와 같은 정보들은 모두 쿠키에 저장되어 관리된다. 개념은 이정도로만 간단하게 설명하고 그럼 JS에서는 어떻게 Cookie를 사용하고..

✍ 목차 프로그래밍 패러다임 JS 프로토타입 이벤트 루프 ✏️ [프로그래밍 패러다임] 프로그래밍 패러다임은 프로그래머에게 프로그래밍의 관점을 갖게 하고 코드를 어떻게 작성할지 결정하는 역할을 한다. 프로그래밍 패러다임은 크게 아래와 같이 분류된다. 명령형 프로그래밍 : 무엇(what)을 하는 것 보다 어떻게(how) 해야 하는지를 설명하는 방식 절차지향 프로그래밍 : 수행되어야 할 연속적인 계산 과정 (C, C++) 객체지향 프로그래밍 : 객체들의 집합으로 프로그램의 상호작용을 표현 (C++, JAVA) 선언형 프로그래밍 : 어떻게(how) 해야 하는지보다 무엇(what)을 할 것인지 설명하는 방식 함수형 프로그래밍 : 순수 함수를 조합하고 소프트웨어를 만드는 방식 (클로저, 리스프) 위의 말만 보면 무..

✍ 목차 JS탄생 배경 브라우저 접속 시 네트워크 과정 http vs https 브라우저 동작 원리 변수선언(var, let, const) 스코프(scope)와 클로저(closure) JS에서의 메모리 관리 ✏️ JS탄생 배경 1995년 당시 웹브라우저 시장은 넷스케이프 사가 지배하고 있었다. 이 당시 웹은 변화하지 않는 정적인 화면으로만 꾸며진 html 파일에 불가 했다. 넷스케이프 사는 동적인 자료의 제공을 위해 프로그래밍 언어를 브라우저에 내장하기로 결졍했다. 이때 탄생한 것이 Brendan Erich(브랜든 아이크)이 만든 "JavaScript" 자바스크립트 이다. tmi) 초기 명칭은 "Mocha" 였다. 이후 "LiveScript"로 바뀌었고 이후 Java의 유명세를 이용해 최종적으로 "Jav..

❗❗ CORS는 모르면 웹 개발자가 아니다! 실제 전기차관련 프로젝트 수행시 접했던 CORS 문제를 접하고 해결하면서 작성한 글입니다.! 1. 웹 개발자 “파트로”는 전기차량에 관심을 가지게 됐다. 전기차량에 관한 정보를 웹사이트에 띄우기로 했다. 2. 프론트 작업으로 레이아웃이 완성이 되었다. 이제 전기차 정보를 가지고 오기 위해 (프론트에서) 공공데이터 포털에서 전기차 데이터를 요청해서 받았다.! 3. 근데 다음과 같은 매운맛을 보게 되었다.! 하지만 위와 같은 문구로 오류 메세지를 반환해줬다. (처음보는 에러라 많이 당황했다...) 에러에서 'CORS' 와 'Access-Control-Allow-Origin' 라는 문구를 볼 수 있다. 이와 관련해서 다뤄보자. 💡핵심만 먼저 말하면 요청한 도메인(l..