김평범's OrdinaryCode

ES6에서 등장한 자바스크립트 비구조화 할당이 추가되었다. 오늘은 배열과 객체에서 중복을 없애주고 좀 더 간편하게 값을 이용할 수 있는 비구조화할당에 대해서 알아보겠다. 🔗비구조화 할당이란? 배열이나 객체 속성을 해체하여 개별 변수에 값을 담을 수 있는 JavaScript 표현식을 말합니다. 또는 구조 분해 할당이라고 명칭 합니다. 기본 문법 비구조화 할당의 기본 구조는 좌측에는 변수, 우측에는 해당 변수에 넣어지는 값을 표현합니다. 배열의 경우 []를 사용하고, 객체의 경우 {}를 사용한다. 아래처럼 선언하면 결과는 동일하게 나오게 된다. let [x,y] = [1,2]; console.log(x); console.log(y); let {x,y} = {x: 1, y:2}; console.log(x); ..

노션에서 일정관리나 TODOLIST를 관리하는 분들이 많아졌다. 중요한 일정의 경우는 잊지 않게 알람이 필요한 경우가 있다. 노션에서는 알람 기능을 제공한다. 노션 리마인더 리마인더를 추가하면 특정 작업에 대한 알림을 받아 볼 수 있다. 업무의 마감일이 있을 경우 리마인더를 이용해서 알람을 받아 잊어버리는 것을 방지합니다. /리마인더를 입력하면 리마인더를 삽입할 수 있다. 노션 리마인더 사용법 라미인 더를 이용하면 내가 원하는 알람 날짜를 설정할 수 있다 마감일을 잃어버릴 것 같을 때 리마인더를 이용해서 알람 받을 시간을 설정해주자. 리마인더를 이용하면 알람을 언제 받을지를 설정할 수 있다. 원하는 날짜와 시간을 설정하고 리마인더를 눌러준 뒤 언제 알람을 받을지를 설정해줄 수 있다. 알림은 이벤트 정각,..

홈페이지를 만들다 보면 지도를 연동해야 되는 일이 있을 때가 있다. 지도에서 다양한 마커를 지정한다던지 지도에서 특정 기능을 넣어야 된다고 하면 카카오 지도처럼 API를 이용해서 홈페이지에서 지도를 연동해서 사용해도되지만, 가장 간단하게 그냥 주소 위치 정도만 보여주면 된다고 한다라고 하면 구글 지도를 이용하면 매우 간단하게 홈페이지에 지도를 표시할 수 있다. 🧭구글 지도 웹 홈페이지에 넣어주는 방법 구글 지도 정보 가져오기 https://www.google.com/maps Google Maps Find local businesses, view maps and get driving directions in Google Maps. www.google.com 먼저 구글 맵 사이트에 접속해서 내가 원하는 위치..

오늘은 노션에서 지도를 넣어보는 방법에 대해 알아보려고 한다. 지도 데이터의 경우 회사 소개 페이지를 만든다던지, 혹은 나의 맛집 지도를 노션 페이지로 만든다고 하면 지도 데이터가 필요할 때가 있다. 다른 메모어플과 다르게 노션은 지도도 손쉽게 넣을 수 있다. 🧭노션 페이지에 지도 넣는 방법 구글 지도 접속하기 먼저 지도는 구글 지도를 넣어보도록 하겠다. 먼저 구글지도에 접속을 해보자. 구글 지도를 포털에 검색하던지 아래 링크를 눌러서 접속하자 https://www.google.com/maps/@36.6291738,128.3210697,7.72z 구글 지도 내가 원하는 위치 찾기 구글 지도에 들어가면 왼쪽 상단에 주소 검색이 가능하다. 내가 노션에 넣을 주소를 먼저 검색을 한다. 내가 원하는 장소를 선택..

네이버 웨일을 메인 브라우저로 사용하다 보니 내가 쓰기 편하게 이것저것 나에게 맞춰서 바꾸는 중에 가장 많이 쓰는 메뉴인 사이드바 중 도구 모음을 설정해보도록 하려 한다. 네이버 웨일 사이드바 네이버 웨일의 경우 사이드바를 제공한다. 사이드바는 내가 자주 쓰는 기능들을 모아서 보여준다. 사이드바에 주로 쓰는 메뉴를 모아놓으면 편하게 쓸 수 있으나, 만약에 신경 쓰인다고 하면 단축키로 Ctrl + ] 을누르면 사이드 바를 껐다 켰다 할 수 있다. 네이버 웨일 도구 모음 설정하기 내가 사이드바 중 가장 잘 쓰는 것은 도구 모음이다. 도구 모음은 시계, 타이머, 계산기, 달력, 단위 변환, 환율 등의 데이터를 제공한다. 웨일 도구 모음 안 쓰는 메뉴 꺼놓기 사이드 바 도구 모음에는 시계, 알람, 계산기, 달력..

노션을 꾸준히 잘 사용하고 계시다면, 이제 슬슬 페이지가 쌓여서 내가 과거에 썼던 내 기록이 어디에 있는지 헷갈릴 때가 있다. 이런 경우 노션에서 제공하는 검색을 이용해서 찾아보도록 하자 🔎노션 빠른 검색 노션은 페이지 개념이 있어서 내가 쓴 메뉴가 각각의 페이지에 들어가 있어서, 페이지가 많아지면 과거에 내가 적은 메모를 빠르게 못찾을 경우가 있다. 이때 노션의 빠른검색을 이용하면 된다. 빠른 검색은 왼쪽 사이드에 빠른 검색을 눌러서 쓰거나 혹은 단축키를 이용하면 된다. 단축키는 Ctrl + p를 눌러주면 된다. 그럼 빠른 검색 창이 나타나게 되고, 거기다가 검색어를 입력하면 해당 페이지에 검색어가 있는 검색 결과를 보여준다. 빠른 검색을 통하면 해당 키워드가 있는 모든 페이지를 찾아준다. 내가 썼던 ..

node 버전과 node-sass 호환 버전 요즘 들어서 node-sass 버전으로 문제가 자꾸 생기고 있다. node -v을 현재 쓰고 있는 버전은 v.14.17.3을 사용하고 있고, 해당 node-sass 가 요즘 node버전에 따라서 호환이 잘되고 있지 않고있다.😥 각자 사용하는 node 버전에 따라서 node-sass 버전을 맞춰서 사용해주자. 버전별로 적용되는 버전이 너무 달라서............매우귀찮지만, 한번씩은 확인해주자. no such file or directory, scandir '/PROJECT_PATH/node_modules/node-sass/vendor' node와 node-sass버전을 맞췄지만 추가적으로 아래와 같은 오류가 발생할때가 있다.🤬 ENOENT: no such..

🚫Node.js run sever 오류 Unexpected token function 프로젝트를 다른 서버에 올려서 run sever를 돌려봤는데, 멀쩡한 프로젝트에서 오류가 발생했다. 오류 발생 코드는 Unexpected token function 아니.. 잘 돌던 프로젝트가 갑자기 왜 문제가 되었는가 아무튼 바로 구글 신님에게 검색을 하고 확인해보니, 해당 프로젝트를 배포한 서버의 노드 버전이 6 버전이 설치되어있었다. node 버전 확인 명령어 node -v ✅Unexpected token function 해결하기 해결방법은 Node.js 버전을 올려주면 된다. Node 홈페이지에 들어가서 LTS 버전을 새로 설치해주면 바로 해결된다. 설치는 Node 공식 홈페이지에서 바로 다운로드하여서 설치하면 ..

css의 특정 기능들은 브라우저에 따라서 지원을 하는 브라우저와 없는 브라우저들이 있다. 특히 최근에 레이아웃을 구성하는 grid, flex 등의 코드 들은 익스플로러 낮은 버전이라던지 낮은 버전의 브라우저를 사용하면 동작을 안 할 수 도있다. Can I use 이용하기 Can I use라는 사이트를 이용하면 해당 css가 어떤 브라우저에서 동작하는지를 알 수 있다. https://caniuse.com/ Can I use... Support tables for HTML5, CSS3, etc caniuse.com flex를 확인해보면 IE6에서 9 버전을 이용하면 flex가 적용하지 않는다는 것을 수 있다. @supports css의 @supports 기능을 이용하면 해당 css기능을 브라우저에서 지원하는..

스마트폰이 요즘 많이 보급되면서 PC 홈페이지의 레이아웃 중 스크롤이 강조된 레이아웃들이 많이 등장하고 있다. 그중 스크롤을 내리면서 나타나는 애니메이션 효과도 점점 발전하고 있다. 오늘은 간단한 예시 중 특정 위치에 특정 엘리먼트를 고정할 수 있는 position 속성 중 fixed와 sticky 차이를 알아보려고 한다. 💡 fixed란? position:fixed 위 속성을 적용하게 되면 일반적인 문서 요소 순서에 따라 배치되는 것이 아니라 페이지 화면 내 절대적인 위치에 고정시킬 수 있다. 스크롤과 상관없이 항상 해당 위치에 고정된다. 대표적인 예로 스크롤과 상관없이 계속 위 상단에 고정되는 Header들이 fixed 속성에 해당된다. fixed 예시 코드 Header content .header ..