728x90 전체 글66 [Vue.js] TypeError: Cannot read properties of undefined (reading '__ob__') 해결방법 시작점 프로젝트 당시 페이지를 이동하면 이전 페이지의 Vue를 destroy하는 과정에서 다음과 같은 에러가 발생했다. 그럼 다음 에러를 해결해보자. 프로젝트 구조 프로젝트 구조는 다음과 같이 Vue 안에 컴포넌트가 있었다. 상품리스트 Vue └ 상품별 뱃지 Vue component 편성표 Vue . . . 상품 리스트 Vue Template 상품별 뱃지 Vue Component 상품리스트 Vue가 destroy될때 우리가 기대하는 Vue의 라이프사이클은 다음과 같다. beforeDestroy 상품 리스트 beforeDestroy 상품별 뱃지 destroyed 상품별 뱃지 deestroyed 상품 리스트 하지만 위에 기대와는 다르게 상품별 뱃지 컴포넌트를 destroyed 하는 과정에서 Type에러가 발.. 2022. 10. 27. will-change를 이용한 하드웨어 가속 하드웨어 가속 하드웨어 가속은 GPU(그래픽 처리 장치)를 이용하여 CPU(중앙 처리 장치)의 처리량을 줄이고, 브라우저 렌더링을 효율화 하는 것을 말한다. 이미지, 영상 등 그래픽 처리에 대한 부분을 GPU로 분산을 하면 모바일 디바이스와 같은 환경에서 CPU에 부하를 줄일 수 있다. 하드웨어 가속을 이용하면 렌더링 될 엘리먼트만 가져와 빠르게 렌더링 처리를 할 수 있게 된다(3D transforms만 적용). CSS animation, transform, transition 속성에 자동으로 GPU 가속이 활성화 되지는 않지만 렌더링 처리 능력을 향상시킬 수 있는 몇가지 속성이 구현되어 있다. docs에 나와있듯 will-change css 속성은 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 .. 2022. 8. 29. Referer Policy 적용하기 혹시 프로젝트를 진행하면서 이미지 url을 통해 접근은 가능하나 개발중인 서비스앱 내부에서는 호출하지 못한 경험이 있는가? 필자는 다음 경험을 Referer policy를 정의하면서 접근할 수 있게 되었다. 브라우저에 직접적으로 접근은 가능하나 내가 개발중인 사이트 또는 특정 사이트에서만 접근하지 못한다면 image url이 저장된 cdn에 설정이 되어있는 것은 아닌지 의심해보며 이 포스팅을 읽고 적용해보자. Referer란? HTTP 요청을 하면 요청한 출처나 URL을 헤더에 담아 전달합니다. 이때 요청한 출처 또는 URL을 Referer 헤더라고 부릅니다. Referer를 통해 접근한 출처를 알 수 있는 유익한 정보이나 자칫 잘못하면 치명적인 정보 노출이 될 수 있다. 다음 예를 살펴보자. - 기본적.. 2022. 4. 29. VSC Live Server 자동 렌더링 비활성화 방법 목표 Visual Studio Code에서 많이 사용하는 Extension인 Live Server는 소스가 변경되면 브라우저 상에 자동으로 랜더링된다. 이 기능은 매우 유용하지만 가끔 자동으로 랜더링되는 기능을 끄고 싶을때 다음과 같이 live server 설정을 변경해주자. 설정 변경 1. VSC Extension 중 live server의 Extension Settings 클릭 2. 검색창에 @ext:ritwickdey.LiveServer 을 입력한 후 아래 캡처 화면처럼 Ignore Files를 찾아 Edit in settings.json 클릭 3. setting.json 파일이 열리면 { } 안에 다음 줄을 추가 "liveServer.settings.ignoreFiles": ["**/*.*"] 4.. 2022. 3. 8. java.util.Optional<T> 이란? Java 8에서 추가된 Optional 클래스는 객체(T)를 감싸주는 Wrapper class이다. 사용 목적 객체(T)가 null이더라도 NullPointerException를 발생시키지 않고 값이 없을 때의 경우를 예외처리 할 수 있다. Optional 기본 예제 Optional optional = Optional.ofNullable("예외처리"); if(optional.isPresent()){ System.out.println(optional.get()); } Optional 활용 예제 Optional optional = Optional.ofNullable(getId()); String id = optional.orElse("Default"); System.out.println(id); // get.. 2021. 12. 22. 세션 클러스터링이란? 세션 클러스터링이란? 세션 클러스터링이란 WAS가 2대 이상 설치가 되어있을 경우 세션을 공유하여 대체된 WAS에도 동일한 세션을 관리하는 것을 의미합니다. 예를 들어 L4 스위치가 사용자를 접속했던 WAS로 유도해주지만 접속자 수가 초과할 경우 다른 WAS를 사용하게 되는데 이때 발생할 수 있는 세션 불일치 문제가 발생할 수 있습니다. 이때 세션 클러스터링을 통해 세션 불일치를 해결해줄 수 있습니다. 클러스터링이란? 여러대의 서버를 한가지 업무를 수행하도록 만든 것입니다. 여러대의 서버를 운용하면 한 DB에서 시스템 장애가 나도 나머지 DB에서 역할을 수행할 수 있도록 하여 지속적인 서비스를 제공할 수 있습니다. (SPOF 방지 - Single Point Of Failure) 클러스터 특징 노드 장애 .. 2021. 11. 10. addEventListener() 사용 방법 오늘은 실무에서 경험한 addEventListener()에 대해 정리하고자 한다. addEventListener()는 나름의 노하우가 아닌 노하우가 필요했다.. 결론부터 정리하자면 addEventListener()를 사용할때는 꼭 removeEventLister()가 필요한지 여부를 생각하고 더 이상 추가해준 이벤트가 필요 없을 시 반드시 제거해주어야 한다. 그 이유는 간단하다. 추가한 이벤트를 제거하지 않고 addEventListener() 로직을 다시 타게 된다면 이벤트가 중복으로 발생할 것이다. 필자 또한 실무에서 해당 문제로 점점 중복된 이벤트가 발생했던 경험이 있다.. 저와 같은 다른 주니어 개발자들은 이런 불상사가 생기지 않기 위해 글을 정리했다. 그럼 이벤트 추가 방법과 제거 방법 모두 살펴.. 2021. 11. 1. 웹 렌더링 과정 목표 웹 렌더링을 이해한다. 렌더링 엔진의 종류(Webkit, Gecko, Blink, Trident .. )를 알아본다. 엔진 종류마다 렌더링 과정을 이해한다. 렌더링 과정 및 브라우저 구조 웹의 렌더링 과정을 이해하기에 앞서 브라우저의 구조와 렌더링 엔진에 관하여 알아두면 좀 더 이해하기 쉬울 것이다. 브라우저는 "사용자가 입력한 URL을 서버에 요청하여 받은 결과를 화면에 보여준다." 여기서 "받은 결과를 화면에 보여주는" 역할을 수행하는 곳이 렌더링 엔진(Rendering Engine)이다. 아래는 브라우저의 구조이다. 렌더링 과정은 크게 다음과 같다. 1. HTML을 Parsing하여 DOM 생성 - Document Object Model 2. CSS로 CSSOM 생성 - CSS Object M.. 2021. 9. 13. 2021 그렙 챌린지 JAVA 1번 회고 시작 2021 그렙 챌린지 1번 문제를 풀어보았다. 유효한 유저 정보를 가지고 입력을 순서대로 했을때 입력이 유효했던 경우를 찾아 내는 것으로 필자는 로그인 여부와 상품을 담은 여부를 변수로 생성하고 조건에 따라 유효성을 판별하였다. 기본 구현 문제였고 배열을 다루는 문제였던 것 같다. 나의 풀이 package test; public class grepp1 { public static void main(String[] args) { String[] infos = {"kim password", "lee abc"}; String[] actions = {"ADD 30", "LOGIN kim abc", "LOGIN lee password", "LOGIN kim password", "LOGIN kim passwo.. 2021. 8. 26. 이전 1 2 3 4 5 6 ··· 8 다음 728x90
