본문 바로가기

웹 프로그래밍96

[LESS] media query, 미디어 쿼리 쓰는 방법 LESS로 미디어 쿼리를 쓰는 방법입니다. 원래의 CSS는 @media screen and (max-width: 1200px) { .top_nav ul { float: none; } } 와 같은 형식으로 써야 합니다. 이것을 LESS로 쓰려면? /* 설정 */ @tablet : "@media screen and (max-width: 1200px)"; /* 사용 */ @tablet { float: none; } /* 결과 */ @tablet { float: none; } 로 설정해서 위와 같은 형식으로 쓰려고 했는데 실제 결과물은 컴파일이 되지 않고 그대로 나옵니다. 그러면 어떻게 해야 하나 찾아보니 생각보다 조금 더 귀찮은 방법으로 해야합니다. @media 쿼리는 써주고, 뒤에 부분만 변수로 만들어서 줄.. 2020. 7. 30.
[LESS] 함수 만들어 쓰기 position: absolute로 이미지를 띄울 일이 많아져서 공통점이 많길래 하나의 함수로 만들어 사용하면 편할 것 같아 만들었습니다. less 함수 // function .absoluteImg(@width,@height,@top,@right,@bottom,@left,@backImg){ position: absolute; width: if(isstring(@width),auto,unit(@width,px)); height: if(isstring(@height),auto,unit(@height,px)); top: if(isstring(@top),auto,unit(@top,px)); right: if(isstring(@right),auto,unit(@right,px)); bottom: if(isstrin.. 2020. 7. 30.
[LESS] less-watch-compiler 사용법 less 설치 // yarn yarn global add less-watch-compiler // npm npm install -g less-watch-compiler less-watch-compiler 설치 // yarn yarn global add less // npm npm install -g less less-watch-compiler.config.json 설정 { "watchFolder": "src", // 보고있을 폴더, less를 보고있는다. "outputFolder": "dist", // 결과물을 낼 폴더, css로 반환한다. "mainFile": "main.less" // watchFolder에서 어떤 파일을 보고 있을것인지. } 이게 제일 기본 config 설정이다. mainFile을 .. 2020. 7. 30.
[Firebase] React 프로젝트 배포하기. firebase deploy 간단하게 포트폴리오를 만들어서 굳이 호스팅사를 찾을 필요 없이 전에 사용해본 Firebase로 간단하게 호스팅을 해보겠습니다. 먼저 파이어베이스 설치 npm install firebase-tools -g 로그인 firebase login 작업하고 있는 리액트 프로젝트 폴더 안에 들어가서 파이어베이스 초기화를 시켜줍니다. firebase init 진행하시겠습니까? Yes 그럼 설정에서 Hosting을 찾아서 스페이스를 누르고 엔터 저는 이미 사용하고 있는 프로젝트가 있어서 Use an existing project 원하는 프로젝트 선택 What do you want to use as your public directory? build build로 하는 이유는 react 프로젝트를 build하고 난 뒤에 b.. 2020. 7. 28.
[JS] JSON 값으로 검색하기 (Array, filter) 결제 페이지를 구성하는 중, 연관되어 있는 값이 너무 많아서 이를 하나의 변수에 담아 통합 관리하려고 합니다. 그 과정에서 배열안에 json 객체로 넣어 관리하게 되었고, 값에 따라 그 객체를 뽑아낼 수 있어야 했습니다. 그 해결 과정을 알아가 봅시다. 주어진 Json 값 아래처럼 Json 값이 주어질 예정입니다. let example = [ { addr: "부산시 동구 초량동", addr_level: "3", code: "1234", price: 3300 }, { addr: "부산시 동구 수영동", addr_level: "3", code: "1234", price: 3300 } ]; example 배열이 있을 때, 두 배열 값의 code가 같습니다. 이럴 땐 한가지 값으로만 빼내긴 불가능해서 'code.. 2020. 7. 28.
[JS] 카카오톡, 페이스북 공유 카카오톡, 페이스북 공유를 할 시간이다. 카카오톡 공유 아래 링크에서 보는게 더 좋을 듯 하다. kakao.init을 한번 해 주고, 하고싶은 메서드를 실행하면 된다. https://developers.kakao.com/docs/latest/ko/message/js#link-without-button Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 페이스북 공유 https://stackoverflow.com/questions/36294821/get-current-page-url-and-append-it-to-facebook-share-link-w.. 2020. 7. 23.
[WEB] IP, 도메인, 네임서버란? IP 인터넷에 연결되어 있는 각 장치가 가지는 주소. ex) 210.89.160.88 도메인 IP는 기억하기 어렵기 때문에 이에 이름을 붙여놓은 것. ex) naver.com 네임서버 영문 도메인을 네 자리의 IP 주소로 매핑시켜 주는 서버. ex) naver.com -> 210.89.160.88 2020. 7. 23.
[JS] 안드로이드, 아이폰, PC 구분하는 방법 WEB API에는 navigator라는 것이 있습니다. 이것을 이용해서 사용자 에이전트의 상태와 신원정보에 대해서 알 수 있습니다. Chrome Console 크롬 콘솔에서 'navigator'라고 치면 간단하게 볼 수 있습니다. 아래에 userAgent라는 정보가 있는데 여기에 android인지, iphone인지 정보가 들어있다. 따라서 // 사용자의 기기 종류 확인 function detectDeviceType() { var userAgent = navigator.userAgent; if (userAgent.match(/Android/i)) { // 안드로이드 기기 return "Android"; } else if (userAgent.match(/iPhone|iPad|iPod/i)) { // 아이폰,.. 2020. 7. 23.
[JS] 문자 공유하기 모바일 웹에서 문자 보내기를 만들어야 합니다. 문자보내기 기본 문법은 이렇습니다. sms: 라고 하면 sms기능을 사용하는 것이고 그 뒤에 전화번호, 그 뒤에 body로 문자 내용을 적습니다. 안드로이드에서는 body앞에 ? 지만, 아이폰에서는 &로 해주어야 합니다. 그렇지 않으면 받는 사람이 ?body=안녕하세요? 가 되어버립니다. 따라서 아이폰에서는 문자보내기 입니다. 나중에 아이폰과 안드로이드를 구분하는 방법을 작성해야겠습니다. https://emessell.tistory.com/179 [JS] 안드로이드, 아이폰, PC웹 구분 WEB API에는 navigator라는 것이 있다. 사용자 에이전트의 상태와 신원정보에 대해서 알 수 있다. 크롬 콘솔에서 간단하게 볼 수 있다. 아래에 userAgent라.. 2020. 7. 16.