본문 바로가기

front-end/React6

React Quill custom해서 쓴 코드//호출{ setEditorHtml(html); setIsEditing(true); }} modules={{ toolbar: [ ["bold", "italic", "underline", "strike"], ['image', 'video'], [{color:[]},{background:[]}], [{align:[]}, { list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }], .. 2024. 9. 26.
[React] Calendar 라이브러리와 Moment 라이브러리 - Calendar Library말 그대로... 달력 표시할 때 사용.- Moment Library시간이 포함된 데이터를 받아 조작해야 할 경우 사용. 달력이야 흔하니 굳이 설명은 않겠지만 moment는 조금 설명을 해두는 게 좋지 않을까 싶다.https://momentjs.com/docs/ 공식 문서- Calendar 활용(조금 나중에...) - Moment 활용$ npm i moment//혹은 yarn add moment설치했다면 import해서 사용하면 된다. 자동으로 한국 시간을 불러온다지만 확실하게 하기 위해선 import 'moment/locale/ko'; 해주면 된다.moment(date).format("DD")moment에 날짜를 넣고 format으로 형식을 지정하면 format에 맞춰 d.. 2024. 4. 26.
[React] Element Element란 react 앱의 가장 작은 building block. 앱을 구성하는 가장 작은 블록이며, 우리 눈에 보이는 것을 기술하는 요소다. 이것들은 React Element가 아니라 DOM Element이다. Virtual DOM에 존재하는 Element가 React Element이고 이를 렌더하여 Broswer DOM으로 넘어왔을 때 나타나는 것이 DOM Element이다. Elements는 화면에서 보이는 것들을 기술한다. React Elements는 js 객체 형태로 존재한다. 이 객체는 한 번 생성되면 바꿀 수 없다. react element (js 객체) 구조 - type react component는 최종적으로 html 태그를 사용하게 되어있으므로 결국 html 태그명이 들어간다. -.. 2024. 3. 8.
[React] React 오류 ENOENT: no such file or directory package.json을 해당 경로에서 찾지 못해 발생한 오류. 다시 확인해보니 npm start 할 경로를 잘못 설정한 것이었다. cd로 directory를 옮겨 다시 해보니 성공. REACT 폴더에서 하고 있었다... REACT/practice2 폴더로 이동하니 됨. 2024. 3. 8.
[React] JSX-Java Script Xml const element=Hello, world! JSX는 위와 같이 쓰고 최종적으론 js 코드가 나온다. React.createElement로 같은 동작을 실행할 수 있다. createElement의 함수로는 type, [props(속성)], [children(element가 포함한 자식들)]이 들어간다. createElement가 있으니 JSX를 사용하는 것이 필수는 아니지만 JSX를 쓰는 것이 더 장점이 많다. 장점 1. 간결한 코드=가독성이 올라간다=버그 발견이 쉬움 2. injection attacks 방어=보안성이 올라감: 입력창에 일반적인 문자가 아닌 소스코드를 입력해 해킹 사용법 tag 중간에 중괄호를 넣어 사용 문자열 안에 넣을 땐 ", '가 아니라 `(벡틱) 쓸 것. 여러 개 쓰면 소괄.. 2024. 3. 8.
[React] 기초 정리 기본 바탕 - HTML: Hyper Text Markup Language, 웹사이트의 뼈대를 구성하는 마크업 언어 Tag로 구조를 만든다. html, head, body는 알지알지... - SPA: Single Page Application, 하나의 페이지만 존재하는 앱. 반대는 Multi Page Application. 수많은 html 파일이 존재하는 복잡한 사이트를 관리하고자 나온 것. 동적으로 body tag 내부 content를 채우며 내용을 바꾼다. - CSS: Cascading Style Sheets, 웹사이트 디자인을 다루는 언어 - JS: JavaScript, 동적인 작업을 처리하기 위한 언어(정식 명칭은 ECMAScript -> ES6 등으로 축약되기도) C언어, Java 같은 컴파일 언.. 2024. 3. 8.

티스토리툴바