FrontEnd (32) 썸네일형 리스트형 [React] JSON 웹 토큰으로 회원 인증 구현하기 사용자 인증과 JSON 웹 토큰 사용자 인증은 각각의 사용자를 구분하는 목적으로 이용되므로 서비스를 제공하는 서버에 사용자가 입력한 정보를 저장한다. 하지만 구글, 페이스북, 네이버 등 다른 사이트에서 가입되어 입력한 정보를 바탕으로 회원가입을 하용하기도 한다. 이런 방식으로 동작하는 서버들은 OAuth(open standard for access delegation)라고 하는 표준에 기반하며 OAuth는 모두 JSON 웹 토큰이란 기술에 기반을 두고 있다. 토큰(token)은 보통 문자열이나 숫자로 만든다. JSON 웹 토큰(JWT)은 선택적 서명(optional signature)과 선택적 암호화(optional encryption)기술을 사용해 데이터를 만들게 하는 인터넷 표준이며 명칭은 .. [React] 익스프레스 프레임워크로 API 서버 만들기 TCP/IP 프로토콜 알아보기 TCP/IP 프로토콜은 IP 프로토콜 기반에서 데이터 전송 방식을 제어하는 TCP 프로토콜을 함께 호칭하는 용어이며 데이터를 요청하는 클라이언트 프로그램과 데이터를 제공하는 서버 프로그램으로 구성된다. 서버 프로그램은 클라이언트의 데이터 요청이 있는지 알기 위해 특정 포트를 감시하는데 이를 리슨(listen)이라고 하며 감시되는 포트는 다른 TCP/IP 서버는 이 포트에 접근할 수 없다. TCP/IP 연결이 되면 클라이언트와 서버 모두 소켓(socket)이라는 토큰을 얻고 이 소켓을 통해 양방향(bidirectional)으로 데이터를 주고 받는다. 각각의 클라이언트는 중복되지 않는 소켓 번호를 가지므로 한대의 서버에 여러 대의 클라이언트가 각각의 다른 소켓 번호를 통.. [React] 프로그래밍으로 몽고DB 사용하기 프로젝트 환경 구축하기 아래 명령어를 통해 package.json 파일을 서버 디렉터리에 생성한다.> npm init --y 타입스크립트를 개발 언어로 하는 Node.js 프로젝트는 항상 다음 3개의 패키지를 설치해 줘야한다. @types/node 패키지는 setTimeout과 같은 자바스크립트 엔진이 제공하는 기능을 타입 스크립트에서 사용할 때 필요한 타입 라이브러리이다.> npm i -D typescript ts-node @types/node 다음으로는 tsconfig.json 설정 파일을 생성한다.> tsc -- init 타입스크립트 언어로 몽고DB를 사용하려면 mongodb라는 이름의 드라이버 패키지를 설치해야 한다.> npm i mongodb> npm i -D @types/mongodb.. [React] 공개 라우트와 비공개 라우트 구현하기 공개 라우트와 비공개 라우트 홈페이지(/), 로그인 페이지(/login) 등 누구나 접속할 수 있는 경로를 공개 라우트(public route)라고하며 로그인한 사용자(권한이 있는)만 접속할 수 있는 경로는 비공개 라우트(private route)라고 한다. 사용자 인증 컨텍스트 만들기 리액트 프레임워크에서 여러 컴포넌트가 어떤 정보를 공유하는건 컨텍스트, 리덕스 등의 방법이 있다. 리덕스의 경우 앱이 항상 사용한다고 가정하기 어렵기에 컨텍스트를 사용해 사용자의 로그인 유무를 구분하는 방법에 대해 준비하자. 우선 인증 컨텍스트를 AuthContext로 추가한다.import type {FC, PropsWithChildren} from 'react'import {createContext, useC.. [React] Outlet 컴포넌트와 중첩 라우팅 리액트 라우터의 Outlet 컴포넌트 리액트 라우터의 Outlet 컴포넌트는 라우트를 중첩하여 내비게이션 메뉴나 바닥글처럼 컴포넌트마다 공통으로 사용하는 부분의 코드를 줄여준다. Outlet 컴포넌트는 다른 컴포넌트들이 렌더링되는 위치를 지정해 주는 역할을 한다. Outlet 컴포넌트를 Layout에 추가한다. 여기서 Outlet 컴포넌트는 RoutesSetup에서 설정한 라우트 경로의 컴포넌트가 여기에 위치하는 역할을 한다.import {Outlet} from 'react-router-dom'export default function Layout() { return } 그리고 RoutesSetup에 LayOut을 추가해 Outlet 컴포넌트에 다른 컴포넌트가 위치하게 하기 위해 중첩 라우트를 .. [React] 처음 만나는 리액트 라우터 URL이란? URL(uniform resource locator)은 인터넷에서 자원의 위치를 의미한다. 여기서 자원이란 HTML, CSS 이미지 등 웹 브라우저가 이해할 수 있는 모든 형태의 데이터를 뜻한다. location 객체 알아보기 웹 브라우저에서 URL은 주소 창(address bar)에 주소를 입력하며 웹 브라우저는 그걸 통해 window.location 형태로 얻을 수 있는 location 객체를 제공한다. location 객체의 속성의미 href 주소 창에 입력된 URL 전체 문자열을 얻거나 다른 URL로 설정하고 싶을 때 사용 protocol http, https같은 프로토콜 문자열을 얻고 싶을때 사용되며 콜론(:)도 포함 host 도메인과 포트 번호가 결합된 문자열을 얻는데 사용.. [React] 트렐로 따라 만들기 (2) react-dnd의 useDrop, useDrag 훅 알아보기 react-dnd 패키지의 기능으로 제공되는 드래그 앤 드롭으로 기능인 useDrop 훅, useDrag 훅을 알아보자. useDrop 훅은 튜플 타입 반환값에서 두번 째 멤버변수인 drop 함수를 얻어 사용하는게 기본 사용법이며 accept는 대상을 구분하는 용도로 사용되는 문자열이다. 또한 drop함수를 호출해 사용할 수도 있다.// useDrop 훅의 기본 사용법const [, drop] = useDrop(() => ({ accept: 'card'}) drop(node)} /> // ref를 통해 drop함수를 원하는 요소설정// drop 함수를 호출하는방식으로 구현const divRef = useRef(null)drop(di.. [React] 트렐로 따라 만들기 (1) 칸반 보드란? 칸반(Kanban)은 '시각 신호'를 뜻하는 일본어로서 도요타 자동차 창업주가 처음 고안했다. 칸반 보드는 작업을 시각적으로 표시해 주어 프로젝트 관리를 쉽게 할수 있도록 도와준다. 카드 목록을 수직 방향으로 구성해 목록이나 카드는 드래그 앤 드롭으로 소속이나 순서를 자유롭게 변경할 수 있다. react-dnd 패키지 설치하기 react-dnd패키지는 드래그 앤 드롭 기능을 좀 더 쉽게 구현할 수 있게 하는 패키지들 중 하나이다.> npm i react-dnd react-dnd-html5-backend> npm i -D @types/react-dnd react-dnd는 리액트 컨텍스트 기반으로 설계 되었으며 제공하는 컴포넌트를 사용하기 위해선 DndProvider 컴포넌트가.. 이전 1 2 3 4 다음
