무료 에디터 사용하기 네이버 구글 등 api가 존재하지만 간편하고 깔끔하게 사용하기 좋은 것 같아서 summernote를 선택했습니다. Summernote - Super Simple WYSIWYG editor Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online. summernote.org 1. 필요 파일 설치 경로 : hompage > 'get started > 'download compiled' 사용가능한 소스들이 모두 들어있는데 그 중에서 자신의 프로젝트에 맞는 파일들을 선택해서 넣어주면 됩니다. 부트스트랩과 함께 사용할 수도 있지만 저는..

React 는 각 기능의 컴포넌트를 각각 나눠서 사용해야 재사용성면 그리고 성능 면에서도 효율적이다. 이렇게 나누어진 컴포넌트를 랜더링 할때 변화된 부분만 새로 보여주는 역할을 할수 있도록 해주는것이 Memo 이다. 하지만 항상 사용해서 좋은 것은 아니기 때문에 성능 분석 후 필요시 사용하는 것이 좋다. React는 컴포넌트를 렌더링 한뒤 이전에 렌더링 된 결과와 비교화여 DOM 업데이트를 결정한다. 만약 렌데링 결과가 이전과 다르다면 DOM을 업데이트 한다. 이 과정에서 컴포넌트가 React.memo(컴포넌트)로 둘러쌓여 있다면, React는 컴포넌트를 렌더링하고 결과를 메모이징한다. 그다음 렌더링이 일어날때 렌더링하는 컴포넌트의 props가 같다면 React는 메모이징된 내용을 재사용한다. 매개 변수..

Mongo DB 사용하기 MongoDB 구성 데이터베이스 👉 컬렉션 👉 도큐먼트 0 . 터미널에서 셸 접속 명령어 mongosh 입력 1. 데이터베이스 1-1. DB 목록 조회 show dbs 1-2. 셋팅된 DB 확인 db 1-3. DB 생성 / 사용 선택 use 명칭 바로 생성한 DB 사용으로 변경됨. 실제 데이터를 입력하지 않은면 show dbs 를 해도 나오지 않는다. 데이터를 가지고 있어야함. 1-4. DB 지우기 db.dropDatabase() 제거하려는 db로 접속 위의 명령어 입력 2. 컬렉션 2-1.컬렉션 생성 - 기본 컬렉션 생성 db.createCollection("user",{}) 2-2. 현제 DB의 컬렉션 상태 - DB안에 컬랙션 리스트 조회 db.getCollectionName..

1. Mongo DB 개념 1-1. NoSQL이란 SQL만을 사용하지 않는 데이터베이스 관리 시스템이다. 기존 RDBMAS의 한계를 극복하기 위해 만들어진 새로운 형태의 데이터 저장소. 비관계형태로 고정된 스키마 및 JOIN이 존재하지 않는다. 1-2. Docuement 구조 문서 내용은 JSON 형태( Key,Value )의 객체로 되어 있다. "_id" 는 DB에서 제공해주는 유일한 값이다. Collection 안에서 저장되고 다른 스키마와 공유할 수 있다. 1-3. mongo DB와 RDBMS 의 차이점 스키마 MongoDB : 스키마가 없는 자유로운 데이터 모델 RDBMS : 정규화와 참조 무결성이 보장된 스키마 데이터 모델 MongoDB : Collection DBMS : Table 하나의 데이..

Router 페이지 불러오기 / 네비게이션 기능 1. 구조 셋팅 1-1. 라이브러리 설치 npm install react-router-dom react-router-dom : web 에서 사용 react-router-native : app 에서 사용 react-router : web / app 에서 사용 1-2. 폴더 경로 생성 컴포넌트 역할에 맞는 폴더 생성하여 분리하여 관리 src 폴더안에 컴포넌트 경로를 생성해준다. components : 기능 별 컴포넌트 routes : 라우터가 보여줄 화면 컴포넌트 2. 라이브러리 적용 2-1. BrowerRouter & HashRouter BrowerRouter html5 history API 를 활용해서 UI를 업데이트 동적인 페이지에 적합 새로고침 시 경로..