'error & basic' 카테고리의 글 목록

1. 컴포넌트 만들기 import clsx from 'clsx'; import React from 'react'; interface Props extends React.InputHTMLAttributes { theme?: 'primary' | 'secondary' | 'tertiary'; } /* 타입 확장 interface DefaultInputTextProps extends React.InputHTMLAttributes - 기본 html에 있는 타입을 쓰고 있고 내가 그 html태그의 타입을 상속받을 경우 위와 같이 extends 하여 써주어야한다 */ export default forwardRef(function 컴포넌트명( {theme, className, ...restProps }: Props,..

error & basic

js) Window.postMessage() #202401

2024.01.02

# Window.postMessage() postMessage() 메서드는 Window 객체 사이에서 안전하게 cross-orgin 통신을 할 수 있게 한다. 대표적인 사용 예로 새창으로 띄워진 팝업창, 페이지 안에 포함된 iframe 간에 통신에 사용 할 수 있다. 또 데이터를 보내는 HTTP 요청을 생성하지 않으며, DOM 기반 통신에 사용된다. * 문법 targetWindow.postMessage(message, targetOrigin, [transfer]); /* Window.opener (새 창을 만든 window를 참조할 때), HTMLIFrameElement.contentWindow (en-US) (부모 window에서 임베디드된 (en-US)을 참조할 때), Window.parent (en..

error & basic

js) 정규식 & js #2312

2023.12.20

# 정규식 // 정규 표현식 리터럴 const myRegExp = /^[0-9]+$/; // RegExp 생성자 함수 const regExpVal = new RegExp (`^\\d*(\\.\\d{0,${변수}})?$`); - 변수를 넣어야 할때는 생성자 함수를 이용해서 해야한다. https://poiemaweb.com/js-regexp # 브라우저 스택 - 유료이지만 개발자 도구를 볼수 없는 앱에서 어떤 오류가 있는지 해당 버전을 적용하여 확인할 수 있다. https://www.browserstack.com/ 참고 👀: https://techblog.gccompany.co.kr/broswer-stack-%EC%95%8C%EC%95%84%EA%B0%80%EA%B8%B0-ec97e09b510d #현재 in..

error & basic

js) Callback & js #2311

2023.11.15

1. 콜백(Callback) 함수 - 콜백(Callback) 함수는 간단히 말하면 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다. - 콜백 함수란 파라미터로 일반적인 변수나 값을 전달하는 것이 아닌 함수 자체를 전달하는 것을 말한다. - 보통 일회성으로 사용하기 때문에 익명함수 형태로 넣어준다. 👀 출처 : https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98 2. sass for문 @for $i from 1 to 26{ .클래스명#{$i}{ background-imag..

error & basic

js) focus & Vue #2311

2023.11.10

# 새창에 포커스 const 변수명 = window.open(`url`, "새창이름"); if (변수명) { 변수명.focus(); } // 새창이 있다면 해당창에 포커스되게 하기 # @font-face @font-face 사용시 src 부분에 local("폰트명") 을 쓰게 되면 사용자가 설치한 폰트와 싸우게 된다. 따라서 이부분은 삭제하는 것이 좋다. 👀: https://developer.mozilla.org/ko/docs/Web/CSS/@font-face # npm 모듈 설치 후 사용하기(in Vue) import Vue from 'vue'; import PerfectScrollbar from "vue2-perfect-scrollbar"; import 'vue2-perfect-scrollbar/di..

error & basic

js) jquery event & php & js #2311

2023.11.09

# trigger 페이지 로드 등과 같이 사용자가 값을 직접 선택 또는 입력하지 않고, 지정된 이벤트 유형에 대해 일치하는 요소에 연결된 모든 핸들러 및 동작을 실행한다. $('input').val("test").trigger("change"); 👀 https://api.jquery.com/category/events/ # 조건문 undefined 체크할 때 if (typeof 변수 != 'undefined') { //소스들 } # 로드시 정보를 불러와야하는 상황에서 정보가 변하는 것이 보일 때 - 기본값 이후 변하는 값으로 바뀔 때 - 처음 선택자의 style을 display:none으로 지정 후 로드 후 빼버린다. //아이프레임에서 이전 데이터가 보여서 딜레이 설정 setTimeout(() => { ..

error & basic

js) code short & infomation #2311

2023.11.08

# 코드 줄이기 if (변수 > 0 && 변수 5 && 변수 10 && 변수 = 2000) { perSize = 6; } else if (window.innerWidth >= 1802) { perSize = 5; } this.변수명2 = Math.floor(size / perS..

error & basic

vue, react) infomation #2309

2023.09.14

# vue stop @click.prevent.stop="함수명(넘기고싶은값)" 컴포넌트 내에서 값을 불러올 경우에는 매개변수가 필요하지 않다. 상황에 따라서 넣기! 참조: https://engineer-mole.tistory.com/391 @click.prevent : 원래 동작하는 클릭 이벤트 막고 , 지정한 메소드로 이벤트 핸들링 수행 🙄언제썻을까? - a태그 안에 특정 태그 클릭시 다른 이벤트를 실행하고 싶을 때 그 태그에 @click.prevent 사용 # 콘솔창에서 vue 막혔을경우 보고 싶을때 window.$nuxt.$store.state.modules.app # react dom - 리액트 돔은 = 클라이언트에서 작동하기 위해서 사용 - 따라서 nextjs13 버전에서 리액트 훅을 사용하기..

error & basic

vue) :style background #2308

2023.08.04

#vue 백그라운드를 html에서 넣을 때 data bind로 백그라운드를 넣을때는 아래와 같이 넣어야지 된다. :style="{'background-image': 'url(' + require(`~/assets/img/이미지명`) + ')'}" 스택오벌플로우 참조👀 https://stackoverflow.com/questions/35242272/vue-js-data-bind-style-backgroundimage-not-working #console.error 콘솔로그 쓰다가 console.error를 쓰면 빨갛게 떠서 더 알아보기 쉽다. 또한 콘솔창에서 에러만 모아서 보기 때문에 더 수월하게 작업할 수 있다. 콘솔종류 확인하기👀 #vue 확장 파일이 없을 때 확인법 콘솔창에서 window.$nuxt...

error & basic

vue) component height #2307

2023.07.11

# 컴포넌트에서 높이 구하기 1. 컴포넌트에 ref="링크명" 붙이기 2. this.$refs.링크명 으로 접근 3. 높이구하기 - mounted이후에 접근해야 undefined 오류가 안뜬다. private 함수명() { //이벤트 const 높이 = this.$refs.링크명.$el.clientHeight; } # html 요소에서 높이 구하기 1. 필요한 html 에 ref="링크명" 붙이기 2. this.$refs.링크명 으로 접근 3. 높이구하기 - 지시자 $el 없이 attribute로 바로 접근한다. private 함수명() { //이벤트 const 높이 = this.$refs.링크명.clientHeight; } 👀느낀점 코드를 짜다가 추가하여 어떠한 상황을 만들었을때 어떠한 이유로 안될경우..

error & basic

react) 컴포넌트(feat.typescript) #202402

js) Window.postMessage() #202401

js) 정규식 & js #2312

js) Callback & js #2311

js) focus & Vue #2311

js) jquery event & php & js #2311

js) code short & infomation #2311

vue, react) infomation #2309

vue) :style background #2308

vue) component height #2307

티스토리툴바