본문 바로가기

전체 글

 (364)
[Udemy Vue 완벽가이드 Section15] 224. 네임스페이스 모듈 # 지역 모듈지역 상태 외에도, 모듈 전체를 지역 모듈로 만들 수 있다. 어떻게? → 바로 namespace를 이용해서. 여러 모듈을 분명하게 서로 분리하기 위해서. # 지역 모듈을 사용하는 경우그렇다면 지역모듈은 어떤 경우에 사용할까? → 애플리케이션이 커지면서 이름이 중복되는 경우가 생긴다. 한 저장소 내에 다른 모듈의 getter나 actions 등에 같은 이름을 사용하게 될 수도 있다. 예를 들어, 만약 counterModule에 login 액션이 있다면, 메인 저장소에 있는 login 액션과 충돌한다. 현재, state를 제외하고 모든 것이 하나의 객체로 결합된 상태이므로.// main.js const counterModule = { actions: { login(){}, // login액션 추..
[Vuex] mapGetters사용 시, 여러 namespace에서 getters가져오는 방법 1/ namespace가 없는 모듈의 getters namespace가 없는 모듈에서 getter를 가져올 때는, 아래와 같이 배열을 이용하여 가져올 수 있다. import { mapGetters } from 'vuex'; export default { computed: { ...mapGetters(['someGetter', 'anotehrGetter']), }, } 2/ 하나의 namespace의 모듈의 getters 하나의 namespace의 모듈에서 getter를 가져올 때는, 첫번째 인수에 네임스페이스 이름 작성, 두번째 인수에는 배열에 가져올 getter를 작성하면 된다. import { mapGetters } from 'vuex'; export default { computed: { ...ma..
[Udemy Vue 완벽가이드 Section15] 223. 지역 모듈 상태 이해하기 메인 저장소에 모듈이 결합될때, 메인 저장소의 다른 요소들과 같은 레벨로 결합된다. 이런 동작은 바꿀 수 있다. 사실 이미 바뀐 곳이 있다. mutations에 increase 안에 console.log(state)를 찍어보자. increase 변형이 아닌, counterModule 안에 increase 변형 안에 있다. 'Add 10'을 클릭해보자. Add 10 state에 대한 로그를 살펴보면, 흥미로운 점을 볼 수있다. counter는 볼 수 있는데, 'isLoggedIn'상태는 없다. 그렇다면, 모든 게 한 저장소에 결합된다고 했는데 왜 isLoggedIn은 counterModule의 state에 보이지 않을까? → 모듈 내의 state는 모듈 내의 local 상태로 간주되기 때문이다. mutat..
vue-cli로 vue프로젝트 생성 시, main.js와 index.html파일은 어떻게 연결될까? # 궁금증 Vue라는 프레임워크를 계속해서 파고 있다. 그러던 와중, 문득 vue-cli로 vue 프로젝트를 생성했을 때, main.js파일에서 생성된 앱 인스턴스가 어떻게 알고 public폴더에 있는 index.html파일의 DOM요소에 mount, 즉 연결이 되는지 궁금했다. (이거...궁금해한 사람.. 없어?ㅎㅎ) public/index.html src/main.js import { createApp } from 'vue'; import router from './router.js'; import App from './App.vue'; import store from './store/index.js'; const app = createApp(App); app.use(router); app.use(s..
2차원 배열에서의 index error 처리 2차원 이상의 배열에서 인덱스의 범위를 벗어나는 경우, 에러가 발생한다. 공원산책 문제를 풀면서 계속 error가 났다. 풀다가 도저히 해결이 나지 않아 질문을 올리니 index error가 난다는 답변이 달렸다. index error가 도대체 뭔가 싶어 구글링을 하였다. # 2차원 배열에서 인덱스를 벗어나면? - 인덱스를 벗어나서 에러가 발생하는 상황을 확인해보자. - 2차원 배열에서 두 가지의 경우를 살펴보자. 1/ 배열의 두 번째 인덱스값을 벗어난 경우 → arr[0][5] 2/ 배열의 첫 번째 인덱스값을 벗어난 경우 → arr[-1][0] const arr=[[1, 2, 3, 4, 5], [3, 7, 1, 6, 1], [7, 2, 5, 3, 4], [4, 3, 6, 4, 1], [8, 7, 3, ..
[JavaScript] 옵셔널 체이닝 (?.) 옵셔널 체이닝을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다. # 옵셔널 체이닝이 필요한 이유 예시 1 user가 여러명 있다고 해보자. 그 중 몇 명은 address 정보를 가지고 있지 않다. 이럴때 user.address.street을 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; alert(user.address.street); // TypeError:Cannot read property 'street' of undefined // user.address의 값이 undefined이므로 예시 2 다른 사례로는, 브라우저에서 동작하는 코드를 개발할 때 발생할 수 있는 문제가 있다. 자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근해 ..
[JavaScript] 논리적 AND 연산자 (&&) # 설명 - 모든 불리언 피연산자가 true가 되었을 때 해당 피연산자의 집합은 true가 된다. - 왼쪽에서 오른쪽으로 평가할 때 처음으로 만나는 falsy한 피연산자의 값을 즉시 반환한다. [ falsy한 값의 예시 ] false null NaN 0 빈 문자열("" or '' or ``) undefined - 모두 truthy값이라면 마지막 피연산자의 값을 반환한다. const a = 3; const b = -2; console.log(a > 0 && b > 0); // false // b > 0의 값이 false이므로, 값 그대로 false 반환 - AND 연산자는 non-Boolean 값을 보존하고, non-Boolean값 그대로 반환한다. result = "" && "foo"; // ""이 할당..
[Udemy Vue 완벽가이드 Section15] 222. 모듈로 저장소 구성하기 저장소 및 상태 등이 점차 많아짐에 따라 Vuex가 제공하는 여러 유능한 기능 중에 모듈을 설정해서 저장소를 여러 모듈로 나누는 기능을 사용하면 좋다. 애플리케이션에 하나의 저장소가 있고, 그 저장소가 다수의 모듈로 이루어지면, 코드를 관리하기 쉬워진다. 모듈을 설정해두지 않으면, 자동으로 하나의 루트 모듈과 루트 상태만 가지게 되지만, 모듈을 원하는 만큼 추가할 수 있다. 예를 들어, counter에 대한 모듈 하나, 인증에 대한 모듈 하나를 가질 수도 있고, 또는 인증은 루트 모듈의 루트 상태에 둔 채, 추가 모듈에 counter를 아웃소싱 할 수도 있다. main.js에 counterModule을 생성하는데, 이는 저장소가 아닌 JavaScript 객체이다. 저장소를 생성할 때 전달했던 객체(cre..

티스토리툴바