2022/07 6

[Notion] 노션 데이터베이스 사이드 보기 기능 추가 (업데이트 알림)

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

etc./Notion 2022.07.26

[javascript] 배열 내 특정 객체 값 제거하는 방법(splice 이용하기)

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

FrontEnd/Javascript 2022.07.20

[javascript] 빈객체 if문으로 확인하는 방법 ({} check / Object.keys 주의사항)

자바스크립트에서 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객체에..

FrontEnd/Javascript 2022.07.19

[vue.js] input 에서 이미지 업로드 벨리데이션 처리

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

FrontEnd/Javascript 2022.07.12

[Nuxt]다음 카카오 우편번호 서비스 Vue 프로젝트에 연동하기

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

FrontEnd/Vue.js 2022.07.05

서버리스 컴퓨팅이란? - 서버리스 개념과 AWS Lambda(람다) 서비스 알아보기

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

FrontEnd 2022.07.03