캐러셀을 통해서 뉴스데이터를 카드형태로 보여줘야하는데 반응형으로 잡기를 원했다.
그래서 해당 기능을 구현하기위해 구글링을 진행하여 블로그의 글을 참고해서 작성하게 되었다.
해당 캐러셀의 함수내에서
const [numOfCards, setNumOfCards] = useState(4);
const resize = () => { // window 사이즈 변경되었을 때 실행되는 함수
const width = window.innerWidth;
if (width < 500) {
setNumOfCards(1);
} else if (width < 768) {
setNumOfCards(2);
} else if (width < 1024) {
setNumOfCards(2);
} else if (width < 1600) {
setNumOfCards(3);
} else {
setNumOfCards(4);
}
};
위와같은 형태로 useState로 보여지는 카드의 갯수를 제어하고
resize를 통해 화면의 크기에따른 제어를 진행하였고.
해당 코드를 통해서
useEffect(() => {
window.addEventListener('resize', resize);
return () => {
window.removeEventListener('resize', resize);
};
}, []);
useEffect로 변경해주었다.
회원가입시에 페이지 이동을 위해서
import { useHistory } from 'react-router-dom';
을 사용해서 진행하였으나
vite와 충돌이 발생해서 SyntaxError가 발생하였다.
해당 부분을 수정하기 위해서
import { useNavigate } from 'react-router-dom';
을 통해서 진행하였더니 에러가 해결되었다.
로그인을 통해 가져온 유저 정보를 저장하기위해
const handleLoginSubmit = (e) => {
e.preventDefault();
axios.post('/api/api/login', loginFormData)
.then(response => {
console.log('로그인 응답 받음:', response.data);
// 서버로부터 받은 토큰을 localStorage에 저장
localStorage.setItem('accessToken', response.data.token);
navigate('/');
})
.catch(error => {
console.error('로그인 에러 발생:', error);
});
};
해당 코드를 통해서 브라우저에 저장하였다.
저장결과로 undefind 출력.
window.localStorage.setItem('accessToken', response.data);
해당코드의 value값을 변경해주었더니
저장되는 결과로 [object object] 출력
로그인여부를 위해서 islogginedIn을 헤더파일에서 사용하기위해 context로 변경하여 적용하였다.
const { isLoggedIn, setIsLoggedIn } = useAuth();
날짜데이터를 불러오는데
2023-12-03T15:56
이런식으로 데이터를 불러와서 해당 부분을 수정해줄 필요성이 있었다.
그래서 해당부분을 수정하기위해서
moment.js 라이브러리를 설치해서 사용하였다.
npm install moment
const formattedDate = moment(item.createdAt).format('YYYY-MM-DD HH:mm');
위와 같은방법으로 데이터를 가공해주었다.
뉴스기사를 url형식으로 공유해서 게시판에 작성할 예정이었는데 해당기능을 사용하려면
배포를 통해서 url을 만들어야 가능하다고 하여 대체방안으로
1안으로 뉴스 기사 자체에서 공유하고 글쓰기 버튼을 생성해서 해당 기사의 내용을 담는 형식으로 제작하려고 한다.
2안으로는 뉴스기사 url을 배제하고 제작하는 방향..
뉴스 검색창에서 실시간으로 키워드와 일치하는 뉴스를 찾아주는데
글자를 입력하자
TypeError: Cannot read properties of null (reading 'includes')
에러 발생
해당 문제는 뉴스 데이터 원문과 요약문을 변경하는 과정에서
itemData.articleContent => itemData.summary 로 변경되지않은 값이 있어서 발생하였다.
이후에도 작동을 안해서 추가적으로 수정을 해주었다.
// 검색어에 따라 초기 데이터 필터링 ( 검색어 제목,내용 )
const filteredResults = sortedData.filter((item) =>
item.title && item.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
item.summary && item.summary.toLowerCase().includes(searchTerm.toLowerCase())
);
include하는 데이터를
data && data.includes 형식으로 변경하여 해결하였다.
