front-end38

• 

  [React] 컴포넌트 재사용성에 대한 고민(합성 컴포넌트) 1. 컴포넌트 재사용의 필요성 frontEnd 개발을 하다보면 특히 많이 쓰이는 컴포넌트 들이 존재한다. 버튼들, 인풋 들, carousel, card 등 ui란 너무 다양하면 사람의 눈에 오히려 피로감을 주고 정돈 되지 않은 느낌을 줄 수 있기에 많은 디자인 패턴에서 공통되는 디자인을 갖고 기능을 갖는 컴포넌트들을 정의한 후 재사용하는 것이 일반적이다. 나는 현재 서비스의 admin페이지를 제작 중이다. 이 페이지 들에는 많은 부분에 select 컴포넌트와 input컴포넌트 들이 존재하는 것을 확인했다. 위와 같은 컴포넌트들은 비단 저 한 페이지에서만 사용되는 것이 아니었다. 다양한 페이지에 모두 존재했다. 등등 저 많은 컴포넌트 들을 일일히 다 정의하는 것은 비효율적이라고 생각이 되었다. 2. 어떻게.. front-end/react 2022. 11. 22.

• 

  [React] React에서 컴포넌트 간 상태 교환 문제 탐구 및 해결 1. 상태 관리의 어려움 리액트는 기본적으로 컴포넌트를 분리한다. 컴포넌트를 분리하여 작성하면 그에 해당하는 로직을 쉽게 알아볼 수 있고 state변화에 따른 렌더링을 쉽게 다룰 수 있기 때문에 권장되는 방식이지만 여기에는 한 가지 문제가 생긴다. 바로 리액트에서는 state의 흐름이 단방향이라는 문제이다. 만약 컴포넌트를 다음과 같은 방식으로 분리해두었다면 자식 컴포넌트에서 부모 컴포넌트로 state를 전달하는 것은 불가능하다. 만약 다음과 같은 페이지를 만들 때 컴포넌트를 어떻게 분리할 것인가에 대한 고민이 있었다. 나는 위에 검색 창에 해당하는 부분과 밑의 테이블을 분리했는데 여기에는 문제가 있었다. 내가 구현한 컴포넌트는 다음과 같이 분리 되어 있었는데 userSearchForm의 검색 조건이 U.. front-end/react 2022. 11. 19.

• 

  [React]React에서 Chakra UI 편리하게 사용하기 1. 시작 chakra UI는 emotion.js기반의 ui 라이브러리이다. 많은 컴포넌트들이 있고 전역변수 및 기본 컴포넌트들을 커스텀해서 사용할 수 있는 기능 등 많은 기능을 제공한다. 자세한 내용은 chakra UI 공식 docs에서 확인할 수 있다. https://chakra-ui.com/docs/components Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a Simple, Modular and Accessible UI Components for your React Applications. Built with St.. front-end/react 2022. 10. 21.

• 

  [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.

• 

  [FrontEnd] 좀 더 재사용성이 높은 컴포넌트 - 1 1. 좀 더 재사용성이 높은 컴포넌트에 관해 현재 스타트업 프로젝트에서 nextJs를 이용해 프론트엔드를 개발하고 있다. 마크업을 진행하던 중 항상 수 많은 버튼들과 컴포넌트들을 그 때 그 때마다 새로이 만드는 것은 아주 비효율적인 방법이라고 생각했다. 또한 항상 프로그래밍에서 함수를 만들고 클래스를 만드는 등의 작업을 하는 것은 반복적인 작업을 줄이기 위함임을 학부에서 배운 것을 통해 알고 있었다. 따라서 좀 더 재사용성이 높은 컴포넌트에 대한 고민을 하기 시작했다. 많은 기술 블로그등을 찾아보고 팀원들끼리 의견을 나누던 중 같은 팀원 한 분이 나에게 아주 좋은 글을 추천해주셨다. 해당 글은 카카오 엔터테인먼트 기술 블로그에 존재하던 글이었는데 다음과 같다. https://fe-developers.ka.. front-end/FrontEnd 2022. 9. 4.

• 

  [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.