개발로그

얼마전 Chart.js로 그래프 작업을 하면서 겪었던 황당한 버그였는데 혼자 몇 분간 삽질하다가 구글에 검색해보니 생각보다 간단하고 명확한 이유여서 빠르게 해결할 수 있었다. 한 캔버스에서 일간, 주간, 월간 버튼을 클릭할 때 마다 다르게 보여지게 구현해야해서 하나의 변수에 그래프 데이터를 저장해두고 사용자 이벤트가 발생할 때 마다 해당 변수의 datasets 프로퍼티에 그래프 데이터를 할당해주었는데 그래프의 특정 포인트에 마우스 오버 할 때 마다 이전 데이터가 화면에 나타나는 것이다. (예를 들어, 월간 클릭된 상태인데 처음에 로드한 일간 데이터 바뀜) 게다가 마우스를 움직이면 또 새로운 그래프로 나왔다가 왔다갔다 함... 처음엔 너무 황당한 버그라서 어디서부터 손을 대야할지도 몰랐는데, 검색하니 바로..

출처 : http://www.freesens.com/x/?p=835">http://www.freesens.com/x/?p=835 테스트 환경에서 작업하다보면 무의미한 경로를 집어넣어놔서 불러오기를 실패하는 경우가 많은데, 태그는 src로 불러올 때 실패할 경우 onerror 속성을 추가해서 디폴트 이미지를 보여주게 처리하면 된다. 그런데 background-image 로 처리할 경우, 불러오기 실패했을 때 어떻게 처리해야하나 찾아봤더니 생각보다 너무 쉽고 간편하고 명확한 방법이 있었다. .bg-item1{ background-image: url('../../images/home/main/main-b-2.png'), url('../../images/home/main/main-b-1.png'); } 이렇게 ..

Chart.js를 이용해서 그래프를 그릴 경우, 태그에다가 그려넣기 때문에 사이즈 조절을 하려면 canvas태그를 감싸고 있는 태그의 크기를 조정해줘야만 반영된다. 그러나 가끔 라벨의 길이가 길어지면 canvas 영역을 벗어나는 경우가 생기는데, chart.js에서 라벨의 위치를 조정하는 옵션은 따로 제공하지 않는것 같다. (당연히 있을줄 알고 문서를 뒤지느라 시간이 좀 걸렸다.) 아무튼 검색을 거듭한 끝에 스택오버플로우에서 발견한 방법으로 해결했는데, 좀 꼼수같긴 하지만 가장 확실한 방법이기도 하다. labels: ['라벨1 ', ' 라벨2'], 이렇게 라벨에 공백을 주어서 글자가 안잘려 보이도록 하는것!! 오른쪽이 잘린다면 뒤에 공백, 왼쪽이 잘린다면 앞에 공백. 완전히 꼼수이지만 똑똑한 발상이다....

Access to XMLHttpRequest at '[요청한 API 주소](서버측)' from origin '[현재 내 주소](클라이언트측)' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. (웨일브라우저) -최근 크롬이 개발자도구만 키면 로그인세션이 해제되서 무한 로그인페이지로 이동하는 현상이 나타나서 어쩔수 없이 크롬과 동일한 개발자도구를 사용하는 웨일브라우저로 작업하고있다. 이미지를 불러오려고 로컬 서버에서 테스트 서버로 ajax 요청을 보냈더니 위와 같은 에러가 났다. 외부서버로 요청이 안되는 것은 자바스크립트 엔진 표준 스펙에 동일 출처 정책 (s..

이 글은 Roland씨의 'Deploy vue-cli 3 project to github pages' 포스팅을 번역한 글입니다. Vue CLI 공식 홈페이지 github pages 배포 방법을 참고하였고, 제가 겪은 경험을 바탕으로 약간의 각색을 하였습니다. 1. 'gh-pages' 라는 이름으로 새로운 로컬 브랜치를 만드세요. (부모 커밋이 없는 브랜치 생성을 위해 --orphan 옵션 사용) git checkout --orphan gh-pages 2. github 저장소로 가서 해당 저장소 이름을 복사하세요. 저장소 이름은 ‘my-project’ 라고 가정하겠습니다. 3. 프로젝트 폴더 root 디렉토리에 'vue.config.js' 라는 이름의 파일을 만드세요. 4. 'vue.config.js' 파..

해당 글은 인프런 [Vue.js 완벽가이드] 강좌에 올린 질문과 그에 대한 답변을 기록하였습니다. 질문 안녕하세요. 강의 잘 듣고 있습니다 :) 강의 중에 this.$store.state.user 부분을 줄이기 위해 computed를 사용하시면서 템플릿 부분 텍스트를 깔끔하게 하기 위해 computed를 거치는 것은 Vue.js 공식가이드에 나와있는 방식이라고 하셨는데, 그러면 mapState나 mapGetters는 언제 써야 하는것인가요? 물론 모든 방법이 다 의도한대로 작동할 것임은 알지만 제가 vuex 공식문서에서 본 바로는 "컴포넌트가 여러 저장소 상태 속성이나 getter를 사용해야하는 경우 계산된 속성을 모두 선언하면 반복적이고 장황해집니다. 이를 처리하기 위해 우리는 계산된 getter 함수..

JavaScript Engine 이란? 자바스크립트 엔진은 자바스크립트 코드를 해석하고 실행하는 인터프리터다. (한 번에 모든 코드를 해석하는 것은 컴파일방식, 한 줄 한 줄 동시통역처럼 해석하는 것은 인터프리트방식) HTML과 CSS를 분석해서 화면을 그려주는 렌더링 엔진(Rendering Engine) 과는 다르다. 자바스크립트를 실행하는 환경(주로 web 또는 node.js)에서 자바스크립트 코드를 해석하여 실행하는 도구다. 자바스크립트 엔진은 크게 3가지 분류로 나눌 수 있다. Stack Heap Queue 여기에 추가로 이벤트 루프(Event Loop)가 들어가게 된다. Stack call stack은 함수(요청)가 호출될 때 마다 요청들을 순차적으로 쌓아두고 처리한다. 자료구조에서의 스택처럼 ..

이 글은 한재엽님의 블로그 글 신입 프론트엔드 개발자가 되려면 무엇을 학습해야 하나요? 를 바탕으로 하되, 제 기준과 생각을 추가하여 작성하였습니다. 하루에 이론공부 2시간(용어 학습 또는 CS지식 등 실습을 제외한 공부), 실습 4시간을 목표로 한다. 모든 용어나 명세 등은 키워드만 듣고도 설명할 수 있는 수준으로 충분히 이해될 때 까지 학습한다. (외우는것 X) #1 언어 및 웹문서(Document) 관련 공부 1. HTML/CSS HTML/CSS 기본 - 명세 읽기 웹 접근성 크로스 브라우징 이슈 (정의와 특징적인 이슈 또는 내가 경험했던 이슈) CSS 방법론 CSS Grid Layout CSS Media Query CSS3 Animation / Transition CSS 전처리기 (사용 이유, 역..