티스토리

JDevelog

검색하기

블로그 홈

JDevelog

choijying21.tistory.com/m

프론트엔드 개발 성장기록

구독자: 16

방명록 방문하기

주요 글 목록

리액트 커스텀훅과 유틸함수 (custom hooks) 리액트를 사용하며 훅을 정말 많이 사용하게 되는데 기본적으로 내장되어 있는 훅이 아닌 커스텀훅을 제작해서 사용하는 경우도 많다. 일반적으로 사용하는 유틸함수와 커스텀훅의 차이에 대해서 공부하고, 각각의 상황에서 어떤 함수를 만들어 사용해야 하는지를 알게 되었다. 1. 리액트 훅이란?먼저, 리액트 훅을 가볍게 설명해보자면 함수형 컴포넌트에서 상태와 라이프사이클의 기능을 사용할 수 있게 해주는 것이라고 할 수 있다. 리액트 16.8 버전부터 새롭게 도입되었으며 대표적인 내장 훅으로는 useState, useEffect, useRef, useMemo, useCallback 등이 있다. 커스텀 훅이 아닌 리액트 훅에 대해서 좀 더 자세하게 알고 싶다면 아래 게시글을 참고. 리액트 훅과 자주사용하는 훅의 특징(R.. 공감수 0 댓글수 0 2024. 6. 28.
리액트 훅과 자주사용하는 훅의 특징(React hooks) 요즘 커스텀 훅을 만들어보고 해당 부분을 다시 공부하면서 내가 자주사용하고, 또는 자주 사용해보지 않았던 훅들을 정리해보려고 한다. 1. 리액트 훅이란?리액트 훅은 리액트 16.8 버전에 새롭게 도입된 기능으로, 함수형 컴포넌트에서 상태(state)와 라이프사이클 기능을 사용할 수 있게 해준다. 기존의 클래스형 컴포넌트보다 훨씬 간결하고 읽기 쉬운 코드를 작성할 수 있도록 도와주며, 코드 재사용성을 높여준다는 장점이 있다. 리액트 훅을 사용하면 클래스 없이도 상태를 관리하고, 컴포넌트의 생명주기에 따라 작업을 수행할 수 있는데, 이를 통해 코드의 가독성이 향상되며 함수형 프로그래밍의 장점을 더욱 효과적으로 활용할 수 있게 된다. 2. 리액트 훅의 규칙리액트 훅을 사용할 때는 몇 가지 중요한 규칙을 따라하.. 공감수 0 댓글수 1 2024. 6. 27.
jsrsasign를 이용한 RSA 암호화(리액트, 자바스크립트) 기존에는 AES 방식으로 암호화를 진행했다면 이제는 jsrsasign이라는 라이브러리를 가지고 RSA 암호화를 구현해보려고 한다. 기존에 사용했던 AES 방식과 RSA 방식이 어떤 차이가 있는지를 먼저 알아보고, 자바스크립트와 리액트에서 사용할 것이다. 1. AES vs RSA 두 방식의 차이는? 1) AES 알고리즘 AES 방식은 대칭키를 사용하여 암호화, 복호화를 진행하는 암호화 알고리즘으로 클라이언트와 서버가 같은 키를 사용해야한다. 클라이언트와 서버 간 동일한 키를 공유해야하기 때문에 키 전달 및 관리에 어려움이 있다. 키가 노출되면 보안에 매우 취약해진다. 비대칭키 암호화 방식에 비해서는 키 사이즈가 작지만 암호화 알고리즘 구조가 간단하여 연산 속도가 빠르다. 2) RSA 알고리즘 RSA 방식은.. 공감수 0 댓글수 0 2023. 9. 15.
CryptoJS를 이용한 사용자 정보 암호화/복호화(리액트, 자바스크립트) 사이드 프로젝트나 어떤 프로젝트를 할 때, 사용자 정보를 입력 받아 백엔드 서버로 전송하는 부분은 항상 있었던 것 같은데 그 대표적인 예가 회원가입, 로그인일 것 같다. 이뿐만이 아니라 사용자 정보를 입력받아 처리가 필요한 부분이 있을 수 있는데 그 때, 평문으로 보내지는 사용자 정보를 암호화하여 백엔드로 전송해보려고 한다. 사용자 정보를 암호화하지 않고 평문으로 그대로 보낼 경우, 아래와 같이 개발자 도구의 네트워크 탭에서 해당 정보를 모두 확인할 수 있다. 해당 요청의 Payload 탭을 클릭하면 사용자 정보를 볼 수 있다. 클라이언트단에서 사용자 정보를 암호화해서 보낼 경우, 백엔드쪽에서도 이를 복호화하는 과정이 필요하기에 논의는 필요하다. 내가 클라이언트단에서 사용할 라이브러리는 CryptoJS라.. 공감수 0 댓글수 0 2023. 6. 15.
리액트 로딩화면 스피너 만드는 여러가지 방법(gif, React-spinners) 우리가 사용하는 사이트에서 데이터를 내려받기 전까지 화면이 멈춰있다면 사용자 입장에서는 데이터를 받아오고 있는지, 오류가 난건지 등을 파악하기 힘들다. 그렇기 때문에 UX적인 부분을 고려하여 사용자에게 로딩중이라는 것을 나타내주는 것이 좋다. 그래서 많이 사용하는 것이 스피너를 활용한 로딩화면이다. 요즘은 스켈레톤도 많이 사용하는 것 같다. 리액트에서 로딩화면을 만들어줄 수 있는 방법엔 여러가지가 있는데 Gif 파일을 활용하는 방법과 React-spinners를 사용하는 두가지 방법을 알아보려고 한다. 먼저 gif 파일로 간단하게 만들어보자. 1. 리액트 로딩화면 gif 버전 먼저 Loading.jsx 컴포넌트를 생성한 후, 스피너를 다운로드하러 간다. // Loading01.jsx import Reac.. 공감수 1 댓글수 0 2023. 3. 8.
[React] 리액트 네이버 소셜로그인 구현하기(프론트 부분, 네아로) 요즘은 소셜로그인이 거의 필수인 것 같은데 카카오톡, 구글, 네이버, 페이스북, 애플 등 다양한 곳에서 소셜로그인 API를 제공하고 있다. 오늘은 그 중에서 네아로를 시도해보려고 한다. 어디까지나 프론트엔드 부분까지이니 리액트로 네이버 소셜로그인을 구현하고자 한다면 한번 참고해보면 좋을 것 같다. (코드는 엄청 짧다! 마지막에!) 1. 네이버 로그인 시작 전 준비 먼저 네이버 로그인 API를 사용하려면 네이버 개발자 센터에 접속하여 애플리케이션을 생성해주어야한다. 이 부분은 카카오톡 애플리케이션 생성과 다를게 없는데 애플리케이션을 등록해야 Client ID를 발급받을 수 있다. Callback URL을 등록했고, Client ID를 발급받았다면 준비 완료! Callback URL을 지정할 것 Client.. 공감수 0 댓글수 0 2023. 3. 7.
[TIL] React Craco 파일 절대경로 설정/상대경로의 지옥에서 탈출하기 프로젝트의 규모가 작다면 별로 불편함을 느끼지 않겠지만, 프로젝트의 규모가 커지면서 파일의 상대경로 셋팅에 불편함을 느끼게 된다. 폴더 속에 폴더.. 폴더 속의 폴더 속의 파일 등등 이런식으로 끝도 없이 들어가는 경우가 발생하기에 아래와 같은 상황을 겪게 된다. ../../../pages/main/LandingTop ../../../pages/main/LandingMiddle ../../../pages/main/LandingBottom 이렇게 계속해서 ../을 쳐야하는 상황이 발생한다. ../../../../../ ....... 우리가 프로젝트를 진행하다보면 pages라는 폴더만 있는 것이 아니기 때문에, assets, components, utils 등등 다양한 폴더와 파일의 경로가 생기게 되는데 이를.. 공감수 0 댓글수 0 2022. 11. 12.
[TIL] 리액트 마크다운 예쁘게 로드하는 방법 (react-markdown) 백엔드쪽에서 마크다운 언어로 내려주는 데이터를 화면에 예쁘게 보여주기 위해서 방법을 검색해봤는데 생각보다 어렵지 않았다. 리액트에서 마크다운을 예쁘게 로드시켜주는 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 } .. 공감수 0 댓글수 0 2022. 10. 20.
[TIL] CRA & TypeScript 초기 셋팅 이제 본격적으로 포트폴리오 웹 사이트를 만들어보기 위해 새로운 개인 프로젝트를 시작하는데 React에 타입스크립트를 더하여 구현해보려고 한다. 디자인부터 화면 기획 등 모두 직접 할 예정이며, 나에 대한 모든 것을 담을 수 있는 포트폴리오 사이트를 완성해보고자 한다. 그래서 오늘은 기본적으로 React CRA에 타입스크립트 초기 셋팅을 해봤다. 타입스크립트 CRA 가장 먼저 기존에 타입스크립트 없이 CRA 했던 방식 그대로 터미널에 입력하면 된다. npx create-react-app my-app --template typescript yarn을 사용한다면 아래와 같이 입력하면 된다. yarn create react-app my-app --template typescript CRA 완료 후 정상적으로 C.. 공감수 1 댓글수 0 2022. 10. 9.
[TIL] 리액트 체크박스 전체 선택 및 약관 동의 화면 구현 리액트를 사용하며 체크박스 전체선택, 선택 해제 등을 구현했다. 약관동의 체크박스와 표에서의 체크박스 전체 선택. 생각보다 오래 걸렸던 기능이기도 한데 실제로 여러가지를 찾아보면 크게 어렵지 않은 것이었던 것 같다. 약관동의 체크박스 가장 처음으로 여러 블로그를 뒤적이면서 약관동의 체크박스 구현에 대해 알아보게 되었다. 약관동의 화면의 경우 약관동의 자세히 보기를 클릭했을 때 팝업으로 보여줄 것인지, 아니면 아래로 열리는 창을 만들어줄 것인지 등에 대해서 고민을 할 수밖에 없었다. 그 후 ui 구현이 끝난 후 약관 동의 체크박스에서 전체선택, 선택동의 등의 기능을 구현했다. 약관동의 박스 필수 조건은 아래와 같다. 1. 각각의 약관 체크박스를 클릭했을 때 체크 선택 2. 모두 동의합니다 체크시 전체 체크.. 공감수 0 댓글수 0 2022. 10. 4.
[TIL] react-router-dom v6에서 리덕스 연결시 navigate 사용하기 프로젝트 규모가 작아 전까지는 크게 리덕스와 같은 전역상태관리 툴을 상요할 필요가 없었는데 필요한 데이터가 많아지다보니 상태관리를 효율적으로 할 필요가 있어 리덕스를 도입하게 되었다. 하지만 예전에 사용했던 것과 달리 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.. 공감수 0 댓글수 0 2022. 9. 20.
[React] 페이지 이동 시 화면 최상단으로 스크롤(ScrollToTop) 프로젝트를 진행하다보면 여러 페이지가 나오는데 페이지 간 이동시 가장 최근 스크롤 위치에서 벗어나지 않는 경우를 흔하게 만나게 될 것이다. 그래서 페이지 이동 시 화면 최상단으로 올라갈 수 있도록 스크롤 이벤트를 구현했다. ScrollToTop 컴포넌트 만들기 // ScrollToTop.js import { useEffect } from "react"; import { useLocation } from "react-router-dom"; export default function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null; } 이렇게.. 공감수 1 댓글수 0 2022. 8. 24.
[React] 리액트에서 top 버튼 만들기, 스크롤 시 화면에 나타내기 메인 화면에서 아래로 스크롤이 길어졌을 때는 Top 버튼이 꼭 필요한 것 같다. 그래서 함수형 컴포넌트로 top 버튼을 만들어주어 화면 최상단으로 이동시키는 방법을 구현했다. 가장 먼저 버튼 만들기 버튼 컴포넌트를 만들어주는데 화면이 아래로 스크롤 되었을 때 showButton 값이 true로 바뀌며 버튼이 나타나는 구조이다. 버튼 스타일링은 원하는대로 하면되고, css position은 당연히 fixed! 이렇게 만들어놓은 컴포넌트를 공용 컴포넌트에 넣어두고 필요한 페이지에서 가져다쓰는 방식 또는 app.js에 import 하여 어떤 페이지에서든 적용되도록 할 수 있다. import React, { useState, useEffect } from 'react' const TopButton = () =>.. 공감수 3 댓글수 0 2022. 8. 19.
[TIL] 리액트로 구글 소셜로그인 구현하기(프론트엔드 부분) 카카오톡 소셜로그인에 이어 구글 로그인까지 시도해봤다. 구글로그인의 경우에는 리액트에서 사용할 수 있는 라이브러리를 활용해 구현했다. 가장 먼저 사용했던 라이브러리는 react-google-login이라는 라이브러리 사용!! 구글 로그인 시작 전 준비 먼저 구글 로그인을 구현하기 전에도 이전 카카오로그인을 구현했던 것처럼 미리 준비하는 과정이 필요하다. 구글 클라우드 플랫폼에 접속하여 Oauth2.0 클라이언트 ID를 발급받아야 그 다음 단계로 넘어갈 수 있다. 구글 클라우드 플랫폼에서 Oauth2.0 클라이언트 ID 발급 프로젝트가 없다면 새 프로젝트 만들기 Oauth 동의 화면에서 외부 -> 앱이름, 사용자 지원 이메일 -> 개발자 연락처 정보 값을 필수로 입력하고 나머지 칸은 채우지 않아도 된다. .. 공감수 1 댓글수 2 2022. 7. 9.
[TIL] 리액트 카카오톡 소셜로그인 간단하게 구현하기(프론트 부분) 요즘은 일반 사용자 로그인뿐만 아니라 이렇게 소셜로그인으로 편하게 로그인을 할 수 있는 방법이 있어 좋은 것 같다. 개발을 하기 전에는 그냥 너무 당연한거라고 생각했던 것 같은데 소셜 로그인을 구현하는 것 자체도 프론트엔드와 백엔드가 서로의 데이터를 주고받아야한다는 것을 알게 되면서 신기했던 것 같다. 그래서 오늘은 리액트를 이용하여 카카오톡 소셜로그인을 구현하는 방법을 설명해보겠다. 카카오톡 소셜로그인을 처음 구현하려면 Kakao developer 공식문서를 확인한 후 애플리케이션을 등록해야한다. 애플리케이션 추가하기 애플리케이션 추가하기를 통해 내 서비스를 등록한다. 등록 후 내 애플리케이션 -> 만든 애플리케이션 클릭 -> 플랫폼 설정하기 -> web 플랫폼 등록하기에서 도메인 주소를 localho.. 공감수 1 댓글수 0 2022. 7. 9.
[React] Redux에서 SWR로 (React SWR Data Fetching) 리액트에서 전역상태관리를 하기 위해 redux라는 라이브러리를 사용했었는데 코드의 양도 많고 여러가지 불편한 점이 하나씩 보이기 시작하면서 새로운 라이브러리를 찾게 되었다. 요즘 많이 쓰고 있다는 React-query와 SWR이라는 라이브러리를 알게 되었는데 두가지 중 먼저 시도해보고자 했던 것이 SWR이었다. 리덕스 사용시 불편했던 점 리덕스 흐름에 따라 (View -> Dispatch -> Action -> Reducer -> Store -> State) 작성해야하는 코드의 양이 많음 한번 가져왔던 정보라도 컴포넌트가 마운트 될 때마다 새로 가져와서 갈아끼우는 작업이 비효율적 지속적으로 리덕스 로컬 스토어의 상태를 서버 상태와 맞추기 위해 추가적으로 동기화 작업을 해줘야함 그래서 SWR이란? SWR은.. 공감수 1 댓글수 0 2022. 5. 30.
[React] 리액트 lazy loading 적용하기(lighthouse 성능 최적화) 최종 프로젝트를 진행하던 중 리액트 lazy-loading으로 최적화 작업을 진행했다. 지연로딩(lazy-loading)이라는 것은 로딩을 바로 하지 않고 지연시켰다가 나중에 로딩하게 해준다는 뜻으로 사용자가 사이트에 접속했을 때 보이지 않는 것까지 모두 로드해오는 것이 아니라 보이는 페이지만 로드한 후 다른 페이지에 접속했을 때 그곳의 데이터를 로드해오는 작업을 해주는 것이다. 큰 React 애플리케이션은 일반적으로 많은 구성 요소와 유틸리티 메서드 및 타사 라이브러리로 구성되는데 필요할 때만 애플리케이션의 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드하는 즉시 대규모 단일 JavaScript 번들이 사용자에게 전송된다. 이러한 불필요한 작업이 반복되면 페이지 성능에 영향을 줄 수 .. 공감수 0 댓글수 0 2022. 5. 30.
[React] 리액트 전역상태관리 리덕스(Redux, Redux-thunk, immer 사용) 리덕스란? 대표적인 상태관리 Javascript 라이브러리로 컴포넌트 내부에서 사용하는 데이터인 상태를 관리하기 위해 사용한다. 만약 하나의 부모 컴포넌트와 자식 컴포넌트들이 여럿이라는 상황을 가정해보자. 만약 자식 1의 state를 자식 6에서 사용하고 싶다면 자식 1 -> 부모 -> 자식 3 -> 자식 6으로 state를 넘겨줘야하는데 하위 컴포넌트에서 상위컴포넌트로 데이터를 넘겨주는 것은 적절한 방법이 아니다. 그렇기 때문에 전역상태관리를 위한 라이브러리인 리덕스를 이용하여 하나의 스토어에 저장해둔 상태를 원하는 컴포넌트에 불러다 사용하면 되는 것이다. 이렇게 리덕스를 이용하면 컴포넌트끼리 같은 상태를 공유해야할 때도 쉽게 적용할 수 있으며 상태 업데이트 로직을 분리시켜 더욱 효율적인 관리가 가능해.. 공감수 0 댓글수 0 2022. 5. 29.
[React] 리액트 훅에 대해 알아보기(React Hooks란?) 1. React Hooks란? 리액트 훅은 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있는데 React 16.8버전에 새로 추가된 기능이다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다. 2. Hook 규칙 1) 최상위에서만 Hook을 호출해야한다. 반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. 리액트 훅은 호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행하게 될 경우 해당 부분을 건너뛰는 일이 발생할 수도 있기 때문에 순서가 꼬여 버그가 발생할 수 있다. 그렇기 때문에 이 규칙을 따르면 useState 와 useEffect가 여러번 .. 공감수 5 댓글수 0 2022. 5. 29.
[React] 리액트 State와 Props의 차이(...defaultProps) React의 state 와 props 실전 프로젝트가 마무리되어가면서 그동안 공부했던 기본적인 내용들을 하나하나 다시한번 되짚어보려고 한다. 리액트를 사용하게 되면서 가장 기본적이고 중요하게 알아야했던 state와 props의 개념과 차이에 대해서 설명할 것이다. Props props는 properties의 약자로 부모 컴포넌트가 자식 컴포넌트로 내려주는 data를 말한다. 즉 상위 컴포넌트의 데이터를 하위 컴포넌트에 공유하는데 사용하며 자식 컴포넌트는 부모 컴포넌트로부터 props를 받아 사용한다. props는 부모요소에서 설정하는 것으로 상속받은 자식 컴포넌트 내에서 수정이 불가능한데 리액트는 부모에서 자식으로라는 일방향성 상속이라는 특징을 가지고 있기 때문이다. // 페이지네이션에서 넘겨주는 pro.. 공감수 0 댓글수 0 2022. 5. 29.
[React] 리액트 JSX 문법 컴포넌트 표현하기 1. JSX란? JSX는 자바스크립트에 XML을 추가한 확장형 문법으로 리액트 요소를 만들 수 있게 해줍니다. JSX를 이용하면 보다 더 간단한 코드로 우리가 원하는 화면을 보여줄 수 있게 됩니다. 2. JSX 문법의 특징 ① 태그는 무조건 닫혀야 한다. , , 와 같이 짝이 있는 태그라면 반드시 닫는 태그와 함께 사용하여야한다. 단독으로 쓰이는 태그의 경우에도 반드시 태그를 닫아줘야 한다. ② 렌더링 될 루트 요소는 하나만 존재해야하기 때문에 두개 이상의 요소는 하나의 요소로 감싸져야한다. import React from 'react'; function App() { return ( Hello Hello Jieun ) export default App; ③ 자바스크립트 표현식 사용 JSX 내부에서는 변.. 공감수 0 댓글수 0 2022. 3. 23.
[React] 리액트 컴포넌트(component) 만들기 - 함수형 컴포넌트 함수형 컴포넌트 생성하기 함수형 컴포넌트를 생성하기 위해 먼저 src 폴더 안에 Main.js라는 js파일을 만들어줍니다. import React from 'react'; function Main() { return 메인 페이지 입니다. } export default Main; 리액트 컴포넌트를 만들 때는 먼저 import를 하여 리액트를 불러와야 합니다. 그리고 코드 최하단에 Main이라는 컴포넌트를 내보내주겠나는 export를 해줍니다. 여기서 생각해볼 수 있는 것은 import가 있다면 export도 있어야한다는 것. 함수형 컴포넌트를 만들었다면 이제 App.js 파일로 이동해줍니다. import React from 'react'; import Main fr.. 공감수 0 댓글수 0 2022. 3. 22.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.