본문 바로가기

개발/FRONT21

data attribute와 dataset 노드를 웹 서버로 사용하는 경우, 클라이언트(프런트엔드)와 빈번하게 데이터를 주고받게 됩니다. 이때 서버에서 보내준 데이터를 프런트엔드 어디에 넣어야 할지 고민이 됩니다. 프런트엔드에 데이터를 내려보낼 때 첫 번째로 고려해야 할 점은 보안입니다. 클라이언트를 믿지 말라는 말이 있을 정도로 프런트엔드에 민감한 데이터를 내려보내는 것은 실수입니다. 비밀번호 같은 건 절대 내려보내지 않도록 합시다. 보안과 관련이 없는 데이터들은 자유롭게 프런트엔드로 보내도 됩니다. 자바스크립트 변수에 저장해도 되지만 HTML5에도 HTML과 관련된 데이터를 저장하는 공식적인 방법이 있습니다. 바로 data attribute입니다. Zero Nero Hero Kero 위와 같이 HTML 태그의 속성으로, data-로 시작하는 .. 2024. 1. 7.
ES2015+(async, await) 지난번 promise에 이어 이번에는 async/await에 대한 포스팅을 하겠습니다. 7. async/await 노드 7.6 버전부터 지원되는 기능입니다. 자바스크립트 스펙은 ES2017입니다. 최신 기능이면서 정말 혁신적인 기능입니다. 특히 노드처럼 비동기프로그래밍을 해야 할 때 도움이 많이 됩니다. 프로미스가 콜백 지옥을 해결했다지만, 여전히 코드가 장황합니다. async/await 문법은 프로미스를사용한 코드를 한 번 더 깔끔하게 줄여줍니다. 프로미스 코드를 다시 한 번 보겠습니다. function findAndSaveUser(Users) { Users.findOne({}) .then((user) => { user.name ='zero'; return user.save(); }) .then((us.. 2024. 1. 7.
ES2015+(Promise) 6. 프로미스 자바스크립트와 노드에서는 주로 비동기 프로그래밍을 합니다. 특히 이벤트 주도 방식 때문에 콜백 함수를 자주 사용합니다. ES2015부터는 자바스크립트와 노드의 API들이 콜백 대신 프로미스(Promise) 기반으로 재구성됩 니다. 그래서 악명 높은 콜백 헬(callback hell)을 극복했다는 평가를 받고 있습니다. 프로미스는 다음과 같은 규칙이 있습니다. 먼저 프로미스 객체를 생성해야합니다. const condition = true; // true면 resolve, false면 reject const promise = new Promise((resolve, reject) => { if (condition) { resolve('성공'); } else { reject('실패'); } });.. 2024. 1. 7.
ES2015+(화살표 함수, 비구조화 할당) 4. 화살표 함수 화살표 함수(arrow function)라는 새로운 함수가 추가되었으며, 기존의 function() {}도 그대로 사용할 수 있습니다. function add1(x, y) { return x + y; } const add2 = (x, y) => { return x + y; }; const add3 = (x, y) => x + y; const add4 = (x, y) => (x + y); function not1(x) { return !x; } const not2 = x => !x; add1, add2, add3, add4는 같은 기능을 하는 함수입니다. 마찬가지로 not1, not2도 같은 기능을 합니다. 화살표 함수에서는 function 선언 대신 = > 기호로 함수를 선언합니다. 또.. 2024. 1. 7.

티스토리툴바