Dev Diary 💻

1. How to Get Help pass 2. Join Our Community! done 3. Course Resourse pass 4. Let's Build an App! 어떻게 리액트를 빨리 배웠을까라는 질문을 많이 받습니다. 이 질문에 답할 수 있는 대답은 딱 한가지입니다. You have to write code and you have to work on projects 5. Critical Questions 1. What's React All about? 리액트는 (1) HTML을 보여주거나 (2) 사용자가 무언가를 할 때, HTML이 변한다. 6. A Few More Critical Questions 2. How does a React app start up? 1. All of your p..

Intro react-datepicker 라이브러리를 사용하던 도중, 끝날짜가 시작 날짜를 선택할 수 없도록 날짜를 제외해야 했습니다. How to solve the problem 구글링 후 아래와 같은 답변을 찾았습니다. DatePicker 속성의 minDate를 사용하여 제외할 날짜를 넣어주면 됩니다. https://stackoverflow.com/questions/50626937/react-datepicker-exclude-past-dates

Intro react-datepicker 라이브러리를 사용하던 도중 CSS 가 적용 안되는 에러가 발생했습니다. 참고로 저는 타입스크립트도 적용해야 했기 때문에 라이브러리 설치는 아래와 같이 진행하였습니다. yarn add react-datepicker yarn add @types/react-datepicker react-datepicker 공식 홈페이지에 있는 Default 예제를 코드에 넣어 실행하자, css가 전혀 적용되지 않는 상태로 화면에 뜨더군요. () => { const [startDate, setStartDate] = useState(new Date()); return ( setStartDate(date)} /> ); }; Why? 바로 구글링을 해봤습니다. 저와 비슷한 에러를 겪으신 분들..

Intro React.FC의 의미와 사용하지 않는 이유에 대해 알아보도록 하겠습니다. type Props = { }; const TestComponent: React.FC = () => { return ( TestComponent ); }; export default TestComponent; 현재 React typescript를 사용하고 있는 프로젝트에서 컴포넌트를 작성할 때 다음과 같은 방법을 사용합니다. FC를 사용하지 말아야 하는 이유 하지만 🤨 React typescript는 그다지 좋은 방법이라고 합니다. 그중에서 가장 큰 이유는 props이 암시적으로 들어가 있기 때문입니다. children을 암시적으로 가지고 있습니다. 제네릭을 지원하지 않습니다. 네임 스페이스 패턴을 이용할 때 더 불편합..

Intro react 에서 동적으로 HTML 코드를 추가하는 방법에 대해 알아보도록 하겠습니다. 이를 위해 한 예시로 "message" : "No: 1, 2\nHello World!" 해당 text 에서 \n 를 실제 태그로 바꿔야 한다고 합시다. import "./App.css"; function App() { const message = "No: 1, 2\nHello World!"; return ( {message} ); } export default App; 현재는 다음과 같이 출력되고 있습니다. How to react 에서는 텍스트로 된 HTML 코드를 추가하고 싶은 경우에는 react의 규칙을 사용해야 합니다. dangerouslySetInnerHTML={{ __html: htmlCode }} ..

Intro 전달받은 props를 map 함수를 이용하여 table를 만들던 도중 다음의 오류가 발생하였습니다. Warning: validateDOMNesting(...): cannot appear as a child of test test test test test test {props.map((item, index) => { return ( {item} {item} {item} {item} {item} {item} ); })} 제가 봤을 때는 분명 각 자식에 index 라는 key 값을 부여하고 있다고 생각했는데요.. Why? 하지만..알고보니 원인은 바로 에 있었습니다.. key 값은 root component에 적용 되는 것이 원칙이기 때문이죠. 하지만 저는 OtherComponent 를 함께 작성..

Intro 리액트에서 Modal 팝업시 뒷배경이 스크롤 되지 않게 하는 방법에 대해 소개하고자 합니다. How to do import React, { useEffect } from 'react'; export const Modal = (props) => { // 모달 오버레이에서 스크롤 방지 useEffect(() => { document.body.style.cssText = ` position: fixed; top: -${window.scrollY}px; overflow-y: scroll; width: 100%;`; return () => { const scrollY = document.body.style.top; document.body.style.cssText = ''; window.scrollTo..