김평범's OrdinaryCode

🐣 들어가기 전 요즘 많은 회사들이 노션을 도입하고 있다. 노션을 이용하여 회사 업무를 활용한다고 하면 가장 기본이 되는 게 회의록일 것 같다. 이런 이유로 노션으로 만든 간단한 회의록 템플릿을 공유해보도록 하겠다. 📂노션으로 만든 회의록 템플릿 노션으로 만든 회의록 전체 화면이다. 노션 회의록은 매우 간단하게 표 하나로 이루어져 있다. 가장 기본은 캘린더 형태로 회의록을 볼 수 있다. 회의록 보기 형태 바꿔 사용하기 내가 만든 노션 회의록 템플릿은 달력으로 보기가 리스트로 보기가 가능하다. 월마다 정기적인 회의를 보려면, 달력 형태로 보는 것을 이용하면 된다. 하지만 회사에서 정기적인 회의가 많이 없는 업체라면은 리스트 보기 형태를 이용하는 것을 추천한다! 새로운 회의록 만들기 내가 만든 회의록 표에 ..

💻노션 페이지 전체 화면 채우는 방법 노션 페이지는 기본적🖥으로 브라우저로 열어보면 900px로 페이지 콘텐츠가 가운데 정렬로 보인다. 가끔 표를 쓰거나 2단 레이아웃을 설정하다 보면 900px 페이지가 너무 좁다고 느껴질 때가 있다. 이럴 경우 노션 페이지를 전체 화면으로 설정하는 것이 가능하다. 우측 상단의 점 3개를 눌러보면 노션 페이지에 대한 설정이 가능하다. 해당 설정 중 전체 넓이라는 속성이 꺼져 있는 것이 보인다. 해당 버튼을 활성화 해주자. 해당 버튼을 활성화를 하면 내가 만든 콘텐츠가 전체 화면에 차는 것을 확인할 수 있다. #️⃣노션 폰트 설정하기 폰트 스타일 변경 우측 상단의 점 3개를 눌러보면 폰트에 대한 설정도 볼 수 있다. 가장 위 스타일을 눌러보면 해당 페이지의 폰트가 변경되는..

🙅‍♀️moment.js 나의 프로젝트의 날짜 시간 계산을 하는 라이브러리는 moment.js를 사용했다. 오늘 기준 다운로드 수가 18,204,885 많은 개발자들에게 사랑받은 라이브러리였다. 나 역시 프로젝트마다 날짜를 계산할 때 사용하는 라이브러리였다. 2011년 첫 공개된 moment.js는 이제는 이미 발표가 된 지 9년이 지났고, 지금의 웹은 이 moment가 발표되었을 때와 많은 부분이 변했다. moment 제작진들은 이제 새로운 기능 대신 안정성을 우선으로 하여 moment를 이제 더 이상의 업데이트가 없다고 발표를 했고, 다른 라이브러리를 사용하라는 말을 남겼다. 이제부터 moment.js는 더 이상 지원이 없어진다는 점을 밝힌 것이다. 물론 지금 사용하는 곳에 문제가 없다면 당장은 문제..

노션 표를 사용하다 보면, 표 간격보다 더 긴 내용이 들어갈 때가 있다. 이럴경우 노션 표넓이를 넘어가면 끊겨서 안보이는 경우가 있는데 간단하게 해결 할 수 있다. 🌵셀 래핑(Wrap cells) 사용하기 노션 표 속성 중 셀 래핑, 영문버전에서는 Wrap cells 속성을 이용하면 노션 표에서 줄바꿈이 가능하다. 표 왼쪽에 점 3개로된 버튼을 클릭한다. 해당 점이 안보인다면 표 우측 상단에 마우스를 올리면 버튼이 활성화된다. 점 3개 아이콘을 클릭하면 가장 밑에 wrap cells라는 속성이 있다. 해당 속성이 꺼져있다면 활성화 시켜준다. 셀 래핑이 활성화 되면 기존에 짤려보이던 컨텐츠가 표 넓이에 맞춰서 줄바꿈 된 것을 볼 수 있다. 매우 간단하지만 모르는 분들이 많은 것같아서 방법 공유합니다.👍

렌더링에 관심을 가지기 처음 프런트 앤드 개발자가 되면 해당 기능을 개발하는데 가장 큰 관심과 열정을 쏟는다. 하지만, 연차가 어느 정도 차게 되면 내가 짠 코드의 구조와 성능에 대해 관심이 생기기 시작한다. 오늘은 그 중 렌더링에 관련된 얘기다. 렌더링이란? 가장 간단하게 설명하면 웹 애플리케이션 상에 데이터를 표시하는 행위이다. 즉 사용자의 화면 혹은 다른 출력장치에 내가 프로그래밍한 요소를 문서 객체모델(DOM) 형태로 보여준다. 우리가 만들어진 화면은 HTML로 이루어진 문서 구조와 CSS로 만들어진 스타일 요소들이 혼합된 형태로 화면상에 그려지게 된다. HTML의 경우 DOM(Document Object Model)으로 구현 CSS의 경우 CSSOM(CSS Object Mode)으로 구현 렌더링..

💁‍♀️들어가기 전 고양이의 집사로 살다 보니 고양이의 대한 내용을 기록해야 될 일이 많아졌다. 그렇게 고민하다 만들게 된 고양이 다이어리! 고양이를 키우게 되면서 모래 교체시기, 사료 주문 시기 등을 정리하기 위해 노션을 이용하기로 했다. 특히 우리 집 고양이의 경우 병원을 지속적으로 다니다 보니 고양이의 건강 관련된 기록이 꼭 필요한 상황이라 구토, 기침, 병원 진료 관련된 내용을 해당 템플릿에 정리하기로 맘먹었다. 노션으로 다들 예쁜 개인 다이어리를 쓰는 걸 보고 나도 한번 만들어봐야지라는 생각으로 시작하게 되었는데 역시 고양이 사진을 넣으니 더 예쁜 다이어리가 완성되었다. 고양이가 최고야😂 사실 고양이 용으로 만들었지만, 사진만 바꾸면 개인용으로도 충분히 사용은 가능하다. 🤗노션으로 완성된 고양이..

들어가기 전👏 노션의 가장 큰 단점은 예쁘다는 사실! 내가 원하는 블록들로 레이아웃을 구성하여 손쉽게 깔끔하고 예쁜 문서를 완성할 수 있다. 이러한 이유로 노션을 이용해서 다양한 레이아웃을 만들고 싶은데, 현재는 표를 페이지에 인라인으로 넣을 경우 표 옆에 블록을 위치시켜 2단 레이아웃이 만드는 게 불가능했다. 하지만 이제부터 내가 소개할 방법을 이용하면 표 옆에 블록을 위치시키는 것이 가능하다. 표 옆에 특정 블록 위치하여 2단 레이아웃 구성하기 1. 먼저 표를 생성한다. 표는 어떠한 형태든 상관은 없다. 나는 캘린더로 생성을 했지만, 해당 표는 다른 형태의 표도 가능하다. 2. 표를 페이지로 전환한다. 표 오른쪽 상단의 점 세 개 메뉴를 누르면 페이지로 전환이라는 메뉴가존재한다. 해당 버튼을 클릭하면..

🧛‍♂️ 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..