Dev Diary 💻

Intro Next.js로 구현된 프로젝트에서 특정 페이지들을 숨기는 요청사항이 들어왔습니다. 보통 Next.js는 pages라는 폴더 하위에 파일 혹은 폴드를 작성하게 되면 해당 파일/폴더를 자동으로 라우팅 해줍니다. 처음 단순하게 NavBar 네비바에 있는 특정 link tag 를 주석처리했지만, url로 해당 페이지 직접 접근시 접근이 가능했습니다. How to do Next.js의 공식 문서를 살펴보면, Next.js는 Redirects라는 기능을 제공하고 있습니다. 위 기능은 Next.js 프로젝트 폴더 root에 있는 next.config.js 파일에서 설정할 수 있습니다. Redirects Redirects allow you to redirect an incoming request path ..

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 JavaScript 에서 현재 시간을 기준으로 한달 전/후 날짜를 구하는 방법에 대해 알아보도록 하겠습니다. How to solve the problem let now = new Date();// 현재 날짜 및 시간 console.log("현재 : ", now); // 현재 : Fri Sep 30 2022 11:05:32 GMT+0900 (한국 표준시) let oneMonthAgo = new Date(now.setMonth(now.getMonth() - 1));// 한달 전 console.log("한달 전 : ", oneMonthAgo); // 한달 전 : Tue Aug 30 2022 11:05:32 GMT+0900 (한국 표준시) let now = new Date();// 현재 날짜 및 시간..

Intro 특정 문자 전까지 문자열을 자르는 방법에 대해 알아보도록 하겠습니다. "message" : "No: 1, 2\nHello World!" 구체적인 예시를 들어보겠습니다. 다음의 데이터가 있다고 가정해봅시다. 기존에는 message에 해당하는 value (string) 값을 화면에 그대로 표출하였습니다.하지만 위 문자열에서 \n 을 기준으로 하여 단순하게 No: 1, 2 만 표시를 해야 한다면 어떤 방법을 사용해야 할까요? How to solve the problem javascript의 내장 함수인 substring() 와 indexOf()를 활용하면 됩니다. indexOf()로 index 8을 반환하므로 최종적으로 substring(0, 8) 이 됩니다. 해당 문자열에서 인덱스 0부터 8전까지..

Intro vscode 에서 이모지를 사용하는 방법에 대해 알아보겠습니다. Windows 'Win' + '.' Mac 'Control' + 'Commond' + 'Space'

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 = ..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 91. 모듈 소개 Debugging React Apps Finding & Fixing Errors Understanding Error Messages Debugging & Analyzing React Apps Using the React DevTools 92. 리액트 오류 메시지 이해하기 스스로 오류를 이해하고 해결해야 한다. 문제가 있는 소스코드를 살펴보고, 어디서 문제가 발생했는지 그 줄이나 파일을 살펴봐라. 그러면 대부분의 오류들은 해결할 수 있다! Failed to compile. ./src/App.js SyntaxError: /Users/yuri/workpla..