# cms

14개의 포스트
post-thumbnail

Wagtail Tutorial - 1

Python 설치 먼저 Python을 설치해야 합니다. 웨그테일은 파이썬을 기반으로 둔 장고를 기반으로 두기 때문이죠. 버전은 3.8~3.11 버전 모두 호환이 되니 그 사이에 선호하시는 버전이 있으시다면 그 버전을 사용하시면 됩니다. 없으시다면 코카콜라 해서 한 개 고르셔도 무방할 것 같습니다. 개발 환경 세팅 이것또한 파이썬 버전과 마찬가지로 VS Code, Pycharm 등 편하신 대로 사용하시면 됩니다. 전 Pycharm을 사용하니 그 기준대로 작성해보겠습니다. 공식 사이트에 들어가셔서 아래에 있는 커뮤니티 버전을 설치해주시면 됩니다. 중간에 체크박스 선택하는 건 그냥 다 체크 해주시면 됩니다. 설치가 완료되면 파이참을 열어주시고 새 프로젝트를 생성합니다. 생성 되고 나면 이제 Wagtail과 친해지기 딱 한걸음 전까지

2023년 9월 3일
·
0개의 댓글
·
post-thumbnail

Wagtail? CMS?

위 사진에 저 새가 보이십니까? 귀엽다고요? 그렇긴 하죠. madewithwagtail이라는 사이트에 들어가 보시면 무려 NASA도 Wagtail을 통해 만든 웹페이지가 있습니다. 그 외에 제가 아는 곳은 없었지만 유럽 쪽에서 많이 사용하는 추세인 것 같아 보입니다. 이렇게나 귀엽고 대단한 이 웨그테일이라는 친구는 아주 불친절하답니다. 물론 저만 그렇게 느낄 수도 있지만요. 공식문서 외엔 도저히 최신 버전의 정보가 없는 이 웨그테일이란 친구와 저는 꽤 친해져야 하기에.. 공식문서에는 없는 내용을 포함하여 자세히 대해 알아보며 기록

2023년 8월 29일
·
0개의 댓글
·
post-thumbnail

next 13 그냥 쓰지맙시다. _ Strapi 나만의 블로그 만들기(4)

😵‍💫 최대한 가볍게 사실 화면을 구현할 것도 없었다. 정말 간단한 블로그라 데이터를 불러오고 카드형식으로 뿌리고 클릭했을 때 detail page만 나오면 되는 초간단 사이드프로젝트였다. 그 자만이 나를 지옥으로 이끌었으니,,, nextjs + javascript + picoCss (개발보다 문서작업이 더오래걸려서 ts 가져다 버림) next13으로 바뀌면서 기본 문법들이 많이 바뀌었다. 그래서 기존 블로그 보고 참고하면 다 작살날 수 있으니, 반드시 공식문서를 참고하자. 구상 잘 구현된 백엔드 서버 데이터를 rest-ful 하게 불러와서 사용하면 된다. ssr이 대세가 된 이유는 검색엔진최적화가 잘 되기 때문이다 (SEO) 이는 서버사이드에서 데이터를 다불러다가 주기 때문에 초기

2023년 7월 14일
·
2개의 댓글
·
post-thumbnail

헤드리스(Headless) CMS를 들어보셨나요?

월드와이드웹이 급속도로 발전하면서 디지털 콘텐츠 관리는 프로젝트, 사업을 운용 핵심 요소가 되었습니다. 이런 콘텐츠를 관리하는 CMS(Contents Management System)는 인터넷이 생긴 이후 꾸준히 발전해왔죠. 20여년전, 급식 먹던 시절 접한 제로보드, 그누보드 같은걸 쓰면서 이거보다 좋은것 없다! 라고 생각했지만 워드프레스를 접했죠. 역시나 이거시 최고여. 라고했지만 또다시 시대는 진보했습니다. 현재는 PC의 브라우저 뿐만 아니라 모바일, 왓치, IoT등 여러 플랫폼의 형태로 콘텐츠 전달이 필요합니다. 전통적인 CMS의 형태에서는 하나의 서비스와 하나의 콘텐츠가 얽혀있어서 다른 플랫폼으로의 확장을 하려면 그대로 가져다 쓰기가 힘들엇죠. _The basic architectural differ

2023년 6월 5일
·
0개의 댓글
·
post-thumbnail

관리자 페이지 만들기 귀찮아서 CMS 솔루션 만들어본 이야기

배경 안녕하세요. 저는 벌써 14년차 나름 풀스택 개발자로 오랜시간 다양한 외주 업무를 진행해왔습니다. 다양한 필드에서 받는 업무를 하다보니 관리자 페이지, 즉 콘텐츠 관리 시스템 (Contents Management System)도 여러가지 각종 분야를 만들어보았죠. 현재는 레벨나인(Rebel9) 에서 개발디렉터로 일하고 있는데 레벨나인에서도 수많은 외주 관리자 페이지를 만들어왔습니다. 매번 이런거 많이 만들어왔습니다. 프리랜서시절이나 회사직원으로 일할때나, 하도 많이 만들다보니 저를 비롯한 팀원들은 달인이 되었습니다. DB구축부터 회원개발, 디자인, 화면개발까지 일괄적이고 반복적인 작업은 익숙하지만 번거롭고 지루한 과정이었습니다. 실제 웹사이트 혹은 앱에 연동

2023년 5월 31일
·
0개의 댓글
·
post-thumbnail

[DMS]설계

🤔 무엇을 하고 있는가 현재 회사에서는 DMS 즉, Django로 웹을 구축하여 서버내의 데이터들을 관리하는 시스템을 개발하고 있다. 오늘은 그를 위한 간단한 컨셉과 설계에 대해 설명하고, 그간 겪은 문제점과 해결책에 대해 정리해보려 한다. > ### 🚩 목적 우리 회사는 다양한 데이터셋을 활용해 AI 모델을 만들고 있다. text뿐만 아니라, image, audio 등 다양한 형태의 데이터들을 public한 사이트에서 가져올 수도 있고, 웹상에서 크롤링을 통해 긁어올 수도 있다. 따라서 다양한 소스들에서 모아온 데이터를 효율적으로 관리하고 다른팀들이 활용할 수 있도록 제공하는 것이 중요하다. 따라서, DMS(Data Management System)의 필요성이 대두되었고, Django로 웹사이트를 구축해 비개발직군 팀원들도 쉽게 데이터를 파악할 수 있게 만들기로 결정하였다. > ### ✅ 아키텍처 정확한 아키텍처는 공개할 수 없지

2023년 4월 11일
·
0개의 댓글
·

Headless CMS에서 가져온 이미지들 최적화 - Next Image

세상에... PHP계에만 있다가 JS로 들어온 나에게는 아직도 부족함이 많다. Headless CMS에서 미리 입력해둔 html(이미지포함) 컨텐츠를 API로 가져와서 Frontend (Next)에서 렌더링할 때 전부 dangerouslySetInnerHTML 을 이용해서 태그들을 뿌려주면 이미지들이 최적화 되지 않는다. 1MB짜리 이미지가 있으면 그대로 1MB모두를 다운로드한다. (img->Image태그로 변환해도 제대로 이미지 최적화가 되지 않는 것이었다.) Next JS의 Image optimization을 제대로 활용하지 못하는 것 같아서 너무도 아쉬웠는데... > yarn add html-react-parser 이런 좋은 것이 있을 줄이야... 이것을 통해 dangerouslySetInnerHTML 쓰지 않고, 아래 링크의 저자분은 워드프레스에서 가져온 것을 위해 아래의 함수를 미리 작성했음. 그

2023년 1월 28일
·
0개의 댓글
·
post-thumbnail

LINE 기술 컨퍼런스 Tech-Verse 2022 Web Frontend Session

11월 17일 ~ 11월 18일 양일간 LINE과 야후 재팬을 포함한 8개의 회사에서 선발된 발표자들이 자신의 지식과 경험을 공유하는 기술 컨퍼런스가 열렸습니다. 저는 시간 관계상 직무와 관련된 웹 프런트엔드 세션 몇 개만 들었지만, 제가 들은 세션들이나마 이 포스팅을 통해 잘 정리해보려고 합니다. (추가적으로 자료를 더 찾아보며 정리하긴 했지만, 기본적으로 라이브로 진행되는 세션을 들으며 기록했던 내용이라 틀린 부분이 있을 수 있습니다. 지적해주시면 감사한 마음으로 수정하겠습니다.) 🪄 Headless CMS in LINE 이 세션에서는 LINE Plus의 개발자 박광용님이 Headless CMS의 개념과 장단점, 그리고 LINE이 만든 Headless CMS에 대해 소개하셨습니다. Tech-Verse 2022 사이트는 백엔드 개발자 없이 프런트엔드만으로 만들었다고 합니다. 바로 오늘의 주제인 **'Head

2022년 11월 22일
·
0개의 댓글
·
post-thumbnail

Most Interesting Facts About WordPress- Top 10

WordPress is often the first choice when it comes to the system on which beginners base their websites. No wonder - it is versatile and easy to use, and an accessory is available in Polish. Here are 10 fun facts about WordPress that you didn't know! WordPress is older than Facebook The first version of WordPress debuted in 2013, which means that it is even older than Facebook or Twitter

2022년 8월 31일
·
0개의 댓글
·

[wordpress] 상위페이지에 따른 하위페이지 템플릿 불러오기

Wordpress의 Custom Theme를 만들다 보면 몇몇 답답함들이 있다. 그 중 하나는 page-{slug}.php와 같이 페이지에 대한 테마 파일을 연결할 때 항상 최상위 디렉토리에 존재해야 한다는 점이다. 하위 디렉토리에 존재하게 될 경우 Wordpress는 자동으로 찾아주지 못하기 때문에 이를 위해 여러가지를 조합해 특별힌 function을 만들어 사용하기도 한다. 하지만.. 이 마저도 각각의 맹점들을 가지고 있어 특별히 권장되는 사항은 아니다. 페이지에 대해 상위 페이지를 줄경우 domain.co.kr/parent/child/와 같이 URL을 설정할 수 있다. 그럼에도 슬러그는 child이기에 wordpress는 최상위 디렉토리에서 page-child.php를 찾게 된다. 이때 우리가 원하는 것은 theme_name/parent/page-child.php 파일로 연결하는 것이고 이에 대한 방법을 본 페이지를 통해 기술하고자 한다. 이는 필자가 가장 오랫동안

2022년 6월 25일
·
0개의 댓글
·
post-thumbnail

코딩없이 백엔드 API 서버 구축하기 (Strapi + Heroku)

강의 개요 이 강의는 Headless CMS(Contents Management System)인 Strapi를 이용해서 빠르게 백엔드를 구성해보는 과정입니다. Headless CMS란 Frontend가 없는 CMS를 의미합니다. CMS는 보통 > DB에 컨텐츠를 입력하는 웹관리자화면을 제공하고, 웹관리자에서 내용을 입력하면, CMS가 가진 Frontend UI를 통해 코딩없이 웹사이트가 만들어질 수 있게 해주는 워드프레스나 그누보드 같은 솔루션을 의미합니다. Strapi에 Headless가 붙은 이유는 Frontend UI 대신 API까지만 제공해주는 Frontend가 없는 CMS이기 때문입니다. 즉, DB + 웹관리자 + API 까지 쉽게 구축을 도와주어 BFF(Backend for F

2022년 4월 28일
·
0개의 댓글
·
post-thumbnail

[babel] SyntaxError : Support for the experimental syntax 'classProperties' isn't currently enabled 에러 해결하기

0. 에러발생 npm start로 실행시 위와 같은 에러가 발생했다. >SyntaxError: /{경로}/CMS/backend/controller/hello.controller.js: Support for the experimental syntax 'classProperties' isn't currently enabled (4:15) 오류가 나는 부분의 코드는 아래와 같다. controller와 serveice등 구조를 잡기위해서 테스트로 작성했던 코드에서 발생하는 에러였고, 클래스 선언과 동시에 export 해주고 내부에 static 변수로 설정해 주는 부분에서 나는 에러였다. 1. 문제점 파악 다행이도 에러로그에 답이 있는 에러였다. ![](https://ima

2020년 12월 26일
·
0개의 댓글
·
post-thumbnail

[babel] Node.js에서 ES6 문법 사용하기

0. Babel? > babel은 ECMA script 2015+ 코드를 현재 및 이전 브라우저 또는 환경에서 호환 가능한 버전의 javascript 문법으로 바꿔주는 툴 체인이다. 개발을 진행하다보면 ES6+ 에서 지원하는 Arrow function 이나 import 구문, Object.assign등 자주 쓰이지만 이 메소드나 객체들은 Node.js 에서 아무 설정없이는 아래 사진처럼 에러를 내며 사용할 수 없다. 그래서 항상 프로젝트 시작시에 필수적으로 추가해주는 모듈 중 하나이다. 1. Babel

2020년 12월 24일
·
1개의 댓글
·
post-thumbnail

😜 [요약] Bouncecode-CMS

😋 Bouncecode-CMS란? 목적 회원관리, 게시판, 관리자 페이지의 기본 틀을 갖춘 템플릿 오픈 소스 Javascript (Typescript) 기반 소스 코드 FE: Nextjs (React, Apollo, Material-UI) BE: Express (GraphQL, TypeORM, SQLite3) Etc: Docker 구조 ✅ client ✅ server 기본적으로 nextjs를 실행한다. nextjs에서는 express를 실행한다. 😇 기본 사용법 실행 명령어 문의 카카오톡 오픈채팅: https://open.kakao.com/o/ghJjrKbb

2020년 9월 6일
·
0개의 댓글
·