김평범's OrdinaryCode

노션을 꾸준히 잘 사용하고 계시다면, 이제 슬슬 페이지가 쌓여서 내가 과거에 썼던 내 기록이 어디에 있는지 헷갈릴 때가 있다. 이런 경우 노션에서 제공하는 검색을 이용해서 찾아보도록 하자 🔎노션 빠른 검색 노션은 페이지 개념이 있어서 내가 쓴 메뉴가 각각의 페이지에 들어가 있어서, 페이지가 많아지면 과거에 내가 적은 메모를 빠르게 못찾을 경우가 있다. 이때 노션의 빠른검색을 이용하면 된다. 빠른 검색은 왼쪽 사이드에 빠른 검색을 눌러서 쓰거나 혹은 단축키를 이용하면 된다. 단축키는 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 ..

요즘은 핸드폰과 PC가 모두 업무에 이용된다. 그렇기 때문에 이 안에서 편안하게 파일 이동이 되어야 편한데, 개인적으로 이것이 가장 잘 되어있는 건 🍎사과농장(아이폰 + 맥 조합)을 구성하는 게 제일 좋다고 본다. 하지만, 아직 회사에서 윈도우 운영체제를 사용하는 곳이 많기도 하고 나 역시도 업무 PC와 개인용 PC를 모두 윈도를 사용하고 있어서 아이폰 파일을 이동하기 힘듬을 겪고 있다. 그래서 이것저것 여러 개를 찾아보고 있는데 이번에 네이버 웨일을 쓰면서 핸드폰에서 바로 네이버 웨일로 파일을 보낼 수 있는 기능을 발견했다. 📂모바일 사진 네이버 웨일로 전송하기 1. 아이폰 모바일 사진첩의 가서 전송할 사진을 선택한 다음 아래 공유 버튼을 클릭한다. 2. 공유 버튼에 PC웨일로 보내기 버튼을 선택한다...

css를 이용하다보면, 공통적으로 사용하는 코드들이 발생된다. 이러한 경우 어쩔수 없이 불필요한 코드가 늘어나는 경우가 있다. 이럴 경우 코드를 줄여주는 방법중 하나가 가상클래스를 이용하는 방법이다. 오늘은 가상클래스 중 :is 에 대해서 정리해보려고 한다. Depth가 깊은 엘리먼트에 CSS를 적용할 경우 만약 li에 color를 red로 지정해주고 싶다고하자. 하지만 그 li의 조건이 div 안에 들어있는 li일 경우, header안에 있는 li일 경우가 조건이라고 하자. 그럼 코드는 위 처럼 작성된다. div ul li, div ol li, header ul li, header ol li { color:red; } 해당 조건에 맞춰 코드를 작성하다보니 css가 4줄이 넘어가게 된다. Depth 선택..

웨일 브라우저 요즘 일잘러 들이 쓴다고 하는 네이버 웨일 네이버에서 만든 브라우저라서 다양한 네이버 기능들을 같이 쓸 수 있기도 하고 기본적인 화면 캡처 기능, 핸드폰과 파일 전송 기능, 뷰어 기능 등 다양한 기능이 탑재된 것 같아 몇 년 동안 메인으로 쓰던 브라우저를 한번 바꿔볼까 한다. 🔎웨일 브라우저 검색 서비스 변경하기 하지만 쓰자마자 문제점 발생 개발자들은 검색 기본은 구글 아니냐고요!!!! 네이버 웨일을 쓰다 보니 주소창의 검색 기능에서 모두 네이버로 검색 결과를 보여주는 참사가 발생했다. 기본 주소창 검색은 구글을 쓰고 싶어 찾아보니 역시나 기본 주소창 검색 서비스를 내가 선택할 수 있다. 1. 설정 > 주소창 메뉴 접속 웨일 브라우저 왼쪽 상단의 점 3개를 눌러 설정 메뉴에 들어간 뒤 왼쪽..

개발을 하다 보면, 특정 조건에 따라서 Css를 변경해야 되는 상황이 있다. 이럴 경우 주로 Class를 변경시켜서 적용이 가능하다. Vue에서 클래스를 조건에따라서 설정할 수 있다. 👩‍💻Vue 조건부 Class 예시 만약 버튼을 클릭하면, 화면이 다크 모드와 라이트 모드로 변경되는 기능을 구현한다고 생각해보자. 라이트 버전일 경우 배경화면이 하얀색으로 보여야하고, 다크 모드일 경우 배경화면을 검은색으로 보여야 한다. 이럴 경우 조건별 Class를 주면 해당 기능 구현이 가능하자. 아래 코드를 보자 {{thema}} div class중 body를 가지고 있는 div를 thema-button을 클릭했을 때 다크 모드로 바꿔준다고 해보자. 1️⃣vue Class if 조건에 따라 바꿔주기 vue에서 조건에..

기본 메모장을 쓸 경우 내가 모르고 내용을 삭제해버리면 예전에 쓰던 내용을 확인할 수 없지만 요즘 메모 어플은 점점 좋아져서 버전 기록 기능을 제공하기 때문에 혹시 예전에 메모를 적었다가 지웠어도 다시 되찾을 수 있다. 내가 쓰는 노션에서도 버전 기록 기능을 제공해줘서 기존에 있었던 내용 중 혹시 지워서 없어졌다고 하면 찾는 방법을 오늘은 설명해보려고 한다. ⏱Notion 버전 기록 제공 노션에서 버전기록을 이용하려면 아쉽지만, 무료요금제에서는 제공이 되지 않는다. 버전 기록의 경우 개인 프로 이상부터 이용했을 때 사용 가능하니, 혹시 백업이 중요한 업무를 한다면 개인 프로 기능을 이용하길 추천드린다. 📑Notion 버전 기록 확인하기 노션 왼쪽 상단의 점세개를 누르면 페이지 기록이라는 기능이 있다. 보..