WEB개발이야기/React.js 2023. 11. 25.
nextjs(react)에서 tailwindcss와 구글폰트 연계해서 사용하기
Next.js를 사용할 때 스타일링으로 tailwindcss를 많이 사용할 것입니다. 또한 폰트로 Google Fonts도 많이 사용하게 되는데요. 구글 웹폰트를 사용하는 경우 보통 아래와 같이 CDN으로 구글에서 웹폰트를 불러와서 적용하는 방법을 많이 사용합니다. Making the Web Beautiful! 이럴 경우 사용이 편한 장점도 있지만 오프라인이거나 네트워크가 좋지 않은 환경에서는 단점으로 작용을 합니다. 그래서 Next.js에서는 폰트를 별도의 패키지로 만들어서 제공하고 있습니다. 이럴 경우 사용하는 것은 웹폰트를 사용하는 것만큼 쉽고 퍼블리싱 할 때 local로 해당 폴더만 가져가기 때문에 오프라인일 때도 웹폰트가 표현이 되는 장점이 있습니다. Next.js에서 Google Fonts 적..
WEB개발이야기/React.js 2023. 11. 17.
Nextjs(React)에서 Google Sheets를 데이터베이스로 사용할 수 있을까
영세한 개발자나 취미로 개발을 하는 사람이라면 항상 생각하는 것이 내가 개발한 웹서비스를 무료로 서버에 올려서 사용할 수 있을까? 라는 것입니다. 스태틱 한 웹서비스인 경우는 상대적으로 길이 많은데 데이터베이스까지 붙여야 한다면 이건 또 말이 다르게 됩니다. 고성능의 데이터베이스까지는 필요도 없는데 말이죠. 저도 이번에 Next.js(React)로 아주 간단한 웹서비스를 토이 프로그램으로 개발하기로 하면서 데이터베이스에 대해 문득 든 생각이 Google Sheets를 사용하면 되지 않으까?였습니다. 그래서 여기저기 이것저것 알아보다가 굳이 고성능이 필요하지 않다면 Google Sheets가 대안이 될 수도 있겠다고 판단하여 시도해 봤습니다. 결과는 어느 정도 성공적이어서 잊어버리기 전에 공유를 하려고 합..
IT이야기/시놀로지 2023. 11. 7.
'시놀로지가 갑자기 켜지지 않아요' 해결방법
저는 시놀로지로 DS918+을 사용합니다. 18년도 산이니까 대략 5년 정도 사용한 제품으로 보증기간이 끝난 제품인 거지요. 다시 말하면 이제는 제가 알아서 고쳐 써야 한다는 것이기도 하구요. 그 상황에서 이런 고장이 발생하니 좀 황당했습니다. 그래도 해결하는 방법이 비교적 간단했기에 다른 사람들을 위해 글로 공유를 하려고 합니다. 불행하게도 사진을 찍어놓지는 못했네요. 최대한 상황 설명으로 작성해 보겠습니다. 증상 어느 순간 NAS에 접속을 해보니 접속이 되지 않아서 살펴보니 NAS 전원이 꺼져있었습니다. 전원 버튼을 누르니 전원 LED(파랑)가 계속 깜박이다가 약 10~20초 후에 바로 전원이 꺼져버립니다. 전원이 들어와야 로그를 보던 상태를 보던 할 텐데 처음부터 NAS가 켜지지 않으니 난감하더라구..
IT이야기/Google프로그램 2023. 11. 7.
Google의 할 일 관리 서비스인 Tasks를 아시나요?
저는 구글의 서비스를 사용하는 것을 좋아합니다. 인터넷이 있다면 어디에서나 작업할 수 있고, 거의 실시간으로 모든 기기에서 동일한 서비스를 이용할 수 있기 때문입니다. 게다가, 헤비유저가 아니라면 무료로 사용할 수 있는 많은 서비스도 있구요. 저는 할 일을 관리하기 위해 구글 Keep을 사용했습니다. 하지만 Keep은 무언가를 마구 적는 데는 좋지만, 할 일을 관리하는 데 불편한 점이 있었습니다. 구글에는 할 일을 관리할 수 있는 Tasks라는 서비스가 있습니다. 이전에는 할 일을 관리하는 데 몇 가지 단점이 있었지만, 이제 다시 살펴보니 내가 원하는 수준으로 사용할 수 있는 방법이 있어서 소개를 하려고 합니다. Google Tasks Google Tasks는 구글 서비스 중에서 약간 기생하는 서비스 같..
WEB디자인이야기/WEB디자인 2023. 11. 6.
디자이너라면 꼭 알아야할 컬러 조합 추천 색상 팔레트 웹사이트 8선
프로젝트를 시작할 때 색상에 대해서 쉽게 생각할 수 있지만 실제로 색상 팔레트를 설정하는것은 생각보다 어려울 수 있습니다. 예를 들어, 웹사이트를 만들 때 디자이너의 경험에 상관없이 어떤 색상을 사용할지 항상 어려운 과제입니다. 색상 팔레트 웹사이트는 이러한 경우에 어떤 안내를 제공해줍니다. 일부 서비스는 정확한 색상 정보를 받기 위해 웹사이트에 회원으로 등록해야 하고, 어떤 경우에는 회원으로 등록하지 않아도 유용한 정보를 제공해 주는 곳도 있습니다. 여기 몇 가지 이러한 색상 팔레트 서비스를 제공하는 웹사이트를 소개하겠습니다. 1. Colordot - A color picker for humans URL : https://color.hailpixel.com 사람을 위한 색상 선택기라고 되어 있는데 이 ..
WEB디자인이야기/Figma 2023. 10. 26.
피그마에서 일러스트파일(ai)파일 불러오는 방법
피그마를 사용하다 보면 제목에서 말한 것처럼 일러스트레이터 파일인 ai를 불러와야 하는 경우가 있어요. 느낌적인 느낌으로 ai 파일도 벡터 기반 파일이고 일러스트레이터 파일도 벡터 기반 파일이므로 쉽게 불러와질 것 같지만 아쉽게도 불가능합니다. illustator를 만든 회사가 Adobe라며.. Adobe가 피그마를 인수했다며.. 그렇다면 호환성 면에서도 바로 불러와져야 하는 거 아냐? 뭐 나중에야 가능하겠지만 당장은 불가합니다. 그래서 약간의 변환작업이 필요한데 수중에 Adobe 일러스트레이터 프로그램이 있다면 문제가 없겠지만 이것도 유료이므로 없는 경우도 많겠지요. 그래서 ai, eps 파일을 svg 파일로 무료 변환해 주는 웹서비스가 있어서 소개해드립니다. 파일 간 변화를 서비스해 주는 conver..
WEB디자인이야기/Figma 2023. 9. 27.
피그마 실무에서 가장 유용한 플러그인 리스트
피그마에 힘을 더해주는 실무에서 많이 사용하는 플러그인에 대해서 정리를 해 볼까 합니다. 피그마 플러그인 적용 방법 피그마의 플러그인 적용 방법은 매우 쉽습니다. 플러그인을 별도로 설치하는 개념이 아니고 커뮤니티에 있는 플러그인을 단지 찾아서 실행시킨다는 개념입니다. 경우에 따라서 플러그인에 회원가입을 해야 하는 경우도 있습니다. 상단 도구 메뉴에서 Resources 메뉴를 선택합니다. 탭 메뉴 중 중간에 있는 Plugins 탭을 선택합니다. Search all plugins의 검색창에 원하는 플러그인 명을 입력하고 검색을 합니다. 원하는 플러그인이 나타나면 우측에 있는 Run 버튼을 클릭하면 됩니다. 피그마의 유용한 플러그인들 Annotate it 이 플러그인은 기획자용 툴입니다. 화면에 번호 주석을 ..
WEB디자인이야기/Figma 2023. 9. 23.
피그마의 꽃 오토 레이아웃 사용법
피그마 편집의 꽃이라 할 수 있는 오토 레이아웃입니다. 오토 레이아웃은 디자인 요소를 자동으로 배열하고 정렬하는 강력한 기능입니다. 이를 사용하면 웹 페이지, 모바일 앱 및 기타 사용자 인터페이스 디자인을 쉽게 조작하고 관리할 수 있습니다. 오토 레이아웃의 주요 특징은 다음과 같습니다 요소 정렬: 오토 레이아웃을 사용하면 요소를 수평 또는 수직으로 정렬할 수 있습니다. 이렇게 하면 텍스트, 이미지 또는 버튼과 같은 요소들을 쉽게 정렬할 수 있습니다. 크기 조절: 요소의 크기를 자동으로 조절할 수 있습니다. 이로써 다양한 화면 크기 또는 내용에 맞게 요소의 크기를 조정할 수 있습니다. 자동 스크롤: 만약 요소가 공간을 벗어나면 자동으로 스크롤이 생성됩니다. 이로써 긴 목록이나 페이지를 만들 때 효과적으로 ..
WEB디자인이야기/Figma 2023. 9. 22.
피그마의 컴포넌트 프로퍼티(Property)와 베리언트(variants) 사용법
이전 포스팅에서 피그마의 컴포넌트에 대해서 포스팅을 했었습니다. 만약 피그마의 컴포넌트에 대해서 잘 모르시면 아래 링크를 먼저 읽어보시는 것이 좋습니다. 피그마의 컴포넌트로 구현하는 아토믹 디자인 피그마에서 가장 중요하고 이해가 필요한 것이 컴포넌트 프로퍼티(Property)와 베리언츠(Variants), 오토 레이아웃입니다. 한글로 번역하면.. 프로퍼티(Property) - 속성 : 인스턴스의 디자인 패널을 통해 미리 마스터 컴포넌트에 설정해 놓은 속성(Property)을 선택 또는 입력으로 지정한 변형을 줄 수 있음 베리언츠(Variants) - 변형 : 몇 개의 마스터 컴포넌트를 베리언츠로 하나로 묶어서 설정하며 인스턴스로 사용할 때 디자인 패널에서 그 중 하나를 선택하여 사용함 마스터 컴포넌트를 ..
WEB디자인이야기/Figma 2023. 9. 22.
피그마의 컴포넌트로 구현하는 아토믹 디자인
웹 및 앱 디자인의 세계에서는 효율성, 일관성 및 확장성이 가장 중요합니다. 최근 몇 년간 상당한 인기를 얻은 접근 방식 중 하나는 Figma 구성 요소를 사용한 아토믹 디자인 설계 구현입니다. 이 기사에서는 아토믹 디자인 개념, 이것이 Figma에 어떻게 적용되는지, 디자이너와 개발자에게 제공되는 이점에 대해 살펴보겠습니다. 아토믹 디자인이란 무엇입니까? 원자 설계(Atomic Design)는 브래드 프로스트(Brad Frost)가 도입한 방법론입니다. 재사용성과 일관성을 촉진하는 디자인 시스템을 만드는 체계적인 접근 방식입니다. 원자 디자인의 핵심 아이디어는 사용자 인터페이스를 더 작고 재사용 가능한 구성 요소로 나누는 것입니다. 개발자들에게 객체지향이 있다면 UX/UI 디자인에서는 아토믹 디자인이 ..
IT이야기/무료프로그램 2023. 9. 18.
개떡같이 그려도 찰떡같이 분석해주는 구글의 AI 마법 그림 도구 오토드로우( AutoDraw)
오토드로우(AutoDraw)는 구글이 개발한 인공지능 기반 그림 그리기 도구입니다. 이 도구는 사용자가 그림을 그릴 때 도움을 주며, 간단한 스케치나 그림을 입력하면 그림을 인식하고 관련된 그림과 그림 요소를 제안합니다. 오토드로우를 사용하면 더 전문적인 그림 작업을 하지 않고도 빠르게 그림을 만들 수 있습니다. 오토드로우(AutoDraw)의 주요 특징 인공지능 기반 그림 인식 오토드로우는 강력한 인공지능 기술을 기반으로 작동합니다. 사용자가 스케치한 그림을 실시간으로 분석하여 그림 요소를 인식하고 이에 맞는 제안을 제공합니다. 그림 제안 사용자가 그림을 그리는 동안, 오토드로우는 비슷한 형태나 주제의 그림 요소를 화면 하단에 제안합니다. 이러한 제안은 사용자가 원하는 그림을 찾는 데 도움이 됩니다. 간..
IT이야기/무료프로그램 2023. 9. 16.
무료로 이미지의 배경을 제거해 주는 웹사이트
"remove.bg"는 배경을 자동으로 제거하는 온라인 도구입니다. 이 도구는 주로 사진 편집 작업을 수행하는 사용자들에게 매우 유용하며, 사진에서 불필요한 배경을 쉽게 제거하여 주요 주제를 강조할 수 있습니다. 아래는 "remove.bg"에 대한 주요 특징과 작동 방식에 대한 정보입니다: 자동 배경 제거: "remove.bg"는 사진을 업로드하면 인공 지능 (AI)을 사용하여 주요 주제를 식별하고 배경을 자동으로 제거합니다. 이를 통해 배경 제거 작업을 빠르고 효율적으로 수행할 수 있습니다. 온라인 사용: "remove.bg"는 온라인 서비스로 제공되므로 별도의 소프트웨어 설치나 다운로드가 필요하지 않습니다. 웹 브라우저에서 엑세스하여 사용할 수 있습니다. 다양한 이미지 형식 지원: "remove.bg..
티스토리 스킨/T스킨 공지사항 2023. 9. 15.
커스텀 스킨의 애드센스와 티스토리 공식 애드센스의 충돌 문제 해결 했습니다.
안녕하세요. 오랜만에 스킨 업데이트(버전 3.0.1)를 진행했습니다. 이번 버전에서는 이전에 유료로 판매되던 Tskin을 무료로 제공하게 되었습니다. 이전의 유료 스킨이었던만큼 이번 업데이트는 완성도가 높은 스킨을 제공합니다. 티스토리 커스텀 스킨에서 애드센스 오류 발생 및 해결 이번 업데이트의 가장 주요한 특징은 애드센스 기능의 개선입니다. 이제 스킨 설정에서도 광고의 게시와 삭제를 토글버튼으로 쉽게 조절할 수 있도록 처리되었습니다. 문제 발생 티스토리 커스텀 스킨에서 애드센스 개선 과정 중 발생한 문제에 대해 설명드리겠습니다. 티스토리가 애드센스 광고를 공식적으로 적용하게 되면서, 공식 스킨이나 애드센스가 적용되지 않은 기존 스킨에서는 쉽게 광고를 추가할 수 있게 되었지만, 수동으로 애드센스 코드를 ..
WEB디자인이야기/Figma 2023. 8. 24.
피그마에서 Constraints 옵션 사용법
피그마 뿐아니라 대부분의 이미지 편집툴에서 공통적으로 활용되는 것이 Constraints라는 옵션입니다. 이게 보통 많이 봐와서 안다고 생각할 텐데 막상 모르고 사용하는 경우가 많아서 명확하게 정리를 한번 해보려고 합니다. 개념을 먼저 이해해야 하는데, Frame의 크기가 변경될 때 설정된 요소는 어떤 기준으로 움직이는지에 대한 설정입니다. 상세 옵션 설정 기본값은 가로(Horizontal)는 Left, 세로(Vertical)는 Top입니다. 기본값 ( 가로 : Left, 세로 : Top) 요소의 왼쪽부터 Frame까지의 거리가 고정이 되고 요소의 상단부터 Frame까지의 거리가 고정이 되어서 Frame의 크기를 변경하면 우측과 하단 부위의 넓이만 움직이게 됩니다. 오른쪽과 하단 고정 ( 가로 : Rig..
WEB디자인이야기/Figma 2023. 8. 23.
피그마의 문서 구조는 어떻게 되나요?
포토샵으로 웹디자인과 모바일디자인같은 UI디자인을 하던 시대를 지나 맥킨토시 진영에서 스케치(Sketch)라는 걸출한 UI전용 툴이 탄생하면서부터 시작된 UI전용 툴의 춘추전국시대를 지나 현재는 피그마(Figma)가 UI툴 업계를 평정하는 양상입니다. Figma는 UI 디자인 및 협업 도구로서 혁신적인 위치와 상태에 있습니다. 이전의 UI 도구들이 겪었던 한계와 문제점을 극복하여, Figma는 웹 기반의 협업 플랫폼으로 디자이너들이 함께 작업하고 디자인을 공유하며 시각화할 수 있는 기능을 제공합니다. 이제 Figma는 단순히 UI 요소만 디자인하는 도구를 넘어서, 디자인 시스템을 관리하고 유지할 수 있는 기능을 포함하고 있습니다. 디자인 시스템을 구축하고 유지하면서 일관된 디자인 언어를 유지하고 팀 간의..
IT이야기/맥북 2023. 8. 18.
20230818_mov파일을 GIF로 변환하는 방법(feat. Homebrew, ffmpeg)
맥북에서 화면을 녹화해서 누구나 볼 수 있게 aniGIF로 변환해야 될 일이 생겼습니다. 여기서부터 시작했는데, 이 과정에서 많은 기술적인 정보를 습득하게 되어 포스팅을 해 봅니다. 화면 녹화하기 맥북에서 화면을 녹화할 때 기본 기능을 활용할 수 있습니다. Shift + Command + 5 버튼을 동시에 누르면 화면 캡처 또는 녹화 모드로 진입을 하게 됩니다. 왼쪽 3개의 버튼은 스틸샷 캡처, 가운데 2개의 버튼은 화면 동영상 녹화, 오른쪽 끝의 버튼은 실행 버튼입니다. 저는 가운데에 있는 버튼을 클릭하여 화면을 녹화하였습니다. 해당 화면을 녹화하면 결과물이 ***.mov라는 동영상 파일 포맷으로 저장이 됩니다. 이제 이 동영상 파일을 animate GIF 변환시켜야 합니다. Homebrew 설치하기 ..
IT이야기/시놀로지 2023. 5. 23.
시놀로지 VideoStation으로 영상이 재생되지 않을 때 해결하는 방법
시놀로지에서 VideoStation은 정상적으로 잘 설치가 되었는데 영상을 플레이하다보면 잘 재생이 되는 경우도 있지만 어떤 영상은 재생이 되지 않는 경우가 있습니다. 그런경우 혹시 오디오 코덱의 문제가 아닌지 확인해 볼 필요가 있습니다. 코덱이 무료코덱도 있지만 유료 코덱도 존재합니다. 그래서 VideoStation같은 무료의 제품인경우는 굳이 돈을 지불해가면서 까지 코덱을 제공해 주지 않습니다. 그 유료코덱중에 대표적으로 DolbyⓇ의 오디오 코덱(DTS, EAC3, TrueHD)들이 있습니다. 그래서 시놀로지를 설치하거나 업데이트를 하는 경우 DTS, EAC3, TrueHD 코덱이 실행될 수 있게 설치하는 작업을 해야 하는데, 이과정이 다소 복잡하고 짜증이 납니다. 이 부분을 github에 Alex..
IT이야기/맥북 2023. 5. 19.
맥OS에서 숨겨진 폴더와 파일 표시하기
맥OS는 사용자에게 편의성과 보안을 제공하기 위해 일부 폴더와 파일을 숨김 처리합니다. 하지만 때로는 숨겨진 폴더와 파일에 접근해야 할 필요가 있을 수 있습니다. 이 글에서는 맥OS에서 숨겨진 폴더와 파일을 표시하는 방법에 대해 자세히 알아보겠습니다. 1. Finder 옵션 설정 Finder는 맥OS에서 파일 및 폴더를 탐색하는 기본 애플리케이션입니다. 숨겨진 폴더와 파일을 표시하기 위해서는 다음 단계를 따르세요: Finder를 엽니다. 상단 메뉴에서 "Finder"를 클릭한 후 "환경설정"을 선택합니다. "고급" 탭을 클릭합니다. "모든 파일 확장자 표시" 옵션을 선택합니다. "라이브러리 폴더 표시" 옵션을 선택합니다. 변경 사항을 저장합니다. 이제 Finder에서는 숨겨진 폴더와 파일이 표시됩니다. ..
IT이야기/기타 2023. 2. 17.
레노버 태블릿 Y700 반글화 및 문제점 해결방법
레노버 내수용 태블릿 초기 반글화 하기 제가 레노버 Y700을 구매했습니다. ㅎㅎ 중국 내수용 제품이다 보니 한글화부터 이것저것 설정해야 할 것이 많은데 잊어버리지 않기 위해 정리 차원에서 정리했습니다. 1. 처음 설정 처음 태블릿을 실행시키면 중국어로 나오게 됩니다. 중국어를 모른다면 일단은 영어로 설정을 해 놓고 시작하는 것이 좋습니다. 다음 화면 와이파이를 잡아 줍니다. 다음 화면 Game Mode는 우측 하단 Next 버튼을 클릭합니다. 다음 화면 PC Mode도 Next 버튼을 클릭합니다. 다음 화면 LeCloud도 Skip 버튼을 클릭합니다. 다음 화면 Recommended apps도 Skip 버튼을 클릭합니다. 다음 화면 System Navigation 도 둘 중 하나를 선택하고 Go 버튼을..
IT이야기/기타 2023. 2. 13.
아파트 천정에 붙은 와이파이 AP 초기화 하는 방법
입주를 했을 때부터 천정에 둥그런 WIFI가 달린 것을 보았습니다. 사실 이게 WIFI라는 것을 알았지만 기본 속도가 최대 300Mbps밖에 되지 않아서 거들떠도 보지 않았습니다. 아파트마다 설치된 장비가 업체도 다르고 모델도 다르겠지만 저희 집에 붙어 있는 장비는 MAP-11NCV3라는 AP입니다. 이 글을 읽으시는 분들은 아마도 이것 때문에 오셨을 확률이 높겠지요? WAN : 전원이 들어왔는지 네트워크선이 연결되었는지 확인 WLAN : 무선 WiFi가 동작하는지 확인 전원 스위치 : 뽀족한 것으로 눌러야 전원이 토글 됨 리셋 스위치 : 5초 이상 길게 누르면 제품이 초기화됨 기본 WiFi 접속 정보 기본 WiFi에 접속하는 비밀번호는 입주시점에 알려줍니다. 하지만 몇 년이 지나고 살던 사람이 바뀌고 ..
IT이야기/기타 2023. 2. 10.
레노버태블릿(M10PLUS 3세대, P12) 공장초기화하는 방법
레노버 태블릿을 가지고 있는데 공장초기화해야 할 일이 있어서 실제로 해봤습니다. 인터넷에 잘 나와있지 않아서 공유 차원으로 작성합니다. 만약 태블릿을 중고로 판매할 목적으로 초기화를 해야 한다면... 반드시 구글 로그아웃을 하고 초기화를 해야 합니다. 그렇지 않으면 구매한 상대방이 구글로 로그인 할때 이기기는 재설정 되었습니다. 라는 메시지와 함께 구글 락이 걸려버리게 됩니다. 분실한 태블릿을 보호하기 위해 구글에서 기본으로 락이 걸리도록 해 놓은 안전 장치입니다. 본인이 초기화 해서 사용할때는 문제가 없지만 중고로 판매할 경우는 꼭 구글 로그아웃하는것을 잊지 마세요. 1. 전원 끄기 먼저 전원을 꺼 줍니다. 공장초기화 때는 전원 버튼과 음량 버튼을 활용하여 메뉴 선택과 실행을 합니다. 전원 버튼 볼륨 ..
WEB개발이야기/VScode 2023. 2. 7.
VScode의 package.json에서 AWS의 S3로 배포하는 방법
React.js나 Vue.js 등의 Package 프로젝트로 개발을 할 때 쉽게 AWS의 S3로 배포하는 방법에 대해서 공유합니다. 먼저 AWS의 S3의 버킷은 이미 생성되어 있다는 가정입니다. S3 버킷 생성 아래와 같이 버킷이 생성되어 있습니다. 목차는 S3의 버킷입니다. 버킷의 이름이며 잘 기억해 놔야 합니다. 리전, 그러니까 실제로 물리적으로 파일이 저장되는 위치라고 보시면 됩니다. 기억해놔야 합니다. 액세스는 퍼블릭으로 되어 있어야 외부에서 접근이 가능합니다. IAM 권한 부여하기 이제 외부에서 접근하기 위해서 IAM에서 권한을 부여해야 합니다. 좌측 메뉴에서 사용자를 선택합니다. 보안 자격 증명 탭을 선택합니다. 중간쯤에 위치한 액세스 키를 발행합니다. 발행을 하면 Access key ID와 ..
IT이야기/컴퓨터 2023. 2. 2.
Hello Giga WiFI와 IPTIME 공유기를 이지메쉬(Mesh) 망으로 연동하기
LG 헬로비전의 인터넷을 설치하면 상품 종류에 따라 Giga WiFi 유무선 공유기를 하나 무상으로 제공을 해줍니다. 제가 받은 공유기는 머큐리에서 제작한 MC-G500입니다. 저는 IPTIME의 A8004T 공유기와 머큐리의 MC-G500 공유기를 활용하여 Mesh WiFi를 구성하려고 합니다. 처음에는 IPTIME 제품끼리만 Mesh가 가능한 줄 알았는데, 설치해보니 이기종도 설치가 가능했습니다. 나는 왜 인터넷과 TV을 LG 헬로비전으로 바꾸었을까? 인터넷망 구성 저는 최근 지어진 아파트에 살고 있고 단자함이 별도로 존재하고 있습니다. 단자함에는 전화망, TV망(동축케이블), 인터넷망(UTP 케이블)이 구성되어 있습니다. 제가 구성한 망은 아래와 같습니다. 1번 : 단자함 먼저 LG 헬로비전의 광케..
IT이야기/컴퓨터 2023. 2. 1.
나는 왜 인터넷과 TV을 LG 헬로비전으로 바꾸었을까
이번에 집 인터넷과 방송을 SK브로드밴드에서 LG 헬로비전으로 변경하였습니다. 기존에 SK브로드밴드도 모바일 결합을 하면 가격이나 품질 등에서 나쁘지는 않았으나 약정의 족쇄에서 풀려나기도 했도 사은품이나 월비용 등 기타 여러 가지를 고려해서 변경했습니다. 다행히 저희 집이 LG 헬로비전 서비스가 가능한 지역이라 여러 가지로 비교해 보고 결정을 했습니다. LG 헬로비전은 SK, KT, LG 같은 대기업에서 시작한 곳이 아니고 영세한 지역 케이블에서 시작한 업체입니다. CJ에서 지역 케이블을 인수하여 운영했었는데 그때는 동축 케이블망을 사용하여 인터넷 품질이 완전 똥망이였습니다. 근래 LG로 넘어가면서 LG U+ 망을 같이 사용하게 되면서부터 혜자스러워졌습니다. 그리고 원래 출신이 케이블방송이었기 때문에 방..
IT이야기/시놀로지 2023. 1. 10.
STRAPI V4 새 게시판(Content-Type) 만들고 권한 설정하기
프론트앤드 개발자에게 꼭 필요한 백앤드를 책임질 STRAPI Headless CMS STRAPI 최신 버전을 도커 이미지로 만들어서 시놀로지에 올려 서비스하는 방법 STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 설명 STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 - Settings(설정) 설명 STRAPI V4 새 게시판(Content-Type) 만들고 권한 설정하기 Strapi를 설치했으니 이제 한번 게시판을 만들어보겠습니다. Strapi에서는 콘텐츠 타입(Content-Type)이라고 합니다. Content-Type Builder에서 만들면 됩니다. Content-Type Builder 생성하기 Content-Type Builder 메뉴를 선택합니다. Create new ..
IT이야기/시놀로지 2023. 1. 6.
STRAPI V4의 무조건 알아야 하는 관리자 화면의 Settings(설정) 설명
프론트앤드 개발자에게 꼭 필요한 백앤드를 책임질 STRAPI> Headless CMS STRAPI 최신 버전을 도커 이미지로 만들어서 시놀로지에 올려 서비스하는 방법 STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 설명 STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 - Settings(설정) 설명 이전 포스팅에서 STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 설명을 했습니다. 그중 Setting 부분은 중요하기도 하고 내용도 많기 때문에 여기에 별도로 포스팅을 하려고 합니다. Settings Settings은 Strapi의 전체적인 기능에 대한 설정을 하는 화면입니다. GLOBAL SETTINGS GLOBAL SETTINGS은 Strapi에 대한 일반적인 설정을 ..
IT이야기/시놀로지 2023. 1. 5.
STRAPI V4의 무조건 알아야 하는 관리자 화면 설명
프론트앤드 개발자에게 꼭 필요한 백앤드를 책임질 STRAPI> Headless CMS STRAPI 최신 버전을 도커 이미지로 만들어서 시놀로지에 올려 서비스하는 방법 STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 설명 STRAPI V4의 무조건 알아야 하는 기본적인 관리자 화면 - Settings(설정) 설명 얼마 전에 시놀로지의 도커에 STRAPI V4를 이미지로 만들어서 서비스하는 방법을 포스팅했습니다. (위의 링크를 참조하세요.) 이번에는 STRAPI V4의 백 앤드 관리자 화면에 대해서 가장 기초적인 설명을 하도록 하겠습니다. STRAPI는 Bronze Silver Gold의 유료 서비스와 완전히 무료인 Community Edition을 서비스하고 있습니다. 보통은 Community..
IT이야기/시놀로지 2022. 12. 13.
Headless CMS STRAPI 최신 버전을 도커 이미지로 만들어서 시놀로지에 올려 서비스하는 방법
예전에는 제로보드, 워드프레스 같은 CMS(콘텐츠 매니지먼트 시스템)를 주로 사용해서 카페(게시판)나 블로그 등을 만들어 서비스하는 것이 대세였습니다. 현재는 Frontend의 발달로 인해 백앤드 위주로 서비스되는 Headless CMS가 부상을 하고 있고 그 중심에 STRAPI가 있습니다. STRAPI STRAPI는 쉽게 말하면 워드프레스 같은 CMS에서 백앤드쪽의 부분만 담당하는 서비스라고 보시면 됩니다. 프론트앤드는 react.js로 개발하든, vue.js로 개발하든 알아서하고 백앤드는 STRAPI에서 제공하는 RESTful or GraphQL로 데이터를 주고받도록 하는 것입니다. 그렇게 확보된 콘텐츠는 STRAPI에서 관리할 수 있습니다. 자세한 설명은 아래의 링크를 참조하세요. 프론트앤드 개발자..
