일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- context
- Javascript
- codingtest
- background setttimeout
- Nextjs
- 고급안내서
- react-helmet
- background tab
- hook
- Next13
- CSS
- Programmers
- Babel
- Nextjs React 18
- react
- RTK Query
- React18
- React 고급 안내서
- React 18 Nextjs
- React 18
- next13 head
- react hook
- notFound()
- React API 참고서
- background: url
- getUTCDate
- Render Props
- background setInterval
- React 고급안내서
- React 공식문서
- Today
- Total
목록IT (167)
akjfal
Overview React 18이 추가되면서 Suspense를 포함해 자동 업데이트 batching, startTarnsition, React.lazy가 지원되기 시작했습니다. Next 또한 next/streaming을 통해 해당 사항들을 지원하기 시작했다. ※ startTransition : useTransition을 사용해서 다음 화면으로 넘어가기 전 지연을 주는 것 ※ batching : 일괄 처리 Using React 18 with Next.js npm install next@latest react@latest react-dom@lastest Streaming SSR Nextjs는 React 18의 Streaming Server-Rendering (SSR)를 바로 사용 가능할 수 있습니다. Sre..
nextjs dynamic routes까지 완료 https://nextjs.org/learn/basics/dynamic-routes/dynamic-routes-details
"dependencies": { "@babel/core": "^7.18.0", "@babel/register": "^7.17.7", "babel-loader": "^8.2.5", "babel-preset-react-app": "^10.0.1", "compression": "^1.7.4", "concurrently": "^7.2.1", "express": "^4.18.1", "nodemon": "^2.0.16", "react": "^18.1.0", "react-dom": "^18.1.0", "react-error-boundary": "^3.1.4", "resolve": "^1.22.0", "rimraf": "^3.0.2", "webpack": "^5.72.1", "webpack-cli": "^4.9.2" ..
그동안 다른거해놓고도 글 작성 귀찬아서 안했다... https://yceffort.kr/pages/39 Home yceffort yceffort.kr 이분 블로그가 아직 이해안되는 내용도 많지만 읽어볼만한 것들이 많다. https://yceffort.kr/2021/03/server-side-rendering-and-react-components Home yceffort yceffort.kr 이거 참고해서 ssr+react 토이하나 만들어볼 예정이다.
nextjs 공식문서 학습 https://nextjs.org/learn/basics/data-fetching/implement-getstaticprops Learn | Next.js Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more. nextjs.org 여기부터 다음에 학습할것
vue의 컴포넌트에서 부모 데이터에 접근하는 방법 this.$root.$data 객체나 배열의 경우 내부 값을 직접 바꾸면 화면이 봐뀌지않는다. push 같은 것은 바꾼다. 해결 방법 Vue.set(this.tableData[0], 0, 'X)이런식으로 vue.set을 사용하면된다. 배열 인덱스를 여러개 사용하는 경우 마지막 인덱스를 값으로 하면 된다. this.$set The template root disallows 'v-for' directives 란 에러가 떳는데 확인해보니 최상단에 못두는것같다 div로 감싸주었더니 에러가 해결되었다. Event bus import export new Vue를 만들어준뒤 해당을 import export 한다 이후 최상단에서 $on으로 이벤트를 등록하고 $emit으..
Iframe과 status 302 status 302가 필요한 경우 - 페이지에 부적절한 콘텐츠가 있음을 감지했을때 문제해결동안 사용자를 관심있는 페이지로 리다이렉션 - 웹사이트 공격시 페이지를 복원해야하는 경우 리다이렉션을 통해 최소화 Google 로봇 또는 다른 검색엔진이 특정 페이지를 로드하도록 요청할 때 화성화 됩니다. 301과 302가 있는데 301의 경우 seo가 이동한 페이지인 B를 탐색하지만 302는 임시 이동이기때문에 seo가 A의 페이지를 탐색한다. 회사 iframe의 에러를 해결하면서 302로 인해 https사이트 내에서 http페이지를 호출해서 에러가 발생했다 그런데 iframe과는 연관이 없어보인다. webpack dev server 를 작동시키는데 Cannott get / 에러가..
vue를 사용할 때 vue와 vue-template-compiler의 버전을 맞춰줘야만 webpack이 정상적으로 작동한다. 둘의 버전을 맞춰줬는데 [webpack-cli] Error: Cannot find module 'vue/compiler-sfc' 이러한 에러가 발생했다. 해당 사유는 내 vue버전이 2.6.14였는데 vue가 2버전의 경우에는 vue-loader 16+에서는 사용할수가 없기 때문이다. v-bind 를 통해서 파일내 vue state와 연결시킬 수 있다. ex) v-bind:class='wating' -> waiting이란 변수를 사용하는 것이 된다. 를 사용하면 해당 파일내에서만 사용하게된다. 만약 뒤에 scoped를 붙이게되면 #screen[data-v-22c711ee] 이런식으..