본문 바로가기

분류 전체보기34

이것만 알고가자 피그마 (feat. 개발자) 피그마(Figma)는? 클라우드 기반으로 웹 브라우저로 동작하는 UI 디자인 툴 피그마는 웹 브라우저 기반이기때문에 작업 환경에 대한 걱정 없이 사용할수 있습니다. 다시 말하자면 설치할 필요가 없고 운영체제와 상관 없이 사용할 수 있다는 장점이 있습니다. 또한 피그마는 디자인이 클라우드에 있고 고유한 URL 이 존재하기 때문에 개발자가 항상 최신 버전의 디자인을 빠르게 확인 할 수 있고(사실 개발자 뿐만 아니라 사용하는 사용자 모두) 내장된 여러가지 기능을 통해 디자이너와 개발자 사이에 커뮤니케이션을 원할하게 해줍니다. The design lives in the cloud and has a unique URL, so it serves as the source of truth for the entire t.. 2022. 10. 3.
이름 정의 규칙 (Naming Convention) 1. CamelCase 1-1. UpperCamelCase 항상 식별자의 첫번째 문자를 대문자로 표기 해야하며, 만약 여러 단어가 포함되어 있는 경우, 각 단어를 구분짓기 위해 마찬가지로 대문자로 표기한다. 규칙자체 이름에서 보여지듯 식별자의 첫단어는 대문자(U)로 지정되어 있고, 그 뒤에 Camel, Case 같이 서로 상이한 단어들을 구분짓기 위해 각 단어의 시작을 대문자로 표기한다. 나머지 문자는 모두 소문자로 표기한다. //예시 UserName BackgroundColor 1-2. lowerCamelCase 항상 식별자의 첫번째 문자는 소문자로 표기해야 하며, 나머지 규칙은 UpperCamelCase 와 동일하다. 규칙자체 이름에서 보여지듯 식별자의 첫 단어를 소문자(l)f로 지정하였고, 나머지 .. 2022. 5. 31.
Pinia - Vuex 를 대체 할 수 있을까?? Pinia 는 Vue의 새로운 상태 관리 라이브러리입니다. Pinia 는 2019년 11월경 Composition API 를 사용하여 Store for Vue가 어떻게 생겼는지 재설계하기 위한 실험으로 시작되었습니다. 그 이후 초기 원칙은 동일하지만 Pinia 는 Vue2와 Vue3 모두에서 작동하며 Composition API 를 사용할 필요는 없습니다. VueConf Toronton 2021 에서 Vue의 창시자 Evan You가 상태 관리 플러그인으로 vuex가 아닌 Pinia를 추천 Pinia([piːnjʌ] 영어로 "peenya" 로 발음됨) 는 유효한 패키지 이름인 piña(스페인어로 파인애플) 에 가장 가까운 단어입니다. 파인애플은 실제로 여러개의 과일을 만들기 위해 결합된 개별 꽃의 그룹입.. 2022. 5. 16.
Vue에서 Moment.js 사용하기(vue-moment) 자바스크립트에서 날짜 또는 시간을 다루기 위해서는 기본적으로 Date 객체를 사용합니다. 이를보다 편리하고 간단하게 활용할수 있는 라이브러리에 대해 정리해 보고자 합니다. Moment.js는 Date 형식의 데이터 파싱,검증,조작 등을 간편하게 할수 있게 해주는 유용한 라이브러리이다. 이를 Vue에서 사용하기 쉽도록 수정 배포된 버전이 vue-moment 이다. 설치 npm install vue-moment Vue.use(require('vue-moment')) require를 사용하지 않는다면 import VueMoment from 'vue-moment' Vue.use(VueMoment) 사용 위과 같이 설치하고 나면 moment를 호출하여 사용할 수 있다. Vue.$moment 의 형태로 사용한다. .. 2021. 8. 27.
늦어버린 2020년 돌아보기 이런 저런 이유(다 핑계일뿐이다 ㅠ)로 회고를 미루고 미뤘더니 지난 회고를 쓰고 1년 6개월 이라는 시간이 지나 버렸다. 더 늦기전에 되돌아보고자 한다. 프론트엔드 개발자로의 시작 2019년 LSP를 퇴사하고 결론적으론 퍼블리셔에서 프론트엔드 개발자로의 전직을 성공했다. 퍼블리셔도 물론 재미있는 직종이었고 업무의 방향이 확실하긴 했지만 그동안 느낌 점은 퍼블리셔로는 한계가 느껴졌다. 그래서 프로트엔드 개발자로의 전향을 꿈꾸도 이것 저것 공부를 위해 노력을 했다. 배운것들을 정리하고 공유하기 위해 시작한 기술블로그도 그 노력의 일환이었다. 노력이 통하였는지 다행히 전 직장 퇴사가 결정되고 3곳의 회사에서 러브콜이 와서 행복한 고민에 빠졌었다. 그중에 선택한곳이 현재 재직중인 '(주)테이블링'.. 2021. 8. 26.
Webstorm 과 jira 연동해서 사용하기 webstorm을 사용하고 업무를 진행할 때 jira를 사용하다보니 jira를 별도의 창으로 띄워놓고 이슈를 생성하고, webstorm에서 작업하다가 커밋하면서 jira 티켓번호 생성하고 푸시한 다음에 티켓을 이동시켜주고 하는 반복작업이 많아졌습니다. 어떻게 보면 별거아닌 작업일 수 있지만 까먹게 되는 일이 많고 바쁠때는 모아서 하기도 하다보니 이슈 트레킹 하는데 문제가 있어보여 찾아보다가 연동하는 방법을 찾아 정리해 보았습니다. 단축키는 Mac OS를 기준으로 정리하였습니다. 설정 webstorm에서 preferences > Tasks > Servers 로 이동합니다. 화면에서 + 버튼을 클릭해서 JIRA를 선택합니다. JIRA 외에 다른 이슈 트레커들도 연동해서 사용할 수 있습니다. JIRA 버튼을 .. 2021. 8. 26.
Webstorm에서 gitflow 사용하기 vscode 에서 webstorm으로 갈아타면서 플러그인으로 사용하던 몇가지 기능들을 webstorm 에서도 사용해 보고 싶었습니다. 그 중에 git 을 사용하다 보면 대부분의 경우 git-flow 를 따라서 작업을 진행하게 됩니다. 물론 cli 를 이용해서 정책만을 따라 가며 작업할 수 있지만 번거로운 작업들도 있고 급할때는 까먹기도 하기 때문에 편하게 사용하는 방법을 찾아보았습니다. IntelliJ Git Flow Integration를 이용한 방법입니다. gitflow 설치 그 전에 gitflow 를 사용할때는 별도로 gitflow 를 설치하지 않았었는데 webstorm에서 gitflow 를 사용하려면 avh 버전으로 설치가 필요하다. mac OS의 경우 homebrew 를 통해 gitflow 를 .. 2021. 8. 26.
gitflow 란? git-flow 를 사용한 브랜치 전략 GitFlow? 깃플로우(git-flow) 전략은 소프트웨어의 소스코드를 관리하고 출시하기 위한 '브랜치 관리 전략(branch management strategy)'중 하나이다. git-flow 전략외에도 github flow 와 gitlab flow 전략등도 있다. 각자에게 맞는 전략을 선택해서 사용하는게 가장 중요하다. git-flow 는 Vicent Driessen 이 제안한 git 의 workflow 디자인에 기반한 브랜칭 모델이다. git-flow 에서 사용하는 브랜치의 종류는 5가지이며, 크게 항상 유지되는 메인브렌치(master, develop)와 일정 기간 유지되는 보조 브랜치(feature, realease, hotfix)로 나뉜다. Master - 제품으로 출시 되는 브랜치 Devel.. 2021. 8. 26.
Vue 에서 Axios를 사용하여 서버통신 해보기 Axios 란? Axios는 HTTP 클라이언트 라이브러리 중 하나이다. 비동기 방식으로 HTTP 데이터 요청을 실행하고 또한 IE8 이상을 포함한 모든 최신 브라우저를 지원한다. Axios는 Promise를 기반의 자바스크립트 비동기 처리 방식을 사용합니다. 설치 보통 npm을 통해 설치를 진행합니다. npm install axios 이밖에도 yarn,bower,CDN 을 통해 설치도 가능합니다. // yarn yarn add axios // bower bower install axios // Using unpkg CDN 사용방법 Axios는 여러가지 별칭 method를 제공하고 있습니다. axios.get(url[, config]) axios.post(url[, data[, config]]) axio.. 2021. 8. 26.
[VScode] VScode Extension - 확장프로그램 추천 및 설치방법 VScode는 비교적 가벼운 에디터 입니다. 기본적으로는 필수적인 기능들만을 제공 하고 있습니다. 대신 마켓플레이스(Marketplace)를 통해서 많은 확장프로그램(Extension)들을 설치하여 즉시 사용 할수 있습니다. 확장프로그램을 통해 보다 편리하게 코드를 작성 할 수 있습니다. 그 중에서 많이 사용하는 것들을 한번 알아보겠습니다. 확장프로그램 찾아보기 VScode 내에서 확장기능을 찾아서 설치할 수 있습니다. VScode를 실행하면 왼쪽에 여러가지 아이콘들이 있습니다. 그 중에 가장 아래에 있는 네모모양의 아이콘 또는 명령어(Ctrl+Shift+X)를 실행하여 확장프로그램들을 확인할 수 있습니다. * 검색창의 검색을 통해서 간단하게 설치 할수 있습니다. 확장프로그램 리스트 (Extension .. 2021. 8. 26.
반응형

티스토리툴바