일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- 백준골드
- HTML
- 백준
- 알고리즘
- 프로그래머스코테
- HTML5
- 코딩테스트
- JS
- 리액트커뮤니티
- js코테
- 안드로이드 스튜디오
- JS프로그래머스
- CSS
- 백준알고리즘
- 코테
- 익스프레스
- 백준nodejs
- dp알고리즘
- 몽고DB
- 리액트댓글기능
- 프로그래머스
- 프로그래머스JS
- 리액트
- 백준구현
- 자바스크립트
- 백준js
- 포이마웹
- css기초
- 다이나믹프로그래밍
- 백준구현문제
- Today
- Total
목록React (63)
개발새발 로그
현재 Redux 공식사이트에서는 Redux Toolkit 사용을 권장하고 있다. RTK는 Redux 앱을 만들기에 필수적으로 여기는 패키지와 함수들을 포함합니다. 대부분의 Redux 작업을 단순화하고, 흔한 실수를 방지하며, Redux 앱을 만들기 쉽게 해주는 모범 사례를 통해 만들어졌습니다. 일단은 먼저 Redux 사용방법을 알아보자 설치 방법 npm install redux npm install react-redux npm install --save-dev redux-devtools 기본 예제 설명 먼저 앱의 상태를 저장하는 하나의 저장소(store) 상태 트리를 변경하기 위해 무슨 일을 할지 서술하는 객체인 액션(action) 액션이 상태트리를 어떻게 변경할지 명시하기 위해 작성해야하는 reduce..
https://velog.io/@pest95/RTK-non-serializable-value-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dxG5z0/btsB3bE6KC0/HjY95retUcAN9va0xQh4sK/img.png)
개요 react-Router-DOM은 계속해서 업데이트 되었다. 예전에는 에 를 사용하다가 6버전 부터는 에 를 사용했다. 현재 6.4버전 이후부터는 createBrowserRouter이라는 것을 사용한다. 6.4버전 이후에 사용되는 createBrowserRouter에는 데이터API라는 것을 사용할 수 있다고 한다. 엄청난 기능이 있는 것 같은데 일단 나는 6버전 이후의 라우터인 BrowserRouter를 사용할 것이다. 공식 사이트에서는 createBrowserRouter을 사용하는 것을 권장하고 있다. 하지만 데이터 API에 관심이 없다면 BrowserRouter을 사용하라고 한다 설치 방법 - react router dom 공식사이트에서는 vite를 기준으로 설명하고 있다. npm install ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/den4wK/btsB6jPP5lO/neoi66CYjCZwiFZR6KaoKK/img.png)
NextJS는 API를 만들 수 있는 기능을 제공한다. 서버사이드 렌더링을 제공해주는 프레임워크들은 어찌됐든 기반이 NodeJS이고, 서버가 뜨기 때문에 API를 만들 수 있는 기능을 제공해주는 경우가 많다. api라는 디렉토리 안에 파일을 만들면 쉽게 그 이름에 해당하는 API를 만들 수 있다. https://nextjs.org/docs/pages/building-your-application/routing/api-routes Routing: API Routes | Next.js Next.js supports API Routes, which allow you to build your API without leaving your Next.js app. Learn how it works here. next..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bH39pl/btsB7UaNloz/SWM2N7k0IlcGn5FupFBQC0/img.png)
getServerSideProps 사용하기 페이지에서 getServerSideProps (서버 측 렌더링)라는 함수를 내보낼 때 Next.js는 각 요청에 대해 getServerSideProps에서 반환한 데이터를 사용하여 이 페이지를 미리 렌더링합니다. 이 기능은 자주 변경되는 데이터를 가져와서 최신 데이터를 표시하도록 페이지를 업데이트하려는 경우에 유용합니다. https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props Data Fetching: getServerSideProps | Next.js Fetch data on each request with `getServerSideProps`. nex..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cmXnTS/btsB5W1KNE2/mKkZLxLy61c6lt6Kcw0rgk/img.png)
서버사이드 렌더링 서버로부터 렌더링 데이터를 받는 것 - 검색엔진 최적화 - 더 빠른 초기 로딩 속도 기존 SSR의 문제점 서버사이드와 클라이언트 사이드에서 각각 렌더링을 위한 코드를 따로 만들어야 했다. Isomorphic방식 등장 같은 코드로 서버와 클라이언트에서 동일하게 실행되는 환경 NextJS시작하기 npx create-next-app@latest . - 타입스크립트는 설치과정에서 선택 Nextjs에서는 라우팅이 자동으로 지원된다. 리액트와 다르게 디렉토리와 파일이름으로 자동지정된다. pages의 index.tsx는 가장 처음 보이게될 컴포넌트이다. pages의 _app.tsx는 모든 페이지가 거치게 되는 곳이다. (최상위) about.tsx는 임의로 만든 파일인데 about.tsx 페이지를 보..
https://mdpapa.tistory.com/164
https://noogoonaa.tistory.com/62 VSCode에서 발생하는 Delete `␍` eslint (prettier/prettier) 해결방법 Prettier와 ESLint를 프로젝트에 적용하던 중 아래과 같은 오류가 ESLint에서 발생했습니다. Delete `␍` eslint (prettier/prettier) 사실 ESLint에서 발생하는 오류라서 실행은 정상적으로 되지만, 이러한 오류 noogoonaa.tistory.com