개발쬬

요즘 3D가 유행하면서 회사에서도 3D 비디오를 활용해 사이트를 꾸미게 되었다.근데 이 파일들을 그냥 단순히 웹 사이트에 뿌려주기만 하면 될줄 알았는데, 아뿔싸 사이즈가 너무 크다!게다가 비디오 배경이 불투명으로 되어 있어 불투명 상태를 유지하기 위해선 mov 비디오 확장자를 사용해야 한다.(나머지 비디오 확장자는 불투명한 영상을 제공하지 않는다) 애초에 작업자에게 받은 파일또한 mov 이다. 특히나 로고인 경우는 배경을 불투명하게 사용하는 경우가 많다보니~사이즈도 사이즈지만 뒷 배경을 꼭 불투명하게 만들고 싶었다. 찾아보다 알게된 정보 ! 비디오는 webm 확장자를 사용하면 불투명 상태를 유지한 채로 영상을 재생시킬 수 있다.대신 호환되는 플레이어가 많이 없었기에 직접 cdn에 넣고 돌리는 방법으로 테..

변수형 분리 정적 할당next 에서 메타데이터를 활용하려고 할때, 기본 메타데이터를 기준으로 몇개의 특정 페이지만 페이지의 메타데이터를 바꿔주려고 한다. generateMetadata 사용해서 페이지별로 설정해주기 위해선 상위 layout 에서 메타 정보를 받아야되는데, 프로젝트 규모가 커질수록 요구사항이 까다로워지기 때문에 최대한 결합도를 낮추는 방향으로 작업하기 위해 메타정보를 페이지별로 분리해서 사용하는 방법을 사용했다. 우선 프로젝트에 메타데이터를 사용하기 위한 폴더 하나를 만들어주었습니다.* 폴더를 만들어 별도 분리해줬지만 따로 분리할 필요는 없다. (아래 코드는 예시!) 페이지별 할당 사전 준비 경로 : shared > helper > metatdata > constants.ts// c..

한참 SEO 를 이것저것 찾아보던 중 발견한 궁금증이 생겼다.대체 이렇게 카테고리별로 깔끔하게 노출되는 웹사이트는 어떻게 만드는거지? 특히나 구글에서는 대형 사이트들은 이런 UI를 가지고 있는 경우가 100 이면 100이였다. 그래서 여기저기 찾아보다가 발견한 구글 검색 센터! 구글 검색 센터 최적화된 SEO 환경을 만들기 위해 참고하는 사이트 입니다. 구글 검색엔진 최적화 기초부터, 크롤링, 색인, 순위 등 다양한 정보를 참고할 수 있다고 한다~ 한마디로 검색엔진 최적화 + 눈에 띄는 UI를 제공해 사이트를 개선시킨다는것에 목적을 가지고 있다고 한다 검색엔진 최적화 개선 문서 | Google 검색 센터 | Documentation | Google for Developers검색엔진..

가장 많이 사용하는 아이콘 라이브러리 Heroicons프론트엔드 개발을 하면서 가장 많이 사용하는 라이브러리 중 하나이면서, 디자이너에게도 가장 많이 사랑받는 아이콘 시스템이 horoicons 이다. 간편하게 import 해서 사용하지만 이번에는유형별로 불러오는 법을 모르는 분들을 위해 간단하게 포스팅 해보려고 합니다. Heroicons 사이트 heroicons git GitHub - tailwindlabs/heroicons: A set of free MIT-licensed high-quality SVG icons for UI development.A set of free MIT-licensed high-quality SVG icons for UI development. - tailwindlabs/..

평소 잘 사용하던 cmd + d 단축키가 커서AI 편집툴을 사용하면서 VScode 에서 사용하던 드래그 된 영역 아래로 복사하는 기능이 수행되지 않고 있었다. 1. cmd + Shift + p 2. Preferences: Open Keyboard Shortcuts (JSON) 를 선택! Default X 3. 경로 확인 후 위에 코드를 붙여넣어준다.JSON 경로 : User > my > Library > Application Support > Cursor > User > keybindings.json{ "key": "cmd+d", "command": "editor.action.copyLinesDownAction", "when": "editorTextFocus && !editorReadonl..