PUNCO

블로그를 다 만들면 앞으로 만든 블로그에다 글을 쓰려고합니다. 이번 글에서는 quill 에디터 이미지 조절을 구현해보겠습니다. 구글링해서 어떤분이 사용하신 @looop/quill-image-resize-module-react 모듈을 사용했습니다. 출처: https://r-0o0-j.tistory.com/160 [#006888] 들어가서 똑같이 하시면 돼요! 이것저것 시도하다 안돼서 힘들었는데 다행입니다! 분량이 되게 적네요 세부적인 css 를 건들겠습니다. 글작성 페이지에서는 썸네일 업로드 부분을 꾸며볼게요! 이런식으로 했어요 그런데 이미지를 업로드할 때 될 때가 있고 안될 때 가 있네요. 이건 다음에 해결해야겠어요 음... 이제 제가 개인적으로 사용하려고 하면 큰 불편함은 없는 블로그가 만들어 진거같습..

이제 퀼에디터에서 올린 사진을 S3에 업로드해보겠습니다. 그전에 저번에 썸네일 사진의 URL 을 DB에 넣어보겠습니다. 기존의 글 테이블 입니다. 여기에 썸네일 url을 추가해주겠습니다. 이제 서버쪽에서 사진을 업로드 한 후 s3 로 부터 받은 url 을 저장하게 sql 문을 작성하겠습니다. 글을 작성할 때 같이 보내게 정보를 보내주고, 등록해줍니다. 한번 확인해볼게요~ 잘 됩니다. 이제 글 리스트에서 썸네일이 보이게 해보겠습니다. 잘됩니다. 수정도 잘 됩니다. 세세한 css 는 나중에 건드리도록 하겠습니다. 이제 본문 에디터에서 업로드한 사진을 s3에 저장하는걸 구현해보겠습니다. 이미지는 일단 하나씩만 올리는거로 하겠습니다. s3 에도 잘 올라갑니다. 넵 됐습니다. 끝이네요. 이제 해야할 거는 에디터상..

요새 일이 좀 있어서 공부를 못했습니다. S3 처음부터 해보겠습니다. 먼저 multer 를 설치해 줍니다. multer 란 노드의 미들웨어로 업로드된 파일로 사용되는 multipart/form-data 를 조작한다고 합니다. multipart/form-data 란 : form 태그의 enctype 속성값 중 하나. multipart/form-data 는 모든 문자를 인코딩하지 않으며 form 요소가 주로 파일이나 이미지를 전송할 때 사용한다. enctype 은 폼데이터가 서버로 제출될 때 인코딩 되는 방식을 명시한다. 그럼 먼저 클라이언트(react) 에서 이미지를 전송해 서버에서 받아오는걸 해보겠습니다. 1. 글쓰는 컴포넌트에서 작성해 줍니다. 저는 글 썸네일용 이미지를 하나 만들어보겠습니다. 인풋태그..

이미지를 s3를 이용해 저장하기 전에 에디터를 좀 수정해보겠다. 에디터를 사용할 때 몇가지 고칠게 있다. 1. 자동줄바꿈 문제 2. 수정하기를 할때 에디터 미적용 1. 자동줄바꿈 문제부터 해결해보겠다. 출력할 데이터가 들어가는 div (Content) 에 word-wrap: break-word 속성을 주어 줄바꿈 문제를 해결했다. 2. 수정할때 에디터 미적용 수정 페이지에도 커스텀한 quill 모듈을 사용해 데이터를 넣어주면 될거같다. 근데 기존에 작성한 quill 파일에서는 글쓰는걸 목적으로 만들었기 때문에 여러 설정값이 만드는거로 설정되어있었다. 그래서 url을 이용한 조건문으로 제어를 해보려고한다. 글쓸 때는 /create 수정할 때는 /update 로 시작된다. 이런식으로 써서 했다. 제대로 된 ..

블로그에서 글을 쓸 때 웹 에디터를 사용하기 위해 Quill 을 사용해 보겠습니다. 설치해 줍니다. 설치가 안되네요? 종속성충돌 이라는거 때문이라고 합니다. 뒤에 --legacy-peer-deps 를 붙여서 입력해줍니다. 저는 어떤 천재분께서 작성해주신 코드를 보고 작성했습니다. 몰랐던 부분만 적어가며 해보겠습니다. useRef 는 특정 DOM 을 선택할 때 사용합니다. 또한 컴포넌트 안에서 조회 및 수정 가능한 변수를 관리하는 용도로도 쓰입니다. useRef 로 변수를 관리하면 그 변수가 업데이트 된다고 해도 리렌더링이 되지 않습니다. useMemo 는 성능최적화를 위해서 연산된 값을 재사용하는 기능을 가진 함수라고 합니다. useMemo 함수는 2개의 인자를 받는데, 첫번째는 결과값을 생성해주는 팩토..

React background 에서 실행하는건 그냥 pm2 를 사용하면 되더라구요 pm2 start npm -- start 명령어 치니 안꺼지고 실행 됩니다. 이번 글에서는 Nginx 를 사용해 프록시 서버를 만들어 보겠습니다. 먼저 sudo apt install nginx 명령어로 설치해주겠습니다. 설치가 완료된후 EC2 인스턴스의 Public Ip 주소로 들어가면 성공적으로 뜹니다. 이제 /etc/nginx 로 가서 nginx 폴더를 열어봅시다. 안에는 여러 폴더와 파일들이 있는데요 프록시 설정을 위해 sites-available 폴더로 이동해 주겠습니다. sites-available 폴더 안에는 default 파일이 있는데요, 저는 blog 파일을 따로 만들어 보겠습니다. 이런식으로 작성해 주시면 ..

AWS RDS 인스턴스를 만들어 보겠습니다. AWS RDS 란 AWS 에서 제공하는 관계형 데이터베이스 클라우드 서비스입니다. RDS 인스턴스를 만들기 때 설정할 수 있는게 있습니다. Parameter Group, Option Group, Subnet Group 인데요 그중 Subnet Group 은 필수입니다. 저는 Subnet Group 만 먼저 만들고 RDS 인스턴스를 만들어 보겠습니다. 기존의 서브넷을 선택해줍니다 서브넷 구조에 대한 공부가 더 필요합니다. 만들어 졌습니다. 이제 RDS 인스턴스를 만들어 보겠습니다. 헷갈리는 부분만 글쓰겠습니다. 퍼블릭 액세스에서 예 아니오 중 어떤걸 선택해야 할까요 지금 만드는 RDS 인스턴스는 사용하는 EC2 와 같은 VPC 내부에 있으니 아니요로 해도 되지 ..

EC2 인스턴스에 NODEJS를 설치해 보겠습니다. 전에 만든 블로그를 깃허브에 올려주고 EC2에서 클론합니다. 실행 후 주소로 접속을 해보니 ... 의심가는건 VPC 입니다. 만들 때 이해가 안간 상태로 만들어서... 다시한번 처음부터 만들어 봐야겠습니다. 구글링후 정리가 아주 잘 돼있는 글을 읽고 다시 만들어서 연결했습니다. 다시 nodejs 를 설치하겠습니다. 깃 clone 후 다시 시도하면~~ 잘 연결 됐습니다...!! ㅜㅜㅜ 안됐던 이유는 1.보안그룹 인바운드 규칙 2.VPC DNS 호스트이름 3.PUBLIC IP 자동할당 중에 하나였던거 같습니다. 이제 front server 전부 연결해 봅시다! 정상작동 되네요 ㅜㅜ 근데 지금은 RDS 인스턴스도 없고 GIT CLONE 한 코드엔 LOCALH..

*********************혹시나 따라하지마세요 그저 공부글*********************** EC2 인스턴스를 만들었으니 이제 연결해보겠습니다. 원격접속을 하기 위해 XSHELL 을 사용했습니다. XSHELL 이란 TELNET/SSH 프로토콜로 리눅스 원격 호스트에 접속할 수 있는 윈도우용 터미널 에뮬레이터입니다. TELNET 과 SSH 가 뭘까요? 간단히 한번 알아봅시다 Telnet 은 원격 호스트간에 데이터를 교환하는 네트워크 프로토콜입니다. 하지만 데이터를 암호화하지 않고 교환하므로 보안이 취약합니다. SSH 는 암호화 된 형식을 사용해 데이터를 전송하므로 안전한 프로토콜입니다. 최근들어는 대부분 SSH 프로토콜을 사용합니다. 이제 XSHELL을 이용해 EC2 인스턴스를 연결해 ..

aws를 이용해 배포를 해보겠다. ec2와 rds를 사용할 예정이다. 예전에 몇번 해봤지만 여전히 어렵다. 기초를 다지면서 한번 해보자 Amazon Web Service(AWS)란 클라우드 플랫폼이다. 클라우드 서비스란 타사 제공업체가 호스팅하여 인터넷을 통해 사용자에게 제공하는 인프라, 플랫폼 또는 소프트웨어를 말한다. 따라사 사용자가 클라우드 서비스를 이용하려면 컴퓨터, 운영체제 및 네트워크만 있으면 된다. 서비스를 이용하는 플렛폼을 다 제공하고 사용자는 이용만 하면 된다 이런건가 싶다. AWS EC2 는 이런 클라우드 서비스를 이용해 가상컴퓨터를 제공하는 기능을 한다. 그럼 이제 EC2 인스턴스를 만들어 보겠다. 나는 프리티어를 이용해 무료로 만들어 볼것이다. 하나하나 해보면서 알아보도록 하겠다. ..