본문 바로가기

전체 글368

[CSS] flex-grow, flex-shrink, flex-basis 알아보기

flex-grow(기본값: 0) 부모 영역에서 자식 요소들이 부모 영역에 여백이 있으면, 채우기 정도를 요소마다 설정할 수 있게 해주는 옵션이다. 기본값이 0이니까, 아무런 설정을 안 하면, flex로 한 부모 요소의 자식요소들은 빈 영역이 있어도 채우지 않는다. flex-grow: 1로 설정한 자식요소는 flex의 부모 요소의 빈공간을 채운다. flex-shrink(기본값: 1) 자식 요소들의 크기들이, 부모 요소보다 클 경우, 자식요소들의 크기를 부모 요소의 크기에 맞춰서 줄어드는 정도를 설정할 수 있게 해주는 옵션이다. 기본값이 1이므로, 자식요소들이 부모 요소의 크기를 넘어도, 자식요소들이 부모 요소 밖으로 튀어나오지 않는다. 만약, flex-shrink: 0으로 전부, 자식요소를 설정하고, 부모.. 2023. 3. 20.

[Vue] 조건부 렌더링 에러

consoleObservable.js?3605:26 TypeError: Cannot read properties of undefined (reading '_transitionClasses') at Array.updateClass (vue.runtime.esm.js?2b0e:7377:1) at patchVnode (vue.runtime.esm.js?2b0e:6887:1) at updateChildren (vue.runtime.esm.js?2b0e:6768:1) at patchVnode (vue.runtime.esm.js?2b0e:6894:1) at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:7062:1) at Vue._update (vue.ru.. 2023. 3. 14.

[라이브러리] cookie-parser npm 라이브러리는 뭘까?

정의 https://www.npmjs.com/package/cookie-parser Parse Cookie header and populate 'req.cookies' with an object keyed by the cookie names. 쿠키 헤더를 구문 분석하고 쿠키 이름으로 키가 지정된 개체로 'req.cookies'를 채웁니다. 왜 쓸까? Node.js 서버를 개발할 때 쓴다. 클라이언트(브라우저)로부터 http 요청 header에 cookie를 받았을 때, 쉽게 cookie를 사용하기 위해서 쓴다. export default async (req: Request, res: Response, next: NextFunction) => { try { console.log("!!!!!!!!!!!!!!.. 2023. 3. 2.

[CSS] 색깔있는 이미지 회색으로 처리하기

img { filter: grayscale(100%); } 결과 2023. 2. 25.

[웹 브라우저 & 모바일] 모바일 기기에서 브라우저의 인풋이 focus 되었을 때, 가상키보드 안 생기게 하는 방법

두가지 방법이 있겠다. 2023. 2. 23.

[github] 원격지에 dev 브랜치를 커밋 이전 버전으로 반영하기(덮어씌우기)

push -f는 desktop이나, vscode의 github plugin 그리고 github 웹 페이지에서 불가능하다. 오로지 명령어로만 가능하다. 로컬에 커밋 이전 브랜치가 있어서, 이 브랜치를 다음 명령어로 dev에 push -f했으나 잘 되지 않았다. 해결 방법 로컬에 dev 브랜치를 삭제했다. 원격 dev에 반영할 코드를 'dev'라는 브랜치명으로 로컬에 똑같이 만든다. 명령어 입력 : git push -f origin dev 2023. 2. 21.

[Javascript] 텍스트 클립보드 복사하기 코드

// Get the text to be copied const textToCopy = "Hello, world!"; // Create a temporary input element const tempInput = document.createElement("input"); tempInput.setAttribute("type", "text"); tempInput.setAttribute("value", textToCopy); document.body.appendChild(tempInput); // Select the text tempInput.select(); // Copy the text to the clipboard document.execCommand("copy"); // Remove the tempor.. 2023. 2. 19.

[Vue] textarea에 개행마다, 높이 늘어나고, shift+enter 개행이고, enter하면 서브밋하는 코드

export default { name: 'ResizableTextarea', props: { value: { type: String, default: '', }, }, methods: { updateValue(event) { if (event.shiftKey) return; if (event.keyCode === 13) { this.$emit('enter'); event.preventDefault(); setTimeout(() => { this.resize(); }); return; } this.resize();.. 2023. 2. 19.

[Javascript] 두 배열 간에 교집합 구하기

1. filter 방법 이용 const array1 = [1, 2, 3, 4, 5]; const array2 = [3, 4, 5, 6, 7]; const intersection = array1.filter(x => array2.includes(x)); console.log(intersection); // [3, 4, 5] 2. set 객체 사용 const array1 = [1, 2, 3, 4, 5]; const array2 = [3, 4, 5, 6, 7]; const set1 = new Set(array1); const set2 = new Set(array2); const intersection = Array.from(new Set([...set1].filter(x => set2.has(x)))); co.. 2023. 2. 19.

[Nuxtjs] Plugins의 inject를 쓰는 이유(feat. chatGPT에 물어봤어요.)

Nuxt.js에서 "inject" 플러그인은 애플리케이션 컨텍스트에 변수를 주입하여 애플리케이션 전체에서 변수를 전역적으로 사용할 수 있도록 하는 데 사용됩니다. 컨텍스트는 애플리케이션의 모든 구성 요소에 전달되는 개체이며 수명 주기 후크, 구성 요소 및 애플리케이션의 다른 부분에서 context 매개 변수를 사용하여 액세스할 수 있습니다. 이것은 다음과 같은 다양한 목적에 유용할 수 있습니다. 그래서 사용하면 좋은 점은? 공통 데이터 공유: "inject" 플러그인을 사용하여 애플리케이션 전체에서 API의 기본 URL과 같은 공통 데이터를 저장하고 공유할 수 있습니다. 서비스 주입: "inject" 플러그인을 사용하여 로깅 서비스와 같은 서비스를 애플리케이션에 주입하여 구성 요소에서 쉽게 액세스하고 재.. 2023. 2. 4.

티스토리툴바