yuhun do IT

react-cookie를 이용해 쿠키를 관리하고 이를 통해 로그인 인증을 하는 방법을 알아보겠습니다. 일단 리액트 훅을 사용할 예정이기에 react-cookie를 설치해 줍니다. yarn add react-cookie 쿠키 훅을 사용하는 방법을 먼저 살펴보면 다음의 형식으로 사용합니다. const [cookies, setCookie, removeCookie] = useCookies(['쿠키 이름']); cookies는 쿠키가 들어있습니다. 쿠키를 만들고 제거하기 위해선 다음을 사용하는데 옵션은 필요하면 넣을수 있습니다. setCookie()는 쿠기에 값을 넣을때 -> setCookie(쿠키 이름, 쿠키에 넣을 값, 옵션) removeCookie()는 쿠기를 삭제할 때 필요합니다. -> removeCook..

jwt로 토큰을 발급해 사용함으로써 사용자 인증을 할 수 있습니다. 여기서는 발급과 인증을 하는 방법을 알아보겠습니다. 토큰 발급 jwt.sign(토큰화할 것, 토큰키, 옵션, 콜백 함수 ) 이제 1분동안 유효한 id 값을 가진 토큰을 생성해 보겠습니다. const jwt = require('jsonwebtoken'); cosnt tokenKey = '임의의 키 설정' // 물론 실제 개발시에는 따로 숨겨놔야합니다. const id = 'example_id' const token = jwt.sign({ id : id }, tokenKey, { {id:id}면 {id}로 축약 가능 expiresIn: 60, // 1분 유효한 토큰 발급(초 단위) }); 이제 이 token을 응답으로 넘겨주고 사용하면 됩니..

node로 url을 받아 데이터를 보내줄때 한 파일에 모두 작성하면 파일이 보기 힘들고 관리가 어려워집니다. 그래서 url을 보고 정리할 수 있도록 도와주는게 router인데 미 모듈을 사용해 보도록 하겠습니다. 파일 구성 다음과 같이 메인 server.js 파일이 있고 routing할 것은 routes 폴더를 만들어 test.js 파일로 관리해 보겠습니다. 최대한 간단하게 다음으로 파일을 구성합니다. 서버가 localhost:5000 이라고 가정하겠습니다. 우리가 http://localhost:5000/test/test1 , http://localhost:5000/test/test2 라는 요청을 한다고 할 때 다음의 파일을 보고 설명하겠습니다. server.js const express = requir..

프론트는 localhost:3000에서 서버는 localhost:5000에서 개발하는데 설정을 해주지 않으면 통신 오류가 납니다. 3가지 방법을 소개해 드리도록 하겠습니다. 1. proxy 1 (개인적으로 추천) 2. proxy 2 3. cors 사용 3. 수동 Proxy 설정 ⭐️ 가장 귀찮지만 확실하게 사용자가 정의해 줄 수 있는 방법입니다. 먼저 라이브러리를 설치해 줍니다. # yarn add http-proxy-middleware 리액트 프로젝트의 src 폴더 안에 setupProxy.js 파일을 추가합니다. 파일의 내용은 다음과 같습니다. const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = (ap..

React와 nodejs를 이용해 클라이언트와 서버를 같이 실행시키고 통신하는 것을 해보겠습니다. 1. 라이브러리 소개 2. 클라이언트, 서버 주요 코드 3. 실행 전 준비 4. 실행 1. 라이브러리 사용한 라이브러리 #-- 클라이언트에서 사용 -- # Ajax 통신 라이브러리 yarn add axios # 서로 다른 포트에서 클라이언트와 서버가 통신 가능하게 함 #-- root에서 사용 -- #리액트와 노드를 함께 실행시켜 사용 가능 yarn add concurrently # 변경사항 저장시 반영 yarn add nodemon # express yarn add express 2. 클라이언트, 서버 주요 코드 파일 구성 client에 yarn create react-app으로 만든 리액트 패키지가 들어있..

함수형 컴포넌트를 기준으로 return한다고 할 때 요소를 때로는 보이게 때로는 숨겨서 할 수 있습니다. check라는 변수가 있다고 할때 True이면 보이고 False이면 숨겨보는 코드를 작성해 보겠습니다. import React, {useState} from 'react'; const hello = (props) =>{ const [check,setCheck] = useState(true) return ( {check && World} ); } 이처럼 return을 할때 자바스크립트 코드를 작성하고 싶다면 { } 안에 작성하면 되고 && 는 앞이 True이면 뒤의 것 실행, 반대로 || 앞이 False이면 뒤의 것 실행의 뜻을 담고 있습니다. 꼭 이러한 용도 뿐만이 아니라 더 다채롭게 사용 가능합니다..

보통 로그인 페이지 같은 곳을 가면 아이디를 입력하는 곳에 마우스 포인터가 올려져 있습니다. 사소하지만 UX에는 큰 영향을 준다고 생각하는데 아주 간단하게 태그에 옵션을 주어 구현 가능합니다. // 마지막 속성값 autoFocus

css 전처리기는 사용했어도 프레임워크는 처음 알게 되었다. antd에서 원하는 컴포넌트를 가지고와 사용할 수 있다.

* 붙은게 Default Flex container 속성 1. flex-direction * row, column, row-reverse, column-reverse 2. flex-wrap * no-wrap > 넘치면 넘치는 대로 나감 wrap > 넘치면 다음으로 넘어감 3. justify-content * flex-start 기준점 부터 시작 flex-end 기준점 반대 부터 시작 center 가운데 정렬 space-between 양 끝에 붙이고 균일한 여백 생성 space-around 위의 것에서 끝에 여백 생성 space-evenly 위의 것의 모든 여백이 균일 4. align-items * stretch 수직으로 늘림 flex-start 시작 기준 flex-end 끝 기준 center 가운데 정렬..

Object라는 내장 객체를 사용할 수 있다. 만약 다음과 같은 object가 있다고 하자 example ={ 1:{} 2:{} 3:{} 4:{} 5:{} } // 위의 것은 다음과 같이 불러 사용할 수 있다. example[번호] // => 해당 번호, 즉 key의 {}가 된다 이제 map 함수로 Object를 이용해 키의 목록에 접근하는 방법은 다음과 같다. Object.keys(example).map((key) =>{ // 이렇게 map 함수로 key를 하나씩 뽑아올 수 있다. // 여기서 key를 이용해 원하는 로직을 짜면 되겠다. })