목록분류 전체보기 (186)

계발하는 개발자

[JS] 조건을 만족하는 배열 요소의 인덱스 반환 - findIndex() 메서드

findIndex() 메서드란? 주어진 판별 조건을 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환하는 메서드로, 만족하는 요소가 없는 경우 -1을 반환한다. 아래 공식문서에서도 설명이 자세하게 나와있다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex 이번에 next.js로 뮤직플레이어 기능을 구현하면서 findIndex 메서드를 요긴하게 활용한 것 같다. 해당 프로젝트에 대한 회고 겸 findIndex 메서드 정리차 글로도 남겨본다. 플레이리스트 선택시 해당 음원 가사로 변경 플레이리스트에 담긴 li 클릭시 해당 음원의 가사로 변경되도록 해야했다. 내가 클릭한 플레이리스트 타이틀..
📌 Language/Javascript 2023. 10. 31. 15:57
[Vercel] Vercel로 Next.js FE 프로젝트 배포하기

웹사이트 설계 및 기능구현은 다 끝났고, 대망의 배포! next.js 에서 제공하는 배포 플랫폼인만큼 vercel로 배포를 진행하였다. 일단 결론부터 말하면, 쉽고 빠르다! (+ 간편함) Why Vercel? 복잡한 절차없이 간편하게 호스팅 가능 기본적으로 https가 적용된 상태로 배포됨 git repository에 연결하면 변경된 코드를 브랜치 병합시 자동으로 빌드후 배포해줌(CI/CD 자동화) 일단 내가 체감한 Vercel 배포시 장점은 요정도. Vercel이란? Vercel은 Next.js 개발 팀에서 만든 배포 플랫폼으로, '빌드 + 배포 + 호스팅' 서비스를 제공한다. (정적 사이트인 프론트엔드 배포에 특히 특화됨) Vercel로 배포하기 1. Vercel 회원가입, 로그인 우선 Vercel ..
🌎 Cloud & Infra/Vercel 2023. 10. 29. 01:00
[CSS] 유튜브 영상 iframe(아이프레임) 반응형 넣기

웹페이지에 영상 원본파일을 넣게 되는 경우에 용량으로 인해 github에 push 가 제한되거나 하는 경우가 있기 때문에 되도록이면 iframe을 이용해서 외부 영상을 끌어오는 형태로 삽입하고 있다. 이때 아이프레임 반응형을 위해 넣는 정석같은 코드다. .vid_ifr_inner { position: relative; width: 100%; padding-bottom:52.25% } .vid_ifr_inner iframe { position: absolute; width: 100%; height: 100%; border: none; } 이렇게 넣게 되면 모바일~태블릿 사이즈에 대응하는 반응형 사이즈로 알아서 리사이즈된다.
📌 Language/CSS 2023. 10. 28. 16:16
[Next.js 에러] The resource [URL] was preloaded using link preload but not used within a few seconds from the window's load event 해결

참고 https://blinders.tistory.com/84 에러 라우팅 이동한 페이지 CSS 설정을 해주는데 갑자기 아래같은 에러가 떴다. 직역하자면 아래와 같다. "리소스가 링크 사전 로드를 사용하여 사전 로드되었지만 창의 로드 이벤트 후 몇 초 내에 사용되지 않았습니다. 적절한 'as' 값이 있고 의도적으로 미리 로드되어 있는지 확인하세요." 원인 Vue CLI는 일부 리소스를 브라우저가 사전로드하도록 preload 옵션을 자동으로 설정하는데, preload 옵션으로 로드해오는 리소스가 즉각적으로 사용이 안되니까 이런 에러가 발생한듯하다. (preload 옵션으로 로드해오는 리소스는 3초내에 실제로 '활용'이 되어야한다고 함) 해결 처음엔 webpack 설정파일에서 as 속성값을 style 로 지..
❗️Error 2023. 10. 26. 14:04
이전 Prev 1 ··· 10 11 12 13 14 15 16 ··· 47 Next 다음