소소한 코딩일지

Redux saga를 공부하기 전에 Generator라는 함수에 대해서 한번 정리하고 넘어가면 Redux saga를 이해하는데 도움이 될 거라고 생각해서 정리를 해보려고 한다. Generator 일반 함수에서는 return이 한번 발생하면 return 이후에 존재하는 코드라인은 더 이상 실행되지 않는다. function OriginFunc() { return 1; // 여기 이후 코드는 절대 실행될 수 없다. console.log(12); return 2; } Generator 함수는 ES6에서 도입된 함수로, 이터러블을 생성하는 함수이다. 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 더 간단하게 이터러블을 생성할 수 있다고 한다. ※ 이터러블(Iterable)이란..

React에서 데이터는 일반적으로 위에서 아래(부모 컴포넌트 → 자식 컴포넌트)로 props를 통해 전달된다. 하지만 프로덕트의 크기가 커지고, 컴포넌트의 깊이가 깊어지면 Props의 사용이 번거롭게 느껴진다. Context를 활용하면 컴포넌트 사이에 이러한 값을 props 전달없이 공유할 수 있다. 언제 Context를 사용해야 할까 Context는 컴포넌트 트리 안에서 전역적으로 데이터를 공유할 수 있도록 고안한 방법이다. 현재 로그인 상태, 테마, 현재 사용중인 언어 이러한 데이터를 자주 사용한다. // context를 사용하면 모든 컴포넌트를 일일이 통하지 않고도 // 원하는 값을 컴포넌트 트리 깊숙한 곳까지 보낼 수 있습니다. // light를 기본값으로 하는 테마 context를 만들어 봅시다..

🔥 [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..

무작위 퀴즈를 구현하는 과정에서 random 하게 문제를 섞어야 했다. random sort를 구현함에 있어서 처음에는 sort함수를 통해 다음과 같이 정렬하는 로직을 구상했었다. function shuffle(arr) { arr.sort((a, b) => Math.random() - Math.random()); } 하지만 이 정렬 방식에는 약간의 문제가 있다. 예를 들어 1, 2, 3이 담긴 배열을 정렬한다고 할 때 다음과 같은 결과가 나온다. let arr = [1, 2, 3]; function shuffle(arr) { arr.sort((a, b) => Math.random() - Math.random()); } // 나올 수 있는 경우의 수를 count한다. let count = { 123: 0,..

## 현상 GraphQL 쿼리 결과가 정렬되어 있지 않은 채로 return 되어서 데이터에 sort를 적용시키니 다음과 같은 에러 메시지가 출력되었다. ## 해결 구글링 해보니 array를 직접 조작하려고 해서 발생하는 오류라고 한다. 그래서 다음과 같이 spread operator로 감싸준 다음에 sort를 적용하니 잘 작동하는 것을 확인할 수 있었다.

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

## 현상 vue의 tabulator라는 라이브러리를 통해 table을 형성하고, table 내부 셀에 대해서 이벤트를 걸어주는 코드를 작성하면서 이벤트가 계속해서 누적되어 발생하는 현상을 발견했다. cellClick: (cell) => { const targetClass = cell.target.className; const targetIndex = targetClass.split('-')[1]; document .querySelector(`.${cell.target.className}`) .addEventListener('change', (event) => { const cellData = event.target.value; // this.setTableData(targetIndex, cellData..

최근 로그인 구현 로직을 짜면서 Cookie, Session, Token에 대한 지식이 없어서 고생을 좀 했다. 세 가지 개념을 정리해보고 어떤 역할과 장단점이 있는지 정리해보았다. 쿠키(cookie) 쿠키는 사용자의 웹 브라우저에 전송하는 작은 데이터 조각이다. 데이터를 저장해 두었다가 동일한 서버에 재요청되었을 때 저장된 데이터를 함께 전송한다. 쿠키는 두 요청에 대해서 동일한 브라우저에서 들어온 요청인지 판단할 때 주로 사용한다. 장점 사용자의 브라우저에 저장되기 때문에 서버에 부하가 들지 않는다. 단점 개인정보를 담고 있기 때문에 사생활 문제가 있을 수 있고, 웹 브라우저 자체의 쿠키 거부 기능이 활성화되어있다면 쿠키 자체를 사용하기 힘들다. 클라이언트에 저장되어있기 때문에 쿠키로만 인증을 할 경..

백엔드에서 제공하는 API를 중첩해서 호출해야 하는 경우가 생겼습니다. ## 상황 모든 매치 리스트를 조회하면 매치 id의 리스트가 나오게 된다. 전달받은 매치 id들을 통해 각 매치의 상세정보를 받아오고 싶었다. 그래서 두 번의 API 콜이 중첩해서 사용하려고 했다. 기존에 사용하는 메서드를 중첩하는 것처럼 사용하니 다음과 같이 무수하게 많은 promise 배열을 return 받았다. const getTotalMatchData = async () => { setLoadingState(1); return await getAllMatch().then((response) => { return (response as ParentMatchesType).matches[0].matches.slice(0, 60).m..