본문 바로가기

분류 전체보기76

[Vue] Echart 쉽게 사용하기 1. Echart 사용기 구글링을 하면서 정말정말 안나오는게 바로 이 차트에 관련된 설명이였는데, 실제로 사용자 화면에선 많이 보여주지 않지만 관리자 화면에선 무조건 들어가야하는 요소이기때문에 초반에 너무너무 고생했던게 기억이 난다. 사실 amChart 나 echart , chartjs 등등 너무 좋은 라이브러리가 있지만, 기본적이 스타일의 차이나 핸들링에 대한 차이가 있었다. 코드 길이로 보면 amChart가 가장 길고 복잡하고 까다롭지만 개인적으론 개발하는 입장에서 특정 이벤트를 주기에 가장 용이했다. echart 경우에는 개별적 범례 이벤트같은 복잡한 설정은 불가능했다(이거때문에 한 2주는 고생한듯) 그럼에도 불구하고 차트가 매우 예쁘기 때문에 특별한 기능이 있지 않는 경우에는 매우매우 애용하는 차.. 2023. 7. 31.
비밀번호 유효성 테스트 로직 짜기 / 영문포함 / 숫자포함 / 특수문자 / 길이제한 이번에 hook을 하나 생성해서 비밀번호 테스트를 쉽게 해볼까 한다 내가 정한 비밀번호는 유효성은 이렇게 정했다. 영문포함 숫자포함 특수문자포함 길이 8자 이상 30자 이하 각각의 디자인이 정해져있고, 하나씩 통과할때마다 해당 디자인에 색상이 변경된다. (체크모양이 바뀐다던지?) 이전에는 좀 더 복잡한 방식으로 작성했었는데, 하다보니 편한로직을 짜게되서 적어놓으려고 한다. (더 편한 코드가 잇다면 공유해주세요!) src/utils/passwordCheck export function passwordCheck(value: string) { let obj = { eng: false, number: false, special: false, length: false, }; const engCk = value.m.. 2023. 7. 26.
[tradingView] 차트 그리기 도구 로컬에 저장해서 불러오기 / save() / load() 이번에 리액트 / 트레이딩뷰를 활용해서 차트 그리기를 시도해봤다. 사실 트레이딩뷰 세팅까지는 원리만 익히면 예제 코드도 많아서 그리는작업는 수월했는데, 차트에 그려진 값들을 로컬에 저장하려고 하니, 문서를 제대로 읽기 힘들어서 계속 실패를 거듭했다. ㅠ_ㅠ onChartReady 안에서 활용하기 우선 트레이딩뷰는 추가 옵션을 입력할때 기본적으로 onChartReady 안에 넣어주어야 정상작동한다. 그래야 차트가 준비가 된 상태에서 다른 정보들을 세팅해줄 수 있다. widget.onChartReady(() => {}) drawing_event 그리고 구독 이벤트(subscribe) 를 활용해서 drawing_event 를 감지해준다. 해당 이벤트를 구독하기 시작하면, 커서가 이벤트를 발생했을때마다 save.. 2023. 7. 24.
[chart] trading view 차트 활용하기 / 예제 / next / 권한 trading view 는 가상거래소에서 자주 사용하는 차트이다. 이번에 좋은 기회가 있어서 해당 차트를 사용하게 되었는데, 생각보다 소스가 이리저리 흩어져있어서 한번에 모아서 보고싶어서 정리해보려고 한다. 트레이딩뷰 활용하기 예제 아래 github 에는 각각의 환경에서 설정한 트레이딩뷰의 세팅환경 예시를 볼 수 있다. nextjs, angular, android 등등 각각의 개발 환경에서 세팅된 페이지를 볼 수 있고, 주기적인 업데이트가 이루어지기 때문에 틈틈히 확인하면서 개발하면 매우 도움이 된다. github 에 올려진 그대로 참고해서 만들어도 된다. GitHub - tradingview/charting-library-examples: Examples of Charting Library integr.. 2023. 7. 19.
[websoket] 웹소켓 사용해 데이터 호출하기 / 웹소켓 데이터보기 Websoket Websoket 이란? WebSocket은 WS 수신을 기반으로 클라이언트와 서버 사이에 지속적으로 완전 양방향 연결 스트림을 생성하는 기술입니다. 일반적으로 채팅 기능이나 서버의 수신을 기다려야 하는 어플 및 웹사이트에서 사용하는 기술입니다. Websoket 호출 exampleSocket.onopen 을 우선적으로 선언해주는 이유는 연결이 시작 된 이후 send() 를 호출해주어야 하기 때문이다. 웹소켓 사용시 소켓의 binaryType 이 다른 경우가 있다. 이럴때는 선언후, 선언 변수에 binaryType 을 변경해서 진행하면 된다. // 웹소켓 선언 var exampleSocket = new WebSocket("소켓 url"); // 웹소켓 호출 exampleSocket.onope.. 2023. 7. 16.
[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.
반응형

티스토리툴바