Dev Diary 💻

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? 바로 구글링을 해봤습니다. 저와 비슷한 에러를 겪으신 분들..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 1. Welcome to the Coursel 시작하도록 하겠습니다. 꾸준히 화이팅 🤟🤟 2. Next.js란 무엇인가? Next.js를 왜 사용하는 걸까? NextJS는 프로덕션용 React 프레임 워크 입니다. 큰 규모의 프로덕션용 React 앱을 쉽게 구축할 수 있도록 해주는 많은 기능을 가지고 있습니다. ReactJS는 사용자 인터페이스 구축을 위한 JS 라이브러리입니다. 즉 Third Party 패키지로 프론트 엔드 프로젝트에 추가되는 라이브러리 입니다. 결국 클라이언트 측 JavaScript 코드라는 이야기 입니다. 주로 사용자 인터페이스 부분인 컴포넌트,..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 139. 모듈 소개 지난 섹션에서 중요한 리액트 개념들을 살펴보았습니다. useEffect, useContext, useReducer 등등 / 위 개념을 복습하면서 다시 살펴보도록 합시다. 140. 설정 시작하기 Layout folder : ex. Header UI folder: ex. Input 141. "헤더" 컴포넌트 추가하기 header 컴포넌트 추가 142. Adding the "Cart" Button Component Cart Button 컴포넌트 추가 143. Adding a "Meals" Component Meals 컴포넌트 추가 144. Adding I..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 117. 모듈 소개 Effects, ReducersContext Working with (Side) Effects MAnaging more Complex State with Reducers Managing App - Wide or Component - Wide State with Context 118. "Side Effects"이란 무엇이며 useEffect를 소개합니다. Main Job : Render UI & React to User Input Evaluate & Render JSX Manage State & Props React to (User) Events & ..

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 를 함께 작성..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 108. 모듈 소개 JSX Limitations & Fragments Getting a Cleaner DOM with Portals Working with Refs 109. JSX 제한 사항 및 해결 방법 반환하거나 상수에 저장하는 값은 하나여야 한다. 1. div tag 사용하기 return ( {error && ( )} Username Age (Years) Add User 2. 네이티브 JS array 사용하기 return [ error && ( ), Username Age (Years) Add User , ]; → 배열을 반환할 수 있는 이유는 리액트 JSX 요..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 97. 모듈 소개 연습 프로젝트 시작 98. "사용자" 컴포넌트 추가하기 Technically, the React import is not required in all React projects as you learned. But you're never wrong with adding it. import React from "react"; 99. 재사용 가능한 "카드" 컴포넌트 추가하기 두 개의 css 클래스를 적용하는 방법 import React from "react"; import classes from "./Card.module.css"; const Card = ..