dada's

웹 환경에서는 반복적으로 사용되는 데이터나 정보를 종류와 특성에 맞게 저장하고 재활용하기 위해 여러 방식을 사용한다 웹 생태계를 파악하는데 도움이 되는 쿠키, 세션, 토큰, 캐시, CDN까지 알아보자 1. 쿠키🍪 쿠키는 크롬이나 사파리같은 브라우저에 저장되는 작은 텍스트 조각이다. 브라우저는 사용자의 컴퓨터에 설치되어 있는 소프트웨어이므로 쿠키는 사용자가 가지고 있는 정보라고 할 수 있다. 그러나 쿠키는 당사자뿐만 아니라 제 3자도 조회할 수 있기 때문에 개인정보나 보안상 민감한 정보를 저장하는 데는 적합하지 않다. 따라서 남에게 보여지거나 사용자에 의해 조작되어도 크게 문제가 없는 정보를 브라우저에 저장함으로 웹사이트 이용을 편리하게 만들어주는 것이 쿠키이다 예) 검색기록, 다크모드, 자주보는 웹툰 목..

AJAX 프론트엔드에서 javascript를 이용해 서버에 여러가지 요청을 할 수 있는 문법같은 것이다 장점은 새로고침 없이도 서버에 몰래 요청을 할 수 있다 그래서 새로고침없이 스무스한 사이트를 만들고 싶으면 많은 요청을 ajax문법을 이용해 처리하게된다

1. node.js 최신버전 설치하기 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. github에서 repositories 만들고 클론하거나 pc에 작업폴더 만들고 에디터로 오픈 3. vue.js 설치하기 에디터에서 터미널을 열고 npm install -g @vue/cli 입력 입력 후에 Vue 3버전을 방향키+엔터로 선택 만약에 안되고 에러나면 node.js가 이상하게 설치되어 있을 가능성이 있다 근데 npm 하는것 부터 에러가 나면 yarn 구글검색해서 설치하고 윈도우 재시작 후에 다시 yarn global a..

DOM(Document Object Model)에 대한 개념에 대해 알아보자 자바스크립트는 HTML조작에 특화된 언어이다 그런데 어떻게 자바스크립트가 HTML을 조작할까? HTML을 조작하기 위해선 HTML을 자바스크립트가 해석할 수 있도록 정리가 필요하다 그래서 자바스크립트는 HTML을 쉽게 해석하기 위해 오브젝트(Object)와 비슷한 자료형에 담아서 사용한다 이렇게 HTML자료를 정리한 것을 DOM이라고 한다 브라우저는 HTML을 읽을때 DOM을 생성한다 HTML을 위에서부터 한줄씩 해석을 하는데 HTML보다 위에 HTML을 조작하는 자바스크립트를 작성하면 DOM이 생성되기 전이기 때문에 해석을 못한다. jQuery에서는 HTML파일을 다 읽었는지 알려주는 이벤트 리스너가 있다 => $(docume..

REST API : Representional State Transfer 라는 건데 웹 api를 짤 때 rest를 지켜서 짜면 좋다는 이론이다 REST API는 총 6개의 원칙이 있다 1. Uniform Interface 인터페이스는 일관성이 있어야 한다 - 하나의 url로는 하나의 데이터를 가져와야한다 - 간결하고 예측가능하게 만들어야한다 - url 이름짓기 관습을 잘 따라야한다 2. Client - Server 역할 구분하기 고객은 그냥 url주소만 알면 서버에 있는 자료를 가져다 쓸 수 있어야한다 고객이 서버역할을 하거나 DB를 직접 꺼내게 만들면 안됨 3. Stateless 요청들은 각각 독립적으로 처리되어야한다 요청에 필요한 모든 정보를 실어 보내야 좋다는 뜻이다 4. Cacheable 요청을 ..

일단 post요청을 하기 전에 '/write'라는 url로 들어왔을시 Todo List작성을 할 수 있는 페이지를 하나 만들었다 나는 Bootstrap을 이용해서 만들어줬다 이런식으로 간단한 ui를 만들어 놓고 post요청을 해보자 1. html의 form 태그 셋팅 Todo List SAVE 폼 전송버튼 클릭시 /add라는 경로로 POST요청을 하는 폼이다 form태그 안에 method속성은 이 폼을 GET/POST 중 어떤 요청을 할건지 정하는 부분이다 그리고 action은 어떤 경로로 요청할건지를 정하는 부분이다 마지막으로 input태그마다 name속성을 적용하여 서버에 이게 어떤 input의 데이터인지 알 수 있도록 한다 2. form데이터를 서버로 전송전 라이브러리 설치 일단 데이터들 처리를 쉽..

Node.js node.js를 이해하기 위해서는 자바스크립트가 무엇인지 알아야 한다. 자바스크립트는 html의 조작과 변경, 동적인 사이트를 만들기 위해서 만들어진 언어이다. 여기서 자바스크립트를 동작(해석)하는 것은 브라우저(크롬, 익스, 파이어폭스 등..)의 해석엔진이 한다. 그리고 브라우저 마다 쓰는 엔진이 다르다. 크롬은 V8이라는 해석엔진을 쓰는데 이 엔진을 따로 떼어낸 후 기능을 좀 더 추가해 출시하게 되는데 이것이 Node.js이다. node.js를 만든 이유는 자바스크립트를 브라우저 말고도 다른 환경에서도 자바스크립트를 실행 할 수 있게 도와주기 위함이다. 따라서 node.js는 자바스크립트의 실행창, 실행 환경(런타임)이다. 그래서 node.js가 있다면 브라우저를 키지 않아도 프롬포트나..