전체 글 (88) 썸네일형 리스트형 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.. [TS] Interface란 무엇인가? 인터페이스(Interface)는 같은 범주에 대해 약속을 정의할 수 있습니다. 객체의 스펙(속성과 속성의 타입) 함수의 파라미터 함수의 스펙(파라미터, 반환 타입 등) 배열과 객체를 접근하는 방식 클래스 인터페이스를 사용하지 않은 예 : let person = { name: 'me', age: 21 }; const logAge = (obj: { name: string ,age: number }) => { console.log(obj.name); // me console.log(obj.age); // 21 } logAge(person); 인터페이스를 사용한 예 : interface personAge { age: number; name : string; } const logAge = (obj: personA.. 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.. [TS] 기본 타입 및 타입 추론 기존에 자바스크립트에서 지원하는 Number, String, Boolean, Array 타입들은 모두 지원한다. 이외에도 추가적으로 지원하는 것이 있다. let num: number = 1; let str: string = "Hello"; let bool: boolean = true; let arr: string[] = ["a", "b"]; let arr2: array = ["a", "b"]; Number 자바스크립트의 Number와 동일하다 int, double 구분없이 모두 실수로 표현한다. String 자바스크립트의 String과 동일하다. " ", ' '. ` `(백틱)으로 문자열을 감싸면 된다. Boolean 자바스크립트의 Boolean과 동일하다. Array Array에 사용법은 두가지가 있는.. 이전 1 2 3 4 ··· 11 다음
