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

✏️ 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..

CSS의 꽃 레이아웃 & 포지셔닝의 주요 정렬에 대해서 작성해보겠습니다. 이렇게 쉽고 간단한걸 왜 블로그로 작성하냐고 생각하실수도 있겠지만 설명은 뒤에 언급하겠습니다. * 여기서 레이아웃이나 포지셔닝을 "꾸민다"라는 말로 지칭하겠습니다! 작성 계기 : html + 바닐라 js로 개발하던 시절에는 필요한 레이아웃 구조를 그때 마다 찾아서 사용하곤 했습니다. 하지만 리액트를 접하면서 현재 컴포넌트에서 하위컴포넌트를 꾸며야할때도 있고 또한 map함수를 이용해 여러 하위 컴포넌트들을 꾸미고 겹치고 할 일이 많아졌습니다. 이러면서 컴포넌트안에 컴포넌트가 있는 형식이라 구조가 매번 꼬여 개발보다 꾸미는데 시간이 훨씬 많이 걸렸습니다. 그래서 이참에 블로그 포스팅을 통해 정리하는 시간을 가져보고 또 나중에 이런 문제..