블로그 직접 만들기 대작전

막상 블로그를 직접 만드려고 하니까 막막하긴 하네 ㅎㅎ뭐 Restful API 를 사용하는 블로그를 만들 생각이기에... 일단은 아래 서버들이 필요해 보인다.DB 서버API 서버블로그 웹 서버 (FE)난 서버 전문가도 아니고 학습용 블로그니까 트래픽이나 보안 신경 안써

먼저 오라클 클라우드에 DB & API 서버 용도의 인스턴스를 설치하고자 한다.왜 오라클 클라우드냐? 그냥 무료라서...오라클 클라우드 무료 가입에 대해서는 알아서 구글링하세요. 가입한지 몇년 되서 기억이 잘 안납니다;;;;어쨌든!!! 먼저 오라클 클라우드의 메인 화면

https://lucidmaj7.tistory.com/286https://hoing.io/archives/1102위 사이트들을 참고했고, 위 사이트에 적힌 순서 고대로 명령어 입력했음mongodb-org-4.4.repo 파일을 생성합니다.sudo vi

API 서버로 express 를 사용하기로 했다. 구글링에 가장 많이 나와서 ㅎㅎㅎ일단 nodejs 와 yarn 을 설치해야겠다. (https://jjeongil.tistory.com/1377 참조)API 서버 소스는 github 에 올릴거고, github a

API 서버를 구축하기 전에 편리한 개발환경을 조성하는게 좋을 것 같다.이런건 해본적도 없고 문외한이긴 하지만... 뭐 어떻게든 되겠지.일단 내가 원하는 건 타겟 브랜치에 푸시 혹은 pr 이 될 경우 자동으로 API 서버에 배포되고 API 서버가 재시작하는 그림이고,

Node.js 어플리케이션을 쉽게 관리할 수 있게 해주는 Process Manager 로, 멀티 프로세스 (Worker) 구현, 무중단 서비스 등등 다양한 기능들을 편리하게 사용할 수 있도록 제공하는 것(?) 이다.가장 큰 이유는 API server 를 배포할때마다 서

이제는 API 서버를 코딩해야겠다. (express 사용)근데 뭘 코딩해야하지? 먼저 블로그에서 사용할 API 들을 정의해야겠지...블로그에서는 어떤 API 를 사용하지? 결국 먼저 블로그 컨셉부터 대충이라도 정의해야겠지...구조는 단순하게 가자. Menu 와 Arti

위키 정의는 아래와 같이 되어 있다.Mongoose는 MongoDB와 Express 웹 애플리케이션 프레임 워크 간의 연결을 생성하는 JavaScript 객체 지향 프로그래밍 라이브러리입니다.다른 글에서는 아래와 같은 내용도 덧붙이고 있다.Mongoose -> Node

API 서버 개발을 하기 전에 문득 그런 생각이 들었다.어찌되었건 데이터를 집어 넣어야 하는데...그냥 코드로 가라 데이터를 만들어서 넣을까?PUT API 를 정의 & 만드어서 그걸 호출하게 하면 되지 않을까?그럼 PUT API 를 호출하는 건 그냥 postman 같은

개발 편의를 위해 로컬 서버를 띄워서 FE 를 실시간으로 테스트할 필요가 있다.로컬 서버는 local-server.js 파일에 간단히 nodejs 로 코딩했다.파일 요청시 타겟 파일을 리턴하도록 구현했으며, 추가로 SPA 이기 때문에 모든 url 은 index.html

이제 아래 url 로 들어가면 Menu, Article 을 생성할 수 있는 화면을 대충 만들고자 한다./admin/menu/admin/article일단 svelte - Router 기능을 지원하는 모듈을 설치하자.구글링을 해보니 svelte-spa-router, sve

이제 아주 조금만 더 자세히 틀을 만들어 보자.https://sveltematerialui.com/ 요 화면 틀과 동일하게 하려고 한다.뭐 결국은 material ui 에서 제공하는 컴포넌트들 중 적절한 것을 찾아서 써야 하는데, 저 사이트를 보다 보니까 헤더

이제 메뉴 추가 화면을 구현해보자. 대략 아래와 같은 틀을 가진다.(참고로 아직 서버에 API 개발은 안했으므로, 테스트 데이터를 만들어서 개발 진행했음)각각의 영역은 svelte-material-ui 의 Card 컴포넌트를 사용했다.https://svelte

메뉴의 CRUD 를 만들기 전에 먼저 express - Router 를 API 서버에 추가하자.개발 편의를 위해 router 디렉토리 내에 Router 관련 파일들을 모았다.router/xxx.js기능 혹은 데이터 별로 js 파일을 만들고 Router 관련 코드를 구현

Svelte 는 자체적으로 상태 관리 수단 - store 를 제공한다.svelte/store 에 대한 자세한 내용은 아래 링크들을 참조하숑.https://svelte.dev/tutorial/writable-storeshttps://beomy.githu

실제 메뉴 데이터를 호출하고 메뉴 생성하는 것까지 완료한 상태다.다만 짜잘한 오류 수정 및 미세 조정이 필요하다.AdminMenu.svelte 와 MenuSelect.svelte 는 부모 - 자식 컴포넌트 관계다.AdminMenu.svelte 는 MenuSelect.s

블로그가 반응형을 지원하도록, 모바일 사이즈인 경우 좌측 메뉴 리스트 노출 로직을 달리 적용해 보자. pc 화면 헤더 메뉴 아이콘 미노출 좌측 메뉴 리스트 계속 노출 mobile 화면 헤더 메뉴 아이콘 노출 기본적으로 좌측 메뉴 리스트 숨김 상태 헤

이제 실제 메뉴 데이터를 가지고 메뉴 리스트를 렌더링하는 로직을 추가해보자. 요구사항은 아래와 같다. (말로 푸니까 어려운데 실제로는 매우 직관적인 요구사항임) 메뉴 depth 에 따라 좌측 공백을 추가 자식 메뉴들 노출 여부에 따라 +- 아이콘 노출 자식 메뉴들이

이제 글 추가하는 어드민 화면을 만들어보자.총 3가지가 필요하다.article 이 들어갈 메뉴 선택하는 select 화면제목 input본문 input - 웹 에디터 필요뭐 유명한 웹 에디터는 summernote 가 있고, 마침 svelte 용으로 wrapping 된 버

Toast UI Editor - @toast-ui/editor 를 설치하자.그럼 import 구문을 통해 @toast-ui/editor 를 사용할 수 있다.@toast-ui/editor 자세한 사용법은 아래 링크를 참조~https://github.com/nhn

article 에 대해서 CRUD API 를 추가해보자.이전 글에서 적어놓긴 했지만, article 에 대한 schema 는 아래와 같다.일단 아래 3가지 정도의 기능을 제공하면 될것 같다.전체 article 가져오기parent - menu, 그리고 그 자식 menu

이제 front 에서 실제 API 를 호출해보자.먼저 article 관련 api 를 호출하는 로직을 만들어야 하는데, 뭐 기존처럼 api.js 에 다 때려박아도 되지만, 그것보다는 menu, article 호출 로직들을 별도의 파일로 분리하자.api/api.jsapi/

이제 저 우측 Main 영역을 구현해보자.Main 영역에는 Article List, Article Detail 추가로 / 로 접근했을때 노출되는 대문 화면이 올 수 있다.결국은 url 에 따라서 Main 화면에 어떤걸 뿌릴건가 결정되는 것이기 때문에, 먼저 url ru

위와 같은 구조의 Article List 화면 UI template 를 만들자.먼저 밝혀두어야 할 것은 내가 디자인의 재능이 없기 때문에 velog 의 "관심 있을 만한 포스트" 화면을 모티브로 삼았다.velog 님 감사드립니다. 🙇velog 의 "관심 있을 만한 포

ArticleListItem.svelte 에 필요한 데이터는 아래와 같다.두가지 문제가 있는데, 하나는 API 서버에서 주는 Article 데이터에는 "대표 이미지" 데이터가 없는 것, 두번째는 contents 데이터는 html 텍스트라는 것이다.데이터 자체를 추가할

test data 를 정리하는 김에 admin 화면도 좀 정리하자.현재는 아무나 admin 화면에 접근 가능한데, password 입력하면 진짜 admin 화면으로 들어갈 수 있는 간단한 auth 화면을 만들어보자.뭐 제대로 auth 를 구현하려면 id, passwor

이제 Admin 을 마무리해보자.먼저 API 수정이닷!!메뉴 수정 API 는 이미 있고 잘 동작하는지 테스트만 했다.하나의 메뉴를 삭제할때는 아래 사항들을 고려해야 한다.모든 자식 메뉴들 삭제부모 메뉴의 자식 리스트에서 삭제할 메뉴 정보 제거모든 삭제 메뉴들에 속해있는

Admin 화면 마무리하자. 진짜 찐으로...먼저 글 수정 & 삭제 화면에서 사용할 검색을 수행하는 컴포넌트, 검색 결과를 Table 형태로 노출하는 컴포넌트를 만들자.최종적으로는 아래와 같은 형태로 사용된다.input 으로 keyword 를 받아서 GET /artic

이제 Article List 화면에 GET /article 로 가져온 실제 데이터를 적용해보자.그전에 먼저 실제 사용할 데이터를 만들어야겠다.현재 이 블로그 사이트 - velog 에 작성한 시리즈 & 글을 수동으로.... 추가했다.혹시나 velog.io 에서 제공하는

원래는 Article 생성시 본문을 Markdown 원본으로 저장하려고 했다.근데 굳이 한번 파싱된 HTML 로 저장한 이유는 해당 html 을 곧바로 넣어주면 Toast UI Editor 우측에 나온 것처럼 화면에 나오길 기대해서이다.근데 실제로 넣어보니 저대로 안나