본문 바로가기

분류 전체보기321

Toast UI (feat.React) 사용기 2 - Chart 기능 Toast UI Chart - Javascript 로 구현 가장 먼저 차트가 생성될 컨테이너 요소를 추가해준다. id는 chart 로 해주자. Toast UI 차트는 생성자 함수를 통해 인스턴스를 생성할 수 있다. 1. namespace 사용 const Chart = toastui.Chart; 2. CommonJS 사용 const Chart = require('@toast-ui/chart'); 3. ES6 사용 import Chart from '@toast-ui/chart'; import { BarChart } from '@toast-ui/chart'; Webpack 4는 패키지 모듈을 가져올 때 main 필드보다 module 필드에 정의된 진입점을 우선적으로 가져오므로, 프로젝트에서 웹팩4를 사용하고 .. 2023. 7. 12.
AWS 기초 강좌 3 - EC2 기초 1~3 https://www.youtube.com/watch?v=hb_4Tf6bAtY&list=PLfth0bK2MgIan-SzGpHIbfnCnjj583K2m&index=7 가상화 Virtualization 단일 컴퓨터의 하드웨어 요소를 일반적으로 가상머신(VM)이라고 하는 다수의 가상 컴퓨터로 분할할 수 있도록 해주는 기술 리소스를 효율적으로 관리하면 그만큼 비용을 감소시킬 수 있다. 특권 명령(privileged instruction) 시스템 요소들과 소통할 수 있는 명령으로 OS 만 가능하다. 이러한 특권 명령 때문에 하나의 하드웨어의 시스템당 운영체제가 하나밖에 돌아갈 수 없는 것 반대로 일반 프로그램은 특권 명령이 필요없으므로 많은 프로그램을 동시에 수행이 가능한 것임. 즉 가상화가 나타나기 전까진 하나.. 2023. 7. 11.
코딩애플 - 마지막 Next.js ... Middleware 드디어 완강에 다가왔다 ! 마무리도 확실하게 해주자~ Middleware ? 서버에서 하나의 기능을 100만개의 서버 API 기능에 동시에 적용하고 싶은 경우 미들웨어를 사용하면 가능하다. 즉, 요청이랑 응답 사이에 간섭하는 코드를 미들웨어라고 한다. 미들웨어 만들기 Next.js 폴더의 루트 영역(App폴더와 같은 위치)에 middleware.js 라는 파일을 만들어준다. import { NextResponse } from "next/server"; export function middleware(request) { // 미들웨어 내용 return NextResponse.next() // 서버로 통과 return NextResponse.redirect() // 다른 페이지로 강제 이동 (주소창이 변경).. 2023. 7. 9.
Toast UI (feat.React) 사용기 1 - 텍스트 에디터 Toast UI 시작 - 설치 npm install @toast-ui/react-editor 리액트에서 사용하기 위해 위와같이 설치해준다. 텍스트 에디터 - Editor 일반 컴포넌트처럼 사용할 수 있다. import { Editor } from '@toast-ui/react-editor'; import '@toast-ui/editor/dist/toastui-editor.css'; 위처럼 불러와줘야지 기본틀을 지정해줄 수 있고, 추가 옵션을 사용하여 여러 설정을 해줄 수 있다. previewStyle tab / vertical, 마크다운일 때 미리보기 스타일을 지정할 수 있다. 위처럼 vertical이면 세로로 나뉜다. initalEditType merkdown / wysiwyg 초기 보일 화면을 지정 .. 2023. 7. 8.