한화 시스템 부트 캠프 15주차 회고

안녕하세요~! 오늘도 좋은 하루...... (아님)

 

15주차에 뭘 배웠는지 생각을 해 봤는데 SummerNote에 대해서 적용을 해 보고, 프론트 프로젝트에서 리뷰 혹은 게시글을 쓸 수 있을 때 활용해야 하는 방법을 배워 보았어요 ~!

 

SummerNote?

웹 애플리케이션에서 사용할 수 있는 오픈소스 텍스트 에디터입니다.

 

사용자가 HTML 기반의 리치 텍스트를 작성하고 편집할 수 있도록 도와주는 도구로, 마치 워드 프로세서처럼 직관적인 방식으로 콘텐츠를 작성할 수 있습니다.

주요 기능으로는 텍스트 스타일링, 이미지 및 동영상 삽입, 표 생성, 하이퍼링크 추가, 소스 코드 편집 등이 있으며, 플러그인 방식으로 기능을 확장할 수도 있습니다. SummerNote는 jQuery와 Bootstrap을 기반으로 하여 디자인 및 사용성이 뛰어나며, 다양한 웹 프로젝트에 쉽게 통합할 수 있습니다.

 

텍스트를 작성 했을 때 콘솔창에 찍힐 수 있게 했슴니다.

 

html 코드를 그대로 받아와서 → axios로 값 백엔드로 전해줘서 받아주고 → 게시글 작성할 때

각각의 타입을 지정하기 위해서 Blob를 사용 해 줬고, 코드는 다음을 참고 하시면 됩니다.

 

그리고 다음은 예외 처리에 대해서 배웠는데 ,, 

 

예외처리

백엔드 때 했던 예외처리랑 비슷한 거 같았습니다 ,, 로그인이 안 됐을 때 나오게 해야 하는 값이라던지 프론트도 그런 식으로 처리 할 수 있더라구요.

 

status가 200이 아닐 때 try-catch로 묶어준다..

 

예외처리를 하는 방법은 이런식으로 하나하나 try-catch로 묶어주거나

 

공통된 예외는 이거 하나로 퉁 칠 수도 있었습니다.

 

이제 프론트 프로젝트를 하기 위해서 두 가지의 방법을 배웠는데, 

 

Option API와 Composition API는 Vue.js에서 컴포넌트의 로직을 정의하는 두 가지 방법을 의미합니다. Vue.js는 주로 Option API로 시작했지만, 더 복잡한 애플리케이션을 관리하기 위해 Composition API가 도입되었습니다.

 

수업을 할 때는 Option API로 했지만, 나중에 편리함을 생각하면 Composition API가 좋을 거 같아서 저희 팀은 Composition API를 사용하게 됐습니다 ,, !

 

차이가 보이시나요 ? . .

 

Option API는 Vue의 전통적인 방식으로, 컴포넌트의 로직을 data, methods, computed, watch와 같은 옵션 객체에 분리하여 정의합니다. 코드 구조가 명확하고 직관적이며, 작은 컴포넌트나 간단한 로직에 적합합니다.

 

Composition API는 Vue 3에서 도입된 기능으로, 함수와 훅을 통해 상태와 로직을 정의합니다. 이를 통해 로직을 보다 유연하게 구성하고 재사용할 수 있습니다. 컴포넌트가 복잡해질수록 Composition API의 장점이 두드러집니다.

 

왼쪽과 오른쪽을 비교 해서 볼 수 있습니다. 왼쪽이 확실히 ,, 깔끔하죠?

 

저희는 Composition API 로 프로젝트를 진행하게 되었고, 결과물은 정말 곧 보여드릴게요 ,, 리팩토링 좀 하구요 ,,

 

그리고 배포 방법에 대해서도 배웠고, EC2에 배포를 하거나 S3로 배포하는? 두 가지 방법을 배우게 됐습니다.

어느 방법으로 배포를 했을지는 공개하지 않겠습니다 ,, 다들 유추 해 보시길 ,,,

 

이상으로 마치겠습니다. 감사합니다. 다들 행복하세요.

 

 

 

Problem

 

일단 프로젝트는 끝이 났고, 배포 방법에 대해서 다시금 생각할 수 있었다.

이를 다시 개선해서 재배포를 해 보도록 하자. ,, 

 

Try

 

공부 할 부분을 끝까지 파자 ,, 매일 애매하게 알고 가니까 나중에 기억하기 더 힘든 것 같다. 흑.