김평범's OrdinaryCode

자바스크립트에서 천 자리마다 콤마를 찍어줘야 하는 경우가 많다. 숫자에다가 천 자리마다 콤마를 찍기 위해서는 정규식을 이용해야 한다. Vue에서는 Filter를 이용해서 숫자 3 자리 마자 콤마를 찍는 게 가능하다. example.vue {{price | numberFormat(2)}} 예시 코드이다. vue filter를 이용해서 numberFormat이라는 filter를 만들어준다. 두 번째 인자로 toFixed를 이용해서 소수점을 잘라준다. 나의 경우 2를 넣어서 소수점을 2자리까지 표시해준다. price에 들어간 342345.10923이라는 숫자가 vue filter를 통해서 소수점이 2자리까지 잘리고 그 이후 정규식을 이용해서 3자리마다 콤마를 찍어주게 된다. 이처럼 간단하게 vue filter..

😶 Nuxt에서 A태그 이용하기 Nuxt에서 페이지를 이동하려면 를 이용한다. 사용방법은 아래와 같다. 해당 페이지 이름으로 이동 해당 페이지로 이동하면서 URL 파라미터를 던짐 동적라우터로 이동합니다. nuxt-link를 위에처럼 작성해줄 경우 HTML로 랜더링을 확인해보자. 그럼 각각 페이지별로 어떻게 파라미터를 받을지 확인해보도록 하겠다. 😁Query 파라미터 받기 page/index.vue Query 파라미터 값은? : {{query}} query파라미터로 보낸 내용은 this$route.query로 받으면 된다. 나의 경우 쿼리 파라미터를 id로 보내서 id값을 받아서 화면에 표시해줬다. 결과 화면 query변수에 담긴 파라미터 값이 제대로 나오는 것을 확인할 수 있다. 😎동적 라우터 확인하기 ..

노션에서 매일 사람들이 제일 기다리던 기본 표 업데이트가 21년 11월 16일 날 진행되었다. 기존의 노션 표는 데이터베이스 기반으로 제작이 되어 개발자가 아닌 일반 이용자들은 사용법에서 약간 헷갈릴 수 있었는데 이번 업데이트로 드디어 기본 표 사용이 가능해졌다. 🙄 데이터베이스 형식의 표가 무엇인지 궁금하다면? https://ordinary-code.tistory.com/31 [Notion] 노션에서 데이터베이스(표) 기초 사용법 이해하기 우리가 작성하는 메모 앱에서 원하는 기능 중 하나는 표이다. 표의 경우, 많은 사람들이 내용을 작성하는데 자주 이용하는 포맷인데, 대부분 사람들이 엑셀을 많이 사용하기 때문에 엑셀에서 사 ordinary-code.tistory.com 기본 표 추가하기 노션에서 추가된..

노션 콜아웃 노션 콜아웃을 돋보이는 글을 작성할 수 있다. 콜아웃을 이용하면 돋보이는 글을 작성할 필요가 있을 땐 콜아웃을 사용하면된다. 콜아웃 꾸미기 노션 콜아웃은 기본적으로 회색배경에 아이콘이 있는 형태이다. 콜아웃은 아이콘과 배경을 바꿔줄 수도 있다. 콜아웃 이모티콘 바꾸기 이모티콘을 클릭하면 노션에서 이모티콘을 선택해서 변경해줄 수 있다. 기본 전구 아이콘에서 원하는 이모티콘을 변경할 수 있다. 콜아웃 배경 바꾸기 콜아웃의 배경색은 앞에 점을 클릭해서 색택에 들어간 다음에 배경으로 변경이 가능하다. 콜아웃으로 노션으로 포인트를 바로 줄 수 있다.

리덕스(REDUX)란? 리덕스는 가장 많이 사용되는 상태 관리 라이브러리이다. 리덕스를 이용할 경우 컴포넌트에서 사용할 상태에 관련된 코드만 다른 파일로 분리시켜서 관리할 수 있다. 리덕스를 사용하는 이유 리덕스를 사용하는 가장 큰 이유는 공통적으로 이용하는 상태를 전역에서 관리를 하기 위함입니다. 프로젝트가 커지면서 컴포넌트구조가 복잡해질 경우 리덕스를 이용하면 유지보수, 코드작성의 효율성을 극대화 해줍니다. 아래 이미지를 보면, 보통 props를 이용해서 Root 컴포넌트에서 하위컴포넌트와 상태값을 주고 받는다. 하지만, 컴포넌트가 한두개가 아니라 여러개가 생성되고, 여러개도 부모 자식간의 컴포넌트로 복잡하다고 가정해보자. 이럴경우 하위에서 값이 변경되거나, 루트에서 변경된 값을 읽으려면 계속해서 컴..

노션에서 이번 업데이트 중에서 데이터베이스 그룹화 기능이 추가되었다. 노션에서 데이터베이스를 많이 사용하시는 분들이 많이 사용할 기능일 것 같다! 🐣노션 데이터 베이스 그룹화 데이터베이스의 그룹화를 이용하면 할 일과 속성 등에 따라서 좀 더 정교하게 시각화가 가능하다. 노션에서 만든 표에서 점3개를 누르면 그룹화라는 메뉴가 신규로 만들어졌다. 그룹화 버튼을 클릭해서 원하는 속성에 맞는 표 내용을 그룹화시킬 수 있다. 각 표에서 만든 속성으로 그룹화가 가능하다. 먼저 상태별로 그룹화를 진행해보겠다. 그룹화를 적용하면 각 상태에 맞는 표끼리 그룹화가 되어서 나눠진다. 기존보다 좀 더 가독성이 높아진 것을 확인할 수 있다. 👀노션 그룹화 빈 그룹 숨기는 방법 그룹화 시 보고 싶은 상태만 있다면 그것도 설정이 ..

혹시 Hooks을 처음 사용한다면? 앞의 강좌를 먼저확인해주세요 https://ordinary-code.tistory.com/120 [React] 함수형 컴포넌트 상태관리 Hooks useState 사용법 알아보기 🍟React Hooks이란? Hooks은 리액트 16.8 버전에서 새로 도입된 상태 관리 기능이다. 기존의 함수형코드에서는 관리하지 못했던 상태 관리가 Hooks을 통해서 가능해졌다. React Native의 경우에는 0.59 버전 ordinary-code.tistory.com useEffect란? Hooks 기능 중 useEffect는 컴포넌트가 랜더링 될 때 특정 작업을 수행하게 한다. useEffect는 class 생명주기에서 componentDidMount와 componentDidUpd..

🍟React Hooks이란? Hooks은 리액트 16.8 버전에서 새로 도입된 상태 관리 기능이다. 기존의 함수형코드에서는 관리하지 못했던 상태 관리가 Hooks을 통해서 가능해졌다. React Native의 경우에는 0.59 버전부터 Hook을 지원한다고 한다. React에서는 함수형 컴포넌트와 Class형 컴포넌트 두 가지 형태로 코드를 작성하는데, 기존의 함수형 컴포넌트에서는 React State의 생명주기 기능을 이용할 수 없었다. 하지만 hooks 기능이 추가되면서 이제는 함수형 컴포넌트에서도 생명주기 기능을 연동할 수 있게 된다. Hooks은 클래스형 컴포넌트에서는 동작하지 않는다. hooks 업데이트 이후에도 클래스형 컴포넌트는 그대로 사용이 가능 때문에, Hooks의 기능을 위해서 기존 코..

미국에서 서비스를 시작한 노션이 현재 사용자가 2000만 명 이상 사용하는 엄청 큰 기업 업무 협업툴로 성장하고 있다. 그중 노션은 미국에 이어 두번째로 빠르게 성장하고 있다고 한다. 노션의 사용자가 많아지면서 클라우드 기반의 서비스이다 보니, 노션에 접속이 되지 않는다는 글들이 가끔씩 보이기 시작했다. 이런 사람들이 이제 내 컴퓨터이가 문제인지 노션의 문제인건지 알 수가 없이 노션이 접속이 안되면 멘붕이 오곤 했는데 이번 노션 홈페이지에 노션 서비스 상태에 대한 정보를 제공해주는 것을 확인했다. 👩‍💻노션 서비스 상태 확인하기 노션은 클라우드 기반의 서비스라서 서버에 접속이 안되면 정보를 보지 못하는 큰 단점이 있긴 하다. 노션에 접속했을 때 접속이 안되면 노션 서버 문제인지 내 컴퓨터 문제인지 알 수..

bitbucket에서 다시 메인 git 저장소를 github으로 옮기면서 사내 메신저인 JANDI에서 커밋 메시지 알람을 받아보려다 보니, organization Repositiory가 보이지 않아서 방법을 찾아보았다. 🌱잔디 커넥션 잔디의 경우 기업 메신저 포지션으로 나온 서비스라 타 서비스와 연동이 가능하다. 구글 캘린더, JIRA 등과 같은 자주 쓰는 서비스는 이미 연동이 가능하도록 서비스가 구현되었고 오늘은 github 연동을 진행해보려고 한다. 🌴잔디(JANDI)와 깃 헙(github) 연동하기 잔디 커넥트에서 github에서 연동 추가하기를 클릭하면 로그인을 하라고 먼저 나오게 된다. 로그인을 해주면 github 연동 창이 뜨게 된다. 알림을 받고자 하는 Repository를 선택해서 연동을 ..