개발쬬

1. 버전오류 발견 전에 없던 오류인데 갑자기 떠서 검색해보니 구선생님도 모른다는 소식에 좌절하고 있었다 ㅠㅠ 심지어 설치파일에는 next 에 당연히 들어있어야하는 pages폴더도 없고.. 아무것도 존재하지 않은 상태..! 분명 버전문제같아 찾아봤는데 도무지 모르겠어서 이것저것 검색하던 중 해결점을 찾았다! Installing devDependencies: - eslint - eslint-config-next yarn add v1.22.18 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... error @eslint/eslintrc@1.2.2: The engine "node" is incompatible with this module. Expected..

1. Echart 사용기 구글링을 하면서 정말정말 안나오는게 바로 이 차트에 관련된 설명이였는데, 실제로 사용자 화면에선 많이 보여주지 않지만 관리자 화면에선 무조건 들어가야하는 요소이기때문에 초반에 너무너무 고생했던게 기억이 난다. 사실 amChart 나 echart , chartjs 등등 너무 좋은 라이브러리가 있지만, 기본적이 스타일의 차이나 핸들링에 대한 차이가 있었다. 코드 길이로 보면 amChart가 가장 길고 복잡하고 까다롭지만 개인적으론 개발하는 입장에서 특정 이벤트를 주기에 가장 용이했다. echart 경우에는 개별적 범례 이벤트같은 복잡한 설정은 불가능했다(이거때문에 한 2주는 고생한듯) 그럼에도 불구하고 차트가 매우 예쁘기 때문에 특별한 기능이 있지 않는 경우에는 매우매우 애용하는 차..

이번에 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..

이번에 리액트 / 트레이딩뷰를 활용해서 차트 그리기를 시도해봤다. 사실 트레이딩뷰 세팅까지는 원리만 익히면 예제 코드도 많아서 그리는작업는 수월했는데, 차트에 그려진 값들을 로컬에 저장하려고 하니, 문서를 제대로 읽기 힘들어서 계속 실패를 거듭했다. ㅠ_ㅠ onChartReady 안에서 활용하기 우선 트레이딩뷰는 추가 옵션을 입력할때 기본적으로 onChartReady 안에 넣어주어야 정상작동한다. 그래야 차트가 준비가 된 상태에서 다른 정보들을 세팅해줄 수 있다. widget.onChartReady(() => {}) drawing_event 그리고 구독 이벤트(subscribe) 를 활용해서 drawing_event 를 감지해준다. 해당 이벤트를 구독하기 시작하면, 커서가 이벤트를 발생했을때마다 save..

trading view 는 가상거래소에서 자주 사용하는 차트이다. 이번에 좋은 기회가 있어서 해당 차트를 사용하게 되었는데, 생각보다 소스가 이리저리 흩어져있어서 한번에 모아서 보고싶어서 정리해보려고 한다. 트레이딩뷰 활용하기 예제 아래 github 에는 각각의 환경에서 설정한 트레이딩뷰의 세팅환경 예시를 볼 수 있다. nextjs, angular, android 등등 각각의 개발 환경에서 세팅된 페이지를 볼 수 있고, 주기적인 업데이트가 이루어지기 때문에 틈틈히 확인하면서 개발하면 매우 도움이 된다. github 에 올려진 그대로 참고해서 만들어도 된다. GitHub - tradingview/charting-library-examples: Examples of Charting Library integr..

Websoket Websoket 이란? WebSocket은 WS 수신을 기반으로 클라이언트와 서버 사이에 지속적으로 완전 양방향 연결 스트림을 생성하는 기술입니다. 일반적으로 채팅 기능이나 서버의 수신을 기다려야 하는 어플 및 웹사이트에서 사용하는 기술입니다. Websoket 호출 exampleSocket.onopen 을 우선적으로 선언해주는 이유는 연결이 시작 된 이후 send() 를 호출해주어야 하기 때문이다. 웹소켓 사용시 소켓의 binaryType 이 다른 경우가 있다. 이럴때는 선언후, 선언 변수에 binaryType 을 변경해서 진행하면 된다. // 웹소켓 선언 var exampleSocket = new WebSocket("소켓 url"); // 웹소켓 호출 exampleSocket.onope..

google search console 도입 이번에 google search console 을 티스토리 블로그에 도입하면서 정말 많이 고생했다.. 2주 전 신청했던 ads sens 는 승인이 나지도 않고,,, 구글 색인은 100개가 넘도록 색인이 생성되지 않는 문제가 발생했다. 원인을 열심히 검색해보았지만 URL 검사 후 색인 생성을 해야한다는 글을 보게되고 시도해봤는데 URL 검사는 대략 1-2분 색인생성 요청은 생성갯수 제한이 있었다. 하다보면서 너무 열받아서 그만 둘까? 생각도 해봤는데, 이렇게 불필요하게 수동으로 하는것도 열받고.. 크롤링 대기열에만 올려놓고 주구장창 기다리면서 매일 확인해야하니 짜증이 슬슬 올라왔다. 그래서 열심히 검색해서 자동화 코드를 찾아냈다. 물론 아래 코드는 기존에 있던 ..

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..