본문 바로가기

전체 글399

[javsscript] es6 dynamic import 이전 포스팅에서 import와 export 사용법을 설명했다. 하지만 import를 선언하면서 모든 스크립트를 동시에 가져온다면 로딩 시간이 길어질 수 밖에 없다. es6에서는 이점을 보완하기 위해 필요한 스크립트만 가져와서 사용하도록 dynamic import를 정의했다. 사용법은 간단하다. import('./ImportClass.js'); 위와 같이 import안에 import할 module명을 넣어 주면 된다. 그러면 return 값으로 Promise 객체를 받는다. 이제 class 객체를 생성하여 사용해보자. export default class ImportClass { constructor() { console.log('import!'); } }import('./ImportClass').then.. 2018. 8. 12.
[javascript] es6 export, import 사용하기 javascript 의 export와 import는 es6(es2015) 에서 모듈 시스템을 이용하여 사용하기 위해 정의된 API이다. 하지만 몇몇 브라우저에서는 아직 지원하지 않기 때문에 webpack같은 도구를 통한 번들 작업이 필요하다. 이번 포스팅에서는 그 각각의 사용법을 알아보자. 1. export export 는 내부 스크립트 객체를 외부 스크립트로 모듈화하는 것이다. 물론, export를 선언하지 않았으면 외부 스크립트에서 import를 통해 사용할 수 없다. export는 스크립트 내 모든 객체에 선언할 수 있다. export 방식에는 Named와 default 방식이 있다. named export 방식 //각각 선언 export const exString = 'string'; export.. 2018. 8. 11.
[javascript] 배열 요소 더하기 문자 연결하기 reduce 개발을 하다 보면 배열 안의 요소를 하나의 문자열로 연결해주거나 모든 값을 더해야하는 상황이 있을 것이다. 심지어, 배열로 이루어진 객체들의 값만 더해야하는 상황도 온다. 배열의 각각의 요소를 이용하여 하나의 값을 구하고 싶을때는 reduce 함수를 사용하면 된다. reduce는 자바스크립트에서 배열 각 요소에 대해서 작성한 함수를 적용하며 하나의 값으로 줄여주는 함수이다. reduce의 사용법이다. [].reduce(function (preValue, currentValue, Index, array) { }, initialValue); preValue : 이전에 반환한 값이다. 처음 시작할 때 initialValue가 존재하지 않으면 index가 0인 요소부터 실행하고, 존재한다면 initialValu.. 2018. 8. 11.
[javascript] 글자 수 제한 및 체크하기 javascript로 입력란에 글자 수를 바이트 단위로 세고, 제한하는 방법을 작성하겠다. 아 참고로 바이트가 아닌 글자 수로 제한하고자 한다면 입력 태그에 maxlength 속성을 추가해주면 된다. 영어와 한글은 차지하는 바이트 수가 다르다. 한글은 2바이트, 영어는 1바이트를 차지하고 있다.그러므로 총 바이트를 계산하고자 한다면 이 점을 고려해야 한다. 우선 결과부터 보도록 하자. 0/0 스크립트를 처음 실행하면 글의 최대 바이트 수를 설정한다. 그리고 입력을 할때마다 한글은 2, 영어는 1로 계산이 된다. 이제 30byte 넘게 써보면 alert 창이 뜨면서 다시 내용에 30byte 까지 재작성 된다. 이제 코드를 보자. 0/0 언제나 그렇듯 html코드는 간단 명료 하다. 단지 특별하다면 바이트 .. 2018. 8. 11.
[javascript] 자바스크립트 기반의 pagination 만들기 2편 이전 포스팅에서 스크립트로 작동하는 pagination을 봤다. 이제 그 코드를 파헤쳐 보자.우선 html 부터 보자.보시는 바와 같이 특별한 코드는 없다. 테이블을 만들어주는 table코드안에 필요한 내용들을 넣은 것 뿐이다.하지만 테이블 머릿글은 고정하고 내용만 계속 갱신해주어야 하기 때문에thead와 tbody를 통해 구분해주었다. 번호 내용 이제 스크립트 코드를 순서대로 파헤쳐 보자. 우선 테이블 안에 들어갈 내용부터 객체들로 이루어진 배열로 만들자. 글 내용은 독자들이 편한대로 설정하면 된다 var list = [ {num: 1, content: '가'}, {num: 2, content: '나'}, {num: 3, content: '다'}, {num: 4, content: '라'}, {num: .. 2018. 8. 11.
[javascript] 자바스크립트 기반의 pagination 만들기 1편 보통은 페이징 처리는 서버에서 이루어진다. 하지만 필자는 스크립트에 데이터를 들고 있으면서 페이지 이동 없는 페이징처리가 필요했다. 어쩔 수 없이 자바스크립트로 페이징 처리를 해야겠다. 자바스크립트로 pagination을 적용해보겠다. 우선 결과 부터 보자. 번호 내용 현재 글은 총 31개이고 한페이지에 보여주는 글 수는 5개, 한 블럭에 보여지는 페이지는 3페이지로 설정해보았다.이 설정은 다음 포스팅을 통해 원하는대로 변경이 가능하다는 걸 알 수 있다. 테이블의 머릿글에 체크박스와 번호 내용을 넣었다. 체크 박스를 넣은 이유는 보통 개발하면서 전체 선택을 많이 사용하기 때문에 예시로 넣어 보았다. (사실 번호와 내용만 보여주기에 너무 비어 보여서 추가했다.) 이 포스트에는 pagination을 위한 포.. 2018. 8. 11.
REST 공부 1편 1. REST란? REST는 2000년에 웹 HTTP의 공동 창시자인 로이 필딩의 박사 논문에서 소개한 소프트웨어 아키텍쳐입니다. 로이 필딩은 기존의 웹이 HTTP의 장점을 100퍼센트 활용하지 못하여 그 장점을 살리기 위해 REST를 소개한 것입니다. 당연히 HTTP에 따르는 웹 서비스인 것이겠죠? REST는 4단어의 앞 문자를 따서 요약했다고 생각하시겠지만 단어를 풀어보면 Representational State Transfer 3단어로 이루어져 있습니다. 직역해보면 표현적인 상태 전달이라는 뜻으로 클라이언트가 URL을 통해서 자료를 요청하면 서버가 상태를 바꿔서 표현해주는 것입니다. 위 그림을 이용해 풀어서 설명해보겠습니다. 우선 Resource라는 것은 책의 1페이지 , 사용자 이름이 terry .. 2018. 8. 11.
[블로그 최적화] 2. 네이버 웹마스터도구를 사용하여 네이버 검색에 잘 나오는 블로그 만들기 (feat.티스토리) 티스토리는 다음 연계 서비스이기 때문에 네이버와 구글에서 검색이 잘 되지 않습니다. 네이버와 구글에서 검색이 잘 되게하려면 각각 네이버 웹마스터도구와 구글 서치콘솔(Search Console)에 블로그를 연동해 최적화 해야 합니다. 네이버 최적화를 위해 네이버 웹마스터 도구 에 내 티스토리 블로그를 연동하는 방법에 대해 알아봅시다. 네이버 웹마스터도구에 내 블로그 등록하기 1. 네이버 웹마스터도구를 검색해 들어가거나 아래 링크에 접속해 가입을 한 후 로그인 합니다. 네이버 아이디가 있으신 분들은 기존 네이버 아이디를 사용하시면 됩니다. https://webmastertool.naver.com/ 2. 로그인 하면 아래와 같은 화면이 뜹니다. ① 내 웹사이트 주소를 입력합니다. ② 추가 버튼을 클릭합니다. .. 2018. 8. 10.
[고양이 키우기] 5. 고양이가 먹어도 되는 음식 & 먹으면 안되는 음식 고양이가 먹어도 되는 음식 고양이는 육식동물로, 고단백질 저탄수화물 식이를 하는 것이 이상적입니다. 먹어도 되는 음식이라고 해도 탄수화물을 너무많이 섭취하는 것은 안좋으니 조금만 급여하도록 합니다. 1. 무염 황태, 무염 멸치, 무염 북어 염분 제거를 위해 오래 삶아서 급여 합니다. 2. 락토프리 우유 3. 과일 : 블루베리, 복숭아, 딸기, 배, 파인애플, 코코넛, 망고, 사과, 멜론, 수박, 바나나 씨는 빼고 급여 합니다. 특히 수박과 멜론은 안전합니다. 4. 육류 : 소고기 (날것, 삶은것), 소간 (익혀서), 돼지고기 (삶은 것), 닭가슴살(지방 제거하고 삶아서), 오리고기(지방 제거하고 삶아서) 5. 채소 : 상추, 오이, 당근, 토마토, 완두콩, 브로콜리, 고구마, 호박, 단호박, 샐러리, 시.. 2018. 8. 10.
[블로그 최적화] 사이트맵(Sitemaps) 생성하기 (feat. 티스토리) 블로그 최적화를 위해 Search Console, 네이버 웹마스터 도구에 사이트맵(Sitemaps)를 제출해야 합니다. 사이트맵은 여러 사이트들에서 쉽게 만들 수 있습니다. 사이트맵(Sitemaps) 생성하기 1. https://www.xml-sitemaps.com/ 에 접속합니다. ① 나의 웹사이트 주소를 적어 넣습니다. ② START 버튼을 클릭합니다. 2. 아래 화면으로 넘어갑니다. ① 조금 기다려 위 화면과 같이 Completed!가 뜨게 되면, VIEW SITEMAP DETAILS를 클릭합니다. 3. 아래 화면으로 넘어갑니다. ① 생성된 파일을 다운로드 받기 위해 DOWNLOAD YOUR XML SITEMAP FILE 을 클릭합니다. ② 크롬의 경우 왼쪽 아래와 같이 다운로드 창이 나타나고, 인.. 2018. 8. 9.
[블로그 최적화] 1. 구글 서치콘솔 사용하여 구글 검색에 잘 나오는 블로그 만들기 (feat.티스토리) 티스토리는 다음 연계 서비스이기 때문에 구글과 네이버에서 검색이 잘 되지 않습니다. 구글과 네이버에서 검색이 잘 되게하려면 각각 구글 서치콘솔(Search Console)과 네이버 웹마스터도구에 블로그를 연동해 최적화 해야 합니다. 구글 최적화를 위해 구글 웹마스터도구에 내 티스토리 블로그를 연동하는 방법에 대해 알아봅시다. 서치 콘솔에 내 블로그 등록하기 1. 먼저 구글에서 Search Console을 검색하여 들어가거나 아래 링크에 접속해 가입 후 로그인을 합니다. https://www.google.com/webmasters/tools/home?hl=ko 2. 로그인 하면 아래 화면이 보입니다. ① 오른쪽 위의 속성 추가 버튼을 클릭하면 가운데에 속성 추가 창이 뜹니다. ② 나의 웹사이트를 입력합니다.. 2018. 8. 8.
[고양이 용품] 고양이 사료 슈퍼프리미엄 로얄캐닌 마더&베이비캣(마더앤베이비캣) 후기 고양이 사료등급 1등급 홀리스틱(고단백 그레인프리/저단백 그레인프리/곡물 홀리스틱) * 그레인프리란? 고양이는 육식하는 동물로 곡물 알레르기를 일으키거나 소화하는데 문제가 생길 수 있습니다. 이러한 문제를 최소화 하기 위해 옥수수, 밀, 쌀 등을 사용하지 않은 무곡물 사료입니다. 2등급 수퍼프리미엄 3등급 프리미엄 4등급 보통 사료(마트 사료) 자연 면역력 강화에 도움을 주는 임신,수유기의 어미묘(임신기간과 수유기)와 아기 고양이(생후4주 이후 ~ 4개월 까지)의 전용 사료입니다. 너무 어린 고양이에게 급여시 씹기 힘들어하면 불려서 급여 가능합니다. 원산지는 프랑스 이고, 포장 단위는 2kg, 4kg, 10kg 가 있습니다.(이외의 포장단위는 정품이 아닐 수 있으니 주의하세요.) 1.소화기 건강과 면역강.. 2018. 8. 8.
[고양이 키우기] 4. 고양이 기타 질병 ' 구토 고양이는 음식을 너무 빨리 먹었거나 과식한 경우 혹은 많이 먹은 후 곧바로 뛰어 놀았을 때 구토를 합니다. 혹은 헤어볼, 끈처럼 소화할 수 없는 물건을 삼켰을때도 토하기도 합니다. 가끔씩 구토를 하는 현상은 대부분의 고양이에게 나타나는 평범한 현상입니다. 그러나 너무 잦은 구토는 동물병원에서 반드시 진료를 받아야 합니다. 설사 설사의 원인은 장내 기생충, 상한 음식, 알레르기,과식 등 여러가지 원인이 있습니다. 사료를 급하게 바꿔주었을 경우에도 설사를 유발하기 때문에 사료를 바꿔줄 때는 1:9(새로운 사료:원래 사료) 비율 부터 2:8, 3:7 ~ 9:1 비율로 천천히 섞어가며 바꿔줍니다. 하루 이상 설사를 지속할때는 물을 많이 마시게하고, 음식 급여량을 줄여주거나 중단합니다. 2일 이상 심한 .. 2018. 8. 7.
[고양이 키우기] 3. 고양이 예방접종 새끼 고양이는 출생 전 후 어미로부터 직접 혹은 모유를 통해서 면역을 받습니다.(모체이행항체) 이 항체는 시간에 따라 줄어들므로 2~3개월령부터 백신을 접종해야 합니다. 모든 접종을 완료하기 전까지는 질병전염예방을 위해 접종하지 않은 고양이와의 접촉을 금합니다. 백신은 고양이 질병 예방의 핵심요소입니다. 사람과 마찬가지로 백신은 질병에 노출되기 전에 변역력을 기르기 위해 접종합니다. 백신 중에는 주요 전염병을 예방하기 위해 반드시 접종해야 하는 것과 지역 및 상황에 따라 접종하는 백신이 있습니다. 초기 접종이 끝난 후 재접종은 대게 1년에 한번 하게되며, 수의사가 각 고양이에게 가장 적합한 백신프로그램을 권해 줄 것입니다. 예방접종전 필수 체크 해야할 사항 반드시 수의사 선생님께 건강상태를 체크하고 접종.. 2018. 8. 7.
[고양이 키우기] 2. 아기 고양이 이유식 시작하기 (4주령 ~ 2개월) 아기고양이 새끼고양이 아깽이 돌보기 이유식 시작하기 (4주령 ~ 2개월) 1. 고양이 개월 수 4 주 귀가 거의 다 펴지고 운동능력이 발달해 매우 잽싸게 움직인다. 스스로 배변을 가릴 수 있는 시기이다. 이 때부터, 이유식을 시작할 수 있다. 5~7주 귀가 쫑끗하고, 작지만 운동 능력이 거의 성묘 급으로 발전하게 된다. 8주 어린 고양이는 눈이 파란색이다. 이를 키튼 블루라고 한다. 고양이 종류에 따라 다르지만 눈동자 색에 변화가 나타난다.(푸른색, 노란색 등) 2. 잠을 많이 잔다. 쑥쑥크는 시기여서 잠을 아주 많이잔다. 먹고 자고 싸고 또잔다. 잠을자는 동안 성장하기 때문에 억지로 깨우지말아야 한다. 자신의 은신처에 들어가 있을때 부르지도 쳐다보지도 말고 혼자 쉬게 해줘야 한다. 3. 아기고양이 이유.. 2018. 8. 6.
[고양이 키우기] 1. 아기 고양이 수유하기 (생후 4주 이하) 생후 4주 이하의 아기고양이(새끼 고양이, 아깽이) 를 데려왔다면 알아야 할일들이 몇가지 있다. 1. 고양이 개월 수 1주일미만 아주 작고 눈을 뜨지 못한 상태이다. 2주 눈을 서서히 뜨고 기어다닌다. 귀가 슬슬 펴지기 시작하며 걸으려고 시도한다. 이는 아직 나지 않은 상태이다. 3주 귀가 완전히 펴지지는 않았고, 아장아장 불안하게 걸어다닌다. 이가 살짝 나기 시작한다. 4주 귀가 거의 다 펴지고 운동능력이 발달해 매우 잽싸게 움직인다. 스스로 배변을 가릴 수 있는 시기이다. 이 때부터, 이유식을 시작할 수 있다. 2. 체온유지 아기 고양이에게 체온유지는 상당히 중요하다. 고양이는 어릴 때 체온을 스스로 조절하지 못하는 동물중 하나로 생후 2주 이하의 고양이는 온도가 낮으면 저체온증에 걸리거나 사망에 이.. 2018. 8. 6.
[인터넷으로 돈버는 방법] 제휴마케팅 이란? 인터넷을 활용해 돈을 벌 수 있는 방법을 공부하다가 제휴마케팅이라는 용어를 알게 되었습니다. 용어는 생소하지만 제휴마케팅은 인터넷에서 쉽게 볼 수 있습니다. 홈페이지, 블로그에 삽입한 광고를 통해 수익을 내는 방법입니다. 제휴 마케팅이란? 웹 비즈니스(상품 판매/퐝고) 촉진 기법의 하나로서 웹사이트 발행자가 그의 노력에 의해 파트너의 웹 사이트에 새로 방문자, 회원, 고객, 매출을 발생시키면, 그 웹 사이트 발행자는 소정의 보상을 받는 식의 마케팅 기법입니다. 쉽게 말해, 제휴를 원하는 광고주들이 광고물을 생성하면 마케터들은 광고 장소 (웹사이트, 블로그 등) 에 광고를 게재 마케팅을 제공합니다. 광고로 인해 수익이 발생하면 광고주와 웹사이트 발행자는 수익을 공유하게 됩니다. 대표적인 방법으로는 CPC,.. 2018. 8. 6.

티스토리툴바