웹 개발36 썸네일형 리스트형 [CSS] icon 회전하기 / <i> 태그 회전하기 [Tailwind CSS] CSS에서 transform를 rotate를 이용해 회전했을 때, 아이콘이 회전하지 않는 경우가 있다. 결론만 말하면, 아래의 속성을 추가해준다. .rotate-45 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); display: inline-block; } 그리고 태그에 클래스를 추가해주면 아이콘이 45도 돌아간 것을 확인할 수 있다. 꼭 태그가 아니더라도, react icon, fontawesome, mui icon, remix icon 등의 (내부에서 태그로 렌더링 되는) 아이콘.. 웹 개발/소소한 팁, 버그 해결2024. 3. 20. [Typescript] TypeError: Webpack imported module is not a function 해결 서버 쪽에서 데이터를 가져오는 api와 연결하는 메서드를 작성하고 있었는데, 위 에러가 떴다. 똑같은 형태의 다른 파일은 해당 에러가 안 뜨는데 특정 함수 두 개에만 뜨는 게 이상했지만, 어쩌겠나 해결해야지. 아래와 같이 코드를 수정하여 해결했다. 해결 전: export function getUserInfo() { // Do something } export function getUserLocale() { // Do something } 해결 후: function getUserInfo() { // Do something } function getUserLocale() { // Do something } export {getUserInfo, getUserLocale} 다른 파일은 해결 전 코드가 정상적으로.. 웹 개발/소소한 팁, 버그 해결2024. 3. 20. [Next.js 14] 버튼 동시에 눌리는 현상 막기 [stopPropagation][Typescript] 웹을 디자인하다 보면 어떤 정보를 담고 있는 버튼 안에 삭제 버튼이 있는 것처럼 버튼과 버튼이 겹치는 것이 불가피할 때가 있다. 이때 눌러보면 두 버튼이 모두 작동하는데, 버튼을 눌렀을 때 하나만 동작하는 것이 일반적이니 이를 어떻게 할 수 있을지 알아보자. 핵심은 event의 stopPropagation()이다. 안에 있는 버튼에 아래와 같이 선언해주면 안쪽 버튼이 눌릴 때 바깥쪽 버튼이 안 눌리는 것을 확인할 수 있다. const onClick = (e: React.MouseEvent) => { e.stopPropagation(); // Do something } 아래는 이를 활용한 예시 코드이다. import "@/styles/components/card.css"; import React from .. 웹 개발/소소한 팁, 버그 해결2024. 3. 20. [Typescript] 제네릭(Generic) 메서드 작성 제네릭(Generic)은 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용되는데, 이를 활용하면 재사용성이 높은 컴포넌트를 만들 수 있다. 일반적으로 아래와 같이 작성하며, 함수 사용 시 같이 넘겨준 모든 타입 T에 대해 동작한다. function genericFunctionName(arg: T): T { // Do something return arg; } 코드를 작성하다보면 arrow function ("=>" 이용하는) 형태로 사용해야 할 때도 있는데, 그럴 땐 아래와 같이 작성한다. const genericArrowFunctionName = (x: T) => { // Do something retrun x; }; 조금 더 확장하면 아래와 같이 제네릭 타입(인터페이스)이랑 제네릭 클래스도 작성.. 웹 개발/소소한 팁, 버그 해결2024. 3. 20. [Next.js] 비교 연산자로 날짜 비교 안 될 때 [JavaScript] const d1 = new Date(2000, 2, 1);const d2 = new Date(2010, 4, 27);console.log(d1 > d2) // falseconsole.log(d1 기본적으로 위 식처럼 비교 연산자를 이용해 단순하게 Date를 비교할 수 있다.그런데 저 식이 모두 false를 반환할 때가 있는데, 그건 두 Date의 형태가 달라서 발생한다. 나는 DB에 저장된 유효 기간과 현재 시간을 비교해서 해당 요청이 유효한지를 판단하는 코드를 작성해야 했는데,이때 서버에서 받아 온 expiration 값(Date 형식)과 현재 시간을 반환하는 new Date()의 형태가 달라 앞서 언급한 문제가 발생하였다.나는 아래와 같이 받아 온 값을 형태를 맞춰 주어 해결했는데, 이 방법 말고도.. 웹 개발/소소한 팁, 버그 해결2024. 3. 15. [Next.js 14][next-video] 메인 화면에 배경 영상(background video) 넣기 개발하는 웹의 메인 화면에 배경 영상을 넣어야 해서 Next.js documentation을 뜯어봤다. 여기서 Mux-video-api를 소개하고 있길래, 이걸로 비디오 넣는게 보편적인 방법이겠거니 싶어 해보았다. Optimizing: Videos | Next.js Recommendations and best practices for optimizing videos in your Next.js application. nextjs.org 위 사진처럼 굉장히 깔끔했다. (코드는 아래에 있음) next-video 패키지 설치 Embed a video player in your Next.js applications | Mux Quickly add video to your Next.js site using the.. 웹 개발/Nextjs 142024. 3. 13. 이전 1 2 3 4 5 6 다음
