nextjs17 썸네일형 리스트형 [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. [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. [Next.js 14][Swiper] 스와이프 가능한 카드 리스트 만들기 (Carousel Slider) 포스팅을 너무 각 잡고 쓰려니까 오히려 안 쓰게 돼서, 아예 간단하게 작성하는 버그 해결 / 궁금한 점 해소 용 카테고리를 하나 팠다. 암튼 이 편한 카테고리의 첫 포스팅은 Swiper, 너로 정했다! 쓰고 보니 본 카테고리로 올려도 될 것 같아 격상시켰다. 렛츠고. 구현해야 하는 UI 사용자가 등록한 카드를 아래의 형태로 보여주고, 슬라이드 / 화살표 버튼을 이용하여 변경하는 UI를 작성하고자 한다. 이런 형태를 보통 Carousel Slider라고 하는데, 위의 키워드랑 Card list 등등의 키워드로 찾아본 라이브러리 중에서는 확장하기 편함 + 쓰기 쉬운 놈을 못 찾았다. React Swiper 처음부터 내 입맛대로 만드는 게 마음 편하긴 하지만, 내가 개발할 수 있는 시간은 한정되어 있어서 아래.. 웹 개발/Nextjs 142024. 3. 13. [Next.js 14] 프로젝트 폴더 구조 구성 및 git repository 연결 프로젝트 설치가 끝나면 아래와 같이 app, public 등등의 여러 폴더가 생성되었을 것이다.일단 '프로젝트 생성'이라는 큰 산을 하나 넘었으니 이제 개발을 시작하면 된다. 다만 일반적으로, 특히 협업을 진행하는 경우에는, github에 업로드하여 버전 관리를 진행하므로 본격적인 개발에 앞서 git repository를 연결하는 과정이 필요하다. 폴더 구조 구성그 전에 앞서 프로젝트 폴더 구조를 파악하고 시작하고자 한다. 아무런 가이드나 규칙 없이 그때그때 파일을 만들면 프로젝트의 구조도 복잡해지고, 필요한 파일을 빠르게 찾지 못해 개발의 효율성도 떨어지기 때문에, 나중에 폴더나 파일 구조가 좀 바뀌더라도 나는 먼저 틀을 잡고 가는 편이다.이제부터 내가 아래의 공식 문서와 나름대로 사용하면서 요래조래 .. 웹 개발/Nextjs 142024. 2. 22. [웹 개발] 리액트 개발환경 세팅 및 Next.js 프로젝트 생성[Next.js 14] 나는 맥북을 사용 중이라 MacOS 기준으로 작성하겠다. 윈도우에 개발환경을 세팅하는 방법도 크게 다르진 않음. 1. node.js 설치아래의 링크를 클릭한 후, 왼쪽의 LTS 버전을 눌러 다운로드 및 설치를 진행한다. Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org 2. terminal 실행하여 npm 설치 확인 및 next.js 설치npm 설치 확인 (node.js 설치 패키지 안에 함께 내포됨)npm -vnext.js 설치npm install -g create-next-app// 에러 발생 시 아래의 코드처럼 앞에 sudo를 붙여 재실행// sudo npm install -g create.. 웹 개발/Nextjs 142024. 2. 21. 이전 1 2 3 다음
