React (20) 썸네일형 리스트형 Ant Design의 Calendar를 사용하여 일기를 렌더링 하는 달력 개발 구현 목표 MyDiary 프로젝트에서 일기를 작성한 이후 달력에 표시하기 위해서 Calendar 컴포넌트를 사용하였다. Calendar 컴포넌트는 달력을 렌더링하고 각 datecell은 React Node를 가진다. 다시말해 일(day)마다 React 컴포넌트를 설계할 수 있다는 말이다. 여기서 처음 구현목표는 datecell을 클릭하면 그 날에 작성한 일기를 Modal로 렌더링 시켜주는 것을 목표로 하였고 구현 후에는 해당 날짜의 작성한 모든 일기를 List로 렌더링 하도록 변경했다. 구현 방법 Ant Design의 Calendar 컴포넌트는 달력에 형태를 하고 있다. 구현 목표는 datecell을 onClick 했을때 그 날짜의 해당하는 일기를 Modal로 렌더링하는 것을 목표로한다. Calendar.. React Google Map Marker 찍기 구현 목표 위 이미지처럼 Google Maps API를 React 프로젝트에서 사용하여 사용자의 클릭 이벤트를 받아서 마커를 찍는 것을 목표로 한다. 구현 방법 구현 방법은 여러 가지가 있다. 공식적으로 지원하는 Google Maps API 문서를 참조하여 구현하는 방법이 대표적이다. React는 좀 더 간편하게 구현할 수 있는 라이브러리를 지원한다. 물론 구글에서 공식적으로 지원하는 것은 아니다. 공식문서는 아니지만 개발자가 라이브러리 사용하는 방법을 서술한 문서를 지원한다. React Google Maps Api Style Guide react-google-maps-api-docs.netlify.app @react-google-maps/api React.js Google Maps API integra.. TypeScirpt에서 FormData 값(values) 확인하기 문제 발견 클라이언트에서 입력한 이미지 파일을 서버로 전송하기 위해서는 FormData로 깜산뒤에 보내야한다. FormData의 값을 추가(append)를 하고 값을 확인하려고 console.log를 출력시켜 보았지만 출력되지 않는다. 이후 Array구조로 되어있을 것을 예상하고 반복문(for, for in)문을 사용하였지만 값이 뜨지 않는 것은 마찬가지이다. const [images, setImages] = useState([]); const imageFormDataHandler = () => { const formData = new FormData(); for (let i in images) { formData.append("images", images[i]); } console.log(formDat.. [MyDiary] React TextArea 개행(</br>) 처리 구현 목표 TextArea에서 Enter(개행)를 입력한 그 값을 다른 플랫폼(Database, Notepad)으로 텍스트를 옮기면 개행이 없어진다. 개행이 그대로 보존되어 다른 플랫폼에서도 개행된 텍스트를 저장한다. 구현 방법 간단하다. TextArea에서 개행을 하면 TextArea내에 이 입력된다. 이를 DB나 다른 Text 입력기에 옮기면 그 즉시 은 없어진다. 그렇다면 TextArea에서 저장되는 을 다른 플랫폼에서도 통용되는 \n\r로 바꾸면 된다. MyDiary 프로젝트에서는 TextArea에서 onChange 이벤트를 통해서 변경될때 마다 setState를 하여 Contents에 값을 저장한뒤 Submit을 통해서 MongoDB에 전송하고 있다. 사용자가 Submit을 하여 MongoDB에.. [Mydiary] emotion props type error 문제 발견 page 컴포넌트에서 스타일 컴포넌트로 props를 전달하려고 했지만 오류가 발생했다. 오류 코드는 Type '{ weather: string; onClick: () => void; }' is not assignable to type 'IntrinsicAttributes & IconBaseProps & { theme?: Theme | undefined; } & { children?: ReactNode; }'. Property 'weather' does not exist on type 'IntrinsicAttributes & IconBaseProps & { theme?: Theme | undefined; } & { children?: ReactNode; }' Page 컴포넌트 : const [w.. [MyDiary] Sidebar 사용으로 인한 렌더링 문제 문제 발견 Sidebar를 사용하면서 컴포넌트를 어떻게 렌더링 할지 고민에 빠지기 시작했다. 기존 상단 Navbar를 사용하면 Navbar 하단에 이어서 컴포넌트를 렌더링을 하면 되지만 Sidebar를 사용하게 되면서 렌더링 하는 방향이 상단부터 하단으로 내려오는 것이 아닌 좌측부터 우측으로 렌더링 하는 방향으로 바뀌었다. 문제 분석 및 원인 문제는 복잡할 것 없이 position : fixed를 사용하면서 Sidebar가 다른 요소들을 무시하고 브라우저 기준으로 렌더링 되면서 다른 요소들과 겹치게 되는 현상이 일어난 것이다. 즉, 다른 요소들과 Sidebar의 렌더링되는 공간이 같기 때문에 겹쳐지는 것이다. 문제 해결 1차 개선 코드 const App = () => { return ( ); }; exp.. Axios 요청을 미친 듯이 보내는 현상 오류 발견 StudyDetail 페이지에서 발견된 에러이다. 구글 개발자 도구 Network에서 axios 요청을 계속해서 보내는 것을 목격했다. 주니어 프론트엔드 개발자가 서버에 디도스를 건다는 말이 갑자기 떠올랐다. 이래서... 오류 분석 및 원인 당황스러웠지만 해당 Study(게시글)의 작성자의 이름을 찾는 함수를 브라우저에 렌더링 되는 retrun()에서 함수 호출이 되도록 로직을 작성한것이 유력한 원인으로 보였다. const readWriterHandler = () => { let body = { _id: Study.writer } axios.post('/api/users/profile', body) .then(response => { setwriter(response.data.profile) .. [Link Developer] HOC로 반환된 컴포넌트의 props undefined 이슈 오류 발견 MyProfile 페이지에서 발견된 에러이다. props에 저장된 로그인한 유저의 id를 조회하여 백엔드로 API 요청을 보낸다. 백엔드에서는 요청받은 id를 DB에서 찾은 뒤 해당 user에 객체를 클라이언트로 응답한다. 위 처럼 구상했었지만 props가 undefined 에러가 출력된다. 오류 분석 및 원인 useEffect(() => { const userId = props.user.userData._id let body = { _id: userId } axios.post('/api/users/profile', body) } 위 useEffect는 리액트 라이프 사이클에서 컴포넌트가 마운트된 직후 그러니깐 componentDidMount 단계에서 props를 호출하였기 때문에 오류가 난다.. 이전 1 2 3 다음
