반응형 2022/0710 개발 1주년 21년 7월 19일 코드스테이츠 SEB 부트캠프 33기에 탑승해서 개발을 배웠다. 대학교에서 C언어를 배운적이 있어서 조건문,반복문같은건 익숙했다. 그리고 리액트를 시작하고나서 '이게 될까?? 이걸 할 수 있을까??' 라는 생각이 들었다. 처음 하는 리액트는 너무 어려웠다. 근데 그냥 무식하게 하니까 되었다. 그 순간이 '코딩은 그냥 검색하면서 해나가는 것'이라는 생각이 들었던 첫 순간인 것 같다. 또한 동시에 도전의 측면에서 '하면 된다' 라는 자신감을 가지기도 했다. 그렇게 코드스테이츠 부트캠프에서 열심히 공부를 하고 2주프로젝트, 4주프로젝트까지 끝냈다. 21년 12월 24일에 수료를 했는데, 마침 코드스테이츠 엔지니어링팀에서 수료생들 대상으로 1월 17일에 입사할 인턴을 뽑는다는 공고가 내려왔다... 2022. 7. 26. getStaticProps - Next.js에서의 프리렌더링 Next.jx에서 getStaticProps를 사용하면 프리렌더링을 하게 된다. 1. 서버사이드에서 html을 만들어서 클라이언트에게 전해준다 (ex : 데이터fetch) 2. 클라이언트사이드에서 JS로 추가 작업 진행 (ex : 여러가지 리액트 훅) Next.js 공식문서는 언제 쓸지, 언제 작동되는지 등등 친절하게 알려주고있다. 언제 사용해야 할까? - 유저 요청 이전에 페이지 렌더링을 위해 데이터가 필요할때 - Headless CMS%EB%8A%94%20%EC%97%86%EB%8A%94%20%EC%85%88%EC%9D%B4%EC%A3%A0.)에서 데이터를 가져올때(ex : NotionAPI) - 페이지가 SEO를 위해 프리 렌더링 되어야 할때, getStaticProps는 CDN에 캐시 될 수 있는.. 2022. 7. 24. Next에서 커스텀 훅(useWindowSize)로 반응형을 작성하면 안되는 이유 우리 회사는 Next로 랜딩페이지를 관리하고 있다. 첫 렌더링을 SSR로 하게 된다. 한편 반응형은 CSS로도 하고, useWindowSize라는 커스텀훅으로도 하고 있다. useWindowSize훅은 다음과 같다. // useWindowSize.ts import { useState, useEffect } from 'react'; export const useWindowSize = () => { const [windowSize, setWindowSize] = useState({ width: undefined, height: undefined }); useEffect(() => { const handleResize = () => { setWindowSize({ width: window.innerWidth.. 2022. 7. 18. react-helmet을 쓴다고 index.html을 비워두면 안된다 몇주전 회사 내부 플랫폼에 메타태그를 작성할 일이 있어서 app.tsx에 Helmet으로 메타태그를 작성했다. 그리고 어제 갑자기 연락이 왔다. 구글 검색엔진에서 untitled가 뜬다고 이유를 알게 되었다. 내가 React-helmet을 아주 단단히 잘못 알고 있었던 것이다. React-helmet이 SSR로 를 작성해주는 건 줄 알았는데 그게 아니었다. (이래서 대충 알고 있는게 아예 모르는 것보다 무섭다고 하는 가보다) index.html에 default 가 있어야 했다. CSR을 통해 각 페이지가 그려질 때 react-helmet이 DOM을 변경한다. 크롤러는 페이지가 그려지기전의 index.html을 읽게 된다. => 검색 엔진 최적화를 하려면 항상 서버 사이드에서 만든 문서에 크롤러에게 노출할.. 2022. 7. 12. 이전 1 2 3 다음 반응형
