front-end/Nextjs10

• 

  [Next/SVGR] NextJS에서 SVGR 다루기 1. SVGR이란 svgr이란 svg 이미지를 react에서 쉽게 다루기 위해서 만들어진 webpack 설정이자 babel 설정이다. SVGR을 이용하면 SVG파일을 react에서 컴포넌트화 하여서 사용할 수 있다. Svg 파일은 png,jpg, jpeg파일들과 다르게 크기와 상관없이 일정한 화질을 유지하며 무한한 확장 축소가 가능하고 색상과 테두리 선의 두께, 색상과 같은 속성들도 그 때 그 때 변경이 가능하다. 사실 svg 이미지는 xml이라는 마크업 언어로 쓰여진 language의 일종이기 때문에 완벽한 이미지라고 보는 것에는 무리가 있다. 나는 내가 프로젝트를 진행하면서 이 svg이미지를 어떻게 다루었는 지를 기록할 것이다. 우선 나는 NextJS에서 SVGR을 사용하기 위해 @svgr/webpa.. front-end/Nextjs 2022. 9. 17.

• 

  [NextJS] useInfiniteQuery이용해 무한스크롤 구현하기 2 - IntersectionObserver 1. 무엇을 하려하는가? 앞선 포스팅에서 무한스크롤을 구현했을 때 단순히 페치버튼을 누를 때마다 다음 데이터들을 불러오도록 설계를 하였다. 하지만 이렇게 되면 내가 애초에 무한 스크롤을 구현하려던 취지와 맞지 않는다. 클릭할 때마다 다음 데이터를 불러오게 된다면 결국 페이지네이션과 크게 다를 바가 없기 때문이다. 따라서 인스타그램과 네이버와 같은 큰 플랫폼에서는 이러한 문젤를 어떻게 해결했는지 참고하기로 하였다. 인스타그램이나 네이버와 같은 플랫폼에서 데이터를 검색하거나 많은 데이터들을 보여주는 페이지가 있을 때 페이지네이션ui가 사라진 건 꽤 오래된 얘기이다. 이렇게 되면 이들이 어떤 방식으로 데이터를 불러오는 지가 궁금했는데 구글링을 하던 중 IntersectionObserver라는 것이 있어 깊게 .. front-end/Nextjs 2022. 8. 11.

• 

  [Next JS] React-Query로 UseInfinityQuery이용하여 무한 스크롤 구현하기 with express.js 1. 무엇을 하려하는가? - 프론트엔드 개발을 진행하면서 좀 더 사용자 친화적인 ux에 대해 고민하게 되었다. 프론트엔드는 백엔드에서 가공된 데이터들을 어떻게 사용자들이 받아들이기 쉽게 보여주는가?에 대한 고민이 필수라고 생각한다. 그러던 와중 모든 콘텐츠 항목들을 보여주는 페이지와 같은 경우 옛날에는 페이지네이션을 통해 각 페이지마다 다른 데이터들을 보여주고 페이지를 넘길 때 화면이 깜빡거리면서 새로운 api호출과 함께 페이지가 reload되는 것이 일반적이었다. 하지만 요즘 sns나 네이버와 같은 대형 플랫폼은 트렌드를 변화하고 있다. 이제 일반적으로 보이던 페이지네이션 바와 같은 ui는 그 자리를 잃어가고 있다. 데이터가 넘쳐나고 그 넘쳐나는 데이터들 사이에서 자신이 원하는 정보를 빠르게 찾아냉하는.. front-end/Nextjs 2022. 8. 11.

• 

  [NextJS] React-Query useMutation()사용하기 1. 무엇을 하려하는가? 블로그를 열심히 만들어가던 와중 한 가지 개선하고 싶은 상황이 생겼다. 댓글을 작성하거나 삭제하고 난 후 나는 nextjs의 router를 이용해서 router.reload()를 이용해서 페이지를 새로고침해서 작성된 댓글이 다시 화면에 보이게 하거나 댓글이 삭제된 것을 화면에 다시 보여주고 싶었다. 하지만 매번 댓글을 작성하거나 삭제 할 때마다 페이지를 새로고침하는 것은 사용자 경험적인 측면에서 매우 안좋을 것 같았다. 따라서 찾은 것이 react-query의 useMutation() 훅이다. 2. React-query hook의 종류 useQuery -> 단순히 데이터를 가져오는 역할을 한다. 물론 query key가 제공되므로 queryClient를 만들어 캐시를 저장하거나 .. front-end/Nextjs 2022. 8. 1.

• 

  [NextJs] React-Query로 ServrSide Rendering 구현하기 1. 무엇을 하려하는가? NextJS가 강력한 이유 중 하나는 SSR(server-side-Rendering)을 제공하기 때문이다. 서버 단에서 미리 데이터를 포함한 html파일을 렌더링한 후 프론트 쪽으로 보내주기 때문에 한 번 사이트가 로딩 된 후에는 거의 로딩시간이 걸리지 않는다는 장점이 있고 검색엔진이 사이트들을 방문할 때 많은 데이터가 이미 렌더링 된 html에 포함되어 있으므로 검색 엔진 최적화에도 유리하다는 장점이 있다. 나는 이 ServerSide Rendering을 React-Query라이브러리를 사용하여 구현해보고자 한다. 2. 구현 1. _app.tsx import Footer from "components/Layout/Footer"; import Header from "compone.. front-end/Nextjs 2022. 7. 30.

• 

  [NextJS] 동적 라우팅 (with React-Query) 1. 무엇을 하려고 하는가? 나는 개인 블로그를 만들고 있다. 이 중에 블로그 글을 작성하여 업로드를 하면 /Album페이지에 작성된 블로그 글을 React-Slick을 이용해 carousel형태로 보여주고 이 Carousel에 들어있는 이미지를 누르게 되면 해당하는 블로그 글 상세 페이지로 이동하는 기능을 구현하려고 한다. 이 기능을 NextJS에서는 dynamic Routing 즉, 동적 라우팅이라는 기능으로 제공하고 있는데 거의 프론트 엔드 업무를 진행할 때는 필수적인 기능이라 기록해두고자 한다. React에서는 useParams훅을 이용해 query의 파라미터를 받아오고 이를 통해 다른 데이터 페칭 요청을 보냈다. (axios등 이용) NextJS에서는 pages폴더 안에 [변수명].tsx , [.. front-end/Nextjs 2022. 7. 6.

• 

  [NextJS] NextJS에서의 proxy설정 1. React와는 다른 설정 CRA+Typescript조합에서의 proxy설정은 매우 간단했다. 앞선 포스팅에도 언급했듯이 그저 package.json파일에 "proxy": "http://localhost:5000/" 다음과 같은 한 줄만 추가하면 되었다. 저기서 주소는 내가 설정한 백엔드 서버의 주소로 port번호가 5000이 아니어도 괜찮다. 나는 express서버를 5000번 포트에서 열기로 했으므로 다음과 같이 설정해주었다. 하지만 nextjs에서는 proxy설정이 조금 달라진다. 2. next.config.js의 수정 nextjs에서 proxy설정을 해주려면 다음과 같은 코드만 작성해주면 간단히 끝난다. 1. next.config.js module.exports = { async rewrite.. front-end/Nextjs 2022. 7. 1.

• 

  [NextJS] NextJS에서 Styled-components사용할 때 오류 해결 1. Styled-Components라이브러리 styled-components를 nextjs에 적용하던 중 문제가 발생했다. 화면이 정말 미친듯이 깜빡이기 시작한 것이다. 먼저 styled-components를 사용하던 분이 nextjs에서 styled-components가 문제가 발생할 수 있다고 귀띔해준 것이 기억나서 이것이 그 문제인가보다 하고 바로 구글링에 들어갔다. 2. 왜 화면이 깜빡거리는가? NextJS는 서버에서 미리 Meta태그 등이 포함되어 있는 HTML을 먼저 만들어 놓은 후 보여주는 ServerSide Rendering 을 제공하기 때문에 HTML에는 손을 댈 수가 없다. 따라서 그 후에 JavaScript를 추가해주어야하는데 Styled-components라이브러리는 css-in-.. front-end/Nextjs 2022. 6. 30.

• 

  [NextJS] CRA+TypeScript 에서 Nextjs이사 - 폴더 구조 비교 1. 폴더 구조의 비교 1.React 프로젝트 - CRA+TypeScript 우선 가장 큰 특징은 리액트 프로젝트에선 다음과 같이 src폴더가 존재하고 그 안에 component apis assets feature hook pages shared stores types utils 와 같은 큰 카테고리의 폴더들이 존재한다. 각 폴더 안에는 또 component단위 혹은 기능 단위로 쪼개어 파일이 배치되어 있다. 위 폴더 구조를 보면 component폴더 안에 card컴포넌트를 구현할 폴더를 하나 만들고 그에 해당하는 index.tsx파일과 styeld.ts파일이 존재하는 것을 확인할 수 있다. 또한 리액트 프로젝트에서는 src폴더 안에 assets폴더를 만들어 사용할 아이콘, 폰트, 이미지들을 모아둘 수 .. front-end/Nextjs 2022. 6. 29.

• 

  [NextJs] CRA+TypeScript에서 NextJS로 이사 1. Create Next-app 추가 1. create next-app --typescript npx create-next-app@latest --typescript # or yarn create next-app --typescript # or pnpm create next-app --typescript 다음과 같은 코드로 typescript템플릿의 nextjs를 설치해준다. 2. yarn add next react react-dom npm install next react react-dom # or yarn add next react react-dom # or pnpm add next react react-dom 3. Package.json script 수정 "scripts": { "dev": "ne.. front-end/Nextjs 2022. 6. 29.