Lennon FE

disqus는 서버까지 동원해서 어렵게 댓글 기능을 개발할 필요 없이 코드를 삽입하면 쉽게 댓글 기능을 개발할 수 있도록 나온 서비스이다. 한 번 쉽게 사용해보자! https://disqus.com Disqus – The #1 way to build your audience Disqus offers the best add-on tools for websites to increase engagement. We help publishers power online discussions with comments and earn revenue with native advertising. disqus.com 우선 위 페이지에서 로그인 한다! 1. 아래 "I want to install Disqus on my sit..

HTML은 정보 또는 설계도, CSS는 디자인 또는 스타일링, JS는 기능과 효과를 주는 것이다. 1. 웹을 제작할 때 주의사항! ✔︎ 웹 표준을 따라야 한다. 웹 표준이란? 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격이다. 반드시 지켜야 한다! 는 아니지만 표준을 따르면 검색엔진에 노출이 잘 될 확률이 높아진다. ✔︎ 웹 접근성을 고려해 개발해야 한다. 웹 접근성이란? 내가 만든 웹 사이트를 일반인뿐만 아니라 시각, 청각 등 장애를 가진 분들도 충분히 사용할 수 있도록 하는 것이다. ✔︎ 크로스 브라우징 고려 크로스 브라우징이란? 모든 브라우저(chrome, IE, safari 등등) 또는 기기에서 사이트가 모두 정상적으로 작동해야 한다. 2. HTML이란 웹사이트에서 눈에 보이는 정보..

모두 API 키를 숨기기 위해. env 파일에 api키를 입력하고. gitignore에 지정해 많이 사용할 것이다. const dotenv = require('dotenv'); dotenv.config(); 그리고 dotenv를 작성하고 각각 API키를 process.env.0000를 사용해 호출할 것이다. const port = process.env.PORT || 3000; mongoose.connect( process.env.MONGO_KEY, { useNewUrlParser: true, useUnifiedTopology: true }, function (err) { if (err) { console.error('mongoDB Connection Error!', err); } console.log('..

billboard.js 란? C3.js를 네이버에서 변형하여 불편한 부분을 편리하게 만들어서 오픈소스로 배포한 것이다. 차트를 쉽게 구현할 수 있고, 내부 메서드를 사용해 쉽게 차트를 조작할 수 있다. https://naver.github.io/billboard.js/ billboard.js billboard.js, the "chart" library The name "billboard" comes from the famous "billboard chart" which everybody knows. billboard.js provides the easiest way to create a 'chart' instantly. Quick Start Guide Step 1. Load billboard.js and..

자바스크립트를 사용하다가 2차원 배열을 깊은 복사해야할 상황이 올 수도 있다. 아래처럼 우리가 아는대로 진행하면 원본 배열의 값이 계속 바뀌는 걸 확인할 수 있다. let arr1 = [[1,2,3],[2,3,4]] let arr2 = [...arr1]; arr2[0][0] = 0; console.log(arr1); // [[0,2,3],[2,3,4]] console.log(arr2); // [[0,2,3],[2,3,4]] 이는 큰틀인 arr1만 깊은 복사가 되고 가장 중요한 안의 배열 각 행들은 동일한 값을 참조하고 있다는 걸(얕은 복사) 의미한다. 2중 배열을 깊은 복사하려면 각 행마다 동일하게 깊은 복사 해주면 된다. let arr1 = [[1,2,3],[2,3,4]] let arr2 = arr1...

input date를 활용해 form을 사용하면 submit버튼을 동반하여 서버에 전송해야한다. 이는 웹을 사용하는 사용자의 사용성 측면에서 한 가지 일을 더 해야해 불편함을 초래할 수 있다. 대부분의 사용자들은 날짜를 선택하면 바로 그 날짜에 대한 데이터가 송출되길 바랄 것이다. form인데 submit 버튼이 없다. 날짜를 선택할건데 어떻게 제출 할 수 있을까? 자바스크립트에는 좋은 메소드가 존재한다. $(function () { $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd', onSelect: function () { document.getDate.submit(); }, }); }); datepicker에서 onSelect를 적용해 바로 documen..

API Key를 숨기는 이유?API Key의 대부분은 개인마다 키값이 다르고, 키 값이 악용될 수 있으므로 로컬로 작업할때가 아닌 배포할 때 꼭꼭 숨겨야한다.  대부분 API Key를 숨길 때 키에 대한 .js 파일을 생성하고, .gitignore에 .js 파일을 입력해 깃허브에 commit되지 않도록 방지할 것이다.허나 Netilfy처럼 깃과 연동해 실시간 배포가 이루어지는 방식에선 해당 Key값을 가져오지 못해 예상치못한 오류를 발생시킨다.그렇다고 key값을 깃허브에 공개하는 건 꺼려진다. 우선 시작하기 앞서 깃허브에 저장되어 있는 API key값이 들어있는 .js파일이 .gitignore에 적용되어있는 프로젝트를 Netlify와 연동하고 진행하자.검색하면 쉽게 적용할 수 있을 것이다.Key 숨기기N..