- 전체보기(27)
- react.js(7)
- React(6)
- vue.js(5)
- vue(3)
- closure(1)
- npm i errror(1)
- 대소문자구분없이찾기(1)
- vscode(1)
- react svg(1)
- Event(1)
- 정규표현식(1)
- clipboard(1)
- 버블링방지(1)
- npm xcrun(1)
- Ribbon style badge(1)
- dragg table(1)
- python error(1)
- react router dom(1)
- router(1)
- npm i xcrun:error(1)
- route-link(1)
- 테그(1)
- 검색어찾기(1)
- js(1)
- JavaScript(1)
- tailwind(1)
- ESLint(1)
- Prettier(1)
- webpack(1)
- 클로저(1)
- react svg error(1)
- v-focus(1)
- npm error(1)
- 카운트다운(1)
- CSS(1)
- styled components(1)
- tailwindCSS(1)
- 문자찾기정규표현식(1)
- npm Python error(1)
- Vue에서 debounce 사용(1)
- v-html(1)
- regexp(1)
- svg fill="current"(1)
- typescript기초(1)
- .env(1)
- b-table dragg(1)
react router 정상경로 404 Not Found 에러 발생 해결
NavLink 로 사이트 이동이 정상적으로 되는데 직접 주소를 입력해 접속할 경우 또는 새로고침 할 때 404 에러가 나는 경우가 있다.이럴 때 는 webpack.config.js 파일에서 historyApiFallback 설정을 추가 하지 않았거나 true 값이 아닐
중첩된 div 클릭 이벤트 처리 방지 ( 이벤트 버블링 )
자꾸 까먹어서 메모용으로 작성\* 이벤트 버블링 이란 ? 이벤트가 발생 > 핸들러 동작 > 부모 핸들러 동작 > 과정 반복부모 div 도 클릭 처리가 있고 내부 div 도 클릭이 있을 때 상위 부모 이벤트를 방지 -> stopPropagation() 호출https&#x
draggable table ( + b-table ) 상하 드래그 테이블 만들기
https://stackblitz.com/edit/vue2-cli-bootstrap-vue-6djkc7?file=src%2FApp.vue
$event => 지우기 (volar.inlayHints.eventArgumentInInlineHandlers)
갑자기 보이기 시작한 $event 직관적으로 보기 좋을 순 있지만.. 자꾸 거슬려서 없애는 법 공유합니다..해당 문구 위에 마우스를 올리면 아래와 같은 문구가 출력되는데 해당 inlayHints 요 부분을 복사해서 vscode 설정 에서 검색 후 해당 항목 off (
div 카드 위 리본 뱃지 CSS
html 리본 뱃지 영역 선언css 속성 ( 위치는 top과 left 속성을 조율 )참고 ) https://medium.com/@so_deep.dev/ribbon-style-badge-for-cards-with-css-5c9da53d908e위 예제가 정말 상세
react api로 받아온 html string 데이터 화면에 적용 하기
VUE같은 경우에는 v-html로 손쉽게 사용 가능하지만 리엑트에서는 dangerouslySetInnerHTML를 사용한다.사용방법 예시는 두가지 정도 .. 1\. return 문내에 dangerouslySetInnerHTML 사용 \_\_html key 값은 필수2
vue2 v-viewer+toast editor 이미지 뷰어 처리
toast editor 뷰어에서 이미지를 클릭하여 확대 축소가 가능한 이미지 뷰어 기능을 추가참고 예제 ) https://codesandbox.io/s/v-viewer-click-to-show-forked-5y2ern터미널을 열어 사용중인 프로젝트경로에 v-v
useHref() may be used only in the context of a <Router> component. 해결하기
자꾸 편하게 개발 하다가 오류 나오면 아 이거 아는데 .. 하고 구글링만 한다 .. 다신 실수 안하게 하려면 Route 작성 단계별로 적어야 할 것 같다.우선 해당 오류는 App 컴포넌트 전체에 대해 BrowserRouter 처리가 되지 않아서 그런것이 대부분일 것이다
스크롤바 디자인 적용
/ 스크롤바 가로 사이즈 /::-webkit-scrollbar { width: 20px;}/ 스크롤바 막대기 /::-webkit-scrollbar-thumb { border-radius: 20px; background-color: }/ 스크롤바 백그라운
css div 글 라인 제한 및 그라데이션
라인 제한display: -webkit-box;\-webkit-box-orient: vertical;\-webkit-line-clamp: 2;그라데이션background: linear-gradient(to bottom, ${colors.neutral300}, rgba(
react Websocket connection failed (webpack) 문제해결
프로젝트를 서버에 올리고 나서 화면은 정상으로 떳지만 계속해서 Websocket 오류가 났다..문구는 아래와 같았는다WebSocket connection to 'wss:/서버주소:3000/ws' failed: WebSocketClient.js:16 왜 나는 웹소켓을 안
react 프로젝트에 tailwind css 적용 (create-react-app 안씀)
대부분 공식 문서를 참고 하여 진행을 하였는데 알아 보기 쉽게 정리해 두려 한다.참고 : https://tailwindcss.com/docs/guides/create-react-app1\. tailwindcss 설치 npm install -D tailwindc
react.js styled-components 예제로 보는 적용방법
적용하는 방법만 기술 할테지만 'CSS in JS' 라는 개념을 한번 찾아 보고 어떤 방식인지 한번 공부해보는걸 추천합니다. < styled-components 설치 >npm i styled-components< styled-components 적용 예제 >
타입스크립트(TypeScript) 기본 타입
1\. 단일2\. 배열3\. 튜플 => 배열의 위치(인덱스) 타입 지정4\. 진위값 (true, false)5\. 객체 (Object)
정규표현식 특수문자 포함하여 체크
정규표현식을 사용하여 문자를 비교할 경우 문자열내에 특문 . ( ) 등이 있으면 정상적으로 작동하지 않을 경우가 있다 .이는 특문을 문자열로 인식하기위해 앞에 역슬레쉬(\\)를 붙여야 한다.
vue.js route-link 이동 감지하기
주소변경을 인지하고 사용해야하는 경우가 생겨서 window.location 을 계속 봐야하는 경우가 생겼다 ..Router link 를 사용하면 url 주소는 계속 변경되지만, 화면이 교체 되기 때문에 mounted, computed 등에서 변화를 감지 할 수 없다.해
Vue.js debounce 사용시 this 객체 Cannot read properties
debounce를 사용 하여 함수를 만들었을 때 this 객체를 찾지 못하는 오류가 발생할 경우가 있다.평소처럼 코딩 하던중 아래 예제 처럼 this 를 사용 하였는데 에러가 발생하였다.이유는 화살표 함수 표현(arrow function expression) 에 대한