What I studied

리액트를 사용하며 훅을 정말 많이 사용하게 되는데 기본적으로 내장되어 있는 훅이 아닌 커스텀훅을 제작해서 사용하는 경우도 많다. 일반적으로 사용하는 유틸함수와 커스텀훅의 차이에 대해서 공부하고, 각각의 상황에서 어떤 함수를 만들어 사용해야 하는지를 알게 되었다. 1. 리액트 훅이란?먼저, 리액트 훅을 가볍게 설명해보자면 함수형 컴포넌트에서 상태와 라이프사이클의 기능을 사용할 수 있게 해주는 것이라고 할 수 있다. 리액트 16.8 버전부터 새롭게 도입되었으며 대표적인 내장 훅으로는 useState, useEffect, useRef, useMemo, useCallback 등이 있다. 커스텀 훅이 아닌 리액트 훅에 대해서 좀 더 자세하게 알고 싶다면 아래 게시글을 참고. 리액트 훅과 자주사용하는 훅의 특징(R..

요즘 커스텀 훅을 만들어보고 해당 부분을 다시 공부하면서 내가 자주사용하고, 또는 자주 사용해보지 않았던 훅들을 정리해보려고 한다. 1. 리액트 훅이란?리액트 훅은 리액트 16.8 버전에 새롭게 도입된 기능으로, 함수형 컴포넌트에서 상태(state)와 라이프사이클 기능을 사용할 수 있게 해준다. 기존의 클래스형 컴포넌트보다 훨씬 간결하고 읽기 쉬운 코드를 작성할 수 있도록 도와주며, 코드 재사용성을 높여준다는 장점이 있다. 리액트 훅을 사용하면 클래스 없이도 상태를 관리하고, 컴포넌트의 생명주기에 따라 작업을 수행할 수 있는데, 이를 통해 코드의 가독성이 향상되며 함수형 프로그래밍의 장점을 더욱 효과적으로 활용할 수 있게 된다. 2. 리액트 훅의 규칙리액트 훅을 사용할 때는 몇 가지 중요한 규칙을 따라하..

기존에는 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. 모두 동의합니다 체크시 전체 체크..