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..

리액트에서는 react-router-dom을 이용하여 movies/:id 와 같은 형식으로 params를 지정해줄 수 있었는데 Next.js에서는 다른 방식으로 URL에 변수를 넣을 수 있다고 한다. 지금부터는 Next.js에서 라우터를 하는 방식을 알아보자. Next.js에서 페이지 이동 - 페이지가 1개일 때 Next.js에서는 react-router-dom을 이용했을 때와는 다르게 Pages라는 폴더 안에 원하는 파일을 만들어주면 그게 자동으로 page의 URL이 되는 신기함을 경험했었다. 그런데 기본적인 URL을 만드는 방법은 알았지만 그 뒤에 params로 새로운 변수를 넣어주는 방법에 대해서는 알지 못해 이를 알아봐야겠다고 생각했다. // 로컬 호스트 3000 뒤에 오는 기본적인 URL은 Pa..

클라이언트 사이드 렌더링(CSR)과 SPA 리액트는 기본적으로 싱글 페이지 어플리케이션(SPA)으로 하나의 Html에 수많은 js 파일을 가진다. 싱글 페이지 어플리케이션은 기본적으로 클라이언트 사이드 렌더링 방식을 취하는데 CSR은 클라이언트(브라우저)에서 자바스크립트 파일을 통해 데이터를 렌더링 하는 방식이다. 그렇기 때문에 클라이언트에서 데이터 요청이 발생하면 필요한 데이터만 백엔드 서버에 요청하여 데이터를 받아온다. 장점 필요하거나 수정된 데이터만 서버에 요청하여 받아오기 때문에 서버 트래픽이 감소한다. HTML에 대한 정보가 처음부터 포함되어 있어 모든 검색엔진에 대한 검색 엔진 최적화(SEO)가 가능하다. 단점 검색 엔진 크롤러가 정보수집을 제대로 하지 못한다. 초기에 데이터를 제외한 모든 코..

API KEY 숨기기 보통 API KEY는 본인의 고유한 것이기 때문에 인터넷에 노출시키면 안된다. 그렇기 때문에 env 파일 안에 넣어서 작업한 후 깃에도 올라가지 않도록 항상 조심하는 것이 좋다. Next.js라서 가능한 Redirect와 Rewrite라는 것을 배웠는데 API KEY나 특정 경로를 감출 때 이 방법을 사용하면 되는 것 같다. Redirect redirect는 사용자가 변경된 path로 유입되면 새로운 경로고 안내하는데 아래와 같이 next.config.js 파일을 수정해주면 된다. 여기서 "/contact"라는 경로를 입력하면 "/form"이라는 새로운 경로로 리다이렉트 되는 것을 알 수 있다. const nextConfig = { reactStrictMode: true, async..

영화 DATA를 가져온 사이트 (TMDB) 노마드 코더 next.js 강의를 들으며 알게된 사이트인데 기본적으로 API 구성이 잘 되어있어서 내가 원하는 데이터를 어렵지 않게 받아올 수 있는 것 같다. 나는 이곳에서 영화 데이터를 받아오기 위해 API 키 발급 신청을 했고, 신청 후 즉시 API 키가 발급된 것을 알 수 있었다. 지금부터는 받아온 API KEY를 이용해 NEXTJS 프로젝트에 data를 심어줘볼 것이다. 리액트앱과 다른 것? 사실상 데이터를 받아와서 화면에 그려주는 것은 리액트에서와 다를 것이 없었던 것 같다. 똑같이 화면이 렌더링될 때 내가 받아오고자하는 데이터를 요청하면 되는 것이었는데 이번에 처음으로 fetch함수를 이용해봤다. 먼저, 발급한 API KEY를 변수로 선언해주고 가져온..

Next.js에서 Style을 적용하는 방법에는 어떤 것이 있을까? ① CSS module을 사용하는 방법 가장 먼저 css module을 사용하는 방법을 적용해보았는데 NavBar.js에 CSS를 적용하기 위해 NavBar.module.css라는 파일을 생성해주었다. 그 후 css 파일 안에서 클래스 선택자로 스타일을 만들어주었고 이를 NavBar.js에 불러와 사용하였다. // NavBar.module.css .link { text-decoration: none; } .active { color: tomato; } link의 경우 두가지 a태그에 모두 적용이 되어야하고, active의 경우 조건부로 true인 경우에만 적용이 되도록 해야하는데 그럴 때는 ``을 이용하거나 className을 배열로 만..

Next.js란? 지금까지는 리액트를 사용하여 CSR로 애플리케이션을 구성했다면 지금부터는 next.js라는 프레임워크에 대해 공부한 것을 정리해보려고 한다. 기본적으로 리액트는 SPA이기 때문에 CSR을 기반으로 운영되어지지만 next.js를 이용하면 서버 사이드 렌더링을 간편하게 적용할 수 있게 된다. 클라이언트 사이드 렌더링의 경우 html 파일이 하나이며 나머지가 모두 js 파일로 이루어져 처음에는 흰색 화면을 가지고 온 후, 자바스크립트 번들을 다운 받고 나서 화면을 렌더링하게 된다. 반면에 next.js를 이용하여 SSR로 작동시키면 pre-rendering을 하기 때문에 기본적으로 html을 먼저 불러와 사용자에게 보여주고 그 후에 리액트에 연결해 어플리케이션을 보여주는 식으로 작동된다. 여..