맨 땅에 프론트엔드 개발자 되기

쿠키의 탄생 배경 HTTP는 상태를 계속 유지하지 않는 스테이트리스(Stateless)프로토콜이다. 서버와 클라이언트 간에 리퀘스트와 리스폰스를 교환하는 동안에 상태를 관리하지 않기 때문에 이전에 되돌려준 리스폰스에 대해 기억하지 못한다. 이는 많은 데이터를 매우 빠르고 확실하게 처리하기 위해 설계되었다. 하지만 웹이 진화함에 따라 스테이트리스 특성만으로 처리하기 어려운 일이 증가하게 되었다. 예를 들어, 로그인을 했을 때 다른 페이지로 이동하더라도 로그인 상태를 유지할 필요가 있다. 그러나 페이지를 넘나들 때 즉, 리퀘스트 요청과 리스폰스 결과를 받을 때 로그인 상태를 주고 받지 않으므로, 이러한 스테이트리스의 특성을 보완하기 위해 쿠키(Cookie) 라는 기술이 도입되었다. 쿠키란? 쿠키는 리퀘스트와..

이 글은 기본적인 네트워크 지식을 쌓기 위해 제 방식대로 정리한 글로 오류가 있을 수 있습니다. 오류가 있으면 댓글로 알려주시면 감사하겠습니다 :) 1. www.google.com 을 브라우저 주소창에 친다. 2. 브라우저는 캐싱된 DNS 기록들에서 www.google.com 에 대응되는 IP 주소가 있는지 확인한다. DNS 란? DNS(Domain Name System)은 URL들의 이름과 IP주소를 저장하고 있는 데이터베이스다. 인터넷에 있는 모든 URL들에는 고유의 IP 주소가 지정되어있다. 이 IP 주소를 통해서 해당 웹사이트를 호스팅하고 있는 서버 컴퓨터에 접근을 할 수 있다. (예를 들어, www.google.com의 IP 주소를 알아보기 위해서는 nslookup www.google.com 을..

전개구문 ES6 에 추가된 문법으로 '...' 으로 표시하며, 구조분해할당과 함께 사용할 수 있고, 배열과 객체 등에 할당된 값을 전개해서 사용한다. 참조 자료형과 얕은 복사 & 깊은 복사 - 얕은 복사 참조 자료형에 대한 내용은 이전 게시물에서 다뤘기 때문에 이전 게시물을 참고바란다. 원시 자료형과 참조 자료형 원시 자료형과 참조 자료형 원시 자료형(Primitive Data Type) 원시 자료형은 객체가 아니면서 동시에 메소드도 가지지 않는 자료형을 말하며, 다음의 자료형을 말한다. string, number, bigint, boolean, undefin babycoder05.tistory.com 배열, 객체 등 참조 자료형은 원시 자료형에 비해 메모리 공간을 많이 차지하므로 데이터의 효율적인 관리..

이벤트 바인딩(Event Binding)이란? 바인딩은 '연결하다, 묶다' 라는 뜻으로, 웹페이지 접속 시에 HTML 문서가 로드될 때 JavaScript에 작성된 대로 요소와 이벤트를 연결하는 것을 이벤트 바인딩이라고 한다. 브라우저는 요소와 이벤트를 바인딩하고 있다가 사용자가 요청하는 순간에 이벤트를 발동한다. (클릭, 마우스엔터, 스크롤 등) 이벤트를 바인딩 하는 방법에는 세 가지가 있다. 1. HTML 이벤트 핸들러 HTML 요소의 속성값으로 이벤트를 바인딩하는 방법이다. 클릭 버튼을 클릭하면 doSomething이라는 이벤트가 발동하도록 이벤트를 바인딩한 것이다. HTML 문서에 JavaScript 코드를 작성하는 것은 보안 또는 다양한 이유에서 권장되지 않는 방법이다. 2. DOM 이벤트 핸들..

어떤 일정한 크기의 요소가 반복될 때 그 요소의 내용의 길이가 들쭉날쭉이라면, 내용을 말줄임을 해서 크기를 일정하게 유지하고 싶을 때가 있다. 그럴 때 사용할 수 있는 것이 바로 text-overflow: ellipsis; 이다. 적용하기 전 Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique harum impedit sint possimus minus repellendus repellat? Quae delectus expedita quam ea fugiat quidem itaque minima asperiores? Aliquam magnam unde nihil. Explicabo voluptatem maiores dignissimos ..

Open API 등을 이용해서 프로젝트를 진행할 때, 개인이 발급받은 API키는 Github 등 온라인에 올리지 말아야하기 때문에 환경변수에다 변수를 저장하고 사용한다. Vue Cli 로 생성된 프로젝트에서 환경변수를 사용하고 싶으면 아래의 절차를 따르면 된다. 먼저, 프로젝트 최상위 루트에서 .env.local 이라는 이름의 파일을 만든다. .env.local 파일은 .env를 덮어쓰는 파일로 Vue Cli 로 프로젝트를 생성하면 .gitignore에 자동으로 등록되어져있다. 참고 .env 기본 파일 .env.local env를 덮어쓰는 파일. Test를 제외한 모든 환경에서 로딩됨. .env.development 개발자 환경에서 로딩됨. .env.development.local은 .env.develo..