React
-
[React-query] 리액트 쿼리를 사용해보자!Front-end/React 2022. 3. 29. 19:20
React query는 왜 사용하나?! 리액트 쿼리를 사용하기 전에, 왜 이것이 그렇게 유용할까요? 리액트 쿼리의 장점은 다양한데 그 중 몇 가지를 읊어보자면 1. react-query 자체 캐싱 2. fetch 과정 간소화 3. 다양한 hooks 정도가 있을 것 같습니다. 그럼 리액트 쿼리의 사용 방법을 알아봅시다! npm install react-query 우선 당연히 패키지를 다운로드 받아야합니다. 그리고 리액트 앱에 queryclientprovider을 제공해줘야 합니다. Provide queryClient import { QueryClient, QueryClientProvider } from "react-query"; const queryClient = new QueryClient(); Reac..
-
[꿀팁, 데이터베이스 string 개행] 데이터베이스 string 개행하는 법Front-end 2022. 2. 14. 20:16
안녕하세요! 오늘도 개발 중 꿀팁을 발견해 공유할려구 합니다 ㅎㅎ 보통 설명란 같은 경우는 input을 textarea로 쓰는 경우가 많죠. 그래서 띄어쓰기를 해가며 문자를 작성할텐데, 작성할 때는 그렇게 하더라도 막상 출력하고 나면, 개행을 무시한 채 일자로 나옵니다. 이러한 문제를 쉽게 해결할 수 있는 방법이 있습니다. const Body = styled.div` white-space: pre-wrap; ` 무려 css 단 한 줄로 해결이 된다는 사실! 이런 간단한 것을 몰랐다니! 오늘도 반성을 하게 됩니다! 보통 일반적으로 /n 같은 태그들은 그대로 출력이 됩니다만, 이 css를 작성해주면, 자동으로 파싱해주는 것 같습니다! 굉장히 잘 실행되는 것을 볼 수 있습니다! 오늘도 간단한 꿀팁을 공유합니다..
-
[React.js, 성능최적화] UseEffect Memory resource Leak에러와 마주할 때 2022. 1. 10. 17:58
안녕하세요! 오늘은 useEffect를 사용하던 도중 만난 에러를 기록할려고 합니다. 😇 리액트에서 scroll Event를 구현하던 도중, 갑자기 콘솔에 UseEffect에 관한 에러가 뜨더라고요! 에러 내용은 다음과 같습니다. Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 에러는 다음과 같습니다. 에러를 단순히 살펴보면 , 언마운트된 리액트 컴..
-
[상태관리, Front-end] props drilling? 상태관리 라이브러리의 등장 배경 확실히 알아보기Front-end/State management 2021. 12. 15. 19:28
안녕하세요! 오늘은 프론트엔드에서의 상태관리가 등장한 배경과 해결방안등에 대해서 공부하며 알아본 내용을 포스팅하도록 하겠습니다. 저도 이전에 상태관리 라이브러리를 이게 왜 필요한지도 모르고 배우기만 하고, 실제로 어떠한 프로젝트를 진행했는데 그 개념조차 제대로 모르니까 사용을 안하게 되게 되더라고요 ㅠㅜ.. 그래서! 오늘은 우리가 상태관리가 왜 필요한지. 먼저 알아보고! 느끼고! 간단하게 사용해보도록 합시다 🥳 #1. Props Drilling? 여러분 혹시 프론트앤드 개발하던 도중 중첩된 컴포넌트들 때문에 진작 필요한 정보는 너무 하위 컴포넌트라 컴포넌트를 넘기고.. 넘기고.. 넘기고.. 했던 경험 있으신가요? 있으시다면 여러분은 이미 props drilling을 경험한 것입니다 😤 사실 저도 이전에 ..
-
[Typescript,React] Typescript로 Form,UseState 사용해보기Front-end/React 2021. 12. 14. 18:04
안녕하세요! 오늘은 React + Typescript의 환경에서 useState와 form에서의 타입선언 등을 알아보겠습니다! 자바스크립트를 사용하다가 처음으로 타입스크립트로 프로젝트를 진행할 때, 타입스크립트에 익숙하지 않은 사람들이 힘들어하는 부분일 것이라 생각해서 정리해보도록 하겠습니다! #1. Form event with react+typescript 저도 처음 타입스크립트환경에서 리액트로 프로젝트를 할 때 form의 타입을 무엇으로 설정하는지 몰라 한참 찾았던 기억이 있습니다 ㅠㅠ javascript에서는 form의 event의 타입을 지정해주지 않아도 진행이 되지만, 타입스크립트는 event가 어디서 발생하는지에 대한 타입을 지정해달라고 에러를 내뱉습니다. 간단하게 말하면 타입스크립트는 inp..
-
[Styled-component] styled-component 좀 더 똑똑하게 쓰기Front-end/React 2021. 12. 13. 17:22
안녕하세요. 오늘 포스팅할 주제는 'styled-component'입니다! 리액트를 사용하는 분이라면 다양한 css 라이브러리를 사용하실텐데 저는 CSS-IN-JS의 대표적인 라이브러리 중 하나인 styled-component를 사용 중입니다. 하지만 요즘 styled-component의 재사용성을 제대로 사용하지 않는 저를 발견하고 styled-component의 다양한 기능과 재사용성을 더욱 심도있게 사용해보자라는 마음에 포스팅을 하게 되었습니다! 우리 모두 styled-component를 제대로 사용해 보도록 합시다! #1 Styled-component의 props전달을 잘 사용하자. 같은 h2 태그를 가진 element를 사용해야 한다고 가정해보겠습니다. 둘 다 부제목이지만 다른 폰트 사이즈를 사..
-
[React] 리액트 꿀라이브러리 탐방Front-end/React 2021. 12. 8. 16:25
더보기 계속해서 라이브러리가 업데이트 될 예정입니다. 👨🏻💻 1. react-helmet SPA의 가장 큰 단점이 무엇일까요? SEO? 우리는 고정된 타이틀만을 사용할 수 밖에 없습니다. 왜냐하면 우리는 싱글 페이지 내에서 컴포넌트들의 변화만 볼 수 있을 뿐이니까요. 하지만 react-helmet을 사용하면 우리는 페이지마다 타이틀을 변경해 줄 수 있습니다. ✌🏻 npm install react-helmet 사용법은 굉장히 간단합니다. react-helmet을 프로젝트에 import한 후 다음과 같이 헬멧 안에 title 태그와 함께 자신이 적용하고 싶은 타이틀을 적용하면 됩니다.