What I studied

기존에는 AES 방식으로 암호화를 진행했다면 이제는 jsrsasign이라는 라이브러리를 가지고 RSA 암호화를 구현해보려고 한다. 기존에 사용했던 AES 방식과 RSA 방식이 어떤 차이가 있는지를 먼저 알아보고, 자바스크립트와 리액트에서 사용할 것이다. 1. AES vs RSA 두 방식의 차이는? 1) AES 알고리즘 AES 방식은 대칭키를 사용하여 암호화, 복호화를 진행하는 암호화 알고리즘으로 클라이언트와 서버가 같은 키를 사용해야한다. 클라이언트와 서버 간 동일한 키를 공유해야하기 때문에 키 전달 및 관리에 어려움이 있다. 키가 노출되면 보안에 매우 취약해진다. 비대칭키 암호화 방식에 비해서는 키 사이즈가 작지만 암호화 알고리즘 구조가 간단하여 연산 속도가 빠르다. 2) RSA 알고리즘 RSA 방식은..

사이드 프로젝트나 어떤 프로젝트를 할 때, 사용자 정보를 입력 받아 백엔드 서버로 전송하는 부분은 항상 있었던 것 같은데 그 대표적인 예가 회원가입, 로그인일 것 같다. 이뿐만이 아니라 사용자 정보를 입력받아 처리가 필요한 부분이 있을 수 있는데 그 때, 평문으로 보내지는 사용자 정보를 암호화하여 백엔드로 전송해보려고 한다. 사용자 정보를 암호화하지 않고 평문으로 그대로 보낼 경우, 아래와 같이 개발자 도구의 네트워크 탭에서 해당 정보를 모두 확인할 수 있다. 해당 요청의 Payload 탭을 클릭하면 사용자 정보를 볼 수 있다. 클라이언트단에서 사용자 정보를 암호화해서 보낼 경우, 백엔드쪽에서도 이를 복호화하는 과정이 필요하기에 논의는 필요하다. 내가 클라이언트단에서 사용할 라이브러리는 CryptoJS라..

우리가 사용하는 사이트에서 데이터를 내려받기 전까지 화면이 멈춰있다면 사용자 입장에서는 데이터를 받아오고 있는지, 오류가 난건지 등을 파악하기 힘들다. 그렇기 때문에 UX적인 부분을 고려하여 사용자에게 로딩중이라는 것을 나타내주는 것이 좋다. 그래서 많이 사용하는 것이 스피너를 활용한 로딩화면이다. 요즘은 스켈레톤도 많이 사용하는 것 같다. 리액트에서 로딩화면을 만들어줄 수 있는 방법엔 여러가지가 있는데 Gif 파일을 활용하는 방법과 React-spinners를 사용하는 두가지 방법을 알아보려고 한다. 먼저 gif 파일로 간단하게 만들어보자. 1. 리액트 로딩화면 gif 버전 먼저 Loading.jsx 컴포넌트를 생성한 후, 스피너를 다운로드하러 간다. // Loading01.jsx import Reac..

요즘은 소셜로그인이 거의 필수인 것 같은데 카카오톡, 구글, 네이버, 페이스북, 애플 등 다양한 곳에서 소셜로그인 API를 제공하고 있다. 오늘은 그 중에서 네아로를 시도해보려고 한다. 어디까지나 프론트엔드 부분까지이니 리액트로 네이버 소셜로그인을 구현하고자 한다면 한번 참고해보면 좋을 것 같다. (코드는 엄청 짧다! 마지막에!) 1. 네이버 로그인 시작 전 준비 먼저 네이버 로그인 API를 사용하려면 네이버 개발자 센터에 접속하여 애플리케이션을 생성해주어야한다. 이 부분은 카카오톡 애플리케이션 생성과 다를게 없는데 애플리케이션을 등록해야 Client ID를 발급받을 수 있다. Callback URL을 등록했고, Client ID를 발급받았다면 준비 완료! Callback URL을 지정할 것 Client..

프로젝트의 규모가 작다면 별로 불편함을 느끼지 않겠지만, 프로젝트의 규모가 커지면서 파일의 상대경로 셋팅에 불편함을 느끼게 된다. 폴더 속에 폴더.. 폴더 속의 폴더 속의 파일 등등 이런식으로 끝도 없이 들어가는 경우가 발생하기에 아래와 같은 상황을 겪게 된다. ../../../pages/main/LandingTop ../../../pages/main/LandingMiddle ../../../pages/main/LandingBottom 이렇게 계속해서 ../을 쳐야하는 상황이 발생한다. ../../../../../ ....... 우리가 프로젝트를 진행하다보면 pages라는 폴더만 있는 것이 아니기 때문에, assets, components, utils 등등 다양한 폴더와 파일의 경로가 생기게 되는데 이를..

백엔드쪽에서 마크다운 언어로 내려주는 데이터를 화면에 예쁘게 보여주기 위해서 방법을 검색해봤는데 생각보다 어렵지 않았다. 리액트에서 마크다운을 예쁘게 로드시켜주는 npm 라이브러리가 존재했기 때문! 리액트 마크다운 npm 설치 npm install react-markdown 설치 후, 사용하기 언제나 그렇듯 npm 설치를 마쳤다면 사용을 위해 import를 해주어야한다. import ReactMarkdown from 'react-markdown' import를 해줬다면 바로 사용하면 된다. import React from "react"; import ReactMarkdown from 'react-markdown' const ServerLawModal = (props) => { const { data } ..

이제 본격적으로 포트폴리오 웹 사이트를 만들어보기 위해 새로운 개인 프로젝트를 시작하는데 React에 타입스크립트를 더하여 구현해보려고 한다. 디자인부터 화면 기획 등 모두 직접 할 예정이며, 나에 대한 모든 것을 담을 수 있는 포트폴리오 사이트를 완성해보고자 한다. 그래서 오늘은 기본적으로 React CRA에 타입스크립트 초기 셋팅을 해봤다. 타입스크립트 CRA 가장 먼저 기존에 타입스크립트 없이 CRA 했던 방식 그대로 터미널에 입력하면 된다. npx create-react-app my-app --template typescript yarn을 사용한다면 아래와 같이 입력하면 된다. yarn create react-app my-app --template typescript CRA 완료 후 정상적으로 C..

리액트를 사용하며 체크박스 전체선택, 선택 해제 등을 구현했다. 약관동의 체크박스와 표에서의 체크박스 전체 선택. 생각보다 오래 걸렸던 기능이기도 한데 실제로 여러가지를 찾아보면 크게 어렵지 않은 것이었던 것 같다. 약관동의 체크박스 가장 처음으로 여러 블로그를 뒤적이면서 약관동의 체크박스 구현에 대해 알아보게 되었다. 약관동의 화면의 경우 약관동의 자세히 보기를 클릭했을 때 팝업으로 보여줄 것인지, 아니면 아래로 열리는 창을 만들어줄 것인지 등에 대해서 고민을 할 수밖에 없었다. 그 후 ui 구현이 끝난 후 약관 동의 체크박스에서 전체선택, 선택동의 등의 기능을 구현했다. 약관동의 박스 필수 조건은 아래와 같다. 1. 각각의 약관 체크박스를 클릭했을 때 체크 선택 2. 모두 동의합니다 체크시 전체 체크..

프로젝트 규모가 작아 전까지는 크게 리덕스와 같은 전역상태관리 툴을 상요할 필요가 없었는데 필요한 데이터가 많아지다보니 상태관리를 효율적으로 할 필요가 있어 리덕스를 도입하게 되었다. 하지만 예전에 사용했던 것과 달리 react-router-dom 버전이 업그레이드 되면서 redux를 사용하며 history를 사용할 수 있게 해주었던 connect-react-router 연결이 어려워졌다. connected-react-router 를 깔아 아무리 적용하려고 해도 계속해서 에러가 나서 다시 npm 문서를 확인해봤다. 원인은 connect-react-router은 react-router v4, v5에서만 지원하기 때문에 그랬던 것. connected-react-router A Redux binding for..