본문 바로가기

전체 글75

[Google Search Console] 색인생성 자동화 만들기 /구글서치콘솔 / Python google search console 도입 이번에 google search console 을 티스토리 블로그에 도입하면서 정말 많이 고생했다.. 2주 전 신청했던 ads sens 는 승인이 나지도 않고,,, 구글 색인은 100개가 넘도록 색인이 생성되지 않는 문제가 발생했다. 원인을 열심히 검색해보았지만 URL 검사 후 색인 생성을 해야한다는 글을 보게되고 시도해봤는데 URL 검사는 대략 1-2분 색인생성 요청은 생성갯수 제한이 있었다. 하다보면서 너무 열받아서 그만 둘까? 생각도 해봤는데, 이렇게 불필요하게 수동으로 하는것도 열받고.. 크롤링 대기열에만 올려놓고 주구장창 기다리면서 매일 확인해야하니 짜증이 슬슬 올라왔다. 그래서 열심히 검색해서 자동화 코드를 찾아냈다. 물론 아래 코드는 기존에 있던 .. 2023. 7. 12.
[Mantine] client.js:1 Warning: Each child in a list should have a unique "key" prop Mantine 요즘 자주쓰는 프레임워크 Mantine 을 사용하는 중이다. 해당 프레임워크를 사용하다가 테이블 요소에 기능적인 부분들을 추가해 줄 패키지를 찾았는데 그게 바로 mantine datatable 이였다. 해당 소스는 mantine 기반으로 sort 및 toggle 형식의 여러가지 테이블 기능들을 제공해줘서 아주 유익하게 사용하고 있는 라이브러리 중 하나인데, 작업을 하던 중 이런 에러에 부딧히게 되었다. Mantine DataTable A fully-featured data-table/data-grid React component for building data-rich applications with Mantine UI icflorescu.github.io Mantine You've sub.. 2023. 7. 12.
[BlockChain] 블록체인 개념/구조 쉽게 이해하기, 블록체인 코드 작성 블록체인 이란? 블록체인은 네트워크를 통해 관리되는 분산 데이터베이스의 한 형태로 , 중앙서버에 집중된 상태가 아닌 탈 중앙화 상태에서 노드간의 공동 기록 및 관리하여 다양한 분야에 활용이 가능한 기술입니다. 블록체인의 형태는 초기 블록을 기준으로 각각 체인으로 연결된 형태입니다. 하나의 블럭에 헤더,바디로 존재하며 각각의 블럭은 고유의 해시값과 이전 블록의 해시값을 가지고 있습니다. 해시(Hash)는 점 하나 찍어도 완전히 다른 코드로 변하는 성질을 가지고 있으며 이런 Hash 의 특징을 이용해 이전 블럭과 현재 블럭의 상태를 블럭끼리 서로 공유할 수 있는 형태입니다. [블록체인의 구조 - 헤더] version - 소프트웨어 버전 previousHash - 앞에 위치한 블록의 해시 merkleHash .. 2023. 7. 1.
[React] next-i18next error / i18next Text content did not match. Server: "introMessage" Client: next-i18next 에러 해결 설치 패키지 next-i18next Next.js는 국제화된 라우팅을 직접 제공하지만 번역 콘텐츠 관리나 실제 번역 기능 자체는 처리하지 않습니다. Next.js가 하는 모든 일은 로케일과 URL을 동기화 상태로 유지하는 것입니다. 한마디로 next-i18next 는 다국어를 지원해주는 라이브러리 이다. next-i18next The easiest way to translate your NextJs apps.. Latest version: 14.0.0, last published: 13 days ago. Start using next-i18next in your project by running `npm i next-i18next`. There are 124 other .. 2023. 6. 28.
[CSS] before after 선택자에 동적 content 적용하기 환경세팅 React + Next + TypeScript 최근 단일 페이지를 퍼블리싱 하면서 데이터로 뿌려주는 리스트형 요소들의 before 선택자 내부 content 를 동적으로 바꾸는 작업을 처리했다. 사실 이것저것 찾아보기 전까지는 단순히 js 코드 내에서만 해결하려고 했는데, css 내부에 attr 변수를 통해서 동적으로 처리해주는것이 가능했다. 동적 content CSS적용 코드 index.tsx /** 리스트 아이템 **/ 시멘틱태그 내부에 data-content 를 선언하고 내부 요소들을 태그 데이터로 넘겨준다. 이와 다양한 코드들오 넘겨주는것이 가능하다. index.css .wrap::after { position: absolute; width: 15px; height: 15px; left:.. 2023. 6. 28.
[CSS] 미디어쿼리 범위 지정해서 사용하기 media Query Range Syntax 미디어쿼리 범위 지정해서 사용하기 참고 사이트 https://css-tricks.com/the-new-css-media-query-range-syntax/ 1. media Query Range 최근에 단톡방에서 범위지정 css가 존재한다는 소식을 듣고 알아보았다. 기존에는 css 를 선택할때 불편하게 코드를 작성하곤 해서 범위지정이 되는게 있으면 좋겠다는 생각을 했었는데, 이렇게 나와있었다니 전혀 몰랐다. 아직 적용해보진 못했지만 퍼블할 일이 많으니 작업하면서 꾸준히 써보려고 한다. @media (min-width: 400px) and (max-width: 1000px) { /* code */ } 이렇게 적용했던 불편했던 코드들이 @media (400px 2023. 6. 28.
눈이 즐거운 UI Design 오픈소스 라이브러리 추천 1. Ant Design 깔끔하고 단정한 느낌의 UI Design 프레임워크 워낙 유명해서 대부분의 개발자분들은 알 거라 생각합니다. 최근 1년동안 굉장이 애정했던 디자인 오픈소스로 업데이트도 빠르고, 호환성에서도 우수해서 사용하기 좋습니다. 다만 빌드 시, 너무 무거운게 단점(대부분의 프레임워크가 그렇듯..) vue2는 버전2를 끝으로 지원이 끝났다는것이 단점...(혹시 되나요?) Ant Design - The world's second most popular React UI framework An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best R.. 2023. 6. 24.
Uncaught SyntaxError: Unexpected token '<' 해결하기 Uncaught SyntaxError: Unexpected token ' 2023. 6. 24.
요즘 인기있는 npm 패키지/라이브러리를 비교할 수 있는 사이트, npm trends npm trends: Compare NPM package downloads Which NPM package should you use? Compare packages download stats, bundle sizes, github stars and more. Spot trends, pick the winner. npmtrends.com 개발자의 길로 접어들면서 사수에게 가장 많이 들었던 말이, 트렌드를 알아야된다는 말이였다. 개발의 세계는 무궁무진하고 업데이트속도가 빨라서 고작 1년만 지났음에도 불구하고 신기한 라이브러리,,AI 등등 신기술들이 등장하게 된다. 그 몇년의 세월을 견디고도 살아남은 라이브러리나 프레임워크도 많지만, 결국 JQuery 가 옛날 언어가 되어버린 것처럼..(최근 부트캠프 학생들.. 2023. 6. 24.
[Vue Error] npm run serve 오류 vue-cli-service: command not found git clone 을 실행하고 npm run serve 를 실행했는데 해당 오류가 발생했다. sh: vue-cli-service: command not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! chart@0.1.0 serve: `vue-cli-service serve` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the chart@0.1.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging out.. 2023. 6. 24.
[Git] gitignore 활용하여 추적되지 않는 파일들 관리하기 보통 build를 하게되면 버전관리를 하지 않아도 되는 파일들이 생성된다. 예를들어 env 파일이나 cache, node_modules 등의 폴더들은 git에 올리지 않고 로컬에서 관리해주는 경우가 대부분이다. 이런 경우 git push 하기 전에 일일히 파일을 골라내서 push하기 번거롭기 때문에 추적 자체를 제외시킬 수 있도록 git ignore 를 활용할 수 있다. vscode 에서 자체적으로 ignore 파일에 들어있는 폴더들은 추적을 하지 않으니 꽤 유용하게 쓰는 기능 중 하나이다 :-) 1. 파일 만들기 😈 파일 내용 (추적을 원하지 않는 파일들을 선택해서 골라줄 수 있다.) 예를 들어 .cache/ dist/ node_modules/ 이렇게 적으면 위에 파일들은 추적되지 않는다 .DS_Sto.. 2023. 6. 24.
[Git] git user name / email / password 기본정보 세팅하기 git 을 사용하다보면 password 가 만료되거나, github gitlab 의 정책이 바뀌면서 token을 기간제로 다시 입력해줘야하는 경우가 종종 일어난다. 그런경우 password 대신 token을 입력하고 세팅하면 되는데, 이런 경우와 컴퓨터를 초기화 시킨 경우 등등 git 세팅을 바꿔줘야하는 경우가 아주 많다. 이럴 때, 터미널을 키고 `git config --list` 를 치면 입력된 사용자 정보를 확인할 수 있다. joeun@joeuns-MacBook-Air ~ % git config --list credential.helper=osxkeychain init.defaultbranch=main user.name=[아이디/이름] user.email=[이메일] 이렇게 쳤는데, user.name.. 2023. 6. 24.
반응형

티스토리툴바