본문 바로가기

Javascript

(13)

[Javascript] 인증과 인가, 암호화, jwt (flask, bcrypt) 회원가입과 로그인은 알면 알수록 짜릿하다. 실생활에서 겁나 아무생각 없이 쓰고 있는 별거 아닌 기능인 거 같지만 사용자의 정보가 들어가기 때문에 매우매우 중요한거 같다. 그래서 이번에 제대로 알아보려한다. 관련 문서를 보고 이해를 바탕으로 정리하였습니다. 틀릴 수도 있으니 지적해주시면 겸허히 받아들이도록 하겠습니다. 회원가입과 로그인을 알아보기 전에 인증과 인가에 대해 먼저 알아보자 1. 인증 Authentication 인증은 사용자가 누구인지 확인하는 절차다. 회원가입과 로그인이 대표적인 예이다. 인증의 보안을 강화하기 위해서 내가 한 방법은 1. 회원가입시 bcrypt로 사용자 정보 암호화하기 2. 로그인 시 회원가입된 비번을 복호화해서 확인하는 것이 아닌 로그인 시 비밀번호를 암호화해서 확인하기 3..

[Javascipt] 화살표 함수 => (1/30) 화살표 함수 (Arrow Function) 의 선언 화살표 함수는 function 키워드 대신 화살표를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있따. 하지만, 모든 경우 화살표 함수를 사용할 수 있는 것은 아니다. 화살표 함수의 기본 문법은 아래오 같다. // 매개변수 지정 방법 () => { ... } // 매개변수가 없을 경우 x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다. (x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다. // 함수 몸체 지정 방법 x => { return x * x } // single line block x => x * x // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로..

[Javascript] onclick event(인라인 이벤트, eventlistener, onclick 차이점) hmtl의 버튼의 클릭을 감지하는 방법은 여러가지가 있다. 1. html에서 온클릭함수 주기 ex) 2. js에서 eventlistener 3. js 온클릭함수 주기 이렇게 세종류가 있다. (더 있다. 그러나 이거를 제일 많이 쓰는 것 같다. 그러니 이거만 알아보자) 리액트를 사용하던 나로써는 1번 방법이 가장 눈에 익고 손에 익어서 많이 사용했다. 그러나 오늘 onclick을 사용했는데 이벤트가 동작을 하지 않았다. 구글링을 통해 문제와 해결방법 알았다 !!!! 그걸 여기에 적어 놓을 거다 ! 예를 들어 보즈았!!!!!!!!!!!!!!!!!!!!!!! 1. js에 onclick 이벤트 주기 show 잘 작동한다. 2. EventListener show 1번과 아주 유사하다. 2번또한 1번처럼 아주 잘 ..

[Javascript] DOM (문서 객체 모델:Document Object Model) (1/29) 문서 객체 모델 DOM(Document Object Model) 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 잇는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉, 모든 요소와 요소의 attribute, text를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며, 변경된 DOM은 렌더링에 반영된다. 웹 문서의 동적 변경을 위해 DOM은 프로그래밍 언어가 자신에 접근하고 수정할 수 있는 방법을 제공하는데, 일반적으로..

[Javascript] 자바스크립트 메소드, 프로퍼티 (1/28) 배열 고차 함수 (Array Higher order Function) 고차 함수는 함수를 인자로 전달받거나 함수를 결과로 반환하는 함수를 말한다. 즉, 고차함수는 인자로 받은 함수를 필요한 시점에 호출하거나 클로저를 생성하여 반환한다. 자바스크립트의 함수는 일급 객체이므로 값처럼 인자로 전달할 수 있으며 반환할 수 있다. // 함수를 인자로 전달받고 함수를 반환하는 고차 함수 function makeCounter(predicate) { // 자유 변수. num의 상태는 유지되어야 한다. let num = 0; // 클로저. num의 상태를 유지한다. return function () { // predicate는 자유 변수 num의 상태를 변화시킨다. num = predicate(num); return n..

[Javascript] 다른 언어 배열들과의 차이점, 장단점 (1/28) 오매 겁나 밀렷다.,,,, 빨리 정리하고 잠을 청하도록 하자 ,,,!!! 자바스크립트 배열은 배열이 아니다. 일반적으로 배열이라는 자료 구조의 개념은 동일한 크기의 메모리 공간이 빈틈없이 연속적으로 나열된 자료 구조를 말한다. 즉, 배열의 요소는 하나의 타입으로 통일되어 있으며 서로 연속적으로 인접해 있다. 이러한 배열을 밀집 배열(dense array) 이라 한다. 배열은 인덱스를 통해 효율적으로 요소에 접근할 수 있다. 하지만, 정렬되지 않은 배열에서 특정한 값을 탐색하는 경우, 모든 배열 요소를 처음부터 값을 발견할 때까지 차례대로 탐색(선형 탐색)해야한다. 이 때, 시간 복잡도는 O(n)이다. 자바스크립트는 일반적인 배열과 다르다. 즉, 배열의 요소를 위한 각각의 메모리 공간은 동일한 크기를 갖지..

[Javascript] 배열 기초 + 프로퍼티 (1/27) 배열의 생성 배열 리터럴 0개 이상의 값을 쉼표로 구분하여 대괄호로 묶는다. 첫번째 값은 인덱스 '0'으로 읽을 수 있다. 존재하지 않는 요소에 접근하면 undefined를 반환한다. const arr = []; console.log(arr[1]); //undefined const arr = ['zero', 'one']; console.log(arr[1]); // 'one' console.log(typeof arr); //object 배열 리터럴은 객체 리터럴과 달리 프로퍼티명이 없고 각 요소의 값만이 존재한다. 객체는 프로퍼티 값에 접근하기 위해 대괄호 표기법 또는 마침표 표기법을 사용하며 프로퍼티명을 키로 사용한다. 배열은 요소에 접근하기 위해 대괄호 표기법만을 사용하며 대괄호 내에 접근하고자 하는 ..

[Javascript] String 객체 (1/27) String 객체 String 객체는 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공하는 래퍼(wrapper)객체이다. 변수 또는 객체 프로퍼티가 문자열을 값으로 가지고 있다면 String 객체의 별도 생성없이 String객체의 프로퍼티와 메소드를 사용할 수 있다. 원시 타입이 wrapper 객체의 메소드를 사용할 수 있는 이유 -> 원시 타입으로 프로퍼티나 메소드를 호출할 때 원시 타입과 연관 wrapper 객체로 일시적으로 변환되어 프로토 타입 객체를 공유하게 되기 때문이다. String Constructor String 객체는 Sring 생성자 함수를 통해 생성할 수 있다. 이때, 전달된 인자는 모두 문자열로 변환된다. let strObj = new String('Lee'); cons..

이전 1 2 다음

티스토리툴바