#window.open, window.close , window.resizeTo 1) window.open은 새창으로 열기 위하여 사용하는것 이라는 것은 누구나 안다. var 새창이름 = window.open(url, name, specs, replace); 여기서 주목할 것 name이다. name부분에 _blank이렇게 적었던 것을 기억한다. 이번에 알게 된것은 바로 name에 임의의 이름을 붙여주었을때 일어나는 일이다. 가령 어떤 버튼을 눌러서 이름이 붙은 새창을 연다고 생각해보자. 이럴경우 버튼을 계속 눌러도 이미 이름이 붙은 새창에서 계속 리로드 될것이다. 이렇게 하면 새창을 무한으로 띄우지 않는다. https://offbyone.tistory.com/312 2) window.close 말그대로 ..
#computed 1. vue3 state 선언문 내에 computed 속성에 대한 선언 구문을 추가하는 것으로 변화 const 변수명 = computed(() => 계산식; // Composition api가 추가 되면서 함수형식으로 가져옴 2. vue2 - class 컴포넌트일 경우 getter 함수 - 나의 경우 class 형식으로 만들었기 때문에 아래와 같이 작성하였음 - class가 아니라면 함수형으로 적으면 된다. get 함수명(): 리턴타입 { // 리턴타입 예) string - 타입스크립트를 사용하지않을경우는 타입을 적지 않아두 됨 return 조건문 ? true일때값 : false일때 값; // 3항 연산자 } ++ 컴포넌트 내부에서 함수명으로 사용할 수 있다. 예) v-if="함수명" ..
#Api get API GET은 쿼리가 string으로 값이 넘어오므로 아무리 그전에 타입세팅을 boolean으로 해도 넘어갈때 string으로 변환한다! 따라서 타입을 string으로 써도 무방하다. # 변수 export해서 사용하기 export const 변수명 = (vue: Vue, callback: () => void) => { callback(); }; import { 변수명 } from "위치명"; 변수명(this, () => { 콜백함수 적기! }); # 리다이렉션 오류가 날경우(같은 라우터로 푸시했을때 생기는 오류) Avoided redundant navigation to current location "주소" 오류 또는 NavigationDuplicated: Avoided redundan..
# 기능소개 1) 대메뉴 클릭시 소메뉴가 보이게 하기(대메뉴는 토글기능) 2) 대메뉴에서 현재 메뉴가 아닌 다른 대메뉴를 클릭할 경우 현재메뉴는 닫히게 하기 3) 윈도우 창이 1024이하로 갈경우 모바일 메뉴로 변경 4) 모바일 메뉴 Open 클릭시 사이드바가 보이면서 백그라운드 어둡게 변경 5) 어두운 백그라운드 클릭시 사이드바가 닫히게 하기 😉최종코드는 하단에 첨부 1. 메뉴 토글 기능을 위해서 useState이용하여 open 변수 제어 setOpen(!open); 간단하게 온클릭시 보통 이렇게 많이 한다. 하지만 이렇게만 하면 내가 클릭하지 않은 다른 대메뉴도 모두 열리는 재밌는일(?)이 일어난다. 이럴때 가장 쉽게 처리 할 수 있는 방법은 바로 index를 부여하여 제어하는 것이다. 1> inde..
1. 설치하기 npm install -D tailwindcss npx tailwindcss init 2. tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], } 3. index.css @tailwind base; @tailwind components; @tailwind utilities; /*최상단에 추가*/ 4. npm run start 5.예시 export default function App() { return ( Hello world! ) } 👀테일윈드 더 알아..
1. npx create-react-app . --template typescript 2. npm install react-router-dom @types/react-router-dom ★타입스크립트 사용시 @types/moduleName 을 추가로 설치 해야한다. 3. index.js BrowserRouter로 app 감싸기 - BrowserRouter: History 객체를 생성하고, 초기 위치를 상태로 만들고, URL을 참조한다. 4. 라우트를 사용할 부분에 import { Routes, Route } from "react-router-dom"; 1) Routes : 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 하나만을 렌더링 시켜주는 역할 - Route Config라는 경로 객체 트리를..
1. 설치하기 npx create-react-app . npm i @types/react 통합적으로 npx create-react-app . --template typescript 설치가능 2. .ts 와 .tsx .ts파일은 pure typescript 파일 .tsx 파일은 typescript의 react문법을 담아내기 위한 확장자(jsx+ typescript) 3. src 디렉토리 1) index.tsx 1: 메인 엔트리 파일 2: React.Dom.render 수행 3: pwa(프로그레시브 웹 앱 = HTML, CSS, JavaScript와 같은 웹 기술로 만드는 앱)를 위한 서비스 워커 등록 작업 2) index.css 글로벌 스타일 작성(프로그래밍적으로 제한되지 않음) 3) App.tsx App..
#after vs box-shadow box-shadow로 그림자만 만들 줄 알았지 border를 만들다니? 라고 생각 하실 수 있지만 이게 엄청 유용했다. Why? 이 코드를 보면 바로 납득이 된다. See the Pen after vs box-shadow by dev_Sunny (@sunny_dev) on CodePen. 이렇게 글자 밑에 형관펜 같은 효과를 넣는 디자인을 본적이 있지 않은가? 예전에 ie가 있을때 after로 효과를 많이 넣어서 습관처럼 넣고 있다가 box-shadow 로 아주 쉽게 할 수 있는 것을 알아서 써먹기 시작했다. 파폭, 오페라, 크롬, 브레이브, 엣지 등등에서 아주 잘먹는다. 한줄이면 끝나는 코드를 그동안 여러줄을 써댔는대 정말 편하다. 그렇다면 inset이 뭘까? #i..
1. retrun문 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환하는 것 1) 조건문을 줄때 중첩된 if문을 쓴다면 function 함수명() { if (조건문) { if (조건문) { ... } } } 이렇게 쓰는경우가 있는대 가독성이 떨어지고 복잡해 보인다. 2) 이럴때 처음부터 조건에 맞지 않을 경우 리턴 시켜버리면 중첩은 줄어들고 가독성은 올라간다. function 함수명() { if(조건문1) return; if (조건문2) { ... } } 조건문1에 맞지않으므로 2를 타지 않고 종료해 버린다. 중복된 조건이 있다면 조건식과 반대되는 경우 return을 선언하고 그다음 필요한 조건을 작성하면 된다. 자바스크립트 function 안에선 return 이라는 키워드를 만나면 retur..
#word-break 텍스트가 글자상자를 넘어갈때 글자를 줄바꿈하는 방법 word-break: normal; word-break: break-all; //특수문자를 제외하고 강제로 줄바꿈 word-break: keep-all; //한글일 경우 띄어쓰기 기준으로 짤림 word-break: break-word; /* deprecated */ 특수문자를 포함하고 강제 줄바꿈 word-break:nowrap; //줄바꿈 하지 않음 #white-Space 공백을white-space 처리하는 방법 white-space: normal; white-space: nowrap; //스페이스로 들어간 연속공백은 통합 = pre의 효과, 줄바꿈X white-space: pre; //원문 그대로 출력 white-space: p..
