분류 전체보기

** 트러블슈팅 ** 목적 vue-grid-item 이동시 백그라운드로 표시되는 placehold 배경색을 바꾸려고 한다. 방법 해당 아이템의 class로 접근하여 원하는 옵션을 추가한다. 그후 important를 먹이면 기존 클래스의 옵션값이 무시되고 반영된다. .vue-grid-item.vue-grid-placeholder { background: rgb(0 151 255) !important; opacity: 0.1 !important; } 주의* SCSS 스코프 내에 선언할것. *참고링크 https://jbaysolutions.github.io/vue-grid-layout/guide/styling.html#placeholder

div 영역을 클릭했을때 선택된듯한 시각적 효과를 주려고한다. 따라서 focus와 blur를 사용하고자 한다. * focus 이벤트는 요소가 포커스를 받을 때, blur 이벤트는 포커스를 잃을 때 발생한다. * 트러블 div 객체를 가져온 후 .focus() 메소드를 수행시켰으나 전혀 먹지 않았다. 그 이유는 다음과 같다. ** 대다수의 요소는 기본적으로 포커싱을 지원하지 않기 때문이다. 포커싱을 지원하지 않는 요소 목록은 브라우저마다 다르긴 하지만 한 가지 확실한 것은 , , , 와 같이 사용자가 웹 페이지와 상호작용 할 수 있게 도와주는 요소는 focus, blur를 지원한다는 사실이다. 반면 , , 같이 무언가를 표시하는 용도로 사용하는 요소들은 포커싱을 지원하지 않는다. 따라서 이런 요소엔 ele..

에러 프로젝트 라우터 이동시 콘솔에 다음과같은 에러가 발생했다. Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/test". 이는 같은 라우터로 router.push('path')를 하게될때 발생한다. 위의 경우는 /test 링크에서 /test로 이동하려 할때 발생하는 에러이다. 해결방법 1 $router.push()의 에러 예외처리가 되지 않아 기본으로 콘솔에 에러가 찍힌다. catch문으로 위 에러를 잡아주는 방법이 있다. this.$router.push('/') 에서 this.$router.push('/').catch(()=>{}); 로 catch만 추가해주면된다. 하지만 이방..

HTTP 에 관한 글은 아래를 참고하면 된다. https://pro-jm.tistory.com/81?category=1119368 [CS] HTTP란? 📝HTTP란? Hyper Text Transfer Protocol라는 뜻으로 웹에서 데이터를 주고받울 수 있는 네트워크 프로토콜이다. 여기서 프로토콜은 규칙이라고 보면 된다. 이렇게 네트워크 규칙을 정해둠으로써 모든 pro-jm.tistory.com 웹소켓 이전에 HTTP에 대해 간단히 요약하자면, 브라우저에서 서버로 데이터를 요청할때 HTTP 방식을 활용한다. 단 해당 방식은 클라이언트 단에서 서버로 요청을 하고, 서버에서 클라이언트로 응답을 하는 방식이다. 클라이언트에서 요청이 없다면 서버에서는 클라이언트로 스스로 응답을 보내지 않는다. 따라서 HTT..

프로젝트에서 미사용 패키지를 정리하면서 문득 package-lock.json이 정확히 어떤 역할을 하는지 궁금해졌다. 따라서 package-lock.json에 대해 정리해보려고 한다. package-lock.json 파일은 언제 생기는걸까? 새로운 패키지를 설치하면 package.json 파일에 해당 패키지의 버전 정보가 저장된다. package-lock.json은 mode_modules 폴더나 package.json 이 수정되고 생성될 때 자동으로 생성된다. package-lock.json 에는 의존성에 대한 정확하고 구체적인 정보를 담게된다. 즉, npm install 명령어를 수행할때 생성되는 파일인 것이다. 이렇게 package-lock.json 이 생성되면 npm install 명령어로 생성하는..

📝HTTP란? Hyper Text Transfer Protocol라는 뜻으로 웹에서 데이터를 주고받울 수 있는 네트워크 프로토콜이다. 여기서 프로토콜은 규칙이라고 보면 된다. 이렇게 네트워크 규칙을 정해둠으로써 모든 프로그램이 해당 규칙에 맞추어 정보 교환을 가능하게 하는것이다. 나는 웹 개발자로서 클라이언트와 서버간 데이터를 전송해야하기에, 가장 중요한것중 하나인 HTTP에 대해 정리하려고 한다. (데이터 통신시 CORS, CORB와 같은 에러들도 해당 지식만 잘 안다면 충분히 해결이 가능하다) http는 주로 80번 포트를 사용하여 서비스가 된다. 반면 https는 보안이 강화된 프로토콜로 기본 443 포트를 이용한다. 쉽게 정리하자면, 내 컴퓨터에서 서버로 데이터를 요청할때 HTTP 형식임을 주소창..

컴퓨터에는 다양한 기억장치(= 메모리)가 있다. 그 종류는 RAM, 캐시, 레지스터 등 이 있다. 메모리의 계층 구조는 다음과 같다. RAM은 아래 링크에 정리해두었다. https://pro-jm.tistory.com/78 [컴퓨터구조] RAM이란 무엇인가? DRAM과 SRAM의 차이 (캐시메모리) 📝램(RAM)이란? 컴퓨터에서 어떤 작업을 실행할때 모든 프로그램에 대한 데이터를 저장할 공간이 필요하다. 일반적으로 이러한 작업은 하드디스크(HDD)에 저장된다. 하지만 CPU의 속도를 HDD가 pro-jm.tistory.com 📝 레지스터와 캐시메모리와 버퍼 📌레지스터란? CPU 안에 자리하고 있는 메모리로 일반 메모리보다 훨신 빠른 속도로 접근할 수 있는 고속의 기억장치이다. 레지스터는 CPU가 요청을 ..

📝램(RAM)이란? 컴퓨터에서 어떤 작업을 실행할때 모든 프로그램에 대한 데이터를 저장할 공간이 필요하다. 일반적으로 이러한 작업은 하드디스크(HDD)에 저장된다. 하지만 CPU의 속도를 HDD가 따라오기엔 너무 느리기에 RAM이라는 장치가 탄생했다. 램이란 CPU와 하드디스크 사이에 또하나의 특별한 기억장치라고 생각하면 된다. 📝램 특징 램이란 전원이 끊어지면 휘발유처럼 기록된 정보가 날아가기 때문에 휘발성 메모리라고 한다. RAM은 컴퓨터의 주기억장치로 사용된다. 대표적인 RAM 종류에는 DRAM(dynamic)과 SRAM(static)이 있다. 📌DRAM DRAM은 축전기로 작동하는 방식이다. 축전기란 시간이 지나면서 방전된다는 것이다. 즉 시간의 흐름에 따라 메모리가 변화한다는 뜻이다. 때문에 동..