# store

24개의 포스트
post-thumbnail

vuex store 알아보기

✍ Vuex 개념 >상태 관리를 위한 패턴이자 라이브러리이고, 중앙 집중식 저장소 역할을 담당 상태관리란? 여러 컴포넌트 간에 데이터 전달과 이벤트 통신을 한곳에서 관리하는 패턴 중앙 집중식 저장소 역할 데이터를 store라는 파일을 통해 관리하고 프로젝트 전체에 걸쳐 활용할 수 있게 해주는 방법 vuex를 사용하는 프로젝트는 프로젝트 전체에서 사용되는...

2021년 10월 14일
·
0개의 댓글
post-thumbnail

사전 프로젝트(Dictionary) - 개념설명 및 소스코드

첫째, 프로젝트를 생성한다.yarn create react-app 프로젝트명둘째, 뷰를 만든다.styled-components를 사용하여 디자인한다.셋째, 라우팅을 한다.index.js에서 BrowserRouter로 감싸준다.넷째, 리덕스를 이용한다.redux폴더 >

2021년 9월 29일
·
0개의 댓글
post-thumbnail

Redux

Redux는 react 라이브러리 생태계에서 많이 사용되는 상태관리 라이브러리 이다.컴포넌트의 상태관리 로직들을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있으며, 글로벌 상태관리도 쉽다.프로젝트의 진행에 있어 redux가 많은 도움이 되기는 하지만, 꼭 모든

2021년 9월 17일
·
0개의 댓글
post-thumbnail

[Vuex] Store actions, mutations, getters 명명 규칙 꿀팁들 (Vue, Nuxt)

필자는 수개월째 Nuxt.js 로 프론트엔드 개발 작업을 하고 있다. 그러던중 작업한 변수명, 함수명 등이 표준에 맞지 않고 거기에 더해서 다른 수많은 변수명, 함수명과 중복이 되거나 뜻을 직관적으로 알기 어려워 유지보수 비용이 증가 하고 있음을 알게 되었다.

2021년 9월 2일
·
0개의 댓글
post-thumbnail

Jest로 Vue/Nuxt 컴포넌트 테스트 만들기 (Store, Routes Params 사용)

현대 프로그래밍에서 자동화 테스트는 개발자들의 디버깅 시간을 아껴주고 동시에 생산성을 높여 주고 있으므로 필수라고 할 수 있겠다. 이후에 Jenkins 등의 CI/CD 툴과 연계 하면 그 시너지는 엄청나게 커진다.프론트엔드 개발에서도 마찬가지인데

2021년 9월 1일
·
0개의 댓글
post-thumbnail

Jest로 Nuxt Store 스토어 테스트 만들기 (모듈화, 네임스페이스 사용)

넉스트를 처음 설치 하고프로젝트를 생성 하면 테스트 프레임워크를 옵션으로 선택 할 수 있다. 친절하게도 샘플 테스트도 같이 딸려온다.하지만 상용 웹앱을 제작 하거나 꽤나 규모가 있는 프로젝트를 진행 중이라면 대부분의 메인로직이 Vuex 스토어(Store)에 저장 되어

2021년 8월 31일
·
0개의 댓글
post-thumbnail

Nuxt.js/Vue.js에서 Vuex(Store) 사용 하여 Axios API 호출 하고 세션에 값을 저장 하기

엑시오스는 자바스크립트 기반의 비동기 HTTP 클라이언트이다. yarn create nuxt-app myapi 커맨드를 이용해 프로젝트를 생성 한다.이어 나타나는 헬퍼에서 다른건 자유롭게 골라도 되지만 Nuxt.js modules: 질문에서 Axios를 고르도록 하자.

2021년 8월 27일
·
0개의 댓글
post-thumbnail

Vue.js/Nuxt.js에서 Vuex(Store) 사용시 Cause 발생 해결 방법

Vuex 라이브러리를 이용 해서 넉스트 프로젝트 진행중, jest를 이용한 자동화 유닛테스트 부분에서 에러는 아니지만 아래와 같은 경고 메시지가 Lint에서 발생 하였다.문제 되는 부분 전체 소스 코드문제 되는 부분은 new Vuex.Store 라인으로 원인은 Vuex

2021년 8월 24일
·
0개의 댓글
post-thumbnail

[React] 리덕스 라이브러리 이해하기

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리입니다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다.컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을

2021년 6월 29일
·
0개의 댓글
post-thumbnail

[Vue] Vuex 이해 한대로 정리

Vuex란 무엇인가? Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할 여러 컴포넌트가 공통의 상태를 공유해야 한다면? 공통의 상태 조건 여러 뷰는 같은 상태에 의존해야한다. 서로 다른 뷰의 작

2021년 5월 13일
·
0개의 댓글

Vue.js(4) Router 및 Axios, async await 개념

async..await와 axios 및 Promise싱글페이지 애플리케이션 구현할 때 사용하는 라이브러리 이다.페이지간에 이동하는 기능 구현할때 사용한다.라우터 인스턴스 생성var router = new VueRouter({ ... })라우터 옵션 추가 가능routes

2021년 5월 3일
·
0개의 댓글
post-thumbnail

#1 Today I Learned - 21.01.04

react-redux: 연결하기 ❗️ styled-components: props로 style 제어 ❗️ es6: arrow function 구분하기

2021년 1월 4일
·
0개의 댓글
post-thumbnail

B.TIL 07 : Vuex

Vuex에 대해서 VueX는 Vue.js에 어플리케이션에 대한 상태 관리를 도와주는 라이브러리이다. 어플리케이션에 모든 컴포넌트에 대한 중앙집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경하는 기능을 가지고 있다. React에서 Redux가 존재하듯, V

2020년 11월 25일
·
0개의 댓글
post-thumbnail

[TIL] 상태관리, Local과 Store

누군가에게 이런 얘기를 들었던 적이 있다. React / Redux를 사용하면서 onChange같은건 하나 만들어놓고 가져와서 계속 사용할 수 있는거 아니야? 라고 생각했었다.React state는 컴포넌트 지역에서 저장되는 값으로 하위 컴포넌트에 props를 활용하여

2020년 11월 18일
·
0개의 댓글
post-thumbnail

[React] 14. React-Redux 예제 (Redux O)

이번에는 Redux를 적용한 예제를 만들어 보겠습니다. 전 게시글에서 만들었던 화면과 동일한 예제입니다. 일단 구조는 데이터를 받아 화면에 뿌려주기만하는 컨테이터 컨포넌트* components* 폴더를 만들고, 그 안에 AddNumber.jsx, AddNumberRoo

2020년 10월 20일
·
0개의 댓글
post-thumbnail

Vuex store

2020년 10월 8일
·
0개의 댓글

[vue] vuex-store module화

vuex의 store뿐만 아니라, 한 파일 내에 담고있는 정보가 너무 많다면, 특정 부분을 별도로 분리해 하나의 파일로 만드는 것이 좋다. 그 때 분리한 하나의 파일을 moduel이라고 하고, 그러한 행위를 모듈화라고 한다.store.jsstore.js파일 하나에 위보

2020년 8월 30일
·
0개의 댓글

[React 리팩토링 #4] 예발자 프로젝트에 Redux 적용하기

사실 예발자 프로젝트는 앱 규모가 복잡하지 않고, 동적으로 state 값이 변할 일이 없기 때문에 굳이 상태관리 라이브러리가 필요 없을수도 있겠지만, 편리함을 경험해보자는 취지로 redux를 사용해보기로 했다.

2020년 8월 14일
·
0개의 댓글
post-thumbnail

VUEX store 여러 개를 모듈화하기

vuex 에서 store를 여러개 만들고 쉽게 사용해봅시다.

2020년 4월 19일
·
2개의 댓글