전체 글14 구글 검색에 네이버 블로그를 노출시키는 스팟 구글 검색 결과에 네이버 블로그가 잘 노출되게 하려면 몇 가지 방법이 필요해요. 기본적으로 네이버 블로그는 구글에서 잘 인식되지 않지만, 사이트맵을 만들어서 구글 크롤러가 접근할 수 있도록 해주면 노출 확률이 높아질 수 있습니다. [네이버 블로그 구글 검색 최적화를 위한 사이트맵]를 참고해서 블로그 글이 구글에 잘 보이도록 설정해보세요! 😎구글 블로그 운영을 고려 중이신가요?😎저도 블로그를 운영하면서 느낀 점인데, 블로그는 관련자료나 팁을 찾기 위해 여기저기 정보를 모아야하고 새로운 트렌드나 효과적인 운영 방법도 스스로 연구해야 하는 경우가 많답니다. 그만큼 자주 업데이트해주고 검색엔진 최적화(SEO) 작업에도 신경 써야 해요. 그래도 제가 얻은 경험과 꿀팁을 여러분과 공유해 볼까 해요! 네이버 블로.. 2024. 11. 27. React에서 Webpack 사용하기(Typescript) Webpack을 이해하기 전에웹 페이지를 구성하는 Module(HTML, CSS, JavaScript, 이미지 등)을 결합하여 병합된 하나의 결과물을 생성하는 라이브러리를 Module Bundler라고 합니다. 그러한 라이브러리가 바로 Webpack입니다. 그러니 Webpack을 이해하기 전에 Module Bundler에 대해 먼저 알아야합니다. 근데 모듈 번들러가 왜 필요한 거지?여러개로 나누어져 있는 파일들을 하나의 파일로 만들어주는 모듈 번들러가 왜 필요한지에 대해 알아보겠습니다. 예전 우리 조상님들이 코딩하실 때는🚬 예전에는 Module Bundler의 개념이 없었다고 합니다. 웹페이지는 사용자에게 페이지를 표시하기 위해 다수의 자바스크립트 파일을 서버에 요청합니다. 이로 인해 서버와의 여러 .. 2024. 5. 3. Prettier로 코드 포맷 통일시키기 Prettier를 사용하는 이유혼자 진행하는 프로젝트에서는 코드 포맷이 큰 문제가 되지 않을 수 있습니다. 그러나 여러 명의 개발자가 함께 협업하여 서비스를 개발할 때, 각자가 사용하는 코드 포맷이 서로 다를 수 있습니다. 이로 인해 코드의 가독성이 떨어지고 예상치 못한 버그가 발생할 수 있습니다. 그렇다..🙄 결국 동일한 코드 포맷을 유지해야 협업 시, 좋은 가독성을 줄 수 있고 버그 방지에 탁월하단 것이다! 그러니 바로 실습을 해보도록 합시다! 미루면 더 하기 싫어져 ..ㅠㅠ Prettier Settingnpm install -D prettier 또는yarn add -D prettier 설치를 완료하면 package.json에 prettier가 설치되었는지 확인하시면됩니다! 프로젝트 폴더에 pre.. 2024. 4. 28. NextJS에서 mouse hover시 특정 텍스트 변경 마우스 호버 시 특정 텍스트 보여주기Next.js 환경에서 했던 것이니 Next 태그를 넣긴 했지만 이 녀석은 거진 React..회사 프로젝트를 진행하다가 어려웠던 부분이 있었는데 그거를 집에서 혼자 해보고 싶었습니다.. 주절주절..😑우선 화면에 보이지 않으면 내가 답답하기 때문에 퍼블리싱부터 빠르게 해주었습니다.export default function Hover() { return ( 1번을 호버 시 나타나는 텍스트입니다. 1번 호버 2번 호버 3번 호버 4번 호버 );} 저는 Next.js 환경에서 Tailwind CSS와 TypeScript를 사용하고 있습니다.매우 간단한 퍼블리싱을 마치고 이후에는.. 2024. 4. 27. Github Pages로 정적파일 자동 배포하기 Github Pages란?gh-pages는 Node.js 환경에서 사용되는 npm 패키지입니다. 로컬에서 사이트를 빌드하고, 빌드된 정적 파일을 Github Pages에 쉽게 배포가 가능해집니다.gh-pages는 빌드된 정적 사이트를 자동으로 gh-pages 브랜치에 푸시하게 해줍니다. 이 브랜치는 Github Pages에서 웹사이트를 호스팅하는 데 사용됩니다. 👍👍 gh-pages Installnpm install gh-pages --dev 또는yarn add gh-pages --dev package.jsonpackage.json 파일의 script에 밑의 내용을 추가해줍니다. "predeploy" : "npm run build","deploy" : "gh-pages -d build" "pred.. 2024. 4. 26. NextJS에서 AOS 라이브러리 사용하기 AOS Library Install터미널에서 AOS를 설치해줍니다.npm install --save aos@next 또는yarn add aos@next 정상적으로 설치가 완료된 것을 확인하기 위해 setting.json 파일에서 "aos": "^3.0.0-beta.6"를 확인합니다.Next 환경으로 돌아와 다음과 같이 AOS를 import 해줍니다.import AOS from 'aos';import 'aos/dist/aos.css';export default function TEST() { AOS.init(); return ( TEST );} AOS Option더 자세한 내용은 AOS Github에서 확인하실 수 있습니다.AOS Github, AOS Site 👍너무나 쉽게 .. 2024. 4. 25. NextJS에서 카카오지도 넣기 Kakao map API Install터미널에서 지도 SDK를 설치해줍니다.npm install react-kakao-maps-sdk 또는yarn add react-kakao-maps-sdk 정상적으로 설치가 완료된 것을 확인하기 위해 setting.json 파일에서 `react-kakao-maps-sdk`를 확인합니다.Kakao developers 등록하기 kakao developers에서 시작하기를 누르고 로그인을 완료해줍니다. 애플리케이션을 추가해줍니다. 애플리케이션을 추가하고 해당하는 앱 키가 있는데 저는 JavaScript 키를 사용했습니다. 상단 네비게이션 바의 문서를 클릭하고 밑으로 내려 지도로 이동해줍니다. 이후 들어간 화면에서 지도 SDK 웹 .. 2024. 4. 23. NextJS에서 Swiper 사용하기 Swiper란?Swiper는 자바스크립트로 제작되어 터치, 마우스 드래그, 키보드 등 다양한 입력 방식을 지원하며 반응형 웹에 적합합니다. 이 라이브러리는 다양한 애니메이션 효과, 루프, 자동 재생 등의 기능을 제공하고 있습니다. Swiper Install터미널에서 swiper를 설치해줍니다.npm install swiper 또는yarn add swiperModule Import1. Swiper, SwiperSlide를 import 해줍니다.import { Swiper, SwiperSlide } from 'swiper/react'; 2. 사용할 모듈과 SwiperCore를 import 해줍니다.import { Navigation, Scrollbar, Autoplay } fro.. 2024. 4. 22. Gitub SSH 연결하기 SSH란? SSH(Secure Shell)는 GitHub Repositories에 데이터를 전송할 때 보안 통신을 위해 사용되는 프로토콜입니다. SSH는 데이터 전송 중에 암호화를 사용하여 보안을 유지할 수 있다는 장점이 있습니다. SSH KEY 생성 ssh-keygen -t rsa -b 4096 -C "your_email@example.com" bash에 위의 명령어를 입력하여 로컬 PC에 SSH KEY를 생성합니다. Enter file in which to save the key (C:\Users\유저 이름/.ssh/id_rsa): 경로 지정(설정 안 해도 기본값으로 경로가 지정됩니다.) Enter passphrase (empty for no passphrase): 비밀번호 입력(설정 안 해도 무관합.. 2024. 4. 21. 이전 1 2 다음
