티스토리

코딩하는 둥둥

검색하기

블로그 홈

코딩하는 둥둥

doongi9.tistory.com/m

공부한 내용을 기록합니다

구독자: 4

방명록 방문하기

주요 글 목록

[ Vue2 ] Swiper외부에서 Swiper Index 사용하기 요구사항 swiper가 스와이핑될 때마다 swiper 외부 요소의 값도 변경되는 로직을 구현하기위해 swiper의 index값을 스와이퍼 외부에서 사용할수 있도록 해야했다. 구현 슬라이드의 인덱스를 변수에 저장해, 그 변수를 활용해 외부 요소의 값을 변경하도록 구현하려고했다. 기존에 스와이핑 될때마다 css를 변경하는 로직을 slideChange에서 구현했기때문에 마찬가지로 swiper index도 slideChange에서 realIndex를 사용해 변수로 넘겨주고자했다. 이때 activeIndex가 아니라 realIndex를 사용한 이유는 loop:true를 사용했기때문에 activeIndex가 현재 슬라이드 순서와 달랐기때문이다. activeIndex : 현재 활성 슬라이드의 인덱스 번호 ※ loop.. 공감수 0 댓글수 0 2023. 2. 8.
mask-image mask-image 이미지를 마스킹(마스크 적용) 이미지 마스킹(마스크) 🔗https://en.wikipedia.org/wiki/Masking_(art) 필요한 부분만을 칠하기 위해 불필요한 부분을 원하는 형태로 가리는것 이미지의 특정 영역에만 효과가 적용되도록 효과가 적용되지 않을 부분과 구분해 주는 것 얼굴을 숨긴다는 의미의 마스크에서 파생 포토샵의 클리핑 마스크와 같은 효과 Masking (art) - Wikipedia From Wikipedia, the free encyclopedia Masking tape being peeled off of a canvas, to reveal the protected, unpainted area below In art, craft, and engineering,.. 공감수 0 댓글수 0 2023. 1. 15.
[Vue warn]: Invalid prop: type check failed for prop "width". Expected Number with value 100, got String with value "100". type: Number을 지정하고 문자열 값을 넘기면 발생하는 오류 type 지정시 부모 컴포넌트는 정적인 값일때도 v-bind를 해줘야 한다. 나의 경우 v-bind(:)가 빠져서 발생한 오류였다. References. https://negabaro.github.io/archive/vuejs-props 공감수 0 댓글수 0 2023. 1. 15.
[ ERROR] Uncaught TypeError: Cannot read properties of undefined (reading 'install') [vue-router] Router must be called with the new operator. Uncaught TypeError: Cannot read properties of undefined (reading 'install') vue create 프로젝트명으로 개발 환경 구현중 발생한 오류이다. 결론적으로 말하면 vue2를 사용할 경우에는 vue-router3버전을 사용해야 한다. vue2로 프로젝트를 만든 후에 npm install vue-router을 사용해 vue-router을 설치했는데, 이 과정에서 자동적으로 vue-router4버전대가 설치되었다. References. https://velog.io/@k_jihye92/Vuevue-router-cannot-read-propertie.. 공감수 0 댓글수 0 2023. 1. 15.
[Vue warn]: Property or method "test" is not defined on the instance but referenced during render. [Vue warn]: Property or method "test" is not defined on the instance but referenced during render. 'test'라는 속성이 선언되지 않았는데 화면에 렌더링 되려고 했습니다. data나 methods에 변수를 선언해 주지 않고 화면에 렌더링 하려고 해서 발생한 오류 methods에 변수를 선언해 주지 않아서 발생했기때문에 변수 선언 후 오류가 뜨지 않았다. References. https://joshua1988.github.io/web-development/vuejs/common-error-cases/ 공감수 0 댓글수 0 2023. 1. 15.
element 검색하기 웹 페이지 내에서 원하는 elements에 접근하는 방법 getElementById 요소에 id값이 있을 경우 사용 가능 id : unique값 스크립트가 간단할때는 괜찮지만 이름이 충돌할 가능성이 있기때문에 추천하는 방식이 아님 코드만 보고 변수의 출처를 알기 힘듬 querySelectorAll 요소의 자식 요소 중 주어진 css 선택자에 대응하는 모든 요소를 반환 :hover나 :active와 같은 가상 클래스에도 사용이 가능 document.querySelectorAll(':hover') : 마우스 포인터가 위에 있는(hover 상태) 요소 모두를 담은 컬렉션이 반환 querySelector 주어진 css 선택자에 대응하는 요소 중 첫 번째 요소를 반환 해당하는 요소를 찾으면 검색을 멈춤 eleme.. 공감수 0 댓글수 0 2023. 1. 15.
[ className 과 classList ] class 추가/변경/삭제 className 과 classList className class 문자열 전체를 변경할 수 있다. element.className = 'class명' : class 문자열 전체가 class명으로 변경됨 classList 클래스 하나만 추가하거나 제거하고 싶을때 사용한다. element.classList.add('class명') : 기존 class 속성을 유지한 채로 새로운 class를 추가 element.classList.add/remove('class명') : 기존의 class 속성은 유지되며, 인자로 사용된 class 값만 삭제 element.classList.toggle('class명') : 특정 동작에 따라 class값이 추가/삭제. class값이 있을 경우 해당 class값을 삭제하고 fals.. 공감수 0 댓글수 0 2023. 1. 15.
[Swiper] Swiper 가장자리에 그라데이션 넣기 요구사항 슬라이드의 오른쪽에 그라데이션/페이딩 효과 주기 해결 방법 https://stackoverflow.com/questions/72957731/gradients-on-edges-of-swiper-carousel mask속성에서 linear-gradient사용하기 .swiper-container { mask-image: linear-gradient(to right, white 90%, transparent 97%); } References. https://stackoverflow.com/questions/72957731/gradients-on-edges-of-swiper-carousel 공감수 0 댓글수 0 2023. 1. 15.
[ Swiper ] 슬라이드 가운데 정렬 🔗 https://sir.kr/qa/479420 처음에는 중앙정렬로 잘 노출되다가 슬라이드를 하나 넘기면 위치가 이상해진다. swiper 슬라이드 가운데 정렬 > SIR 이런 슬라이드 형태를 구현하고자 하는데요 [code] var edtSldCnt = new Swiper(".edtSldCnt", { slidesPerView : 'auto', slideToC sir.kr 위 링크와 같은 형태의 슬라이드를 구현하려고 했고, 같은 형태의 오류가 발생했다. 링크에서는 slideChange로 슬라이드 이동 시 active 슬라이드의 이미지 크기를 다시 원래대로 돌려주는 방법을 사용해보라는 답변이 달렸지만, 나의 경우 이미 slideChange를 통해 acitve 여부에 따라 이미지의 크기를 변경하고 있는 상태였다.. 공감수 0 댓글수 0 2023. 1. 15.
[ Swiper ] 슬라이드가 한개일때 페이지네이션과 버튼 안보이게 하기 watchOverflow: true와 loop:true를 함께 사용하기 요구사항 슬라이드가 한 개일때 페이지네이션과 버튼 보이지 않도록 구현 → watchOverflow: true 슬라이드가 여러개 있을 때 마지막 슬라이드에서 스와이프 시 첫 슬라이드로 이동 → loop:true Swiper Options watchOverflow: true : 슬라이드가 1개일때 pager와 button 숨김 loop:true : 슬라이드 반복 여부. 위 요구사항을 구현하기 위해 watchOverflow: true와 loop:true를 같이 사용하려고 했는데 watchOverflow: true와 loop:true는 같이 사용할 수 없었다. 두 옵션을 같이 사용할 경우에는 watchOverFlow가 동작을 멈추는 문제가 .. 공감수 4 댓글수 0 2023. 1. 15.
Swiper Swiper 속성 loop : 슬라이드 반복 여부. true/false freeMode : 슬라이드 넘길때 위치 고정 여부. true/false autoplay: 자동슬라이드. true/false slidesPerView: 한 번에 보여지는 슬라이드의 수. 기본값 auto spaceBetween : 슬라이드 사이 여백 centeredSlides : active한 슬라이드를 중앙에 배치(센터모드). true/false pagination: 페이징 설정 navigation: 네비게이션 설정 breakPoints : 화면 크기에 따라 보여지는 모습이 바뀜(반응형 설정). width값으로 조정. roundLengths: 일반 해상도 화면에서 텍스트가 흐려지는 것을 방지하기 위해 슬라이드 너비와 높이 값을 반올림.. 공감수 0 댓글수 0 2023. 1. 15.
undefined와 null의 차이 console.log() 입력 시 undefined가 결과값으로 뜨는 이유는? undefiend는 반환할 결과값이 없을때 나오는 것으로, console.log()명령어는 어떤 값이 보이도록 출력하는 역할만 할 뿐 그 자체의 결과값은 없다. undefined와 null의 차이 undefined 반환할 결과값이 없다. 반환할 결과값이 없기때문에 자료형 또한 알 수 없다. null null이라는 값이 담긴것 자료형은 object이다. undefined와 null값은 빈 값이라는 공통점이 있기때문에 ==연산자를 사용하면 true 결과값이 나온다. 하지만 엄연히 다른 값이기 때문에 ===연산자를 사용했을 경우에는 false 결과값이 나온다. 정리 변수 존재 값 할당 자료형 undefined O X undefine.. 공감수 0 댓글수 0 2023. 1. 15.
[ ERROR ] eslint와 prettier 충돌 Delete '␍' Replace '......' with '↹↹' Replace '⏎⏎}' with '};' ␍ : Carriage Return의 약자로 현재 라인에 커서를 뒀다가 맨 앞으로 옮기는것을 말한다. ↹ : tab .. : space ⏎ : enter 이 오류는 eslint와 prettier가 충돌해서 발생하는 것으로, prettier 2.0 이상부터 endOfLine 기본 옵션이 'auto'에서 'if'로 변경되어 발생하는 에러라고 한다. 해결 방법 1. eslint.js에 endOfLine: "auto" 작성 (사용 불가) 구글링 결과 .esLint.js 또는 .eslint.json에 다음과 같은 문구 를 추가하면 해결 할 수 있다는 글이 대다수 였으나, 나의 경우 이미 상용화된 프로젝트.. 공감수 0 댓글수 0 2023. 1. 15.
Grid Layout Grid Layout 2차원(행과 열)의 레이아웃 시스템을 제공 두 방향(가로-세로) 레이아웃 시스템 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈 파이어폭스와 크롬의 개발자 도구에서 grid를 명확하게 보여주는 기능 有 CSS 핵(Hack) 특정 브라우저를 제외하거나, 특정 브라우저에만 CSS를 적용하는 기법을 말한다. 문법적으로 맞지 않거나, 특정 브라우저에서만 작동되는 비표준인 경우가 많기때문에 어쩔수 없는 경우가 아니라면 사용하지 말아야 한다. Grid의 구성 부모 요소(상위) : Grid Container 자식 요소(하위/복수) : Grid Item → 컨테이너가 Grid의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 .. 공감수 0 댓글수 0 2023. 1. 15.
location.href와 location.replace의 차이점 location.href 전체 URL을 포함하는 문자열을 반환하고 href를 업데이트할 수 있도록 한다. 새로운 페이지로 이동한다. 속성의 형태 location history가 기록되어 사용자가 뒤로가기 버튼으로 이전 페이지로 돌아갈 수 있다. location.replace location의 현재 리소스를 제공된 URL의 리소스로 바꾼다. 기존 페이지를 새로운 페이지로 변경시킨다. 메서드의 형태 현재 페이지를 사용한 후에는 location history(session)에 저장되지 않아 사용자는 뒤로가기 버튼을 사용해 이전 페이지로 돌아갈 수 없다. References. https://developer.mozilla.org/en-US/docs/Web/API/Location/href location.href.. 공감수 0 댓글수 0 2023. 1. 15.
[ npm] Archiver Archiver 🔗 Link archiver a streaming interface for archive generation. Latest version: 5.3.1, last published: 10 months ago. Start using archiver in your project by running `npm i archiver`. There are 4110 other projects in the npm registry using archiver. www.npmjs.com 아카이브 생성을 위한 스트리밍 인터페이스 TAR 및 ZIP 아카이브를 즉시 지원 registerFormat에 추가 형식 등록 가능 isRegisteredFormat에 새 형식을 등록하기 전에 형식이 이미 존재하는지 확인 가능 ※.. 공감수 0 댓글수 0 2023. 1. 15.
eq() eq() 선택한 요소의 특정 인덱스 번호가 있는 요소를 반환 색인 번호는 0부터 시작한다. 값이 없을 경우 null을 반환한다. $('선택자').eq(index) index : 일치시킬 요소의 0부터 시작하는 인덱스 References. https://www.w3schools.com/jquery/traversing_eq.asp https://api.jquery.com/eq-selector/ 공감수 0 댓글수 0 2023. 1. 15.
제이쿼리 선택자(Selector) 제이쿼리 선택자(Selector) 엘리먼트를 쉽게 선택할 수 있게 해준다. 종류 표현 All $('*') ID $('#id') Element (Tag) $('elementName') Class $('.className') multi $('tag, tag1, tag2') 기본 선택자 code .background-area { background-color : azure; } .loginArea { display: inline-block; padding: 100px; } Documentlogin계정이 있으시면 로그인해주세요!ID PWD 로그인 1. 모든 항목 선택 // 1. 모든 항목 선택 $('*').css('color', 'red'); 2. Id 선택 // 2. ID 선택 $('#id').css('col.. 공감수 0 댓글수 0 2023. 1. 15.
jQuery 설치 jQuery 로컬 다운로드 🔗jQuery jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com Download jQuery Download the compressed, production jQuery 3.6.1 클릭 다른 이름으로 저장 사용하고자 하는 프로젝트 dir에 이동.. 공감수 0 댓글수 0 2023. 1. 15.
CDN CDN 콘텐츠 전송 네트워크 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크 콘텐츠 전송 네트워크 또는 콘텐츠 배포 네트워크를 의미 사용자가 멀리 떨어져있는 경우,동영상과 같은 대용량 파일을 로드하는데 시간이 오래 걸리는 반면 cdn서버를 사용하면 사용자와 가까이 저장되어 컴퓨터에 더 빨리 도달할 수 있다. 대기시간을 줄이거나 네트워크 설계로 인행 발생하는 통신 지연을 줄이는것을 말한다. CDN 사용의 장점 페이지 로드 시간 단축 페이지 로드 시간이 너무 느리면 웹사이트 트래픽이 감소할 수 있기때문에 CDN을 사용하면 반송률을 줄이고 사용자가 사이트에서 보내는 시간을 대폭 늘릴수 있다. 대역폭 비용 절감 캐싱 및 기타 최적화를 통해 CDN은 오리진 서버가 제공.. 공감수 0 댓글수 0 2023. 1. 15.
npm run serve Error Conflict: Multiple assets emit different content to the same filename index.html 프로젝트 폴더명에 괄호나 특수문자가 포함되면 생기는 오류 프로젝트 폴더 명을 수정했더니 정상적으로 npm run serve가 실행되었다. References. https://www.inflearn.com/questions/458158 공감수 0 댓글수 0 2023. 1. 15.
VSCode 단축키 VSCode 단축키 기본 편집 ctrl + X : 잘라내기 ctrl + C : 복사 ctrl + shift + K : 행 삭제 ctrl + Enter : 코드 중간에서 아래에 빈 행 생성후 이동 ctrl + shift + Enter : 코드 중간에서 위에 빈 행 생성후 이동 Alt + ↑ : 커서가 있는 행을 윗줄로 옮겨 순서 변경 Alt + ↓ : 커서가 있는 행을 아랫줄로 옮겨 순서 변경 ctrl + / : 한줄 주석 ctrl + shift + [ : 커서 영역 접기 ctrl + shift + ] : 커서 영역 펼치기 검색 편집 ctrl + G : 행(라인 번호)로 이동 ctrl + P : 빠른 파일 열기 ctrl + F : 찾기 ctrl + shift + F : 전체 파일에서 찾기 ctrl + H .. 공감수 0 댓글수 0 2023. 1. 15.
Error: getaddrinfo ENOTFOUND {{url}} Error: getaddrinfo ENOTFOUND {{url}} 보통 테스트 환경에 따라 서버 Ip가 다르기때문에 편리하게 사용하기 위해 url을 환경변수에 세팅해 사용한다. 회사에서 기존에 작성된 collection을 받아 사용하게 되었는데 환경변수를 설정해주지 않아서 에러가 발생했다. 발생 원인 1. 환경변수 설정을 하지 않아서 url에는 환경변수가 사용되어있는데 Postman에서 환경변수 설정을 하지 않았을 경우 에러가 발생한다. 해결 : 환경 변수 설정 환경 설정 페이지로 이동 Add버튼을 눌러 환경을 추가 환경의 이름, 사용할 변수 등을 지정 발생 원인 2. 환경변수 설정 중 Current Value를 Intial Value와 맞춰주지 않아서 환경 변수 설정 중 Current Value와 In.. 공감수 0 댓글수 0 2023. 1. 15.
Postman Postman API를 개발, 테스트, 공유 및 문서화하는 데 사용되는 API 클라이언트(도구) 엔드 포인트 URL을 입력하는 테스트에 사용되며 서버로 요청을 보내고 서버에서 응답을 받아 API가 잘 동작하는지 확인한다. 모바일 개발, 프론트엔드, 백엔드에 모두 유용하게 쓸 수 있다. 개발된 API를 테스트하여 문서화 또는 공유 할 수 있도록 해주고, 컬렉션(Collection)에 내가 사용했던 API들을 모아 볼 수 있어서 재사용 가능한 API를 만들 수 있다. Postman의 호출 방식 Query String이 포함된 GET 방식 호출 JSON이 사용된 POST 방식 호출 🔗 Postman References. https://inpa.tistory.com/entry/POSTMAN-%F0%9F%92%B.. 공감수 0 댓글수 0 2023. 1. 15.
SVN 설치 및 연동 SVN eclipse에서의 SVN 설치 Help > Eclipse Marketplace SVN 검색 Subclipse ver. install confirm > 라이센스 동의(I accepted the terms of the license agreement) > Finish Intall anyway > Restart Now eclipse에서의 SVN 연동(SVN Repository 활성화) Window > Show View > other.... SVN 입력 > SVN Repositories > open 뷰 탭에 SVN Repositoies 활성화 References. https://ssd0908.tistory.com/entry/STS%EC%9D%B4%ED%81%B4%EB%A6%BD%EC%8A%A4Eclip.. 공감수 0 댓글수 0 2023. 1. 15.
SVN Repository Commit SVN Repository Commit 프로젝트 우클릭 > team > Synchronize with Repository 원격 Repository와 싱크 맞추기. Team Synchronizing Perspective에서 화살표(기호) 확인 Referencese 참고! References. https://mchch.tistory.com/256 https://dlagusgh1.tistory.com/779 공감수 0 댓글수 0 2023. 1. 15.
[ ERROR ] ClassNotFoundException java.lang.ClassNotFoundException: org.apache.catalina.startup.VersionLoggerListener 기존 프로젝트를 새롭게 import 하고 실행했을 때 발생한 오류이다. 처음에는 maven 오류인줄 알았으나, 해당 프로젝트에서 maven과 gradle을 사용하지 않았다. 그 이후에는 JDK와 tomcat 문제로 생각해 tomcat 다시 생성하고 java build path 수정했는데 오류가 계속 발생했다. stackoverflow와 이 블로그에 따르면 java.lang.ClassNotFoundException: org.apache.catalina.startup.VersionLoggerListener오류는 프로그램 실행 중 객체를 생성할 때 클래스를 찾지.. 공감수 0 댓글수 0 2023. 1. 15.
클라이언트 사이드 렌더링(CSR) 클라이언트 사이드 렌더링(CSR) 클라이언트인 브라우저가 렌더링을 처리하는 방식 서버에서 전체 페이지를 한번 렌더링해 보여주고, 사용자가 요청할 때마다 리소스를 서버에서 제공받아 클라이언트가 해석하고 렌더링하는 방식 브라우저에서 JavaScript로 콘텐츠를 렌더링 하는 것 SPA 트렌드와 CPU 성능 상승 + JS 표준화(리액트, 뷰, 앵귤러등의 프레임 발전)와 함께 본격적으로 시작되었다. ✔ SPA 장점 네이티브 앱과 비슷한 빠른 인터렉션을 구현할 수 있다. View 렌더링을 브라우저에게 담당시키으로서 서버 트래픽을 감소시키고, 사용자에게 더 빠른 인터렉션을 제공한다. 새로고침이 발생하지 않아 사용자가 네이티브 앱과 비슷한 경험을 할 수 있다. 각 클릭이 너무 오래 걸리지 않도록 하는데 도움이 될 수.. 공감수 0 댓글수 0 2023. 1. 15.
검색 엔진 최적화 (SEO) 검색 엔진 최적화 (SEO) Search Engine Optimization 구글, 네이버와 같은 검색엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스를 말한다. 웹사이트나 웹페이지를 검색엔진이 쉽게 발견(discovery)하고, 읽어가서(crawling), 색인하고(indexing), 상위 노출(ranking)시켜 자연 유입되는 트래픽의 양과 질은 높일수 있도록 관련 검색 알고리즘의 특성을 고려해 웹사이트의 구조나 콘텐츠를 개선하는 작업 References. https://www.ascentkorea.com/what-is-seo/ 공감수 0 댓글수 0 2023. 1. 15.
서버 사이드 렌더링 (SSR) 서버 사이드 렌더링 (SSR) 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식 JSP/Servlet의 아키텍처에서 클라이언트(브라우저)가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식 클라이언트에서 요청이 들어올 때마다 매번 서버에서 새로운 화면(View)를 만들어 제공 서버가 화면(View)를 그리는 주체가 된다. 장점 첫 페이지 로딩 속도가 클라이언트 사이드 렌더링에 비해 더 빠르다. 해당 첫 페이지에 해당하는 문서만 브라우저에게 전달해 브라우저가 렌더링하기때문에 초기 로딩 속도가 클라이언트 사이드 렌더링에 비해 더 빠르다. 검색엔진최적화(SEO)가 가능 단점 초기 로딩 이후 페이지 이동 시 속도가 다소 느리다. 페이지 이동 시마다 클라이언트가 서버에게 필요.. 공감수 0 댓글수 0 2023. 1. 15.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.