분류 전체보기
-
React 에는 많은 상태관리 라이브러리들이 있습니다. 그중에 가장 많이 사용하는 Redux를 먼저 정리해 보았습니다. Redux의 역사 MVC 패턴 Redux의 역사는 MVC 패턴에서 시작합니다. MVC 패턴에서 Cotroller는 Model에 정의된 데이터를 조회하거나 업데이트하는 역할을 하고, 변경된 Model의 데이터를 View에 반영해 줍니다. 또한 사용자는 View를 통해 데이터를 입력하고 Model에 반영되며, View 와 Model은 데이터를 양방향으로 주고받는 형태입니다. 프로젝트의 규모가 커질수록 수많은 View와 Model들이 생겨났기 때문에 데이터가 어디로 흐르는지 파악하기 어렵다는 문제점이 있었습니다. 새 기능을 추가할때 마다 크고 작은 문제가 생겼고, 예상 할 수 없는 결과(Si..
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'는 자바스크립트 코드에서 발견된 문제를 식별하기 위한 정적 코드 분석 도구입니다. 이 도구는 2013년에 니콜라스 C. 자카스에 의해 개발되었습니다. ESLint의 규칙들은 구성이 가능하며, 사용자는 지정한 규칙을 정의하고 로드할 수 있습니다. 개발 중 특정 기능을 구현할 때, 그 기능을 구현하기 위한 여러가지 방법이 존재합니다. 예를 들자면 함수를 정의 할 때, function 키워드를 사용하여 할수도 있고 arrow function을 쓸 수도 있습니다. 또한 배열의 반복문을 사용할 때, for문을 사용할 수도 있지만, forEach, map 등 Array 내장 함수를 사용 할 수도 있습니다. 이러한 여러가지 방식들을 일관성있는 방식으로 구현할 수 있도록 도와주고 고쳐주는 것이 ESLin..
ESLint, Prettier 무엇이 다르고 어떻게 Setting 해야 할까?'ESLint'는 자바스크립트 코드에서 발견된 문제를 식별하기 위한 정적 코드 분석 도구입니다. 이 도구는 2013년에 니콜라스 C. 자카스에 의해 개발되었습니다. ESLint의 규칙들은 구성이 가능하며, 사용자는 지정한 규칙을 정의하고 로드할 수 있습니다. 개발 중 특정 기능을 구현할 때, 그 기능을 구현하기 위한 여러가지 방법이 존재합니다. 예를 들자면 함수를 정의 할 때, function 키워드를 사용하여 할수도 있고 arrow function을 쓸 수도 있습니다. 또한 배열의 반복문을 사용할 때, for문을 사용할 수도 있지만, forEach, map 등 Array 내장 함수를 사용 할 수도 있습니다. 이러한 여러가지 방식들을 일관성있는 방식으로 구현할 수 있도록 도와주고 고쳐주는 것이 ESLin..
2022.10.13 -
피그마(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..
이것만 알고가자 피그마 (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.03 -
1. CamelCase 1-1. UpperCamelCase 항상 식별자의 첫번째 문자를 대문자로 표기 해야하며, 만약 여러 단어가 포함되어 있는 경우, 각 단어를 구분짓기 위해 마찬가지로 대문자로 표기한다. 규칙자체 이름에서 보여지듯 식별자의 첫단어는 대문자(U)로 지정되어 있고, 그 뒤에 Camel, Case 같이 서로 상이한 단어들을 구분짓기 위해 각 단어의 시작을 대문자로 표기한다. 나머지 문자는 모두 소문자로 표기한다. //예시 UserName BackgroundColor 1-2. lowerCamelCase 항상 식별자의 첫번째 문자는 소문자로 표기해야 하며, 나머지 규칙은 UpperCamelCase 와 동일하다. 규칙자체 이름에서 보여지듯 식별자의 첫 단어를 소문자(l)f로 지정하였고, 나머지 ..
이름 정의 규칙 (Naming Convention)1. CamelCase 1-1. UpperCamelCase 항상 식별자의 첫번째 문자를 대문자로 표기 해야하며, 만약 여러 단어가 포함되어 있는 경우, 각 단어를 구분짓기 위해 마찬가지로 대문자로 표기한다. 규칙자체 이름에서 보여지듯 식별자의 첫단어는 대문자(U)로 지정되어 있고, 그 뒤에 Camel, Case 같이 서로 상이한 단어들을 구분짓기 위해 각 단어의 시작을 대문자로 표기한다. 나머지 문자는 모두 소문자로 표기한다. //예시 UserName BackgroundColor 1-2. lowerCamelCase 항상 식별자의 첫번째 문자는 소문자로 표기해야 하며, 나머지 규칙은 UpperCamelCase 와 동일하다. 규칙자체 이름에서 보여지듯 식별자의 첫 단어를 소문자(l)f로 지정하였고, 나머지 ..
2022.05.31 -
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(스페인어로 파인애플) 에 가장 가까운 단어입니다. 파인애플은 실제로 여러개의 과일을 만들기 위해 결합된 개별 꽃의 그룹입..
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.05.16 -
자바스크립트에서 날짜 또는 시간을 다루기 위해서는 기본적으로 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 의 형태로 사용한다. ..
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.08.27