전체 글 133

#5 - Passport를 사용해 User Authentication하기

passport? 여권? 로그인 기능(+소셜 로그인 기능)을 만드는 데 도움을 주는 Node.js의 미들웨어! 사용자의 정보는 브라우저의 쿠키 안에 저장되어있는데, passport는 그것을 가져와서 user객체를 만들고 requset객체 안에 넣어준다. 그러면 우리는 그 user객체와 passport를 가지고 뚝딱뚝딱 로그인 기능을 만들 수 있는 것이다. 사용자가 로그인을 할 때는 두 가지 종류가 있다. 하나는 아이디와 비밀번호를 사용해서 로그인하는 것이고 (해당 사이트의 아이디, 비밀번호) 다른 하나는 구글, 페이스북, 깃허브와 같은 다른 소셜의 정보를 가지고 로그인하는 것이다. passport에서는 첫번째 방식을 "local" 전략이라고 부르고 두 번째 방식은 "google", "facebook", ..

[CSS] flex

기본적인 HTML 구조 helloflex abc helloflex Flex는 여러가지 속성들을 가지고 있다. 하지만, 크게 보면 컨테이너에 적용하는 속성 아이템에 적용하는 속성 으로 나눌 수 있다. 컨테이너에 적용하는 속성 display: flex; .container { display: flex; /* display: inline-flex; */ } item들의 width는 자신이 가진 컨텐츠의 크기만큼 커지고, height은 부모인 container의 높이 만큼 커진다. inline-flex;는 container가 inline-box처럼 동작하게 할 수 있다. flex-direction .container { flex-direction: row; /* flex-direction: column; */ ..

WEB🔨/CSS 2020.06.12

[JavaScript] JS Flow - 함수 선언문과 함수 표현식

Javascript 핵심 개념 알아보기 - JS Flow - 인프런 ES6 이전까지의 자바스크립트 전체를 관통하는 핵심 개념들에 대하여, 전반적인 흐름을 살펴보는 강의입니다. 초급 웹 개발 프로그래밍 언어 Javascript 알고리즘 온라인 강의 핵심개념을 알아보는 www.inflearn.com 함수 선언문과 함수 표현식의 차이점 함수 선언문과 함수 표현식의 차이점은 할당을 하느냐 하지 않느냐 이다. //함수선언문 function a() { return 'a'; } //기명 함수표현식 var b = function bb() { return 'bb'; } //익명 함수표현식 //변수 c선언 //익명함수 선언 //변수 c에 익명함수를 할당 var c = function() { return 'c'; } 함수 ..

[JavaScript] JS Flow - 호이스팅(hoisting)

Javascript 핵심 개념 알아보기 - JS Flow - 인프런 ES6 이전까지의 자바스크립트 전체를 관통하는 핵심 개념들에 대하여, 전반적인 흐름을 살펴보는 강의입니다. 초급 웹 개발 프로그래밍 언어 Javascript 알고리즘 온라인 강의 핵심개념을 알아보는 www.inflearn.com 정의 변수 '선언'와 함수 '선언'을 끌어 올리는 것을 hoisting이라고 한다. 자바스크립트 엔진은 코드를 실행하기 전에 변수 선언과 함수 선언을 위로 끌어올린다. 그래서 아래와 같이 코드를 작성해도 오류가 발생하지 않는다. console.log(a()); console.log(b()); console.log(c()); function a() { return 'a'; } var b = function bb()..

성공의 법칙#2

5장 솔선수범과 리더십 솔선수범: 앞장서 모범을 보임 이 강좌의 목적은 16장을 총망라해 15가지 자질을 개발하는 데 도움을 주려는 것이고, 그중에서도 가장 중요한 자질 가운데 하나가 바로 이 장, 즉 솔선수범의 장이다. -232p 당신은 동료 혹은 다른 사람에게 이익이 되는 일을 함으로써 이 솔선수범의 정신을 기를 수 있을 것이다. -240p 다른 사람을 믿게 하기 위해 어떤 구절을 반복해서 말하다 보면 자기 자신도 그것을 믿게 된다. -240p 바크 소령의 연설 리더십은 무엇으로 구성되어 있는가? 첫 번째 요소, 자신감 자신감은 첫째, 정확한 지식으로부터, 둘째, 그 지식을 전파할 수 있는 능력으로부터, 셋째, 당신을 따르는 타인에 대한 우월감으로부터 생겨납니다. -251p 두 번째 요소, 도덕적 우..

독서 2020.06.12

태그해부학 <img>와 이미지포맷

정의와 사용방법 image의 줄임말로 말 그대로 사진을 넣을 때 사용하는 태그이다. 필수 속성으로는 사진의 위치를 넣는 src(source), 대체 텍스트를 넣는 alt(alternate)가 있다. alt속성은 해당 이미지가 별 의미 없는 이미지라면 값을 비워놓아도 된다. 하지만 웹 표준을 위해 꼭 속성은 써줘야 한다. 그리고 alt속성은 아래와 같은 상황이어서 이미지를 불러올 수 없을 때 나타나는 텍스트이다. 이미지를 보지 못하는 시각장애인 분들을 위해 스크린리더가 읽어주는 텍스트이기도 하다. src 속성이 비었거나 null임. src의 URL이 현재 사용자가 보는 페이지의 URL과 같음. 지정한 이미지가 손상돼 불러올 수 없음. 이미지의 메타데이터가 손상돼 원본 크기를 알아낼 수 없고, 요소의 속성에..

WEB🔨/HTML 2020.06.11

태그해부학 <ol>, <ul>, <li>

정의 및 사용방법 ol은 ordered list ul은 unordered list li는 list item의 약자이다. 목록을 나타내고 싶을 때 사용하는 태그이다. 순서가 중요한 목록이라면 을 사용하고, 중요하지 않다면 을 사용한다. 예를 들어, 조리법의 목록은 순서가 중요하므로 을 사용한다. 그리고 필요한 쟤료는 순서가 중요하지 않으므로 을 사용한다. 과 의 자식으로는 만 올 수 있다. 속성은 reversed, start, type이 존재한다. type속성을 사용해서 숫자를 로마숫자로 변경할 수도 있다. type의 값으로는 1, a, A, i, I가 있다. 위와 같이 중첩해서 사용할 수도 있다.

WEB🔨/HTML 2020.06.11