김평범's OrdinaryCode

많이 사용하는 datepicker 중 bootstrap datepicker가 있다. 필요한 모든 기능들이 제공되어서 꾸준히 사용하고 있는 datepicker! 📌공식사이트는 아래 링크 참고 https://getdatepicker.com/4/ https://getdatepicker.com/4/ Get awesome Dashboard Templates Looking for a template with the datepicker ready to go? Then get check out these templates from our partners. getdatepicker.com https://www.npmjs.com/package/vue-bootstrap-datetimepicker vue-bootstrap-d..

vue.js에서 v-if 조건 중 filter를 통해 정제된 데이터 값이랑 비교하고 싶을 때가 있다. 📌v-if문 시 filter로 이용한 데이터 값 조건으로 넣어주기 v-if="$options.filters.필터명(필터파라미터)" 샘플 코드 filter를 통해서 user레벨을 확인한 뒤 그에 따른 인사말을 v-if를 이용해서 출력하는 코드이다. 로그인회원 레벨 : {{$options.filters.levelCheck(userList, loginUser.id)}} 안녕하세요! 정회원이시네요! 안녕하세요! 준회원이시네요! 만약 필터를 통해서 준회원인지 정회원인지 확인하고 그에 맞는 텍스트를 보여줘야 하는 상황이라면 회원 레벨을 체크하는 필터를 만든 뒤 v-if에서 user를 확인해서 출력된 level 값에..

css 작성하다 보면, 자식 선택자를 선택하는 것은 매우 잘되어있는데, 부모에서 밑에 해당 자식이 있는 경우 작동하게 하는 방법이 딱히 없는 것 같아서 찾아보았다. 필요한 상황 예를 들어 ul li 구조에서 a태그 내. active 클래스가 활성화되었을 때 li 태그에 css를 주고 싶은 상황이다. 📌자식선택자 선택하기 li밑에 있는. active class를 가진 a태그에 css를 주는 것은 매우 간단하다. ul li a.active { color:skyblue; } ul 태그 안에 li태그 안에 a.active가 되어있는 태그를 찾는 방법이다. 그냥 depth순서대로 작성해주면 해당 태그를 선택해서 css를 적용할 수 있다. ✨특정 자식선택자를 가진 부모 태그 선택하기 반면 li 태그중 .acitve..

Notion에서 오랜만에 눈에 띄는 업데이트가 나왔다. 오늘은 노션 사이드 보기 기능에 대해서 알아보기로 하겠다. 📌노션 데이터베이스 기능을 아직 잘 모른다면? https://ordinary-code.tistory.com/31 [Notion] 노션에서 데이터베이스(표) 기초 사용법 이해하기 우리가 작성하는 메모 앱에서 원하는 기능 중 하나는 표이다. 표의 경우, 많은 사람들이 내용을 작성하는데 자주 이용하는 포맷인데, 대부분 사람들이 엑셀을 많이 사용하기 때문에 엑셀에서 사 ordinary-code.tistory.com ✨노션 사이드보기 업데이트 노션의 데이터베이스는 하나의 페이지로 이루어진다. 노션의 표를 클릭하면 보통 중앙에 팝업이 뜨는 형태로 볼 수 있었는데 이번 업데이트로 사이드로 데이터베이스 표..

javascript 내에서 배열을 조작해야 되는 것 중 내가 원하는 값을 지우고 싶을 때가 있다. 이때 이용하는 것이 바로 splice() ✂ Array.splice() 배열 뒤 splice를 이용하면 기존 요소를 삭제하거나 교체하는 것이 가능하다. array.splice(시작 index, 제거 index, 추가 요소) 시작 index 배열 변경을 시작할 index 번호를 입력한다. 제거 index 0을 입력하면 어떤 요소도 제거되지 않으며, 특정수를 입력하면 start 이후부터 해당 수만큼 요소가 제거된다. 추가 요소 배열에 새로 추가될 요소가 들어간다. 만약 입력이 없다면 제거만 되고 새로운 요소는 추가되지 않는다. 샘플 코드 let obj = [ {id:1, name:'apple'}, {id:2, ..

자바스크립트에서 default 객체를 선언하는 방법은 아래와 같다. const obj = {}; 이후 로직에서 obj 객체에 key,value가 세팅이 되었는지 아닌지 체크하는 방법이 필요해서 찾아보게되었다. 🧡Object.keys 이용하기 Object.keys()를 이용하면 주어진 객체의 key 이름을 배열로 반환한다. Object.keys(obj) //빈객체일 경우 [], key가 있는경우 [id,name] 해당 기능을 이용해서 if문처리가 가능하다. 예시코드 let obj = {} obj ={ id:1, name:one } if(Object.keys(obj).length !== 0) { alert("빈객체아님!") } 위 예시로 빈객체인지 아닌지 확인이 가능하다! ✅사용시 주의사항 만약 obj객체에..

프로젝트를 진행하다 보면 이미지를 업로드해서 프로필 사진을 적용한다던지 하는 기능을 만들 경우가 있다. 오늘은 input 으로 받은 이미지를 밸리데이션으로 체크하는 샘플 코드를 작성해보았다. ⚠️이미지 업로드 시 주의 사항 동일한 파일이 업로드 되었을 때 어떤 식으로 처리할 것인지 파일 용량이 큰 파일 업로드를 허용할지 아닐지 이미지 업로드 시 확장자는 어디까지 받을 것인지 이러한 부분을 고려를 해서 개발을 해야 한다. ✨이미지 파일 업로드받기 이미지 파일을 업로드받으려면 input type을 file로 변경하면 윈도 파일 브라우저가 뜨는 input 박스가 생성된다. input accept 처리하기 만약 파일 처리에서 accept 속성을 넣으면 여기서 적용시킨 형태의 파일만 파일 브라우저에서 뜨게 된다...

주소 검색해서 입력하는 사이트에서 자주 보는 카카오 우편번호 서비스가 이번 프로젝트에 필요해서 연동해보기로 했다. 🔎카카오 우편번호 서비스 카카오우편번호 서비스는 키를 발급할 필요도 없고 사용량 제한도 없고 기업도 무료료 사용할 수 있다.👍 🔑카카오 우편번호 서비스 스크립트 연동하기 카카오 우편서비스는 사용법도 너무 간단하다! 제공되는 자바스크립트 파일을 추가한 다음 바로 실행이 가능하다. 우편번호 서비스 연동 자바스크립트 샘플 코드 // 버튼 클릭 시 주소검색 팝업 띄우기 주소검색 onComplete data 형태 주소를 선택 한 다음 들어오는 결과 화면이다. address 에서 주소를 이용할 수 있고 addressEnglish에는 영어 주소도 들어와 있다. zonecode는 우편번호이다.

🤔서버리스 컴퓨팅(Serverless computing)이란? 서버리스 컴퓨팅이란 보통 클라우드 모델 중하나이다. 단어 자체로는 서버리스이지만, 실제로는 서버는 존재하나 서버에 관련된 부분을 크게 신경 쓰지 않아도 된다라는 의미로 서버리스라는 단어를 사용한다. 클라우드 서비스 플랫폼에 서버리스 컴퓨팅을 제공하는 서비스에 소스를 올리게 되면 바로 애플리케이션이 돌아가게 된다. 서버리스 컴퓨팅을 이용하면 서버를 구매할 필요도 없으며, 배포 후에 user 수에 따른 스케일링이라던지 프로비저닝도 자동으로 제공되어 소스 외 서버에 관련된 부분은 개발자가 신경 쓸 필요가 없다는 것이 장점이다. ✨AWS Lambda 아마존 람다는 아마존 웹서비스에서 제공하는 서버리스 클라우팅 서비스이다. 아마존 람다는 서버를 프로비..

어느 순간부터인가 크롬 브라우저에서 클릭을 하면 자꾸 커서 깜빡이는 현상이 나왔다. 사실 귀찮아서 그냥 쓰고 있었다가 오늘은 개발할 때 갑자기 너무 신경이 쓰여서 미뤄두었던 해결 방법을 찾기로 했다. 해당 기능은 크롬 브라우저에서 제공하는 기능이다. 👏크롬 브라우저 텍스트 커서 제거 단축키 간단히 없애려면 F7을 누르면 된다. F7을 누르면 해당 기능을 껐다가 켰다할 수 있다. 😃텍스트 커서로 페이지 탐색 기능 OFF 하기 먼저 해당 기능은 우측 상단 점3개를 클릭하면 설정 메뉴에 들어갈 수 있다. 일단 크롬 브라우저에서 설정 > 접근성 메뉴에 들어가면 텍스트 커서로 페이지 탐색 기능을 OFF 하면 더 이상 클릭 시 커서 깜빡임이 없어지는 것을 확인할 수 있다. 그럼 왜 해당 기능이 필요한 것일까? 🥕캐..