What I studied

프로젝트를 진행하다보면 여러 페이지가 나오는데 페이지 간 이동시 가장 최근 스크롤 위치에서 벗어나지 않는 경우를 흔하게 만나게 될 것이다. 그래서 페이지 이동 시 화면 최상단으로 올라갈 수 있도록 스크롤 이벤트를 구현했다. 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; } 이렇게..

메인 화면에서 아래로 스크롤이 길어졌을 때는 Top 버튼이 꼭 필요한 것 같다. 그래서 함수형 컴포넌트로 top 버튼을 만들어주어 화면 최상단으로 이동시키는 방법을 구현했다. 가장 먼저 버튼 만들기 버튼 컴포넌트를 만들어주는데 화면이 아래로 스크롤 되었을 때 showButton 값이 true로 바뀌며 버튼이 나타나는 구조이다. 버튼 스타일링은 원하는대로 하면되고, css position은 당연히 fixed! 이렇게 만들어놓은 컴포넌트를 공용 컴포넌트에 넣어두고 필요한 페이지에서 가져다쓰는 방식 또는 app.js에 import 하여 어떤 페이지에서든 적용되도록 할 수 있다. import React, { useState, useEffect } from 'react' const TopButton = () =>..

카카오톡 소셜로그인에 이어 구글 로그인까지 시도해봤다. 구글로그인의 경우에는 리액트에서 사용할 수 있는 라이브러리를 활용해 구현했다. 가장 먼저 사용했던 라이브러리는 react-google-login이라는 라이브러리 사용!! 구글 로그인 시작 전 준비 먼저 구글 로그인을 구현하기 전에도 이전 카카오로그인을 구현했던 것처럼 미리 준비하는 과정이 필요하다. 구글 클라우드 플랫폼에 접속하여 Oauth2.0 클라이언트 ID를 발급받아야 그 다음 단계로 넘어갈 수 있다. 구글 클라우드 플랫폼에서 Oauth2.0 클라이언트 ID 발급 프로젝트가 없다면 새 프로젝트 만들기 Oauth 동의 화면에서 외부 -> 앱이름, 사용자 지원 이메일 -> 개발자 연락처 정보 값을 필수로 입력하고 나머지 칸은 채우지 않아도 된다. ..

요즘은 일반 사용자 로그인뿐만 아니라 이렇게 소셜로그인으로 편하게 로그인을 할 수 있는 방법이 있어 좋은 것 같다. 개발을 하기 전에는 그냥 너무 당연한거라고 생각했던 것 같은데 소셜 로그인을 구현하는 것 자체도 프론트엔드와 백엔드가 서로의 데이터를 주고받아야한다는 것을 알게 되면서 신기했던 것 같다. 그래서 오늘은 리액트를 이용하여 카카오톡 소셜로그인을 구현하는 방법을 설명해보겠다. 카카오톡 소셜로그인을 처음 구현하려면 Kakao developer 공식문서를 확인한 후 애플리케이션을 등록해야한다. 애플리케이션 추가하기 애플리케이션 추가하기를 통해 내 서비스를 등록한다. 등록 후 내 애플리케이션 -> 만든 애플리케이션 클릭 -> 플랫폼 설정하기 -> web 플랫폼 등록하기에서 도메인 주소를 localho..

리액트에서 전역상태관리를 하기 위해 redux라는 라이브러리를 사용했었는데 코드의 양도 많고 여러가지 불편한 점이 하나씩 보이기 시작하면서 새로운 라이브러리를 찾게 되었다. 요즘 많이 쓰고 있다는 React-query와 SWR이라는 라이브러리를 알게 되었는데 두가지 중 먼저 시도해보고자 했던 것이 SWR이었다. 리덕스 사용시 불편했던 점 리덕스 흐름에 따라 (View -> Dispatch -> Action -> Reducer -> Store -> State) 작성해야하는 코드의 양이 많음 한번 가져왔던 정보라도 컴포넌트가 마운트 될 때마다 새로 가져와서 갈아끼우는 작업이 비효율적 지속적으로 리덕스 로컬 스토어의 상태를 서버 상태와 맞추기 위해 추가적으로 동기화 작업을 해줘야함 그래서 SWR이란? SWR은..

최종 프로젝트를 진행하던 중 리액트 lazy-loading으로 최적화 작업을 진행했다. 지연로딩(lazy-loading)이라는 것은 로딩을 바로 하지 않고 지연시켰다가 나중에 로딩하게 해준다는 뜻으로 사용자가 사이트에 접속했을 때 보이지 않는 것까지 모두 로드해오는 것이 아니라 보이는 페이지만 로드한 후 다른 페이지에 접속했을 때 그곳의 데이터를 로드해오는 작업을 해주는 것이다. 큰 React 애플리케이션은 일반적으로 많은 구성 요소와 유틸리티 메서드 및 타사 라이브러리로 구성되는데 필요할 때만 애플리케이션의 다른 부분을 로드하려고 노력하지 않으면 사용자가 첫 페이지를 로드하는 즉시 대규모 단일 JavaScript 번들이 사용자에게 전송된다. 이러한 불필요한 작업이 반복되면 페이지 성능에 영향을 줄 수 ..

리덕스란? 대표적인 상태관리 Javascript 라이브러리로 컴포넌트 내부에서 사용하는 데이터인 상태를 관리하기 위해 사용한다. 만약 하나의 부모 컴포넌트와 자식 컴포넌트들이 여럿이라는 상황을 가정해보자. 만약 자식 1의 state를 자식 6에서 사용하고 싶다면 자식 1 -> 부모 -> 자식 3 -> 자식 6으로 state를 넘겨줘야하는데 하위 컴포넌트에서 상위컴포넌트로 데이터를 넘겨주는 것은 적절한 방법이 아니다. 그렇기 때문에 전역상태관리를 위한 라이브러리인 리덕스를 이용하여 하나의 스토어에 저장해둔 상태를 원하는 컴포넌트에 불러다 사용하면 되는 것이다. 이렇게 리덕스를 이용하면 컴포넌트끼리 같은 상태를 공유해야할 때도 쉽게 적용할 수 있으며 상태 업데이트 로직을 분리시켜 더욱 효율적인 관리가 가능해..

1. React Hooks란? 리액트 훅은 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리라고 할 수 있는데 React 16.8버전에 새로 추가된 기능이다. 이는 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용 가능하다. 2. Hook 규칙 1) 최상위에서만 Hook을 호출해야한다. 반복문이나 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. 리액트 훅은 호출되는 순서에 의존하기 때문에 조건문이나 반복문 안에서 실행하게 될 경우 해당 부분을 건너뛰는 일이 발생할 수도 있기 때문에 순서가 꼬여 버그가 발생할 수 있다. 그렇기 때문에 이 규칙을 따르면 useState 와 useEffect가 여러번 ..

React의 state 와 props 실전 프로젝트가 마무리되어가면서 그동안 공부했던 기본적인 내용들을 하나하나 다시한번 되짚어보려고 한다. 리액트를 사용하게 되면서 가장 기본적이고 중요하게 알아야했던 state와 props의 개념과 차이에 대해서 설명할 것이다. Props props는 properties의 약자로 부모 컴포넌트가 자식 컴포넌트로 내려주는 data를 말한다. 즉 상위 컴포넌트의 데이터를 하위 컴포넌트에 공유하는데 사용하며 자식 컴포넌트는 부모 컴포넌트로부터 props를 받아 사용한다. props는 부모요소에서 설정하는 것으로 상속받은 자식 컴포넌트 내에서 수정이 불가능한데 리액트는 부모에서 자식으로라는 일방향성 상속이라는 특징을 가지고 있기 때문이다. // 페이지네이션에서 넘겨주는 pro..