개발로그

출처 : 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..

오늘 한 일 it 관련 컨퍼런스나 행사 관련한 소식을 다양하게 접하기 위해 프론트엔드 오픈채팅방에 질문하여 다양한 사이트를 수집하였다. (Festa, 이벤터스, 온오프믹스, meetup 등..) 또한 아깝게 놓친 좋은 컨퍼런스나 새로운 활동 모집 등이 많아서 안타까운 마음에 급하게 페이스북을 다운받아 여러 그룹을 팔로잉하고 알람을 켜두었다. 몇일 전 슬랙도 다운받아서 이상한 모임에 가입했다. 몇달 전에 사둔 Node.js 교과서 책을 이제야 정독하기 시작했다. 현재 [3장 노드 기능 알아보기] 읽는 중. 최근 포트폴리오를 새로 만들고 이력서도 새로 쓰느라 블로그를 소홀히 한 것 같아 오랜만에 TIL 작성중이다. 공부 내용이 별로 없어서 바로 느낀점. 지난 토요일 패스트캠퍼스 PWA 수업에 가서 온라인으로..

이 글은 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' 파..

오늘 한 일 생활코딩 Python 수업, URL query string 가져오기 실습 및 CGI 소개 강의 완료. 멜론 노래 검색 정보 크롤링 시도했으나, api 전송시 status가 406으로 나와서 아직 미해결 상태. 공부 내용 오늘 Python으로 URL query string 가져오는 실습 중에 어처구니 없는 에러가 발생하는 바람에 시간을 좀 허비했다. 기존 index.py 파일에 cgi 모듈을 불러와서 새로고침을 누르니 이전에 내가 실습한 string.py 파일의 출력결과가 나오는것이다...! 에러도 아니고 내가 작성한 다른 파일이 나오다니... 정말 생전 처음 겪는 상황이라 너무 당황스러웠다. URL 창에 index.py를 열심히 다시 쳐봐도 계속 string.py 파일 결과가 나오고, str..

오늘 한 일 프론트엔드 체크리스트 head 부분 한 번 훑듯이 읽음. 생활코딩 Python 강의 수강 시작. python2와 3의 차이점을 대략 알게되었고, 문자열 formatting과 CGI를 이용하여 웹페이지를 띄우는 방법을 배움. 음악 관련 api를 가지고 [노래 듣고 빨리맞추기] 게임을 만들어보려고 찾아보았으나, 멜론은 작년 3월을 마지막으로 오픈 API를 중단했고 네이버 뮤직도 공개한 api가 없다는 사실을 알게됨. 그러다가 우연히 파이썬으로 멜론 노래 크롤링 하는 영상을 보게됨. 크롤링은 언젠간 도전해봐야지 하면서도 고난도의 작업이라 생각해 항상 미뤄왔었는데 이 영상을 보고 도전해볼 마음이 생김.

오늘 한 일 인프런 [Vue.js 완벽 가이드] 완강. 자바스크립트 노랭이 책 9장 [클라이언트 탐지] 요약본 1회독. 공부 내용 컴포넌트 디자인 패턴 컴포넌트 디자인 패턴은 총 4가지가 있다. common, slot, controlled, renderless common - 일반적인 컴포넌트 등록과 컴포넌트 데이터 통신 방식 slot - 슬롯 속성을 이용하여 컴포넌트의 독립성과 확장성을 키운다. 예를 들어 부모 컴포넌트에서 마크업 확장 가능. controlled - 컨트롤 태그(체크박스나 라디오버튼 등)를 컴포넌트화할 때 유용(?) 결합력을 높이는 방법인데 사실 이부분은 아직 잘 모르겠다... renderless - render() 함수를 이용하여 템플릿 없이 스크립트 태그로만 렌더링하는 방식이다. 데..