REACT(3)
-
하위 컴포넌트에 boolean(참/거짓) props 변수 전달
React에서 하위 컴포넌트로 props 전달 시, 특정 요소에만 전달하기 원하는 변수가 존재한다. 아래 예시로 가로줄을 구성하는 Row 컴포넌트의 첫번째 줄에만 isLargeRow 변수를 전달해 다른 요소보다 크게 화면에 표현하고 싶다면 하위 컴포넌트에서 isLargeRow 변수의 default값을 false로 지정한 다음 원하는 특정 컴포넌트 요소에만 isLargeRow 변수를 전달해주면된다. 하위 컴포넌트 function Row({ data, isLargeRow = false }) { return( {data.name} ); } export default Row; 상위 컴포넌트로부터 data와 isLargeRow이라는 boolean값을 전달받는 Row 컴포넌트가 존재한다. isLargeRow 변수를..
2021.11.27 -
[리액트] 마크다운 에디터 'react-md-editor' 설치 및 적용 방법 (feat. front)
Summary 1. React 마크다운 에디터 설치 yarn add @uiw/react-md-editor 2. Editor 작성 컴포넌트 import MDEditor from "@uiw/react-md-editor"; const Editor = (props) => { return ( ) } export default Editor; 3. 마크다운 뷰 컴포넌트 import MDEditor from "@uiw/react-md-editor"; const NoticeView = (props) => { return ( ) } export default NoticeView; Result - 에디터 작성 화면 - 마크다운 적용된 뷰 화면 📝 기울기, 굵기, 이미지 등 적용 사항 정상 동작 확인 ✔️ CODE 설명 'r..
2021.09.29 -
👨👨👧👦 소셜 미디어 제작을 위한 Rest-API 초기 생성 단계 (with MongoDB)
| 1. 애플리케이션 초기화 🐤 1-1. 빈 폴더에 code . > 빈 프로젝트 폴더 내부에 접속한다. 터미널에 npm init 입력 & 몇가지 질문 사항에 대해 답변 ( Enter 키 끝까지 눌러준다 ) 🐤 1-2. 생성된 package.json에 rest api에서 사용될 라이브러리들을 추가해준다. yarn add express mongoose dotenv helmet morgan nodemon [ 설치 이유 ] ** express ** - node.js 프레임워크에서 애플리케이션을 빌드할 것이므로 기본적으로 실행될 'express' 서버의 설치가 필요 ** mongoose ** - 몽고디비 내부에 문서를 생성할 수 있는 mongo 모델을 생성 ** dotenv ** - 몽고 디비 생성하면 제공되는 ..
2021.07.18