Grace's Tech Blog

+ Authentication에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) libertegrace.tistory.com/entry/33-Authentication-Cookie?category=869766 33. Authentication - Cookie 인증(Authentication)을 할 때는 보통 (로그인을 통해) user를 판별한다. 이때 Session, Cookie가 필요하다고 했는데 왜 필요한 것일까? 로그인 한 후 새로고침(새로운 요청)을 할 때마다 초기화된다면? 그�� libertegrace.tistory.com 앞서서 "서버는 브라우저에게 응답(response)의 header에 set-cookie를 통해 '키=값..

인증(Authentication)을 할 때는 보통 (로그인을 통해) user를 판별한다. 이때 Session, Cookie가 필요하다고 했는데 왜 필요한 것일까? 로그인 한 후 새로고침(새로운 요청)을 할 때마다 초기화된다면? 그래서 로그아웃 된다면? 계속해서 아이디와 비밀번호를 쳐야할 것이다. 그런데 현재 우리가 사용하는 웹사이트에서 그렇지않은 이유는 클라이언트가 서버에게 사용자(내)가 누구인지 지속적으로 알려주기 때문이고, 새로운 요청을 하고 응답을 할 때 서버는 쿠키라는 것을 같이 보내 준다. 정리하면, 새로운 요청/응답이 오갈때마다 사용자(내)가 누구인지 지속적으로 기억하는 방법은 처음에 서버는 클라이언트에게 요청자(사용자)를 추적할 만한 정보를 쿠키로 만들어서 브라우저로 보내고 (우리가 코딩해야..

Client의 요청의 단점은 하나의 Server가 여러 Client를 구분할 줄 모른다는 것이다. (IP 주소와 브라우저 정보는 알 수 있을것이다. 그래도 '누가'에 대한 정보는 더 까다로운데, 여러 컴퓨터가 공통 IP 주소를 가지거나 한 컴퓨터를 여러 사람이 사용할 수도 있기 때문이다. ) 이렇게 (로그인을 통해) user를 판별하는데 필요한 것이 Session, Cookie라고 할 수 있다. 이번 sprint에서는 인증에 대해 알아본 후, Cookie, Session을 통해 회원 가입 및 로그인 기능을 구현해보았다. 1. 인증과 권한의 개념 (Authentication & Authorization) 인증(Authentication)은 요청이 왔을 때 그 요청을 보낸 사람이 누구인지를 증명하고, 그 요..

+ Sequelize에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 1. ORM이란 Object-Relational Mapping의 약자로 Object는 Javascript상의 그 '객체'가 맞다. 그리고 Relational은 Relational DB(관계형 DB)를 말한다. 이 그림과 같이 ORM을 통해 관계형 DB의 entity, record 들에 접근할 때 마치 Javascript에 있는 객체 혹은 classs를 다루듯이 취급 할 수 있다. 즉, 관계형 DB와 Javascript의 객체 사이의 통역사 역할을 담당하는 M-V-C 중 Model을 기술하는 도구이다. 2. ORM을 사용하는 이유 우리가 사용한는 객체 지향 프로그래..

이번 sprint에서는 대표적인 관계형 데이터베이스관리 시스템(RDBMS)인 MySQL을 이용하여 Schema를 설계하고 SQL을 사용하여 데이터를 영속성있게(persisstently)저장하는 방법을 배우는 것이 목표였다. 그래서 앞에서는 데이터베이스 시스템 구조 및 기본 개념, 쿼리문 작성 등에 대해서 정리해보았다. 여기서는 본격적으로 데이터베이스를 서버와 연결하고 영속적인 데이터를 요청하고 받아오는 방법에 대해서 배운 것을 정리해보고자 한다. 1. 클라이언트, 서버, 데이터베이스의 관계 2. 필요한 스키마를 디자인하고 작성하기 Client의 Browser의 화면은 이런식이고, 기존의 in-memory방식으로 데이터를 저장했을 때의 방식은 {id:1, username:'grace', text:'hell..

이번 sprint에서는 대표적인 관계형 데이터베이스관리 시스템(RDBMS)인 MySQL을 이용하여 Schema를 설계하고 SQL을 사용하여 데이터를 영속성있게(persisstently)저장하는 방법을 배우는 것이 목표였다. 0. 데이터베이스가 필요한 이유 지난 여러 sprint를 진행해 오면서는 서버를 작성하고, 생성된 데이터들은 in-memory상에 저장하여서 클라이언트에서 HTTP를 이용하여 자원(데이터)를 요청하면 서버에 이 데이터를 돌려주는 방식으로 진행했었다. (*in-memory: 서버가 켜져 있을 동안에만 변수에 할당된 값을 통해 저장하는 것) 그 다음에는 node.js의 fs모듈 중 readFfile이나 writeFile method를 이용하여 정보를 파일로 저장하기도 했다. 이 두 방식의..

+ Redux에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞선 27. Redux - Redux의 작동방식2. React-Redux를 통해 상태 사용하기 을 통해 1. Presentational 컴포넌트, Container 컴포넌트 로 구분하고 2. Container 컴포넌트의 Props에 Connect( ) 함수를 사용하여 State값을 연결시켜주고 나면, 해당 컴포넌트는 Store로부터 State를 사용할 수 있게 되는 것 까지 정리해보았다. 이제 Store로부터 State를 사용할 수 있도록 Props에 받아오는 것까지는 했으니, State를 변경하고,그 변경된 것이 화면 UI에 나타나는 것을 할 차례이다. 다시말해 "리듀..

지금까지 1. State와 Store의 역할을 알아보고 2. Action, Reducer을 정의하여서 스토어에 해당 상태를 저장할 수 잇도록 리듀서와 스토어를 연결하는것 까지 알아보았다. 여기서는 Redux의 Store에 있는 State를 React를 통해 사용하는 것에 대해 배운 것을 정리해보도록 하겠다. https://ko.redux.js.org/basics/usage-with-react/ React와 함께 사용하기 | Redux 기초 강좌 > React와 함께 사용하기: How to use Redux with React components ko.redux.js.org 1. Redux를 도입한 React component의 한계와 Presentational 컴포넌트와 Container 컴포넌트 분리 ..

+ Redux에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) 앞서서 Redux에서 사용하는 Action, Store 그리고 Reducer의 의미와 특징을 살펴보았다. 여기서는 Redux을 배우고, 활용할 때 등장하는 State, Store, reducer,action등의 역할과 서로 어떻게 연관되어 작동하게 되는지를 정리해보고자 한다. 1. State(상태) React를 배울 때 처음 접한 State는 컴포넌트 내부적을 사용하는 데이터의 집합이다. 유튜브라면, 상태는 재생되고 있는 비디오 정보, 화면 비디오 리스트에 출력되는 비디오들의 정보, 다크모드 여부, 등이 될 수 있다. 앞선 유튜브 클론 코딩을 통해 state는 어떤 ev..

+ Redux에 대해 공부한 것을 정리한 것입니다. 배우는 중이라 잘못된 내용이 있을 수 있으며 계속해서 보완해 나갈 것입니다. :)) Intro & Redux란 앞서서 22-24번 포스팅을 통해 React를 배웠고, React Sprint -유튜브 클론 코딩을 진행했다. 아래는 미로 에서 제가 짠 유튜브 클론 코딩의 컴포넌트 구성을 나타낸 것이다. (컴포넌트 시각화를 트리 구조로 짜는 것이 편하다는 것을 몰랐다는 것을 감안하더라도 너무 복잡..) 실제로 유튜브 클론 코딩을 하면서 가장 많은 시간을 쓰고 고민하고 힘들었던 점이 'state 끌어올리기'였다. 한 예를 들면, App에 있는 state인 currentVideo와 함수인 handleVideoListEntryTitleClick을 props형태로 ..