STUDY/JavaScript (13) 썸네일형 리스트형 JS | Github pages 배포방법 정리 매일 까먹는다.. 정리를 해놓자!! build npm run build 명령어를 통해 빌드를 한다. /dist폴더에 빌드 결과물이 생길 것 pages배포를 위한 branch를 생성 gh-pages라는 이름의 브랜치가 있으면, 깃헙에서 알아서 pages배포용 브랜치라는 것을 알아먹는다.. 멋져... 브랜치를 dist폴더에서 생성할 것이기 때문에! 우선 프로젝트 경로에서 dist로 이동한다. $ cd dist 그리고 git과 연동을 위해 init해주고, 커밋할 파일들을 모두 추가한다 git add 한 번의 커밋은 있어야 브랜치가 만들어지므로 커밋부터 하고, gh-pages 브랜치를 생성한다. $ git init $ git add . $ git commit -m "commit message" $ git bra.. JS | 자바스크립트 프로젝트 시작하기(?) 프로젝트 생성부터 핫리로드까지.. 설정을 해보자 요즘 하도 스프링부트만 해서 자바스크립트를 공부하고싶어졌다... 그립네... npm 설치 node를 설치해서 npm도 함께 설치하자! 프로젝트 폴더 생성 mkdir는 폴더를 생성하는 명령어다. $ mkdir [projectfoldername]npm init npm init으로 여러 라이브러리를 사용할 준비를 해보자.. package.json파일이 생성되면 성공 $ cd [projectfoldername] $ npm initbabel 설치 babel은 뭔지 다들 알테지..? babel은 ES6이상 문법을 사용해 코드를 작성하면 어떤 브라우저들은 인식하지 못하기 때문에 es6문법을 es5문법으로 뾰로롱 변환해준다. 그냥 바벨을 사용하고, ES6문법으로 편하게 .. JS | 슬랙 봇 만들기 (Slack bot | 슬랙 연동 | React) 0. slack api에서 앱 생성 슬랙 봇을 테스트할 app을 생성해야 함 새 HQ에 오신 것을 환영합니다. Slack은 여러분의 팀과 소통할 새로운 방법입니다. 이메일보다 빠르고, 더 조직적이며, 훨씬 안전합니다. slack.com Start Building또는 YourApps를 클릭 (YourApps를 클릭했을 경우 초록색의 Create New App을 다시 눌러줘야 함) ✔️App Name은 말그대로 앱 이름인데 봇의 이름이라고 생각하면 됨 ✔️Development Slack Workspace는 슬랙 봇을 사용할 슬랙의 워크스페이스를 선택 사용할 기능을 선택 (이미 만들어두었던 app이라 화면이 조금 다를 수 있음) 1. 앱 설치 및 토큰발급 OAuth & Permissions에서 토큰을 발급받을.. JS | URLSearchParams URL쿼리 스트링을 만들어주는 URLSearchParams인터페이스를 사용해봤다! new 연산자로 생성해주기 const params = new URLSearchParams(); 사용법은 굉장히 다양한데 나는 배열을 받아 쿼리스트링으로 만들 때 사용했다. 배열을 map으로 돌려서 URLSearchParams로 쿼리스트링으로 만들어준다. categories = new URLSearchParams( category.map((ctg) => ["category", ctg]) ).toString(); +) 참고 URLSearchParams in JavaScript Learn about how to use URLSearchParams to query url. medium.com JS | 자주쓰는 정규식 (콤마찍기, 숫자만 입력받기 등) / 함수 세 자리 콤마찍기 + 그냥 콤마 찍을 땐 toLocaleString()이 편하다 이건 input값 계속 변경되게하려고 사용 export const numberWithCommas = (num) => { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }; 콤마 지우기 위에서 찍은 콤마 다 제거해서 저장해야 하니까.. export const deleteCommas = (str) => { return str.replace(/,/g, ""); }; 숫자(정수)만 입력받기 +replace(/(\.*)이 부분에 . 추가하면 소수까지 가넝한 export const onlyNumber = (str) => { return str.replace(/[^0-9.]/.. JS | axios interceptors axios의 interceptors는 then혹은 catch전에 실행된다. request는 요청 전에, response는 응답 전에 (정확히는 요청/응답 후 then실행 전) 사용 catch전에 error가 401(UNAUTHORIZED)일 경우에 대해 핸들링해줬다. 저 http는 action전체에서 사용하고 있기 때문에, 모든 action에서 사용하는 axios요청들은 저 interceptors를 거치게 된다. const http = axios.create({ baseURL: SERVER_URL, }); http.interceptors.response.use( (res) => { return res; }, (e) => { if (e.response.status === 401) { // status가 4.. JS | Map 자바스크립트로 Map은 처음 사용해봐서 정리해보고자 한다. Map생성 new를 이용해 Map object를 생성한다. let namesMap = new Map(); 값 넣기(set) set을 이용해 넣는다. Map이기 때문에 당연히 key와 value의 쌍으로 데이터를 넣어주어야 하며 key값은 중복을 허용하지 않는다. // set([key], [value]) namesMap.set("Oladipo", 4); namesMap.set("Westbrook", 0); 값 얻기(get) get을 이용해 가져온다. key가 Map에서 유일한 식별자이므로 key를 이용해 가져온다. console.log(namesMap.get("Oladipo"));// 4가 출력된다. 해당 값이 있는지 확인(has) has를 통해 .. JS | 자식 노드들 한 번에 지우기 부모 노드에 있는 모든 자식 노드를 한 번에 지우기 위해 while문으로 지워준다! // parentNode const contentsList = document.querySelector(".contents__list"); if(contentsList.hasChildNodes()){ // lastChilde로 해도 가능 let firstChild = contentsList.firstChild; while(firstChild){ contentsList.removeChild(firstChild); firstChild = contentsList.firstChild; } } 이 방법도 있음(뭔가 별로라 해보지는 않았지만) const parent = document.querySelector(".contentsWr.. 이전 1 2 다음
