스터디/Etc51

• 

  웹 개발 화면 사이즈 (Chrome Emulate/Simulate Custom Device Size) 웹 개발을 할때 다양한 화면 사이즈로 테스트 해봐야되는데 주로 크롬 개발자 모드의 디바이스 툴바를 이용하는데요. 여기 있는 기본적인 화면 사이즈는 형편 없는 모델만 가득합니다...... 물론 파란 부분에 마우스를 올려놓으면 Mobile S 사이즈, Mobile L, Tablet, Laptop 등 여러가지 사이즈로 바꿀 수도 있습니다. 디바이스의 user-agent까지 적용해보고 싶을땐 디바이스 툴바에서 디바이스를 커스텀으로 추가하면 됩니다. Edit을 누르고. Add Custom device.. 버튼을 눌러서 기기 이름과 가로사이즈, 세로 사이즈, 픽셀비율, user agent까지 추가하면 됩니다. 모든 기기 마다 기억할 수 없기 때문에 Github에 누군가 정리해놓은게 있네요 https://github.. 스터디/Etc 2023. 11. 14.

• 

  [Nodejs] 웹 개발 초보자가 알아야할 필수 정보들 저도 얼마 안된 입문자 이기 때문에 여러가지 알아가면서 계속 추가할 예정입니다. 글자 format 글자를 일일히 더하기엔 너무 귀찮음 "가"+"나"+"다"+"라" 물론 이런 포맷 방법도 있음 "{0} + {1} = {2}".format(4, 5, 9) 하지만 젤 편한건 역시, 템플릿 리터럴(₩₩, 백틱)을 이용한 방식. const name = '가나' const test = ` ${name} hi~ ` 백틱(₩, 1옆에 있는거)을 이용해서 적으면 엔터를 위한 개행문자도 필요없고 변수로 대체하기 위해 ${}를 사용하면, 순서를 외우거나 ""쌍따옴표로 끊었다가 + 하고 변수 넣고 하는 귀찮은 작업이 없어짐. 소스코드상에 숨기고 싶은 데이터 process에 있는 env 영역을 이용해서 사용함. 이렇게 하기보단.. 스터디/Etc 2023. 11. 9.

• 

  Sound Play JS Library 브라우저에서는 음악을 재생하는 많은 방법이 있습니다. 1. HTML Audio 태그 오디오 지원되지 않는 브라우저 https://www.w3schools.com/jsref/dom_obj_audio.asp 2. Howler.js https://howlerjs.com/ 아직까지도 계속 업데이트 되고 있는 라이브러리 입니다. 스터디/Etc 2023. 10. 11.

• 

  [Strapi] Model Scheme Text 길이 에러 (value too long for type character varying 255) Strapi에선 다양한 데이터 형태로 저장할 수 있습니다. Text, Email, Rich Text, password, number, enum, date, media, json, boolean, uid, relation collection. 그중에서 가장 많이 쓰는 Text. 대부분 DB 속도를 위해서 Text는 Small로 세팅합니다. 하지만 scheme의 기본 길이가 255자 여서, 255자 길이를 넘는 텍스트를 넣게 되면 아래와 같은 에러가 납니다. error: value too long for type character varying(255) 에러 수정방법 (3가지) 1. 255자 이내로 데이터를 잘라서 넣기. (코딩필요) 2. short text 형식을 long text 형식으로 변경하기.(Ad.. 스터디/Etc 2023. 10. 10.

• 

  [Strapi] UUID Random *Strapi v4 기준 입니다. Strapi에는 content를 만들고 나면, 순차적으로 ID가 붙게 됩니다. 하지만 이러한 ID는 관리자가 보기에 좋고 외우기도 좋지만, 다른 악성사용자가 보기엔 파헤치기 좋은 순서가 되버립니다. 그렇기 때문에 이러한 ID를 외부에 노출할 수 없어서 대부분 유추하기 까다로운 UUID형태로 많이 쓰곤합니다. Strapi Marketplace에는 UUID관련 Plugin가 3개나 존재합니다. 물론 과거엔 잘 됬을지 몰라도 지금은 관리 안되고 있는 플러그인 이였습니다. 굳이 플러그인을 쓰지 않아도 금방 개발할 수 있습니다. https://docs.strapi.io/dev-docs/backend-customization/models#available-lifecycle-even.. 스터디/Etc 2023. 10. 3.

• 

  모든 성경구절 동영상으로 만들어서 유튜브에 업로드 하기 (후기) 한 동안 유튜브 프로젝트를 했었습니다. 지금은 프로젝트를 마무리하고 깔끔하게 계정을 삭제한 상황입니다. 아차,, 하는 순간엔 이미 유튜브 업로드용 구글 계정을 삭제해버려서 구글에 검색한걸로 이미지를 대신했습니다. 참고로 재생하면 유튜브 계정이 없어서 재생이 안됩니다. 프로젝트 목표 성경말씀을 소리내어 읽는 영상을 유튜브로 전부 올려보자. 그것도 한 절씩. 아니면 한 장씩. 아무튼 모든 구절을... 그리고 영상은 자연 배경물로 전부 다른 영상을 쓰면 좋겠다 싶었습니다. 성경 통독용 영상은 많았지만, 성경 어플처럼 한 장씩 찾아볼 수 있게 만든 영상은 유튜브에 업로드 되어있지 않아서 시도해 봤었습니다. 준비과정 1. 말씀 준비 성경말씀중에 저작권이 만료된 '개역개정' 판으로 db를 구했습니다. 총 31102.. 스터디/Etc 2023. 8. 8.

• NPM install product, dev npm install 명령어를 이용해서 dependency를 설치할때 개발용 프로덕트용을 선택할 수 있습니다. 방법 1 : 커맨드 옵션 사용 1) npm install : dependency, dev-dependency 를 모두 설치 2) npm install --production : dependency만 설치 3) npm install --dev : dev-dependency만 설치 방법2 : 환경변수 사용 NODE_ENV=production $npm install 스터디/Etc 2023. 8. 1.

• [Strapi4] 처음부터 적용까지 보호되어 있는 글 입니다. 2023. 7. 25.

• 

  Docker 이미지 멀티플 아키텍처로 만들기 (멀티 플랫폼 빌드) M1 Macbook Pro로 만들땐 매우 조심해야합니다... docker(이하, 도커) 이미지를 만들때는 만드는 환경을 반영해서 이미지를 만듭니다. 인텔 환경에서 만들면 x86, x64 아키텍처가 반영되고, AMD환경에선 linux/amd64, 애플칩에서 만들면 limux/arm/v7가 반영됩니다. 만드는건 상관없지만 실행하는 서버에서는 arm64가 아닌 서버마다 세팅해놓은 아키텍처로 실행되기 때문에 도커가 정상적으로 실행되지 않을 수 있습니다. 서버측에선 주로 이런 에러가 출력됩니다. exec user process caused “exec format error” Buildx 19버전 부터 지원하는 CLI 플러그인을 이용해서 빌드옵션을 설정할 수 있습니다. 아키텍처 목록 확인 $ docker build.. 스터디/Etc 2023. 7. 20.

• 

  Nodejs 버전관리 (버전 변경, 다운그레이드, 업그레이드) nodejs가 시스템에 설치되고, 버전을 바꾸려면 어떻게 바꿔야하지 고민하던찰나 발견한 플러그인 "n 플러그인" node의 버전을 관리해주는 플러그인으로 정말 간단한 명령어로 node의 버전을 변경할 수 있습니다. # LTS 버전 설치 $ n lts # Stable 버전 설치 $ n stable # 최신 버전 설치 $ n latest # 특정 버전 설치 $ n 18.16.1 $ n 20.3.1 # 버전 변경 $ n # 특정 버전 삭제 $ n rm 18.16.1 $ n rm 20.3.1 추가로. brew명령어로 node를 설치했으면, n plugin이 동작하지 않게 된다. brew명령어로 node를 삭제해보자. $ brew uninstall node 스터디/Etc 2023. 7. 3.