프로젝트 (42) 썸네일형 리스트형 [React] 텍스트가 넘칠 때 "..." 출력하기 메인 페이지 캐러셀 컴포넌트에서 게시글의 제목 / 내용 / 게시 날짜 및 시간을 보여준다. 만약 게시글 내용을 가공(?) 없이 그대로 출력되게 둔다면 다른 아이템의 자리까지 침범하게 된다. 그러므로 게시글의 내용을 미리 보기 할 수 있도록 한 줄 정도만 출력되도록 하고 추가적인 내용이 있다는 의미인 '...'을 붙여줘 보자. 먼저 미리 보기 텍스트를 한 줄 정도 길이로 출력하기 위해 줄 바꿈을 없애준다. const mergedContent = content.replace(/\n/g, ''); 게시글 내용의 html 태그를 없애준 후, 새롭게 만든 div 태그의 값으로 가공한 텍스트를 집어넣는다. const stripHTMLTags = (html) => { const tmp = document.create.. [React] Link를 통해 props 전달하기 React router v6 버전에서는 다음과 같이 Link를 통해 props를 전달한다. navigate를 통해 props를 전달하는 모습과 사뭇 비슷하다. [React&Firestore] 캐러셀 컴포넌트 데이터 가져오기 오늘은 캐러셀 컴포넌트에 보일 태그 별 게시글 리스트 데이터 가져오기를 진행했다. 에러 5 종류 이상은 만나 겨우 성공했다. 진짜 온갖 진을 다 뺀 것 같다. 그래도 해결하고 나니 후련하다. 코드를 살펴보기 전에 내가 만들어준 db 구조를 먼저 보자. 데이터 평면화를 위해 다음과 같이 구조를 짰다. 사용자가 선택한 태그 목록 중 현재 캐러셀 컴포넌트에서 보여주고 있는 태그의 인덱스가 키포인트다. 이 값을 useState를 통해 관리해준다. 태그 별 게시글 리스트 저장을 위해 carouselData 라는 이름의 객체 또한 useState를 통해 관리해준다. posts 컬렉션에 있는 문서들 중 tags 필드의 값인 배열에 해당 tag를 포함하는 문서를 찾아 배열에 넣고, 그 배열을 carouselData 객.. [react-query] 리액트 쿼리 개념 및 사용법 간단하게 정리하기(feat. firestore) 이전의 프로젝트에서는 데이터 통신 코드를 문서화하고 useAxios 커스텀 훅을 사용하여 데이터를 실시간 반영하는 로직을 직접 구현했었다. 이것 때문에 정말 고생을 많이 했다는 슬픈 얘기... 이번에는 리액트 쿼리라는 라이브러리를 사용하여 비동기 데이터 요청 로직, 실시간 데이터 업데이트, 데이터 캐싱 등을 처리하려고 한다. 프로젝트를 진행하며 자세히 공부하도록 하겠지만, 먼저 간단하게 CRUD 예제 코드를 살펴본 뒤 이를 파이어스토어와 함께 사용하는 법까지 남겨보자. 리액트 쿼리란? 리액트 쿼리는 리액트 애플리케이션에서 데이터 상태 및 비동기 데이터 요청을 관리하기 위한 강력한 라이브러리이다. 리액트 쿼리를 사용하면 데이터를 가져오고, 업데이트하고, 캐시하며, 재사용하는 것이 간단하고 직관적이며 유연해.. [React&Firebase] react-quill 에디터와 Firebase storage를 사용하여 질문 작성 컴포넌트 구현하기 지난번 맛피에서 사용했던 텍스트 에디터 라이브러리인 React-quill의 만족도가 높아, 이번에도 사용하게 되었다. 지난번 상황과는 두 가지의 차이점이 있다. 이번 프로젝트에서는 자바스크립트를 쓴다. 이번 프로젝트에서는 파이어베이스를 쓴다. 고로 이미지 처리도 내가 해야 한다. react-quill 사용법은 지난번과 크게 다르지 않다. 확실히 한 번 사용해봤다고 저번 보다는 개발 시간이 짧았던 것 같다. 기분탓인진 모르겠는데, react-quill 라이브러리는 ts 버전보다 js 버전이 조금 더 좋았다. ts 버전에서는 볼드, 이탤릭 기능이 작동하지 않았다. 적용되는 이미지 리사이징 라이브러리도 한참 찾았었고.. 시간을 꽤 잡아먹었었다. 이젠 추억이지ㅋㅋㅋㅋ https://bbeeyaks-moment... [Error] Cannot destructure property 'basename' of 'react__WEBPACK_IMPORTED_MODULE_0__.useContext(...)' as it is null. 컴포넌트 라우팅 작업을 하고 있는데, 제목과 같은 에러가 자꾸 떴다. 원인은 link태그를 사용하는 컴포넌트가 라우터로 감싸져 있지 않아 생긴 에러였다. 이 코드를, function App() { useEffect(() => { document.body.style.overflow = 'hidden'; }, []); return ( {/* */} {/* */} ); } 이렇게 바꿔주니 해결되었다. Sidebar 컴포넌트에서 Link를 사용하기 때문에 Sidebar 컴포넌트도 Router 태그 안으로 쏙 들어가야 한다. function App() { useEffect(() => { document.body.style.overflow = 'hidden'; }, []); return ( {/* */} {/* *.. [Error] should be listed in the project's dependencies 해결법 1. module을 설치할 때 --save-dev를 끝에 붙혀 설치한다. 2. ESLint 설정파일에 다음과 같은 코드를 추가해준다. module.exports = { "rules": { "import/no-extraneous-dependencies": [ "error", {"devDependencies": true} ] }, }; 참고한 블로그) https://bobbyhadz.com/blog/eslint-should-be-listed-in-projects-dependencies-not-devdependencies 'X' should be listed in the project's dependencies, not devDependencies | bobbyhadz A step-by-step gui.. [React] 리액트 캐러셀 라이브러리 react-slick 사용 해보기 메인페이지에 있는 캐러셀 컴포넌트를 만들게 되었다. 직접 만들까, 라이브러리를 사용할까 하다가 좋은 건 가져다 쓰라고 있는거니까... 하며 구글링 끝에 쉽게 캐러셀 컴포넌트를 만들 수 있는 라이브러리를 찾게 되었다! react-slick이라는 이름의 라이브러리며, 사용법이 상당히 간단하며 종류도 다양하다. 나는 Lazy Load를 선택했다. 1. 설치 $ npm install react-slick --save-dev // 라이브러리 설치 $ npm install slick-carousel --save-dev // css 설치 2. 원하는 캐러셀 고르기 https://react-slick.neostack.com/docs/example/lazy-load Neostack The last react carous.. 이전 1 2 3 4 5 6 다음
