꾸생의 DevLog

리액트에서 리덕스(Redux) 사용하기

리덕스는 무엇인가? 공식 문서에는 "액션"이라는 이벤트를 사용해 어플리케이션의 상태를 관리하고 업데이트하기 위한 패턴 및 라이브러리로 설명되어 있다. 즉, 상태가 예측 가능한 방식으로 데이터를 업데이트할 수 있도록 보장하는 규칙과 전체 어플리케이션에서 사용해야 하는 중앙 저장소 역할을 한다고 한다. 리덕스는 리액트 뿐만 아니라 뷰(Vue)나 앵귤러 등 자바스크립트를 사용하는 프레임워크는 모두 적용할 수 있는 라이브러리로, 리액트에 State Props Drilling을 방지하고 컴포넌트 단에서 쉽게 State에 접근 할 수 있다. 상태 예측이 가능한 방식으로 업데이트가 된다고 소개되어 있는데, 이 말은 저장되는 State의 규칙이나 방식을 사용자가 직접 정의하기 때문이다. 리덕스를 왜 사용해아할까? 하나..

2022.03.06  

React Router를 사용한 페이지 이동 애니메이션

오늘은 리액트와 리액트 라우터를 복습해보면서 기존 Framer-motion을 사용해 구현했던 페이지 이동 애니메이션을 구현해보았습니다. 페이지 이동 애니메이션이나 컴포넌트 마운트, 언마운트 애니메이션으로 부를 수 있겠습니다. 리액트는 가상돔을 사용해 화면을 빠르고 부드럽게 렌더링해주는 장점이 있는데요. 리액트 라우터를 사용한다면 전체 페이지 이동간 깜빡임과 전환 속도는 눈깜짝할 사이에 바뀝니다. 물론 빠른것도 좋지만, 페이지가 전환될 타이밍에 약간의 애니메이션 효과를 줘서 꾸며줄 수 있습니다. 상단 네비게이션으로 페이지를 이동하는데, 이동할 때마다 슬라이드 업/다운 효과를 내줍니다. 기존 리액트 라우터가 v6로 업데이트 되면서 사용하던 컴포넌트가 조금 달려졌습니다. App.js import './App...

2022.03.03  

[React] 무한 스크롤(Infinite Scroll) 구현

이전 Toast Editor와 마찬가지로, 리액트 환경에서의 무한 스크롤(Infinite Scroll)도 개인적인 포트폴리오에서 구현한 내용을 바탕으로 포스팅을 해보려 합니다. 무한 스크롤(Infinite Scroll) 이란? 무한 스크롤은 개인적으로 UI/UX측면에서 가장 좋아하는 페이징 기법입니다. 필자의 경우 고등학생 시절 페이스북에서 처음 경험하게 되었고 개인적인 생각으로 지금보다 미래에 데스크톱 환경에서는 무한 스크롤이 필수나 더욱 대중화되지 않을까 생각됩니다. 왜냐하면 젊은 세대일수록 컴퓨터보다 스마트폰의 경험이 익숙하기 때문인데요. 유튜브, 트위터, 인스타, 페이스북 등 방대한 컨텐츠를 효과적으로 노출시키기 위해 주로 채택하고 있습니다. 하지만 무한 스크롤 선택은 무조건 적인 정답이 아니라는..

2022.02.04  

[React] Next.js + Toast UI Editor 사용

개인적인 포트폴리오를 만들며 간략히 사용했던 경험담으로 글을 작성해봅니다. DB 저장은 MongoDB를 사용했으나 관련 내용은 포함하지 않으니 참고해주세요. 먼저 위지윅(WYSIWYG) 에디터로 토스트 에디터를 선택한 이유부터 시작하겠습니다. TOAST Editor 선택 이유 공식 문서의 친절함 (공식문서) MIT Lisence React 지원 여부 Brower Support 단순한 UI 계속되는 업데이트 Next.js 프로젝트에서 사용했기 때문에 리액트 지원 여부를 먼저 체크했고 개발 시간 단축을 위해 중요한 공식 문서의 친절함도 중요하게 봤습니다. MIT 라이센스는 필수겠죠. 다음으로는 여러 브라우저의 지원 여부와 단순한 UI가 있었습니다. 알고 보니 NHN이라는 친숙한 기업에서 만든 라이브러리임을 ..

2022.01.31  

[Next.js] Dynamic Import 사용하기

Dynamic을 사용하기 전 Next.js 서버 사이드 렌더링(SSR)의 기본 동작 원리를 이해해야한다. SSR 동작 순서 클라이언트 요청 Server Side 단에서 웹 페이지를 Pre-Rendering 으로 HTML 문서 생성 생성된 HTML 문서를 클라이언트에 전송 리액트에서 번들링된 JS파일을 클라이언트에 전송 클라이언트 단에서는 HTML 문서위에 전송받은 JS 파일을 매칭 이 과정을 Hydrate라고 부른다. 서버에서 1번 클라이언트에서 1번 총 2번의 렌더링을 진행해 비효율적이지 않을까 싶은데, 서버 단에서 Pre-Redering 해주므로써, 가벼운 JS파일로 클라이언트는 빠르게 웹페이지 로딩이 가능하다. 부분적 CSR 구현을 하는 이유 SSR이 아닌 부분적 CSR 방식을 사용해야하는 이유는 ..

2022.01.05  

[Next.js] 정적(static) 이미지 및 파일 사용하기

1. 정적 이미지 파일 사용하기 프로젝트 안에서 고정된 파일명을 가지고 있는 파일을 사용하려면 우선 프로젝트 경로에서 ./public 폴더에 파일을 넣어줍니다. import Image from 'next/image' function Avatar() { return } export default Avatar 이미지를 예로들어 ./public/me.png 경로에 파일이 존재하면 아래처럼 src 속성에 알맞게 파일명을 넣어주면 해당 경로의 파일에 접근할 수 있습니다. 공식 문서에 여러 주의사항있어 참고하면 좋겠습니다. 2. 주의사항 Next/image를 사용하려면 10 버전 이상만 사용 가능 public 폴더 명은 동적 파일 사용을 위한 유일한 폴더이므로 이름을 변경하면 안된다. pages 폴더에 있는 파일 ..

2021.12.31   2

Next.js - Styled-Components SSR 적용하기

Next.js 프로젝트에서 Styled-Components를 사용해 CSS를 적용하면 로컬에서는 스타일에 전혀 문제가 없어 보였다. 로딩 시 워낙 빠르기 때문인 듯하다. 하지만 Vercel을 통해 배포 후 페이지에 접속해보면 첫 화면에 잠깐 CSS가 적용되지 HTML 요소들이 보이고 화면이 깜빡이고 나서 적용한 CSS 스타일로 돌아간다. 이 문제는 _documnets.js 파일에 styled-components SSR 설정을 안 해두면 styled-components로 작성된 CSS 코드는 SSR 적용이 안되에 HTML 로딩이 끝나고 JS 로딩이 완료될 때, 스타일이 적용되기 때문이다. 작성한 CSS 코드까지 SSR 적용을 하는 방법은 아래와 같다. > npm i -D babel-plugin-styled..

2021.09.10  

[Next.js] framer-motion을 사용한 페이지 이동 애니메이션

framer-motion 애니메이션 NPM Install > npm i framer-motion 사용법 import { motion, AnimatePresence } from "framer-motion" import { useRouter } from "next/router" const component = ({children}) => { const router = useRouter(); return( {children} ) } const WrapStyled = styled.div` position: relative; max-width: 978px; padding: 0 0 30px 0;` const animate = { initial :{ transform : `translateY(50px)`, opaci..

2021.09.01