개발쬬

요즘 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..

최근들어, 아니 이미 오래전부터 AI의 관심도는 급 부상중이였다.심지어 제작년 AWS SUMMIT 에 방문했을때는 아주 작은 부스들만이 AI에 대해 설명을 하고 있었는데 이번 부스들은 50% 아니 80% 는 AI 관련 서비스와 기술들을 소개하는 자리를 가졌다. 방문한 시간대는 오후 2시 경이였고 정말 많은 관계자들이 1층과 3층을 누비며 새로운 기술을 경험하고 접하고 있었다. Track 3 생성형 AI 전에는 몰랐는데 각 세션마다 헤드셋을 끼고 강연을 들을 수 있었다.뭔가 낯선 느낌인데 하도 게임을 열심히 해서 그런지 삐까번쩍한 헤드셋이 너무 마음에 들어서 가져오고 싶었다..ㅎ답답하지 않을까 걱정했지만, 집중도가 매우 올라가서 좋은 방식이라는 생각이 많이 들었다. Amazon Bedroc..

실무 프로젝트 작업하면서 도움을 많이 받았던 플러그인 & 익스텐션 추천을 드려볼까합니다.평소 가장 유용했고 실무적으로 도움이 많이 되었기 때문에 기록용 이면서 추천용 입니다. Windsurf Plugin 아쉽게도 커서ai에는 지원되지 않지만, vscode 사용시 굉장히 유용하게 사용했던 AI 플러그인 중 하나입니다.아래 이미지처럼 코딩을 하다가 자동으로 코드를 작성해주기도 하고, 변수명을 예측해서 추천해주는 용으로 많이 사용했습니다. 다른 파일을 참고해서 코드를 작성해주기 때문에 프로젝트 사이즈가 클 수록 더 유용하게 사용했던 것 같습니다. Windsurf Plugin (formerly Codeium): AI Coding Autocomplete and Chat for Python, JavaScript..

터미널에서 vscode 를 키는 단축키 code . code . 을 사용하면 해당 프로젝트 가 vscode 를 열게 해준다.회사에서 굉장히 잘 사용하고 있는 단축키라 없으면 불편할정도인데,, 최근에 슬슬 공부를 다시 시작하게 되면서 내 맥북에는 깔려있지 않다는 사실을 알게됨..! 😖      EACCES: permission denied, unlink '/usr/local/bin/code' 라는 에러가 뜨는데, 결국 usr/local/bin 경로에 cdoe 권한이 존재하지 않기에 권한을 줘야한다는 뜻이기에, 권한을 주기만 하면 오류는 해결된다!          터미널에서 세팅해주기1. 터미널을 킨다2. ~ 상태에서 cd /usr/local/binsudo rm -rf code 이렇게 하면 패스워드를 입력..