Web Dev/3. React 관련
-
Next.js Incremental Static Regeneration 알게 된것! Revalidate = timeoutWeb Dev/3. React 관련 2021. 3. 15. 23:38
// next.js의 예제 코드 function Blog({ posts }) { return ( {posts.map((post) => ( {post.title} ))} ) } // This function gets called at build time on server-side. // It may be called again, on a serverless function, if // revalidation is enabled and a new request comes in export async function getStaticProps() { const res = await fetch('https://.../posts') const posts = await res.json() return { props..
-
React Code splitting with lazy and suspenseWeb Dev/3. React 관련 2021. 2. 4. 15:27
Code Splitting in React [공식 문서] React.lazy를 통한 dynamic import // Before import SomeComponent from './SomeComponent' // After const SomeComponent = React.lazy(() => import('./SomeComponent')) function MyComponent() { return ( ); } Lazy를 통해서 실제로 컴포넌트가 렌더링 될때, 동적으로 파일을 import 할 수 있다. 이렇게 나뉜 부분은 번들링이 따로되서 네트워크 탭을 확인하면 다른 js 파일로 load 되는 것을 확인 할 수 있다. Lazy component 는 항상 Suspense Component 내에서 렌더링 되어야..
-
React Hooks - useRef 사용법Web Dev/3. React 관련 2021. 2. 4. 14:32
UseRef 사용법 [공식 문서] // 값을 넣는 경우 const refContainer = useRef(initialValue); // dom을 선택하는 경우 function sampleFunc() { const inputRef = useRef(null); const onButtonClick = () => { inputRef.current.focus(); } return ( Focus the input ) } useRef는 .current 속성만을 가진 객체를 반환해준다. initialValue가 이 current에 할당된다. 이 객체는 컴포넌트의 full lifetime 동안 있는다. 즉, useRef는 .current에 변할수있는 값을 넣을 수 있는 박스이다. 특히 위의 예시 코드의 sampleFu..
-
Gatsby란? Tutorial 따라하기Web Dev/3. React 관련 2021. 1. 26. 16:55
Gatsby를 공부하게 된 이유 Site를 만들일이 있는데, 솔직히 서버는 필요없을 것 같고 Static한 파일만 있으면 될것 같았다. 이럴때 Gatsby를 쓴다는데, 사실 뭔지 잘모르겠어서 그런가보다 하고 살고 있었는데 이번기회게 공부를 해보려고 한다. Gatsby Intro Video Gatsby란? - Static Site Generator - Uses GraphQL to get data from anywhere - Uses React for templating and css for styling - Include Plugin Architecture Gatsby를 사용하는 이유? - Use Gatsby for speed, security, and dev experience A Review of Ga..
-
React와 Gatsby의 관계(스택오버플로우에 질문하고, 처음으로 reputation 10을 get!)Web Dev/3. React 관련 2020. 12. 23. 19:56
JavaScript, React를 deep dive하다보니 Gatsby라는 것도 관심있게 보게됬다. 근데 도통 정적 사이트 생성기라는데, 그런거면 html을 처음에 다뽑는다는 소린데, 대체 React는 무슨 역할을 하는거지? 하고 혼란스러워했다. 이건 아마도 내가 아직 JS환경에대한 이해가 부족하기 때문인것 같다. Gatsby 공식 사이트 이 사이트를 가면 문서를 이쁘게 잘 써놨다. 아직 많이는 못봤는데, 읽으면서 프론트엔드 및 Web의 생태계에 대해서도 더 이해를 할 수 있을만큼 잘써두었다. 예전에 Django를 할때는 공식사이트가 매력이 안느껴졌는데, NextJs나 Gatsby는 공식사이트가 너무 예뻐서 공식문서 읽는 재미를 붙이기 너무 좋은것 같다. 여튼 stackoverflow에 아래의 질문을 남..
-
React Hooks에 대해 제대로 알아보기 + Custom hooks 는 대체뭣인가?Web Dev/3. React 관련 2020. 12. 16. 23:21
지금 Real app이코드를 분석하면서 제대로된 앱의 구조가 어떤지를 보는데, 여기서 lib > hooks 구조를 사용하고 있다. Hooks 를 매번 사용하면서도 대강만 아는 느낌이라 이번 기회에 정리를 해보려고 reactjs.org/docs/hooks-intro.html Introducing Hooks – React A JavaScript library for building user interfaces reactjs.org 얘를 읽는다. 1. Introducing Hooks 우선 Hooks는 React 16.8에서 도입됬다. 원래 그전에는 함수형 컴포넌트는 상태를 가지지 않는 그저 순수함수였다고 한다. (올해 처음 React를 배웠을땐, 이런 망측한 것이 있을까, 하고 놀랬었다.. 하지만 함수형으로 ..
-
CSR과 SSR 개념잡기Web Dev/3. React 관련 2020. 12. 2. 00:03
www.youtube.com/watch?v=Y2spCNZDt84&ab_channel=FullstackAcademy 위의 영상을 보고 다시한번 CSR(Client-side rendering)과 SSR(Server-side rendering)의 차이를 확실히 짚어보려고 한다. 위의 강의에서는 네가지를 다룬다. 1. What is happening during client-side rendering 2.What is happening during server-side rendering 3. A comparison of the two in terms of performance 4. case study Client-side rendering -> initial request가 있을때 page, layout, cs..