728x90 반응형 Learn to Code62 [TIL] JWT 토큰 만들기, 토큰 유효기간 설정, 토큰 인증하기 (jsonwebtoken) 클라이언트가 웹 서비스를 이용할 땐 서버와 다양한 통신을 주고 받는다. 서버가 클라이언트로부터 권한이 필요한 요청을 받았을 때, 이 요청을 요구한 유저가 그러한 권한이 있는지 등을 확인할 때 쓰일 수 있는 것이 바로 토큰(token)이다. 토큰을 사용한 인증은 세션 기반 인증보다 서버나 DB에 행해지는 번거로움이 줄어들고, 클라이언트에서 인증 정보를 보관하기 때문에 보다 간편하다는 장점이 있다. JWT(JASON Web Token)는 여러 토큰 방식들 중 가장 많이 사용된다. (홈페이지: https://jwt.io/) 홈페이지에 방문해보면 상단 메뉴에 Libraries 탭이 있는데, 여기서 각종 언어별 라이브러리를 확인할 수 있다. 이번에 인증 관련 스프린트 공부를 하며 사용한 jsonwebtoken도 .. 2021. 5. 28. [Database] (개념) 관계형 데이터베이스, NoSQL, NoSQL 종류 데이터베이스(database)란 체계적으로 정리된 데이터의 집합을 뜻한다. 컴퓨터공학에선, 데이터베이스의 종류에 따라 데이터베이스 관리 시스템을 분류한다. 이러한 데이터베이스의 종류는 크게 두가지로 나눌 수 있는데, 바로 관계형 데이터베이스(relational database)와 주로 NoSQL이라고 불리는 비관계형 데이터베이스(non-relational database)가 이에 해당된다. 1. 관계형 데이터베이스(Relational database) 1980년대 대세로 떠오른 관계형 데이터베이스는 행과 열로 이루어진 테이블 형태로 데이터를 저장한다. 테이블 형태로 저장된 상태에선, 행과 열의 조합에 따라 데이터의 식별과 데이터로의 접근이 다른 데이터와의 관계 속에서 이루어지기 때문에 관계형 데이터라고 .. 2021. 5. 25. [React] React hooks 연습: 간단한 To-Do 리스트 리액트를 배운 뒤 모두가 한번쯤은 만들어본다는 To-do list를 만들었다. 다양한 hooks를 연습하고 싶었지만 아무래도 to-do 리스트는 많은 기능이 없기 때문에 useState()만을 사용하게 되었다. 최상단 App 컴포넌트 아래에 List 컴포넌트, 그리고 그 안에 Todo 작성 Form과 To-do 리스트만 있는 아주 콤팩트한 앱이다. 요 to-do list의 간단한 기능은 아래와 같다. 최상단 컴포넌트 최상단 컴포넌트인 App에 초기값으로 initialTodos를 만들었다. 각 todo엔 key값으로 써줄 id와 todo 내용, 그리고 완료 여부를 표시하는 completed만 있다. import './App.css' import List from './List' import { useSta.. 2021. 5. 18. Redux 기본 개념 정리 Redux란? 프로젝트를 만들다 보면 아주 다양한 상태들이 필요하게 된다. 상태는 다크모드/라이트모드 라던가 언어 선택과 같이 전역(global)에 영향을 끼치는 것들도 있고, 특정 컴포넌트 안에서만 관리되는 로컬 상태들도 있다. 앱의 상태는 유저와의 인터렉션 등을 통해 계속 변하게 되는데, 이 상태를 올바르게 관리하는 것은 당연히 중요한 일이다. 그러나 이렇게 올바르게 관리하고 싶다라는 긍정적인 마음가짐과는 다르게 프로젝트의 규모가 어느 정도 갖춰질수록 상태 관리는 어려워진다. 리덕스는 이와 같은 경우에 사용하는 상태(state) 관리 라이브러리이며, 복잡한 구조 속에서 상태 관리를 훨씬 쉽게 만들어주는 역할을 한다. 상태 관리 툴의 역할 연습삼아 만들어보는 리액트 to-do list 등과 같은 작은 .. 2021. 5. 16. [React] React Router 아주 쉽게 연습하기! 요즘 코드스테이츠 immersive course에서 열심히 리액트를 배웠다. 그와 함께 배운 react-router-dom을 연습하고자 연습 페이지를 만들었다. 공식 문서를 참고하면서 연습하였으며, 아래 각 컴포넌트에 대한 설명들은 모두 공식 문서를 기반으로 작성한 것이다. (공식 문서: 링크) 시작! 아주 새로운 빈 폴더로부터 시작할 것이기 때문에 새로운 디렉토리를 만들고 create-react-app으로 리액트 프로젝트를 시작한다. npx create-react-app . react-rounter-dom도 받아준다. package json에도 추가해준다. npm install react-router-dom --save 사용할 아이들을 import 해주어야 한다. import { BrowserRoute.. 2021. 5. 16. [JS] React에서 배열인 state에 아이템을 추가하고 싶다면!? (concat()과 Spread Syntax) 코드스테이츠의 커리큘럼에서 드디어 프론트엔드의 꽃이라는 리액트에 돌입했다! 이전에 Pre course에서 만들었던 Twittler 앱을 리액트로 바꾸어 만들어보는 작업을 어제 진행했다. 2021.03.29 - [Learn to Code] - 코드스테이츠 Pre Course 회고 및 4개의 웹앱 과제 결과물 UI 요소가 굉장히 적은 단순한 앱이지만 그래도 나름 단일 책임 원칙(Single responsibility principle)을 머리속에 떠올리며 컴포넌트 단위로 코드를 짜나갔다. 그러던 중, 공식문서를 탐독했지만 찾을 수 없던 방법이 하나 있었는데, 배열인 state에 업데이트를 하려면 어떻게 해야 가장 잘 했다는 소문이 날까??!에 관한 것이었다. 그래서 열심히 구글링을 했고, 역시나 많은 선구자.. 2021. 5. 7. [TIL] node.js 미니 서버 만들기 2009년에 캘리포니아 출신 개발자 Ryan Dahl에 의해 개발된 node.js는 V8 엔진으로 빌드된 자바스크립트 런타임이다. node.js로 인해 자바스크립트는 웹 브라우저를 벗어난 환경에서도 사용이 가능하게 되었다. 이벤트 기반의 node.js는 non-blocking 특성으로 인해 속도가 빠르다는 장점이 있고, I/O 모델이라는 특성이 있다. node.js를 다운로드하면 기본적으로 함께 받아지는 모듈들이 있는데, 이중 http 모듈을 사용하여 간단한 미니 서버를 만들 수 있다. 이번에 새로운 과제로 만들어본 것은 웹앱에서 POST 요청을 받은 뒤 응답을 리턴해주는 간단한 미니 서버였다. 지금 원하는 것은 프론트엔드 개발자가 되는 것이지만, 서버 사이드도 굉장히 흥미롭다는 것을 처음 알게 되었다... 2021. 4. 30. [TIL] 코드스테이츠 chatterbox (client) 과제 (ongoing) 코드스테이츠를 시작하고 이제 두 달이 지났다. 처음 한달은 Pre-course였고, 두 번째 달 부터는 Immersive course에 참여하고 있다. Immersive Course에서의 첫 한달은 Pre에서는 다루지 않았던 더욱 다양한 내용들을 다루고 있는데, 이번에 처음으로 서버와 통신을 하는 과제를 만들게 되었다. 아직 Client 쪽에서의 요청을 연습하고 있는 중이어서, 서버는 직접 구축한 것이 아닌 AWS에 미리 구축되어 있는 코드스테이츠의 서버를 사용하였다. 이번 채팅앱에서 구현한 기능들은 아래와 같다: - 메시지 작성 및 POST 요청 - GET 요청 후 화면 렌더링 - 채팅방 입장 및 입장한 채팅방에 맞는 채팅 렌더링 - 새로운 채팅방 만들기 - 채팅창 지우기 (Clear Messages .. 2021. 4. 29. [JS] 자바스크립트로 구현하는 그래프(Graph), 인접행렬(Adjacency Matrix), 인접리스트(Adjacency List) 컴퓨터 공학에서 말하는 그래프(graph)란 이산수학의 그래프 이론의 단방향 그래프(directed graph) 및 무향 그래프(undirected graph)의 개념을 적용하기 위해 가져온 추상적인 데이터 타입이다(출처). 이산수학(discrete mathematics)는 '이산적인' 수학 구조에 대해 연구하는 학문인데, '이산적'과 'discrete'의 사전적 의미는 다음과 같다 (출처). 이산적: 관·명 정보·통신 서로 단절되는. 또는 그런 것. 연속되는 것과 반대되는 것으로 0, 1, 2, 3 따위와 같이 서로 단절되는 값들을 이르는 말이다. discrete: (같은 종류의 다른 것들과) 별개의 (=seperate) 이산수학은 서로 단절되어 있는, 또는 서로 구분되는 값을 가지는 대상들을 연구하는.. 2021. 4. 23. [JS] num++과 ++num의 차이 코드들을 들여다보다가, 우연히 이와 같은 것을 발견했다: let num = 0 return ++num 내가 배운 increment, decrement는 항상 변수 뒤에 붙었던 것이어서, 앞에 쓰면 뭐가 다른지 찾아보았다. 우선 결론부터 말하자면, num++와 ++num은 동일한 효과를 가진다. 둘다 변수에 1을 더하는 일을 한다. let num = 0 num++ console.log(num) // 1 let num = 0 ++num console.log(num) // 1 하지만 다른 점은, 그들의 리턴값에 있다. num++ 같은 경우, increment를 한 이후의 결과값을 리턴한다. 반면 ++num은 increment 하기 이전 값을 리턴한다. let num1 = 0 console.log(num1++).. 2021. 4. 10. [JS] 클로저(Closure)란? 클로저(Closure)란? 자바스크립트를 공부하는 분들께, 자바스크립트를 공부하며 맞닥드렸던 여러 개념들 중 이해하는데 애를 먹었던 것이 무엇이었냐고 묻는다면 가장 자주 등장하는 개념 리스트에 클로저(closure)가 필수로 들어가 있을 것이다. 그만큼 이해하기가 어려웠던 개념인데, 오랜 시간을 들여 들여다본 결과 이전보다 1 정도 이해 정도가 늘어난 것 같아 블로그에 포스팅하려고 한다. 우선, 나에게 있어 클로저에 대한 이해가 어려웠던 것엔 MDN의 클로저에 대한 정의부터가 굉장히 난해했다는 사실도 한몫했다. "A closure is the combination of a function and the lexical environment whitin which that function was declar.. 2021. 4. 10. [JS] 클래스(Class), 인스턴스(Instance), 정적 메소드(Static method), 그리고 서브클래스(Subclassing) 클래스(Class)와 인스턴스(Instance) 객체 지향 프로그래밍 패러다임을 따른다는 것은 하나의 모델이 되는 청사진(blueprint)를 만들고, 그리고 그 청사진을 바탕으로한 객체(object)를 만든다는 것을 의미한다. 하나의 모델이 되는 청사진, 바로 이것이 클래스(class)가 되는 것이고, 그 청사진을 따라 만들어진 것이 객체이면서 그 클래스의 인스턴스(instance)가 된다. 2021.04.07 - [Learn to Code] - [JS] 객체 지향 프로그래밍(Object-Oriented Programming) 클래스(class)는 말하자면 '틀'이라고 생각할 수 있다. 무언가를 만들 때, 그 만들 물건의 겉 모양을 미리 만들어놓고 그대로 찍어낼 수 있게 하는 '틀' 말이다. 학창시절 .. 2021. 4. 9. 이전 1 2 3 4 5 6 다음 728x90 반응형
