개발쬬

이번에는 웹사이트를 만들면서 가장 자주 사용하는 아코디언 UI 를 만들어봤습니다.별로 어렵지 않고 대중적인 UI 설계 방식이지만 tailwind 로 쉽게 구현을 원하는 분들을 위해 공유드립니다. section > Conatiner (커스텀UI) > ul > li > div 로 설계- 펼쳐짐을 감지할 button | div 요소 (grid grid-row 를 사용해 0 과 1 사이로 내부 높이를 감지합니다)- 펼쳐질 아이템 (div 요소를 사용하지만 opacity 0 으로 초기화) 아코디언 펼치기 전 아코디언 펼치기 후하위 요소는 DOM으로 구성이 가능합니다. (tsx 파일) 애니메이션 효과는 duration 을 사용하여 임의로 조절이 가능하며 부드럽게 펼쳐지는 UI 구현이 가능합니다. 코드 공유코드 ..

이번에 홈페이지 디자인과 프론트를 모두 혼자 제작한 후 팀원들에게 공유하기 위해 임시적으로 vercel 의 환경구성을 빌려 빌드와 배포를 진행했습니다. 기존에는 배포하면 바로 화면을 볼 수 있었던 것 같은데, 오랜만에 접근해서 그런지 갑자기 로그인창이 뜨더라고요.원인을 찾아보다가 발견한 비활성 모드!버셀에서 제공하는 무료 버전에도 활용할 수 있는 인증된 사용자가 접근 가능하도록 하는 기능이더라고요. 우선 제가 작업한 레포지토리를 버셀과 동기화 해줍니다. 동기화를 해주면 이렇게 프로젝트별로 현재 빌드상황과 도메인이 노출됩니다.다들 여기까지는 쉽게쉽게 하실 수 있을 거에요. 자 이제 인증부분을 제거하기 위해 프로젝트 상단 메뉴 > Settings 로 이동해줍니다.사실 개발자들끼리는 그냥 로그인하고 진행..

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