시나닷컴이 넓다.js로 구축했습니다.
업데이트 정보
2022/01/23
사용
aspida의 설치에서 microcms-js-sdk로 변경되었습니다.왜냐하면 마이크로CMS 고유의 장르를 혼자 만든 것에서 공식적인 것으로 바꿀 수 있으니까.
나는 스타일의 변경에도 어느 정도 강화를 하고 싶다.
2021/07/14
Next.js ver.대응 11!
다른 프로그램 라이브러리의 업데이트도 완료되었습니다.
왜 그랬어
공식 마이크로CMOS 블로그의 소스 코드가 공개됐다.
나는 우리의 전단 프레임이 Nuxt라는 것을 아는 사람이 있을 것이라고 생각한다.js가 되다.
하지만 내가 일하는 회사에도 넥스트가 있다.나는 js를 채택하는 곳이 매우 많다고 생각한다.
만약 그렇다면 가능한 한 겉모습, 기능, 기술이 다른 것을 구성하는 것을 공개해야 한다
문턱이 낮아졌고, 사용하기 시작한 사람과 사용하기 시작한 회사도 증가했다
저는 Jamstack의 구성과 HeadlessCMS가 더 쉽게 사회에 전파될 수 있다고 생각합니다.
마침내 구축하기 시작했다.
전에 비슷한 기사가 있었죠?
이렇게 긴 시간 안에 끼게 될 줄은 몰랐지만.
같은 시도가 이쪽 보도에서 이루어졌다.
다만, 이 기사를 보도한 사람과 나는 코드 스타일, 기술 구성 등에서도 차이가 있다
코드를 줄 가치도 있다고 생각해요. 달았지만 판단을 해줬어요.
왜냐하면 제가 비교 포인트를 발췌했거든요.
자신의 코드 스타일에 맞는 사람을 참고하세요!
aspida, pathpida 사용
이른바 aspida,pathpida는 안전성이 없는 상황에서
디렉터리 구조에 따라 자동으로 형식 정보를 제공하는 프로그램 라이브러리입니다.
aspida는 WebAPI의 것이고 pathpida는 자동으로 루트 유형 정보를 생성합니다.
개인적으로 typescript로 응용 프로그램과 웹 사이트를 만들면 필수적인 프로그램 라이브러리입니다.
베스코드의 보정이 효과가 없으면 몸이 불안해...
카탈로그 기능 및 구문 강조 처리 시간
이 두 가지를 함께 고려한 건요.
둘 다 마이크로CMS의 리치 편집기에서 되돌아오는 HTML 텍스트를 해석 처리한다는 점에서 일치하기 때문이다.
그리고 이 기능들을 브라우저에서 진행하면 표시하기 전에 많은 시간이 걸릴 것이다
가용성이 떨어집니다.
어렵게 Jamstack으로 구성했는데 너무 아쉽네요.
구축할 때 이 동작을 실행합니다.
또한, Nuxt는 여기에 있습니다.js 및 Nextjs의 차이가 나타났다.
Next.js에서 사용하지 않은 라이브러리는 클라이언트 구축에 포함되지 않습니다.
따라서 구축이나 서버에서만 큰 크기의 라이브러리를 사용한다면
그 부분만 넥스트야.js로 더 가벼울 수 있어요.(물론react의 사이즈와vue의 사이즈도 차이가 있습니다.)
공식 마이크로CMS 블로그의 원본 코드와 다르다
본가의 마이크로CMOS 블로그와도 조금 다르다
그쪽도 메모할 거예요.
사용자 정의 데이터 속성을 사용하여 스타일 지정
자세한 내용은 이쪽 기사를 보십시오
간단하게 말하면 상태를 나타내는 클래스 이름과 BEM으로 표시하는 Modifier
사용자 정의 데이터 속성을 이용하면 전망이 좋고 cssmodules를 사용하면 간결한 방법을 사용합니다.
내가 이 점을 알게 된 후에 단순한 HTML을 바탕으로 쓸 때 상태를 나타내는 스타일도 사용자 정의 데이터 속성을 사용했다.
cherio에서 jsdom로 변경
cheeerio, jsdom는 HTML을 해석할 수 있는 프로그램 라이브러리입니다 (잘 어울리죠?)?💦)、
cheerio의 특징은 jQuery Ric에 쓸 수 있지만 어쩔 수 없이 jQuery는 실제 업무 경험이 거의 없다
표준 DOM API를 사용할 수 있는 jsdom을 선택했습니다.
하지만 처리 속도에 있어서는 cheeerio가 좋기 때문에
$ 등 저항력이 없는 사람에게는 그것을 추천합니다!나는 구축할 때만 하는 처리가 디스플레이 속도에 영향을 주지 않기 때문에 결심했다.
마이크로CMS의 API 로그인에 대한 적절한 확인 필요
이것은 API 로그인 시 반드시 확인하는 것이 좋습니다.
물론 상황에 따라 최종 화면에 등록하기를 원하는 것은 필수적이다.
이유는
앞쪽 발리가 적어 발리 발생 위험도 줄어든다.
네.
불필요한 항목이
null 또는 빈 순서로 반환될 수 있습니다.매번 지불 비용을 지불해야 하기 때문에 잘못을 숨길 위험도 있다.
예를 들어 미리보기 화면 등 등록자가 중간에 지나가는 장면을 확인해 보세요.
로그인자: "네, 잠깐 등록했습니다. 먼저 보세요!"
등록자: "어, 안 뜨네."
등록자: "불완전품 아닌가!"
엔지니어 (...null의 검증을 잊어버렸습니다.)
이런 예가 있다.(나는 실제로 겪은 적이 있다.)
나는 aspida를 조합함으로써 이런 상황은 거의 제로로 돌아갈 수 있다고 생각한다.
Type script에서 마이크로CMS 사용 시 권장 사항
Aspida를 사용해도 그렇지만 그때는
이번 소스 코드에서
Sceme.ts
export type TextField = string
export type TextArea = string
export type RichEdit = string
export type Image = {
url: string
width: number
height: number
}
Image 이미지 API의 반환값에 서로 다른 Key가 추가된 경우중요한 것은 위 세 개다.
각자 되돌아오는 값
string형은 같지만, 각자 표시하는 방법은 가공 방법이 다르다.디스플레이 방법으로 보면
TextField TextArea jsx의 {}를 통해 일반적인 방식으로 표시할 수 있습니다RichEdit 반환된 값은 HTML 텍스트이므로 dangerouslySetInnerHTML를 사용해야 합니다.그리고 가공 방법의 차이점은
TextArea 다른 줄이 생각날 때<br />String.replace(/\n/g, "<br />");
이런
string형이지만 사용법이 완전히 다르기 때문에모두들 먼저 분명히 할 것을 건의합니다.
마이크로CMS 관리 화면을 보시면 됩니다.
typescript를 사용하거나 aspida를 사용하면 가능한 한 코드에서 완성하는 것이 효율적이고 코드에 문서가 있는 것이 편리합니다.
마지막으로 내 개인적인 생각
처음에 왜 했는지도 거의 다 말했어요. 제임스 택과 헤드리스 CMS를 좀 더 확대하고 싶어요!
이런 생각을 하게 된 것은 이런 기술 덕분에 성장했다고 생각했기 때문이다.
저는 웹 제작사에서 일한 이듬해 엔지니어입니다. 첫해 전반기에 마이크로CMOS를 만났습니다.
이른바 Jamstack과 관련된 부분에 관심을 가지기 때문에 웹 전체에 대한 이해가 깊어졌다
결과적으로 회사 내의 신용과 지위를 강화하였다.
원래 저희 회사에서는 WordPress 같은 CMS를 사용하지 않아요.
부분적으로 채용할 수 있는 마이크로CMS의 성격이 잘 맞는 것도 지원했다.
저는 이런 경험에서 성장해 왔습니다. 마이크로CMS와 Jamstack 같은 기술 덕분에 감사합니다.
그렇기 때문에 이번 소스 코드가 이런 기술의 전파의 계기가 된다면 조금이라도 기쁠 것입니다.
졸렬한 글이지만 끝까지 읽어주셔서 감사합니다!
잘못된 점이나 의견이 있으면 언제든지 댓글과 창고에 issue를 던져주세요!
Reference
이 문제에 관하여(시나닷컴이 넓다.js로 구축했습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/d_suke/articles/5bd7b2da4de87c22368e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
