소소한 코딩일지

🔥 [Vuex 공식문서](https://vuex.vuejs.org/)를 참고하여 학습한 자료입니다. 더 자세한 내용은 공식문서를 참고해 주세요. State Vuex에 저장하는 데이터는 일반적으로 단일 컴포넌트 내에서 선언하는 data의 형식과 동일한 규칙을 따른다. Vuex의 상태 가져오기 const Counter = { template: `{{ count }}`, computed: { count () { return this.$store.state.count } } } mapState의 사용 모든 state를 호출할때마다 써주면 반복적인 코드가 활용될 수 있다. 이러한 코드라인을 절약하기 위해 getter함수를 생성하는 mapState를 활용할 수 있다. computed: { localComputed ..

🔥 [Vuex 공식문서](https://vuex.vuejs.org/)를 참고하여 학습한 자료입니다. 더 자세한 내용은 공식문서를 참고해 주세요. What is Vuex? Vuex는 Vue.js 애플리케이션의 상태관리 패턴 + 라이브러리. 컴포넌트에서 사용할수 있게 중앙집중적인 Store를 제공한다. Store는 state를 변경할 수 있는 유일한 수단과, 예측 가능한 변화 패턴을 보장한다. What is “State Mangaement Pattern”? State → 애플리케이션에서 사용되는 Source View → State의 선언적 매핑...?, state가 보여지는 걸 말하는 것 같음 Actions → View에서 발생한 input에 대해서 state를 바꾸는 행위. → 위 세가지의 순환을 ‘one..

vue.js 관련 프로젝트를 하면서 style 태그에 scoped를 추가해서 사용하고 있다. 위처럼 scoped를 붙여서 사용하면 현재 스타일 코드를 사용하고 있는 컴포넌트에만 스타일이 적용된다. 반대로 scoped가 없다면 다른 컴포넌트에 영향을 주는 디자인 코드가 돼버린다. 그렇다면 전역 스타일을 사용하긴 하는데 일부만 scoped를 적용시키려면 어떻게 해야 할까에 대해서 생각해보았고 간단하게 해결할 수 있었다. style tag를 분리해서 적용하면 쉽게 해결할 수 있다. 또 다른 방법으로는 ::v-deep, /deep/, >>>를 사용하면 된다. 다음과 같이 사용하면 하위 컴포넌트에 scoped 된 디자인을 적용할 수 있다. /deep/ 과 >>>는 css 코드에서는 잘 작동하지만 scss 같은 전..

DB 관련 정보나 API_KEY 등 외부에 공개되면 안 되는 값들이 개발 중에 발생할 수 있다. 이런 값들을 관리하기 위해서 .env라는 환경변수 파일을 만들어 사용해준다. . env 환경변수 파일을 사용하는 방법은 다음과 같다. 1. 파일 생성 프로젝트 최상위 폴더에. env 파일을 만들어 준다. 2. 환경변수 설정 환경 변수로 저장할 내용을 작성한다. 이때 REACT_APP_으로 변수명을 선언해주어야 사용이 가능하다. 그리고 = 이후 문자열에 따옴표를 따로 붙이지 않는다. REACT_APP_API_KEY=dafsdlfjaoweonvaenvdapjf 3. 환경 변수 사용 사용할 때는 process.env.변수명을 통해 사용이 가능하다 process.env.REACT_APP_API_KEY 환경 변수 설정..

프로젝트를 하면서 상태 관리 라이브러리인 Redux를 사용하게 되었다. 생소한 개념이라 Redux에 대한 키워드들과 규칙에 대해서 한번 정리해보려고 한다. 상태 관리와 상태관리 라이브러리 우선 '상태'는 컴포넌트 내부에 보이는 데이터뿐 아니라 웹 기능에 포함되는 모든 데이터를 말하며, '상태'를 관리하는 것을 '상태 관리'라고 한다. 그리고 이 상태 관리와 관련된 자원을 모아놓은 것이 '상태 관리 라이브러리'가 되겠다. Redux 리덕스는 리액트 생태계에서 가장 많이 사용되는 상태관리 라이브러리 중 하나다. 리덕스를 사용함으로써 우리는 두 가지 부분에서 장점을 가질 수 있다. 첫 번째는 컴포넌트 간 데이터를 전달하는 것이 편리하다. 상태 관리 없이 컴포넌트 간 데이터를 전달하는 방법으로 우리는 props..

React관련 과제를 수행하면서 화면 랜더링을 최적화하는 역할을 수행해야 했고, 관련 지식이 전혀 없어 구글링을 수행했습니다. 그 결과 React.memo(), useMemo(), useCallback()이라는 세 가지 메서드를 경험하게 되었고, 이후 활용 가능성이 높은 메서드들이라 생각해 세 가지에 대해서 공부한 내용을 정리해보려고 합니다. React.memo() React.memo() 컴포넌트의 Re-rendering을 방지하는 메서드입니다. 기본적인 동작은 컴포넌트가 전달받는 props가 바뀌지 않았다면 리 랜더링이 일어나지 않도록하여 컴포넌트 리랜더링 성능 최적화를 해줄 수 있는 함수입니다. 사용 예) import React from "react"; function Card({ cardConten..

vue를 통해 여러 컴포넌트를 만들면서 점점 아무 생각 없이 computed와 methods를 남발하고 있었고, 점점 어떤 경우에 사용해야 할 지 모호해지고 있음을 느꼈다. 그래서 두 가지를 간단하게 정리해보려고 한다. 1. computed computed는 DOM 구조가 생성되기 전에 computed 내부에 있는 function들을 계산하여 캐싱(저장)해두고, 계산에 사용되는 내부 값이 변경 되면 다시 계산한다. Computed는 위에서 언급한 것과 같이 미리 계산을 실행하여 값을 캐싱 해두기 때문에 이후 동일한 값에 대해서 연산을 할 때 저장된 값을 가져오기만 하면 되므로 속도와 중복 처리 측면에서 큰 장점을 가진다. 그리고 template에서 호출시 ()를 생략하여 호출하고, ()에 들어가는 인자들..

1. vue.config.js 파일 조작 vue.config.js 파일을 만들고 아래 다음과 같이 입력한다. module.exports = { lintOnSave : false; } 2. /* eslint-disable */ eslint 설정을 끄고 싶은 vue file의 script 태그 최상단에 /* eslint-disable */를 넣는다. 또는 eslint 설정을 꺼주어야 하는 부분에만 /* eslint-disable */ 과 /* eslint-enable */로 감싸 놓는다. /* eslint-disable */ alert('Enter Word'); /* eslint-enable */ 3. // eslint-disable-next-line no-alert eslint 설정을 끄고 코드의 상단에 ..

사용자의 입력값을 받는 방법으로 v-model과 v-on:input 방법이 있다. 두 가지 방법에 어떤 차이가 있는지 정리해보려고 한다. v-model v-model 자체가 v-bind와 v-on의 조합으로 작동하는 것과 같다. ... v-bind 속성은 데이터 값을 해당 HTML 요소와 연결할 때 사용한다. v-on은 HTML에서 발생한 이벤트를 아래 methods의 로직과 연결할 때 사용된다. HTML의 input 종류에 따라 v-model의 v-bind, v-on의 구성이 달라진다. input --> v-bind:value | v-on:input checkbox --> v-bind:checked | v-on:change select --> v-bind:value | v-on:change v-mode..

Vue를 사용하여 개인 프로젝트를 제작하면서 v-for를 사용할 일이 아주 많았다. v-for를 아무 생각 없이 사용했을 때 어떤 일이 일어나는지 공유해두면 좋을 것 같아 작성하게 되었다. 우선 내가 원한 방향은 한 축구 클럽의 최근 10경기의 결과를 v-for로 보여주고 싶었다. 처음 작성한 대로 10경기의 결과가 form 변수에 저장되어 있고, v-for를 통해 하나씩 불러오면서 적절한 디자인을 적용시켜 찍어 주었다. ( 10경기에 대한 데이터가 제대로 저장되는 부분은 확인했습니다. ) 하지만 결과는 페이지 전환시 10경기가 제대로 보이지만 다른 클럽으로 화면을 전환할 경우 기존의 값이 일부 누적되는 이슈가 발생했다. 그래서 코드를 인덱스와 함께 처리하며 key를 index로 선언하는 방법으로 v-f..