Frontend
-
Next.js 렌더링 방식 및 react-query를 이용한 hydrateFrontend/NextJS 2023. 5. 1. 21:41
1. next.js가 SSR을 수행하는 방식 웹서버에서 html+css+js를 다운받아 렌딩할 때 두 가지 방식이 있다. CSR과 SSR. 이 둘의 차이는 이전 포스팅에서 확인할 수 있다. https://lulu-developmentlog.tistory.com/187 nextJS 왜 쓰는가 NextJS에 대한 설명을 구글에서 가져오면 아래와 같다. nextJs는 서버 사이트 렌더링, 정적 웹 페이지 생성 등 리액트 기반 웹 애플리케이션 기능들을 가능케 하는 Node.js 위에서 빌드된 오픈 소스 웹 lulu-developmentlog.tistory.com next.js는 기본적으로 SSR를 기반으로 한다. 하지만 SSR은 처음 및 초기 로딩속도는 빠르지만 페이지를 넘길 때마다 중복되는 데이터를 서버측에서..
-
next.js getInitialProps, getServerSideProps, getStaticProps, getStaticPath,Frontend/NextJS 2023. 5. 1. 15:47
여러 Next.js 프로젝트를 보다보면 흔하게 getInitialProps, getStaticPath, getStaticProps, getServerSideProps들을 마주하곤 한다. 이들의 역할을 쉽게 생각하면 React의 useEffect의 역할을 생각하면 쉽다. React의 useEffect의 경우 렌더링 전 사전에 data를 fetching하기 위해 사용된다. next에서도 이같은 기능을 getInitialProps, getStaticPath, getStaticProps, getServerSideProps를 통해 제공한다. 각각의 종류를 하나하나 자세히 살펴보자. 1. getInitialProps 이름에서 쉽게 유추할 수 있 듯, getInitialProps는 서버에서 실행되어 data를 미리 ..
-
Next.js _app, _documnetFrontend/NextJS 2023. 5. 1. 14:25
yarn create next-app --typescript를 통해 next.js 기본설정을 마치다보면 자동으로 _app.tsx, _document.tsx가 설치되어있는 모습을 볼 수 있다. 이 두가지는 next.js에 어떤 역할을 주는지 알아보자! 1. _app.tsx 기본적으로 Next.js에서는 App의 구성 요소를 사용하여 모든 페이지를 초기화한다. 따라서 App.tsx를 만들어 기본 App 구성 요소를 덮어 쓸 수 있다. 즉, 모든 페이지에서 공통으로 필요한 처리를 여기에서 작성하여 쓰면 된다. 이를테면 - 페이지 간 공통 레이아웃 - 전역 State (Store,React-query 설정 등) - 글로벌 CSS - 각 Route Provider - 상태관리 library의 Provider, R..
-
[React] ref를 prop으로 넘기기 - forwardRef()Frontend/React 2023. 4. 28. 21:10
우선, ref는 React에서 DOM에 직접 접근하기 위해 사용한다. 사용방법은 우선 useRef hook을 선언하여 ref 객체를 생성한 다음 원하는 Element의 ref 값을 넘기면 된다. import { useRef } from 'react'; export default fuction App() { const inputRef = useRef(null); const focusHandler = () => { inputRef.current.disabled = false; inputRef.current.focus(); }; const resetHandler = () => { inputRef.current.disabled = true; inputRef.current.value = ""; }; return ..
-
React를 활용한 OAuth 2.0 카카오 로그인 연동Frontend/React 2023. 4. 24. 22:28
네이버, 카카오, 구글 3사의 소셜 로그인을 오로지 React 웹 서버를 통한 구현방식을 우선 소개하고, 백엔드를 이용하여 보안을 강화하는 방법도 함께 소개하겠다. OAuth 란? 구글, 페이스북, 트위터와 같은 다양한 플랫폼의 특정한 사용자 데이터에 접근하기 위해 제3자 클라이언트(우리의 서비스, 앱)가 사용자의 접근 권한을 위임(Delegated Authorization)받을 수 있는 표준 프로토콜이다. 쉽게 말하자면, 우리의 서비스가 우리 서비스를 이용하는 유저의 타사 플랫폼 정보에 접근하기 위해서 권한을 타사 플랫폼으로부터 위임 받는 것 이다. 우선 전체적인 OAuth의 구동방식은 아래와 같다. 우리는 우선 웹서버를 통하여 구현할 예정이니 위 그림을 참고하자. 우리의 웹 서버에서 카카오 로그인 요..
-
vite + typescript 절대경로 지정 방법Frontend/etc 2023. 4. 24. 20:44
vite + typescript 절대경로를 지정하기 위해서는 아래 두 파일을 건드려줘야한다. vite.config.ts, tsconfig.json 1. vite.config.ts import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import tsconfigPaths from 'vite-tsconfig-paths'; // https://vitejs.dev/config/ export default defineConfig({ base: './', plugins: [react(), tsconfigPaths()], }); 에서 base: './'를 추가하고, vite-tsconfig-paths를 설치하여 pulgins추가해..
-
React Router - BrowserRouter vs HashRouterFrontend/React 2023. 4. 24. 20:37
일단, 리액트 라우터를 알기 전에 리액트가 SPA를 쉽게 만들수 있도록 하는 라이브러리라는 점에 주목해야한다. SPA의 경우 브라우저상으로 뒤로 가기, 앞으로 가기와 같은 내비게이션 사용이 불가하다. 그 이유는 기존방식은 url 변경시 새로고침되며 모든 페이지를 reload하여 로드 시간이 오래 걸렸지만, React는 SPA 체제로 새로고침 대신 Router를 사용하여 변경된 소스만 바뀌도록 하기 때문에 속도를 개선한다. 하지만 페이지에 따라 주소를 각각 만들기 위한 Routing이 필요하고 리액트에서는 다양한 라이브러리를 통해 이러한 기능을 제공한다. 그러한 라이브러리 중 대표적으로 React Router가 있다. React Router는 여러 화면으로 구성된 웹 애플리케이션을 만들 때 클라이언트 사이..
-
javascript 클로저 예제 및 쓰는 이유Frontend/Javascript 2023. 4. 6. 12:53
클로저 상태를 안전하게 변경하고 유지하기 위해 사용한다. 다시말해, 상태가 의도치 않게 변경되지 않도록 상태를 안전하게 은닉하고 특정 함수에게만 상태 변경을 허용하기 위해 사용한다. 변수 값은 누군가에 의해 언제든지 변경될 수 있어 오류 발생의 근본적 원인이 될 수 있다. 외부 상태 변경이나 가변 데이터를 피하고 불변성을 지향하는 함수형 프로그래밍에서 부수효과를 최대한 억제하여 오류를 피하고 프로그램의 안정성을 높이기 위해 클로저는 적극적으로 사용된다. 아래는 함수형 프로그래밍에서 클로저를 활용하는 간단한 예제다. // 함수를 인수로 전달받고 함수를 반환하는 고차 함수 // 이 함수는 카운트 상태를 유지하기 위한 자유 변수 counter를 기억하는 클로저를 반환한다. function makeCounter..