개발쬬

회사에서 좋은기회가 생겨 vue로 카카오맵 api 를 사용하게 되었다. 지도는 프론트엔드에게 꽃이나 다름없다고 하셨는데 ㅋㅋㅋ 맞는말인지 모르겠지만 어쨌든 1년차도 안된 내게는 좋은기회라고 생각했다 카카오 주소 https://apis.map.kakao.com/ https://apis.map.kakao.com/web/sample/ 밑에 주소는 샘플링 주소이다. 개발을 하면서 정말 많이 들어갔던.. 물론 문서도 중요하지만 샘플링을 통해 어떤식으로 구현되는지 한번 확인을 거친 뒤 문서를 읽으면 확실히 금방 습득이 가능했다. vue에 카카오맵 설치 및 확인 여러 시도를 거쳐봤는데 key값이 노출되지 않은 채로 전역으로 설치해주는것은 불가능해 보였다. (만약 찾으신분이 있다면 알려주시길..👀 ) 그래서 지도를 사..

Vue : 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 p..

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