본문 바로가기

분류 전체보기76

React : 스타일 넣어주기 styled-components 사용법 , style 에 props 전달 , 전역 스타일 설정 React : 스타일 넣어주기 styled-components 사용법 , style 에 props 전달 , 전역 스타일 설정 1. styled-components 설치하기 npm i styled-components styled-components는 react를 사용하면서 css파일이 아닌 하나의 태그자체에 속성을 주고, 여러번 재사용할 수 있도록 해준다. styled-components를 사용하면 삼항식이나 여러가지 효과를 적용하고 속성을 줄 때 손쉽게 접근할 수 있다. 👇 styled-components 사이트 https://styled-components.com/ 2. styled 전용 jsx 파일 만들어 사용하기 1 . style을 저장할 jsx 파일을 하나 만들다 2. import styled f.. 2023. 8. 3.
[Err] Error message "error:0308010C:digital envelope routines::unsupported" 해결하기 [Err] Error message "error:0308010C:digital envelope routines::unsupported" 해결하기 Error message "error:0308010C:digital envelope routines::unsupported" 라는 에러는 노드 모듈이 적합하지 않아서 (지원되지 않는 기능들이 존재하기 때문에) 뜨는 문제이기 때문에 노드 버전을 낮춰주면 간단하게 해결된다. node 18로 설치되어있는 버전은 16으로 다운그레이드 시켜주니 간단하게 해결되었다. Unix 계열 (Linux, masOS, Git bash) export NODE_OPTIONS=--openssl-legacy-provider Windows set NODE_OPTIONS=--openssl-le.. 2023. 8. 3.
React : params 사용하기 URLSearchParams 사용법 +) npm i query-string React : params 사용하기 URLSearchParams 사용법 +) npm i query-string 1. Params 란? 이런식으로 ? 뒤에 딸려들어가는 key 와 value 값을 params 라고 한다. url주소와 상관없이 params로 들어가면 동일한 url에서도 여러가지 필터들을 겹쳐 표현된다. 우리들이 필터를 사용해 검색할때 검색 정보를 들고가는 역할을 한다. 2. URLSearchParams https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams 구체적인 정보가 필요하신 분들은 링크를 이용해주세요 react에서 params를 사용하고 싶을때 사용할 수 있는 정의이다. 보통은 아래 코드처럼 props를 사용해 검색된 항목을 담고.. 2023. 8. 3.
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.
반응형

티스토리툴바