본문 바로가기

React20

[NextJS] 서버에서 데이터도 패치받아서 렌더링하기

결국.. 그냥 서버사이드렌더링이 있고, 오로지 서버사이드렌더링이 있다. getServerSideProps()로 컴포넌트에서 데이터를 패치받으면, 이 패치받은 데이터까지 렌더링해서 클라이언트에 전달한다. getServerSideProps() 말고도, getInitialProps()도 있다. 오직 서버사이드렌더링의 장점 - API 요청에 사용하는 key나 restful 정보를 클라이언트가 못 보게 할 수 있다.(서버에서만 처리되기 때문) - 사용자가, 데이터를 패치받는데 걸리는 시간동안, 로딩화면이나 스켈레톤을 안 봐도 되서 사용자 경험에 좋다. 개요 서버사이드렌더링의 경우, 클라이언트가 서버에 페이지를 요청하면, 서버는 html을 만들어서 우선적으로 클라이언트에 전달합니다. 클라이언트는 html을 일단, .. 2022. 1. 16.

[NEXTJS] api key 숨기기 nextjs rewrites

개요 - 숨겨야 하는 이유 보안. 클라이언트를 통해서 사용자들이 api와 key를 확인할 수 있음. Next.js로 api 숨겨서 요청보내는 방법 nextjs rewrites 설정을 하면 됩니다. https://nextjs.org/docs/api-reference/next.config.js/rewrites next.config.js: Rewrites | Next.js Add rewrites to your Next.js app. nextjs.org rewrites 속성은 요청 경로를 다른 목적지 경로로 매핑해주는 설정 객체를 배열로 가지는 nextjs의 설정 속성입니다. rewrites속성을 사용한다면, 유저가 url을 변경해서 요청할 수 없고, 개발자가 의도한 경로로만 접근할 수 있게 할 수 있습니다. .. 2022. 1. 16.

[NEXTJS] style jsx 설정 방법

Next.js에서 css-in-js 작성하는 방법 1. inline css(not cool) 2. ) } 전역 style 설정 방법 pages/_app.js를 만들면 됨. APP COMPONENTS APP PAGES차이점 2022. 1. 16.

[react] memo

개요 react + typescript + react beautiful dnd 로 드래그 앤 드롭으로 정렬기능을 구현했습니다. 리스트 중에서 하나의 아이템을 드래그 해서 정렬하면, 정렬은 잘 되는데, 문제가 생겼습니다. 옮긴 아이템과 그 이후에 순서가 밀려나야 하는 아이템들만 렌더링 되는게 아니라, 리스트 아이템 전체가 새로 렌더링이 되면서 잠깐 모든 리스트들이 깜박이는 현상이 발생했습니다. 해결 방법은 react의 memo hook을 사용하는 것입니다. react memo를 사용하는 방법 👇 이전 코드 👇 memo를 사용해서 prop가 변경되지 않은 Card 컴포넌트가 다시 렌더링 되지 않도록 수정한 코드 2021. 12. 29.

[React-Redux] typescript로 세팅하는 법

개요 React로 컴포넌트를 분리해서 사용하게 되면서 상태 관리의 필요성을 느꼈습니다. React-Redux 중앙 상태 관리 라이브러리이다. React-Redux-Tookit? state와 reducer를 파일 단위로 분리하고, 이름을 줘서, store에서 사용할 state와 reducer를 기능별 또는 정의별로 분리해서 관리할 수 있게 해준다. 자동으로 store에 분리된 store들을 하나로 세팅해 준다. 튜토리얼 1. redux tookit와 react redux 설치 npm i @reduxjs/toolkit react-redux 2. Redux Store 만들기 configureStore를 사용해서 Redux store를 만듭니다. configureStore는 reducer 함수를 받습니다. co.. 2021. 11. 28.

깃허브 페이지 creat-react-app 배포하기

create-react-app을 깃허브 페이지에 배포하기 패키지 설치 npm i gh-pages package.json { "homepage": '깃허브 페이지 주소', // ... "script": { // ... "predeploy": "npm run build", "deploy": "gh-pages -d build" } } npm run deploy 깃허브 세팅 페이지 설정 2021. 11. 28.

깃허브 페이지 creat-react-app 배포하기

create-react-app을 깃허브 페이지에 배포하기 패키지 설치 npm i gh-pages package.json { "homepage": '깃허브 페이지 주소', // ... "script": { // ... "predeploy": "npm run build", "deploy": "gh-pages -d build" } } npm run deploy 2021. 11. 27.

[Redux] Redux란?

자바스크립트 어플리케이션을 위한 상태관리 라이브러리 - 어플리케이션의 상태를 저장, 관리를 위해서 사용함. - components에서 dispatch를 사용해서 action을 정의한다. action에서 store 상태 값을 변경하기 위해서 reducer를 호출해서 상태를 변경한다. - subscribe를 통해서 store의 값이 갱신될 때마다의 로직을 작성할 수 있다. - react-redux를 통해서 리액트에 사용한다. Redux를 사용하는 이유 - 최상위 루트 컴포넌트에서 모든 상태를 가지고 있고, props로 계속 컴포넌트간에 데이터 전달이 빈번하게 일어난다. - 계속해서 변경되는 상당한 양의 데이터가 있다. - 상태를 위한 단 하나의 근원만 필요하다. Redux 함수의 API 특징 - action.. 2021. 11. 26.

[React]react router 사용법

react-router-dom 페이지 1. 설치 $ npm i react-router-dom 2. 디렉토리 구조 📁 프로젝트 |--📁src | |--📁 router | |--Router.js | |-- 📁 page | |--Community.tsx |-- app.tsx 3. 작업 대상 파일 📄 src/router/Router.js 📄 src/page/community.tsx 📄 app.tsx 4. 📄 src/router/Router.js 작성 React-router-dom 라이브러리에서 다음 3개지 프로퍼티를 사용했습니다. 접근경로에 따른 컴포넌트가 많을 경우, Switch 태그를 사용합니다. Switch태그 안에 태그를 여러 개 지정해서 사용합니다. 태그에 path에 설정한 경로에 맞는 경로로 comp.. 2021. 8. 7.

[리액트 세팅-1]Typescript + React + Express.js 프레임워크 + Prettiers 환경 세팅하기

📝 목차 1. Typescript + React 세팅⚙ 2. babel 세팅 및 Express.js 프레임워크 세팅⚙ 📦 운영환경 고려 배포를 생각하면, 프로젝트를 따로 만드는 게 좋을 것 같습니다. 서버와 웹 별도로 repo를 생성해서 서버와 웹 코드를 분리해서 버전을 관리하는 게 좋을 것 같습니다. 이렇게 나눠서 코드를 관리하면 좋은 점이 배포할 때, 서버와 웹을 별도로 배포를 할 수 있기 때문입니다. 로컬에는 하나의 폴더에 두 개의 repo를 넣어서 사용하기로 합니다. 프로젝트 ㄴ front-end ㄴ back-end ⚙ Typescript + React 세팅 로컬에 프로젝트 생성할 때는 아래 명령어를 입력합니다. npx create-react-app --template typescript 프로젝트.. 2021. 6. 2.

티스토리툴바