전체 글
-
[JavaScript] 다중 조건 정렬JavaScript 2023. 10. 12. 21:16
const array = [[3,5,4], [1,4,3], [1,2,5]] array 배열을 정렬할 때, 배열의 첫번째 값을 기준으로 오름차순 정렬을 하면 다음과 같이 할 수 있다. array.sort((a,b) => a[0]-b[0]) console.log(array) //[[1,4,3], [1,2,5], [3,5,4]] 첫번째 값이 동일할 시 두번째 값을 기준으로 정렬하고 싶을 때가 있다. 그럴 땐 간단하게 다음과 같이 할 수 있다. array.sort((a,b) => a[0]-b[0] || a[1]-b[1]) console.log(array) //[[1,2,5], [1,4,3], [3,5,4]] 앞의 연산이 0일 경우 두 값이 동일하다고 판단되어 다음 조건으로 판단된다. array.sort((a,b..
-
lottielab으로 쉽게 lottie 애니메이션 만들기etc. 2023. 10. 6. 16:35
Lottie 애니메이션은 무엇일까요? - 로티파일즈 Lottie는 JSON 기반의 애니메이션 포맷으로, 어느 기기와 플랫폼에서든 사용할 수 있습니다. LottieFiles을 통해 Lottie 애니메이션을 생성하고 편집하고 테스트할 수 있으며, 다른 사람과 협업하고 전 lottiefiles.com Lottie란 간단하게 말해서 JSON 기반의 애니메이션 파일이다. 공식 홈페이지에서 친절하게 알려주고 있기에 Lottie에 대해 궁금하다면 위의 링크를 접하길 추천한다. 예전에도 Lottie에 대해 몇 번 접하고 들어보았다. 보통 Adobe의 AfterEffect를 사용하여 만드는 방법을 접하였다. 나도 Lottie에 대해 흥미가 있었고 만들어 보고 싶었지만 딱히 무엇을 만들지 생각이 안 나서 그냥 지나치고 말..
-
[JavaScript] 커링이란?JavaScript 2023. 9. 20. 00:12
커링이란? 커링이라는 단어를 처음보고 찾아보게 되었다. 만약에 function(a,b)와 같이 두 개의 매개 변수를 받는다고 가정하자. 이 함수는 매개 변수를 한 번에 받아 한 번만 호출하도록 구현됐음을 알 수 있다. 하지만 커링은 function(a)(b)처럼 인수를 하나씩 받는 방법을 의미한다. function hello(name){ return function(age){ return function(job){ return `이름: ${name}, 나이: ${age}, 직업: ${job}` } } } hello('아이유')(30)('가수') // 이름: 아이유, 나이: 30, 직업: 가수 다음과 같이 사용할 수 있다. 커링된 함수는 첫 번째 인수를 받아서 그에 따른 함수를 반환하고, 그 반환된 함수에..
-
[CSS] 가변 폰트(Variable fonts)란?CSS 2023. 8. 14. 23:52
가변 폰트(Variable Font)은 한 개의 폰트 파일 안에 여러 개의 스타일을 담을 수 있는 기술이다. 일반적으로, 폰트은 여러 개의 별도 파일로 제공되며, 각각의 파일은 다른 스타일를 담고 있다. 예를 들어, 'Regular', 'Medium ', 'Bold'과 같은 여러 형태의 폰트은 각각 별도의 파일로 제공되었고, 이는 애플리케이션을 개발할 때 여러 폰트 파일을 관리하고 불러와야 하는 번거로움을 가져왔다. 가변 폰트은 이런 문제를 해결하고자 만들어진 개념이다. 원하는 두께나 스타일을 프로그래밍적으로 선택할 수 있다. 이를 통해 여러 폰트 파일 관리의 번거로움이 줄어들고 데이터의 크기와 다운로드 시간을 줄일 수 있다. Get started by importing the font you would..
-
[JavaScript] Array.fill() 사용 시 주의할 점JavaScript 2023. 8. 13. 00:44
[ [0,0,0,0], [0,0,0,0], [0,0,0,0], [0,0,0,0] ] 위와 같은 다차원 배열을 만들어야 할 때가 있었다. const board = Array.from({length: 4}).fill(Array.from({length: 4}).fill(0)) 배열을 만드는 방법은 여러가지가 있었지만 나는 위와 같이 작성했었다. 원래 Array.from()의 두번째 인자에 매핑함수를 작성했어야 했는데 작성 시에 실수로 뒤에 fill() 메서드를 붙여 작성했던 것 같다 아무튼 배열 board는 위와 같은 배열과 똑같이 만들어졌다. 이때 어느 한 요소를 변경하고 싶었다. board[0][0] = 1 // 예상 결과 [ [1,0,0,0], [0,0,0,0], [0,0,0,0], [0,0,0,0] ]..
-
캐노니컬 태그란?HTML 2023. 8. 7. 23:05
URL 표준화 및 표준 태그 | Google 검색 센터 | 문서 | Google for Developers 사이트에 중복 콘텐츠가 있는 경우 Google은 표준 URL을 선택합니다. 표준 URL 및 중복 URL 통합 방법을 자세히 알아보세요. developers.google.com 캐노니컬(Canonical)은 웹 개발에서 중복되는 컨텐츠나 페이지를 표준화하고 정규화하는 방법을 말한다. 주로 검색 엔진 최적화(SEO)의 관점에서 중요한 개념으로 사용된다. 캐노니컬 태그는 하나의 웹 페이지가 여러 개의 URL로 접근되거나 중복되는 경우 (여러 기기를 지원하는 경우, 서버가 www가 있는 버전과 없는 버전, http/https 버전 등등), 검색 엔진은 어떤 페이지를 검색 결과로 표시할지 혼란스러울 수 있다..
-
[CSS] color-scheme, prefers-color-scheme 속성CSS 2023. 7. 10. 23:39
color-scheme - CSS: Cascading Style Sheets | MDN The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in. developer.mozilla.org color-scheme이란 속성을 봐서 무엇인지 찾아보았다. 요즘 웹페이지에서 많이 다크 모드를 구현하듯이 속성의 값을 'light'이나 'dark' 등을 사용하게 되면 운영체제 시스템에서 모드에 맞게 UI를 조정하는 속성인 것 같다. See the Pen Untitled by DDD120 (@DDD120) on CodePen. 위의 CSS 코드를 보면 배경색 등 따로 스타일을..