본문 바로가기

전체 글36

React 상태관리 라이브러리 1탄 (Redux) React 에는 많은 상태관리 라이브러리들이 있습니다. 그중에 가장 많이 사용하는 Redux를 먼저 정리해 보았습니다. Redux의 역사 MVC 패턴 Redux의 역사는 MVC 패턴에서 시작합니다. MVC 패턴에서 Cotroller는 Model에 정의된 데이터를 조회하거나 업데이트하는 역할을 하고, 변경된 Model의 데이터를 View에 반영해 줍니다. 또한 사용자는 View를 통해 데이터를 입력하고 Model에 반영되며, View 와 Model은 데이터를 양방향으로 주고받는 형태입니다. 프로젝트의 규모가 커질수록 수많은 View와 Model들이 생겨났기 때문에 데이터가 어디로 흐르는지 파악하기 어렵다는 문제점이 있었습니다. 새 기능을 추가할때 마다 크고 작은 문제가 생겼고, 예상 할 수 없는 결과(Si.. 2022. 11. 21.
ESLint, Prettier 무엇이 다르고 어떻게 Setting 해야 할까? 'ESLint'는 자바스크립트 코드에서 발겨노디는 문제시되는 페턴들은 식별하기 위한 정적 코드 분석 도구입니다. 2013년에 니콜라스 C. 자카스의 의해 개발되었습니다. ESLint 의 규칙들은 구성이 가능하며, 사용자가 지정한 규칙들을 정의하고 로드 할 수 있습니다. 개발 중 특정 기능을 구현할 때, 그 기능을 구현하기 위한 여러가지 방법이 존재합니다. 예를 들자면 함수를 정의 할 때, function 키워드를 사용하여 할수도 있고 arrow function을 쓸 수도 있습니다. 또한 배열의 반복문을 사용할 때, for문을 사용할 수도 있지만, forEach, map 등 Array 내장 함수를 사용 할 수도 있습니다. 이러한 여러가지 방식들을 일관성있는 방식으로 구현할 수 있도록 도와주고 고쳐주는 것이.. 2022. 10. 13.
이것만 알고가자 피그마 (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.
반응형

티스토리툴바