Atelier BiCute

vscode를 사용하다보면 정렬기능이 필요하게 되는데, 기본 자동 정렬 기능(ctrl + K, ctrl + F) 말고도 확장으로 설치할수 있는 프리티어(Prettier)가 압도적으로 인기가 많다. Prettier를 처음 사용했을 땐... 처음 사용해 보았을때는 분명 정렬은 되는데... 아래와 같이 정렬이 되어버려서 이게 뭔가 싶었다. 기능 하나하나마다 줄을 내려버리는데다 따옴표(")만 있는 줄도 있고 닫는 태그만 있는 줄도 있고... 뭔가 정렬은 된거 같은데, 오히려 훨씬 보기가 불편했었다. 그래서 꽤나 오랜기간 vscode의 자동정렬 기능만 이용하게 됐는데, 갈수록 이 기능도 뭔가 조금 부족함을 느꼈었다. 그러다 뭔가 정렬을 개인화(커스텀)할 수 있을까 싶어 알아보았더니, Prettier가 다양한 설정..

Adobe가 싫어서 Figma를 이용하고 있었는데, 얼마전 Adobe가 Figma를 인수해 버렸습니다. 자신이 Figma 같은 디자인 툴을 원하지만 Adobe는 피하고 싶을 경우 이것이 도움이 되지 않을까 십습니다. Penpot Penpot은 Adobe XD 처럼 소프트웨어를 설치한다거나 사용하고있는 버전에 따라 서로 공유를 하기 힘들어지는 문제점이 없는 Figma 와 같은 웹 브라우저 기반의 협업 디자인 툴입니다. 아래는 Penpot의 메인 화면입니다. 이번 Adobe가 Figma를 인수하면서 가입자수가 전월 대비 56배 증가했다고 하며, 기존에 XD나 Figma를 사용했다면 사용하는데 크게 어려움은 없을 것입니다 (역시 Figma처럼 아직 한글지원은 안됩니다) 메인 화면에서 조금만 스크롤을 내려보면 ..

LINE Seed는 LINE의 첫 번째 글꼴입니다. 성장의 의미를 담고 있는 Seed는 지오매트릭 기반의 서체로 LINE의 편리한 사용성과 친근한 아이덴티티에서 영감을 받았습니다. 다운로드 페이지 LINE Seed KR(한글) 바로가기 > LINE Seed EN(영문) 바로가기 > LINE Seed JP(일본어) 바로가기 > LINE Seed TH(태국어) 바로가기 > 폰트 샘플 KR 웨이트 변화에 따른 비례 너비로 라틴 기준의 글자 사이 공간 밸런스에 더욱 다가갑니다. 두꺼운 웨이트는 공간이 더욱 필요하기 때문에 넓게, 얇은 웨이트는 상대적으로 공간이 충분하기에 좁게 설정됩니다. JP LINE Seed JP에는 4종류의 굵기가 준비되어 있습니다. 어떠한 굵기라도 통일된 동일한 정체성을 가지고 있습니다...

현재 브랜치 확인 git branch 브랜치 변경하기 STEP.1 브랜치 만들기 git branch {branchname} ex) git branch BiCute STEP2. 브랜치 전환한기 git checkout {branch} ex) git checkout BiCute ※ 한번에 브랜치 만들고 전환하기 (-b 옵션) git checkout -b {branch} ex) git checkout -b BiCute 특정 브랜치만 clone 하는 방법 git clone -b {branchname} --single-branch {저장소 URL} ex) git clone -b DUCK --single-branch http://bicute.tistory.com:3000/bicute/clone_sample 특정 브런..

#단일 조건부 클래스 :class="{'클래스명': '조건'}" #복수 조건부 클래스 :class="{'클래스명': '조건', '클래스명': '조건'}" # 삼항 연산자를 이용한 조건부 클래스 :class="[조건 ? '조건이 true일 경우의 클래스' : '조건이 false일 경우의 클래스']" # 조건이 많아서 인라인으로 사용하기 불편할 경우엔 이런 방법도... {{ user.level }}

이번에 작업용 컴퓨터를 변경하다보니 Sticky Scroll 없으면 이제 도저히 못쓰겠다 싶어서 설정을 다시하다 적어보는 글입니다. VSCode의 Sticky Scroll은 2022년 07월 업데이트부터 시작하여 08월부터 정식으로 추가된 기능으로, 뷰 포트 상단에 현재의 범위를 표시하여 줍니다. 예를들면... #1. 아래와 같이 코드가 길어지면 괄호를 제대로 닫은것인지 애매할 수 있는데... #2 설정으로 이동하여 Sticky Scroll를 검색한 후 해당 항목을 활성화 해 줍니다. #3. 뷰 포트 상단에 현재 범위가 표시가 됩니다. (스크롤을 내려보다가 예상과는 다르게 먼저 범위가 끝난다던가 하면 범위 설정에 오류가 있다는 것이겠지요) 범위 확인용 이외에도 해당 라인을 클릭해서 바로 이동하는 등 익숙..

배열에서 원하는 항목을 제거하고 싶은 경우가 꽤나 자주 발생하는데, 그와 관련된 이런저런 내용을 간략히 적어봅니다. 예제 샘플 users라는 배열에는 대충 아래와 같이 이름(userName), 나이(age)등 다양한 정보를 포함한 객체가 담겨져 있다. [ { "no": 1, "userName": "Terry", "age": 50, "gender": "male", "email": "atuny0@sohu.com", "userID": "atuny0", "birthDate": "2000-12-25", "image": "https://robohash.org/hicveldicta.png", "bloodType": "A−", "address": "1745 T Street Southeast", "city": "Wash..

Reorder reorder는 내부의 항목을 끌어다 놓아 해당 그룹 내에서 순서를 변경할 수 있도록 하는 구성 요소입니다. 최근 Ionic을 이용해서 개발을 하고있는데, 다른 언어 샘플 코드는 모르겠고, reorder 페이지의 Vue 샘플 코드를 그대로 사용하면 리스트를 변경할때마다 화면이 멈춰버리는 일이 발생하기에 추후에 또 쓸지 모르니 간단한 해결 방법을 기록해 봅니다. 샘플 코드 Ionic Framework - Reorder {{ item }} checkItems 외부에 따로 수정 같은 이벤트 버튼을 만들어 ion-reorder-group의 :disabled="false" 값을 토글하게 만들면 평소에는 이동을 막고 수정하고 싶을때만 이동할 수 있도록 지정할 수 있습니다. 결과 이런식으로 배열의 순서..

Vuex나 Pinia 같은 상태 관리 라이브러리를 사용하면서 store의 데이터를 사용하고 있는 페이지에서 새로고침을 하게 되면, 데이터가 사라지게 되는데, 이러한 문제점을 쉽게 해결하여 상태를 유지할 수 있게 해주는 플러그인의 사용법을 간단히 적어봅니다. vuex를 사용하고 있다면 vuex-persistedstate를, Pinia를 사용하고 있다면 pinia-plugin-persistedstate을 예로 작성하였으니 필요한 부분을 참고하시면 됩니다. Vuex를 사용하고 있다면... 이곳을 vuex-persistedstate의 사용법을 설명하기 전에... vuex-persistedstate는 제작자가 더 이상 일상 업무 중에 vue를 사용하지 않게 되어, 공식적으로 더 이상 업데이트를 하지 않을 것이라고..

Pinia? Pinia는 Vuex와 같은 상태 관리 라이브러리입니다. 얼마전 vuex 기본 사용법에 대한 글을 작성하였는데, 현재 Vue3를 지원하고 있는 Vuex는 버전 4입니다. 또한 Vue의 개발자인 Even You가 자신의 트위터에서 Pinia는 사실상 Vuex 5입니다! 라고 말하기도 했을 정도로 Pinia는 충분히 좋아졌고 안정적입니다. 달라진점은? (1) module을 store로 재구성 프로젝트가 커질수록 Vuex는 store를 모듈화 해서 여러개로 나누게 되는데, 이게 계속 중첩이 되고 타입스크립트나 다른 플러그인을 함께 사용하게 될수록 매우 귀찮아지는데, Pinia는 defineStore라는 함수를 이용하여 각각의 파일마다 별도의 store를 정의하여 module의 기능을 대신하고 있어..