전체 글75 React Err : npm start 안되는 오류 해결 --openssl-legacy-provider React Err : npm start 안되는 오류 해결 --openssl-legacy-provider 문제 유데미 강의를 듣던 중 npm start가 제대로 실행되지 않는 현상이 발생했다. thow err 라는 문구와 함께 밑에 경고메세지들이 출력되었음. 간단히 보니 node 버전 업데이트 사항과 직결된 문제였다. (이래서 안전한 버전을 사용하는 것이 좋다) Starting the development server... Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at module.e.. 2023. 8. 3. React : ant Design {Row, Col} 활용하기 React : ant Design {Row, Col} 활용하기 Row, Col 을 사용해 import { Row, Col } from 'antd'; Row 로 한 행을 만들고 Col , span을 사용해 한 줄을 균등배분하는것이 가능하다 일반 분배 Row항목 수를 임의대로 조절하고 싶을때 gutter 에서 span = {여기}는 24분할중에 얼마나 차지할 지에 대한 숫자를 적으면 된다 ! 여기서 gutter은 16+8n의 정수를 넣어주면된다 👉 기본적으로 24를 가지고 있는 Row 의 수를 바꿔줄 수 있고, 때문에 비례적으로 열을 나누기 위해 16 + 8n 형식으로 넣어주어야 올바른 열로 표현된다 일정부분만큼 건너띄고 싶을때 offset //2만큼 오른쪽으로 여백을 준다 Row에 flex 속성 쓰기 Ro.. 2023. 8. 3. open API : MusicList 무료 api , last.fm api 사용하기 open API : MusicList 무료 api , last.fm api 사용하기 last.fm open API 사용하기 https://www.last.fm/api 👉 Get an API account 선택 👉 계정 생성 및 로그인 👉 해당 계정 메일에가면 확인메일을 볼 수 있다! 👉 계정 확인 후, 한번 더 이동 https://www.last.fm/api 동일하게 진행하면 계정을 생성할 수 있어진다! 애플리케이션 이름이랑 설명 등등을 적어넣고 신청 홈페이지는 내가 api를 사용할 부분에 넣어준다! 콜백 URL은 따로 적지 않아도 된다 혹시라도 신청 홈페이지/ 사용할 페이지에 대한 url에 대한 설정에 어려움을 느낀다면 https://velog.io/@whdms3368/React-git-push-%EB.. 2023. 8. 3. 리액트 네이티브 styled-components unable to resolve dependency tree 오류 해결! 리액트 네이티브 styled-components unable to resolve dependency tree 오류 해결! 이런 에러를 발견했다. 분명 종속성 문제인데 개발을 하다보면 작업하다 중간에 버전문제때문에 열받는 경우가 너무 많다... npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: firstcli@0.0.1 npm ERR! Found: react@17.0.2 npm ERR! node_modules/react npm ERR! react@"17.0.2" from the root project npm ERR! peer react@">= 16.8.0" fr.. 2023. 8. 3. Vue로 kakao map API 사용하기 회사에서 좋은기회가 생겨 vue로 카카오맵 api 를 사용하게 되었다. 지도는 프론트엔드에게 꽃이나 다름없다고 하셨는데 ㅋㅋㅋ 맞는말인지 모르겠지만 어쨌든 1년차도 안된 내게는 좋은기회라고 생각했다 카카오 주소 https://apis.map.kakao.com/ https://apis.map.kakao.com/web/sample/ 밑에 주소는 샘플링 주소이다. 개발을 하면서 정말 많이 들어갔던.. 물론 문서도 중요하지만 샘플링을 통해 어떤식으로 구현되는지 한번 확인을 거친 뒤 문서를 읽으면 확실히 금방 습득이 가능했다. vue에 카카오맵 설치 및 확인 여러 시도를 거쳐봤는데 key값이 노출되지 않은 채로 전역으로 설치해주는것은 불가능해 보였다. (만약 찾으신분이 있다면 알려주시길..👀 ) 그래서 지도를 사.. 2023. 8. 3. Vue : npm run serve 오류 vue-cli-service: command not found 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.. 2023. 8. 3. [ERR 오류해결] @eslint/eslintrc@1.2.2: The engine "node" is incompatible with this module. Expected version "^12.22.0 || ^14.17.0 || >=16.0.0". Got "14.15.5" 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.. 2023. 7. 31. [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. 이전 1 2 3 4 5 ··· 7 다음 반응형
