김평범's OrdinaryCode

🧛‍♂️ Are you interested in participating? 문구 발생 nuxt Project를 생성해서 npm run dev 명령어 실행 시 Are you interested in participating?(Y/n)이라는 문구가 계속 뜨는 문제가 발생했다. 처음엔 왜 뜨지? 하고 무시하고 Y, n 여러 개를 선택해서 넘어가 보았지만, 지속적으로 서버가 돌아갈 때마다 물어보는 경험을 하게 된다. 위의 내용에 따라 보면 NuxtJS의 경우 익명의 원격 측정 데이터를 수집하여 지속적으로 개선하는데 노력하니 원격으로 데이터를 수집하길 참여해달라는 내용이다. 들어가 보니 수집되는 항목은 아래와 같다 호출하는 명령어(nuxt dev, nuxt Build 등) Nuxt.js, Node.js 버전 일반..

🐣들어가기 전 노션에서 표를 이용해서 수식을 구할 때 퍼센트가 필요할 경우가 있다. 표에서 계산을 할 경우 수식을 이용하는데 수식을 이용해서 퍼센트를 계산할 경우 소수점이 절사가 되사 되지 않고 소수점이 10자리가 넘게 나오는 일이 발생했다. 🧮 노션 퍼센트 계산 먼저 노션에서 퍼센트를 계산하기 위해서는 표 속성을 수식으로 변경한 뒤 계산을 해줘야 한다. 먼저 퍼센트를 계산할 속성을 수식으로 변경하고, 계산식은 아래와 같이 적어준다. prop(일부 값을 가진 속성명) / prop(전체 값을 가진 속성명) 위 형식으로 퍼센트를 계산 한 뒤 수식 속성에 숫자 형태를 %로 바꿔주면 우리가 원하는 퍼센트 형식의 값을 볼 수 있다. 🔨노션 퍼센트 절사 하기 위의 방식으로 만들 경우, 앞서 말했듯이 문제가 딱 떨어..

🐣 들어가기 전 요즘 UI상에서 사용자에게 직관적인 형태로 ON/OFF 스위치 버튼을 제공한다. 이러한 형태는 HTML input Checkbox를 이용하여 만들 수 있다. 다크 모드/라이트 모드 변환이라던지 해당 기능을 끄고 키는 경우는 기본적인 체크박스 디자인보다는 스위치 형태로 제공하는 게 사용자의 이해도가 더 높을 수 있다. ON/OFF 스위치 완성 UI 보통 ON 상태일 경우 포인트 컬러를 이용하여 상태가 들어온 상태이며, OFF상태일 경우 회색 등을 이용하여 꺼져있는 느낌으로 만든 스위치 디자인이다. HTML 코드 CSS 코드 .switch-button { position: relative; display: inline-block; width: 55px; height: 30px; } .swit..

들어가기 전🐣 노션을 이용하다 보면 텍스트 자료를 직접 입력하는 경우도 있지만, 본인이 보고 싶은 링크를 모아 놓는 경우도 있다. 노션에서 링크를 입력하면 북마크 혹은 주소 형태로 링크를 걸 수 있긴하지만, 특정 이미지를 클릭했을 때 주소를 연결하고 싶을 수 도 있다. 일단 노션 기본 기능으로는 이미지 링크는 제공하고 있지 않아 방법을 찾아보기로 했다. 노션툴즈 활용하기 노션 툴즈는 노션에서 제공하는 기본 기능 외 좀 더 유용한 기능을 제공할 수 있게 해준다. 그 중 오늘은 노션 툴즈 중 이미지링크 블록을 이용해 보려고 한다. 노션 툴즈의 경우 현재 베타 테스트 중이여서 가끔 사이트 상 느린 경우도 있긴 하니 참고 바란다. (해당 사이트는 노션 개발팀과 상관은 없다고 합니다.🙂) 노션툴즈 이미지 링크 만..

🎉 마이크로 인터랙션 요즘 SNS에서 흔히 볼 수 있는 인스타그램의 "좋아요", 트위터의 경우 리트윗은 사용자들이 작은 동작으로 해당 게시물에 피드백을 주는 좋은 방법이다. 마이크로 인터랙션은 사용자들이 홈페이지에서 하는 작은 행동들을 어떠한 변화를 주었는지를 사용자 경험으로써 느낄 수 있게 해 준다. 자신이 행한 특정 행동에 자연스러운 UI 피드백을 주어 구구절절한 설명이 없이도 사용자는 변화를 알아차릴 수 있도록 시각화하며 오류 및 다음 행동들을 지시할 수 있게 한다. 왜 마이크로 인터랙션을 사용해야 하는가? 마이크로 인터랙션으로 우리는 사용자에게 어떠한 일이 지금 일어나고 있는지 다음 목표를 위해 어떠한 일을 진행해야 하는지 기다림 동안 페이지 이탈을 방지시켜주는 등의 기능을 제공할 수 있습니다. ..

🐣 들어가기 전 대세가 돌고 돌아 2020년 주식의 부흥으로 모두 모두 재테크를 시작하는 시대가 왔다. 하지만 재테크의 첫 시작은 시드머니 모으기라고 경제 전문가들이 입을 모아 말을 한다. 일단 시드머니를 모아야 재테크를 시작할 수 있다고 하는데 이 작고 조그만 예, 적금 이자를 보다니 도저히 맘이 움직이지 않는다. 이런 사람들을 위해 한 달에 한 번씩 적금을 성공했다는 뿌듯함을 느끼기 위해 또 다른 이유로는 원하는 적금을 못 넣을 경우 해당 금액을 이월시켜 1년에 목표한 금액을 모두 성공하기 위한 템플릿을 만들었다. 노션으로 관리하는 1년 목표 적금 챌린지 템플릿으로 해당 템플릿으로 각자 원하는 목표 적금액을 매달 잘 넣고 있는지를 체크해보도록 하자. 해당 방법은 부자 언니 유수진 언니가 추천해준 방법..

들어가기 전🐣 요즘 한창 재테크 공부를 하는 중에 30일 코스피, 환율, 이자를 작성 중에 있다. 좀 더 깔끔하게 정리하기 위해 노션을 이용하고 있다. (내가 사용하고 잇는 노션 30일 경제지표 변화 정리 템플릿을 이용하고 싶다면 아래 링크를 확인하면 된다. =) ordinary-code.tistory.com/46 [Notion] 재테크 공부를 위해서 노션으로 만든 경제 지표 변화 30일 Diary (노션 템플릿 공유, 김경필 🐣 들어가기 전 주식, 부동산 등 요즘 했다 하면, 다 돈 버는 2020년이었다. 월급쟁이에 작은 월급으로도 행복했던 나에게 재테크는 남의 일이었는데 이제 전문가뿐 아니라 내 바로 옆 직장동료, ordinary-code.tistory.com 하지만, 하다보니 작성할 때마다 네이버에..

🐣들어가기 전에 Database 필드 중 데이터 유형이 BIT인 경우 데이터를 Query를 통해서 가져왔다. 해당 값을 가지고 Node에서 작업을 하려고 했는데, 데이터 값을 콘솔 로그로 찍어보니 이라는 값이 찍힌다. 나는 해당 필드에 저장된 값을 봐야 되는데 어떻게 변환시켜야 하는 것인가 찾아보기로 했다. Buffer란? 이진 파일(binary file)을 저장하는 데이터 포맷이다. 컴퓨터 저장과 처리 목적을 위해 이진형식으로 인코딩 된 데이터 형식의 파일이다. 버퍼 형태로 데이터를 처리할 경우 데이터를 효율 적으로 처리할 수 있다고 한다. DB에서 query를 날린 뒤 나온 비트 형식의 데이터를 bitData변수에 넣어준 뒤, 콘솔 로그를 찍어보면 Buffer 형태로 출력되는 것을 볼 수 있다. co..

🐣 들어가기 전 개발을 할 때 가장 많이 이용하는 브라우저는 크롬을 이용하고 있다. 첫 개발의 시작을 크롬으로 했기 때문에도 당연히 큰 이유지만, 크롬에서 제공되는 확장 프로그램 중 너무 유용한 툴이 많은 이유도 있다. 오늘은 너무 간단하지만 너무 유용하게 쓰고 있는 크롬 확장 프로그램을 소개하려고 한다. 🎨 홈페이지 내 사용하는 색상 코드 알아보기 내 사이트 혹은 다른 사이트에서 사용한 색상을 알아보고 싶은 경우가 있다. 과거의 나라면 해당 페이지를 캡처한 뒤 포토샵을 열어서 컬러 피커를 이용하여 확인을 했다. 하지만, 크롬 확장 프로그램 중 colorpicker Eyedropper를 설치 후 쉽게 해당 홈페이지 색상을 바로 알아낼 수 있게 되었다. ColorPick Eyedropper는 홈페이지 요소..

🐣 들어가기 전 주식, 부동산 등 요즘 했다 하면, 다 돈 버는 2020년이었다. 월급쟁이에 작은 월급으로도 행복했던 나에게 재테크는 남의 일이었는데 이제 전문가뿐 아니라 내 바로 옆 직장동료, 친구까지 재테크로 돈을 벌기 시작하니 슬슬 조급함이 생기는 날이 많다. 특히, 소확행으로 작은 집 한 채만 있어도 나의 인생인 좋을 것이라고 막연히 생각했던 내 인생에 이런 성장 속도라면 내 집은 정말 없을 수도 있겠는데?라는 생각까지 그렇다고 우리가 번 돈을 아무런 지식 없이 다들 벌었다는 말에 덜컥 주식이라도 투자한 날에는 높은 층에 갇혀버린 뒤 못 나올 수도 있지 않겠는가? 재테크도 스터디가 필요하다. 그중 돈립 만세 유튜브 김경필 작가님 편을 보니 경제지표를 30일만 입력하면 내 삶에서 변화가 온다고 한다..