반응형

프론트엔드 8

리액트에 swiper 쓰는 예제 (dom 버전 오류해결법) (React swiper)

| 설치 및 기본 사용 예https://swiperjs.com/react#use-swiper-slide Swiper - The Most Modern Mobile Touch SliderSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com 1. React와 React-DOM 패키지를 아래 버전으로 설치 npm install react@18 react-dom@18 ※ 만약, 이전 버전이 낮거나 높아서 사용이 안된다면, 아래 코드로 삭제후 위 코드로 다시 설치npm uninstall react react-dom  2. Swiper 설치..

Codepen을 티스토리나 블로그에 가져오기

1. 코드펜 오른쪽 하단의 Embed를 클릭   2. 원하는 설정후 HTML 탭에서 copycode  3. 글쓰기 바의 가장 오른쪽, 블로그 글쓰기 모드를 HTML 으로 변경 후 삽입   4. 글쓰기 모드를 다시 기본모드로 바꾼 후 완료!(글쓸때 보면 아래 사진과 같이 해당 계정에 들어가서 보라고 나오지만, 실제로 글쓰기 '완료'로 퍼블리싱 된걸보면 제대로 동작한다)   See the Pen Untitled by galaxy_star (@fold6) on CodePen.

🛠️ Dev. 2024.12.22

VS Code 필수 확장 프로그램! Prettier 설정하고 단축키 바꾸기(js,css,html등 자동정렬 확장프로그램)

원래의 Prettier 단축키는 ctrl + alt + p? 인가 그런데자신이 쓰고싶은 걸로 바꾸려면 아래처럼 하면 된다! 1. Prettier 다운 및  설치2. 설정(ctrl+,) 에서  default formatter 검색하여 Prettier 로 설정3. 키보드 설정 (바로가기) ctrl+k ctrl+s 에서 Format Document 검색하여키 바인딩 : Ctrl + Shift+  B 변경(나는 위 바인딩이 편해서 이렇게 씀)  이렇게 prettier 설정에서 (확장 프로그램 목록의 톱니바퀴 아이콘 클릭)TAB 가로 폭도 바꿀수있다! (기본이 2이라서 나는 4로 변경)

🛠️ Dev. 2024.12.20

[Jquery] 제이쿼리 CDN 동작 안 될때 / 제이쿼리 CDN JavaScript 파일 안에 넣기

나 같은경우 이제껏 제이쿼리를 사용할때 html 파일안에  아래와 같이 CND을 불러왔었는데, 그래서 아래 제이쿼리 CDN이 제이쿼리를 사용하고 있는 .js 파일보다 밑에 있을때동작이 안돼서 해매는 경우가 있었당 위의 서순으로 구성해야 동작됨    제이쿼리를 사용하는 js코드 위에, CDN을 넣으면 동작이 되는데,위 Jquery CDN을 불러오는 형태로는 .js 파일안에 넣는게 불가능하기 때문에다른 형식으로 .js에 넣는 방법은 다음과 같당 // Load jQuery$.getScript("https://code.jquery.com/jquery-3.6.0.min.js", function () { console.log("jQuery..

VS code 꿀팁 : 폴더 안 코드에 들어있는 문자 찾는 단축키

🔰단축키 :Ctrl + shift + F 이런식으로 특정문자를 검색해 찾을 수 있당  ... 을 누르면 '포함할 파일' 이라고, 확장자 명 또한 입력해서 찾을 수 있다!     전에 퍼블리셔 친구가 백엔드가 작업한php 파일 안에있는 변수를 찾아야 했는데,파일 하나 하나 다 펼치기에는 너무 시간이 걸려서...찾았던 방법ㅎㅎ '단어는 기억나는데, 어디 있더라..?'싶을때 정말 유용한 기능ㅎㅎ

🛠️ Dev. 2024.07.05

1-3. 깃허브 데스크탑 기본 사용법 + 자바 파일 배포 + 마크다운방법

🔵 깃허브 데스크탑 설치https://desktop.github.com/?ref_cta=download+desktop&ref_loc=installing+github+desktop&ref_page=docs Redirecting… desktop.github.com    1. 깃허브 데스크탑을 설치-로그인을 해야 내 깃허브 사이트에 올라감 2. Repository 를 생성-레포를 깃헙데탑내에서 만들면서 ⚠️이때 readme를 체크해서 만듬 (아니면 바깥폴더에 리드미가 또 생김) ⚠️ (README 파일에 기록을 할 예정) 3. 해당경로로 VScode열기깃헙데탑에서 만든 로컬 폴더의 경로를 통해 파일탐색기를 열고, alt+d 를 눌러 경로를 전체 선택한 후 cmd입력 ->code . 을 입력 후 엔터쳐서 해당..

📌 Fav 2024.06.30

Vs code live server 자동 새로고침 안될때 해결방법 + 라이브 서버 자동 저장방법

라이브 서버에서 자동 새로고침이 안되는 경우 해결방법은 4가지가 있습니다. 1. 혹시 라이브 서버를 실행하고자 하는 파일 제목 첫번째 글자가 .인 경우 .을 없애자! -ex) .samsungweb.html 같은 제목일때 .을 없애어 samsungweb.html으로 저장. 2. 혹시 라이브 서버를 실행하고자 하는 파일의 상위 폴더 제목에 #이 들어갔다면 #을 없애자! 3. "UTF-8"을 적지 않았다면 작성! (+ 로 제대로 적었는지 확인) 4. 설정- auto save를 검색해 사진과 같이 afterdelay로 변경! delay를 600 (0.6초)로 변경!

🛠️ Dev. 2024.01.04

VS code 코딩프로그램 배경화면테마 바꾸기 (테마적용)(+초보자용 .json 설정값)

1. 아래의 사이트 or 프로그램 내부에 background 를 검색하여 프로그램을 받습니다. marketplace.visualstudio.com/items?itemName=shalldie.background visual studio 내부의 마켓플레이스에서 검색할시 동방프로젝트 캐릭터, 마리사가 반겨주네요! (역시 동덕들;; 어마무시한 기술력...) 2. 설치 후 톱니바퀴 버튼을 눌러 확장설정에 진입합니다. 3. '기존이미지를 사용?' (동프덕후라면 사용할만도?) 체크박스를 사진과 같이 해제 해줍니다. 이후에 편집링크를 클릭하여 .json에 진입합니다. 4. 스크린샷에 나온것처럼 사진이 들어있는 위치를 잡아줍니다. ※ 파일명에 한글 들어가면 안됩니다. background position(사진을 어디에 띄..

🛠️ Dev. 2024.01.04
반응형