상황

v-btn을 특정 변수의 값이 들어가있을때만 활성화해주고 싶었음.

해결방법

disabled에 조건문을 넣으면 된다.

코드

두가지 방법이 있다.

그냥 넣기

<v-btn
  class="mx-3"
  x-large
  :disabled="pending" //pending이 true일때만 버튼이 보여짐
>

삼항연산자 넣기

<input 
	type="text" 
    id="name" 
    class="form-control" 
    name="name" 
    v-model="form.name" 
    :disabled="validated ? disabled : ''"
>

참고

http://daplus.net/javascript-vue-js%EC%97%90%EC%84%9C-%EC%A1%B0%EA%B1%B4%EB%B6%80%EB%A1%9C-%EC%9E%85%EB%A0%A5%EC%9D%84-%EB%B9%84%ED%99%9C%EC%84%B1%ED%99%94%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95/

상황

자주 잊어버리고 실수 할 수 있는 상황들을 모아봤다.

1. every 함수와 filter함수 사용법

2. td/tr에 css넣을 때 주의 할점

3. margin, padding 넣는 방법

4. mounted와 created 차이점 10초 요약

해결방법

1. every와 filter같은 함수의 parameter에는 함수를 넣어줘야한다. (변수나 결과값을 넣어주면 안됨)

2. tr 아래에 td가 있어서, tr에만 css를 적용시켜줬다. 그러나 td에도 css가 설정되어 있으면 일일히 다 설정을 바꿔줘야 함. (자식 css가 우선)

3. vuetify에서 padding과 margin 넣을때는 ,mt, pt를 사용하자.

4. mounted는 created 보다 전에 실행되는데, DOM이 아직 안만들어졌을 때라서 init을 할때 쓰인다. created는 잘 안쓰이는데 스크롤 위치 조정, 포커스 등의 엘리먼트에 동작을 가할때 주로 사용한다.

코드

1. Every는 배열의 값을 모두 인자 함수로 돌려준다. ex) Allchecked (O), Allchecked() (X)

items.every((item) =>
  typeof item === 'object' ? item.text && item.value : !_.isNil(item)
)

2. 따로 없음. tr에 값들 다 따로 넣어주자.

3. mt(MarginTop), pt(PaddingTop), mr(MarginRight) 이렇게 값을 주면된다. -를 쓰고 옆에 숫자 넣기

<v-text-field
  class="mt-0 pt-0"
  desne
/>

4. mounted 사용법

async mounted() {
    try {
      await this.init(query)
    } catch (e) {
      this.error = true
      console.error(e)
    }
},

참고

내 머릿속

상황

JS에서 배열을 다루는데, 특정 값을 제일 앞,뒤에 넣어주고 싶었음.

해결방법

push와 unshift 사용

제일 앞에 추가 - unshift

제일 뒤에 추가 - push

코드

test = new Array()

test = [2,3]

test.push(4) //제일 뒤에 4 추가

// test 상황 = [2,3,4]

test.unshift(1) //제일 앞에 1추가

//test = [1,2,3,4]

참고

https://webisfree.com/2015-06-22/[%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8]-%EB%B0%B0%EC%97%B4%EC%97%90-%EA%B0%92-%EC%95%9E-%EB%98%90%EB%8A%94-%EB%92%A4%EC%97%90-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0-unshift()-push() 

상황

v-btn의 버튼색과 글자색을 각각 바꾸고 싶었다.

primary나 error같은 기본으로 설정된 색이 아니라, 내가 원하는 색으로.

해결방법

먼저 표준 색상을 알아보자.

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
    
Vue.use(Vuetify);
    
export default new Vuetify({
  theme: {
    themes: {
      light: {
        primary: "#14C6FF", //기본
        secondary: "#424242", //기본
        accent: "#82B1FF", //기본
        error: "#FF5252",
        info: "#2196F3",
        success: "#4CAF50",
        warning: "#FFC107",
        lightblue: "#14c6FF",
        yellow: "#FFCF00",
        pink: "#FF1976",
        orange: "#FF8657",
        magenta: "#C33AFC",
        darkblue: "#1E2D56",
        gray: "#909090",
        neutralgray: "#9BA6C1",
        green: "#2ED47A",
        red: "#FF5c4E",
        darkblueshade: "#308DC2",
        lightgray: "#BDBDBD",
        lightpink: "#FFCFE3",
        white: "#FFFFFF"
      }
    }
  }
});

이 위에 적혀있는 gray, white이런 색들은 그냥 바로 입력하면 된다.

그 외의 색은 어떻게 할까?

코드

기존에 설정된 색 사용

<v-btn 
	color="primary" //버튼색 변경
	class="red--text" //글자색 변경 --text 붙여주기
>

커스텀한 색 사용

<v-btn
  color="rgba(105, 128, 150, 1)" //버튼색 변경
  class="" //텍스트는 색을 지정해주고 --text를 설정해줘야한다. 
>

참고

https://cyworld.tistory.com/5586

상황 :

처음 init 할때 초기화가 제대로 안됐다. init함수를 호출하는데, 함수 결과값이 늦게 나와서, 계속해서 업데이트가 안됐다.

해결방법 : 

Vuetify를 쓰는 경우는 v-progress-bar를 사용해보자.

로딩이 다 됐는지 확인하는 변수 loading을 False로 선언하고,

init을 시작할때 True로 바꿔주고 끝날때 False로 바꾸자.

그리고 v-progress-bar에 v-if="loading"을 걸어주면,

init이 다될때까지 로딩바가 돌아가고, 완벽하게 로딩이 되면 제대로 된 값을 보여준다.

예시 : 

    <v-progress-linear v-if="loading" indeterminate />
    <div v-else> //여기는 이제 제대로 됐을경우 나올 코드를 아래써주면 됨

async mounted() { //init 호출
    try {
      await this.init(query)
    } catch (e) {
      this.error = true
      console.error(e)
    }
  },

async init() { // init 예시
    this.loading = true
    await this.fetchReviewDetail()
    this.loading = false
},

참고 

https://vuetifyjs.com/en/api/v-progress-linear/

Input checkbox경우

Vuejs에서 input checkbox를 사용하던 도중 값이 바뀔 때 이벤트를 걸고 싶었는데, @click으로 주니까 계속해서 변경되기 전의 값이 나왔다. 다른 곳에서는 @change를 사용하면 된다고 했다.

<-- html --> 

<input
	type="checkbox"
	id="xxx"
	v-model="xxx"
	@change="check"
/>
                
                

< -- script -- >

private xxx: boolean = true;

private check(e: any) {
     this.$nextTick(() => {
       console.log(this.xxx);
    });
}​

Vuetify를 사용하는 경우

곰곰히 생각해보니 v-checkbox가 있었고, 거기서 v-model을 사용하면 v-model에 준 변수로 값이 들어간다.

<v-checkbox
    hide-details
    v-model="isRegisterReview"
    label="후기후기"
></v-checkbox>

이렇게 넣어주면, data에 있는 'isRegisterReview'에 값이 들어간다.

들어가는 값 :

• 체크 : 1
• 체크해제 : 0

생각보다 자주쓰이는데 까먹어서, 계속 찾아보게 되는 정규표현식을 정리해보았다.

1. 메타문자 (원래 의미가 아닌 새로운 의미)

1-1. [ ] 문자 클래스

• 문자 클래스(character class)인 [ ].  "[ ] 사이의 문자들과 매치"라는 의미를 갖는다.

[abc] # # abc 중 하나와 매치

• [ ] 안에 - 를 사용하면 두 문자 사이의 범위를 뜻한다.

[a-zA-Z] : 알파벳 모두
[0-9] : 숫자

• [자주 사용하는 문자 클래스]
  • \\d - 숫자와 매치, [0-9]와 동일한 표현식이다.
  • \\D - 숫자가 아닌 것과 매치, [^0-9]와 동일한 표현식이다.
  • \\w - 문자+숫자(alphanumeric)와 매치, [a-zA-Z0-9_]와 동일한 표현식이다.
  • \\W - 문자+숫자(alphanumeric)가 아닌 문자와 매치, [^a-zA-Z0-9_]와 동일한 표현식이다.
  • \\s - whitespace 문자와 매치, [ \\t\\n\\r\\f\\v]와 동일한 표현식이다. 맨 앞의 빈 칸은 공백문자(space)를 의미한다.
  • \\S - whitespace 문자가 아닌 것과 매치, [^ \\t\\n\\r\\f\\v]와 동일한 표현식이다.
• [ ] 안의 ^는 Not을 뜻한다.

[^0-9] # 숫자를 제외한 문자만 매치
[^abc] # a, b, c를 제외한 모든 문자와 매치

1-2. 모든 문자 .

• 정규 표현식의 Dot(.) 메타 문자는 줄바꿈 문자인 \\n을 제외한 모든 문자와 매치됨을 의미

a.b # a + 모든 문자 + b를 뜻한다.

• 원래 . 으로 사용하고 싶으면 [ ] 에 넣으면 된다.

a[.]b #a.b만 가능

1-3. 반복문자 *

• 0~무한대 반복은 * 을 이용하면 된다.

lo*l # looooool도 매치됨

• 1~무한대 반복은 +를 이용하면 된다.

lo+l # loool매치 but, ll는 매치안됨

• 0~1 반복은 ?을 이용하면 된다.

lo?l #ll, lol매치 but loool은 매치 안됨

• 반복 횟수 지정은 { } 를 이용하면 된다. - {m,n}은 m번에서 n번 반복까지 허용

lo{3,5}l # loool, looool, loooool만 매치

1-4. ETC

• |은 or과 같은 의미이다. → 둘 중하나와 매치

a|b|c #a, b, c 중아무거나 다 매치 abc도 가능

• 문자열의 처음과 매치하기 ^

^a # a로 시작하는 문자열만 매치함

@ [^]와는 다른 의미임

• 문자열의 제일 마지막과 매치 $

a$ #마지막 글자가 a여야 매치

# 조건표현식

• 표현식1(?=표현식2): 표현식1 뒤의 문자열이 표현식2와 매치되면 표현식1 매치.

'hello(?=world)' # hello 뒤에 world가 있으면 hello를 매치

• 표현식1(?!표현식2): 표현식1 뒤의 문자열이 표현식2와 매치되지 않으면 표현식1 매치.

'hello(?!world)' # hello 뒤에 world가 없으면 hello를 매치

• (?<=표현식1)표현식2: 표현식2 앞의 문자열이 표현식1과 매치되면 표현식2 매치.

'(?<=hello)world' # world 앞에 hello가 있으면 world를 매치

• (?<!표현식1)표현식2: 표현식2 앞의 문자열이 표현식1과 매치되지 않으면 표현식2 매치.

'(?<!hello)world' # world 앞에 hello가 없으면 world를 매치

1-5. 정규표현식 모듈

Python 에서는 re 모듈을 통해 정규표현식을 사용한다.

import re

compile 정규표현식 컴파일

re.compile() 명령을 통해 정규표현식을 컴파일하여 변수에 저장한 후 사용할 수 있다.

변수이름 = re.compile('정규표현식')

정규표현식을 컴파일하여 변수에 할당한 후 타입을 확인해보면 _sre.SRE_Pattern 이라는 이름의 클래스 객체인 것을 볼 수 있다.

p = re.compile('[abc]')
print(type(p))

1-6. 정규표현식 매치 검색 함수 4가지

1. Match : 시작부터 일치하는 패턴 찾기

p.match('aaaaa')
<_sre.SRE_Match object; span=(0, 5), match='aaaaa'>

p.match('bbbbbbbbb')
<_sre.SRE_Match object; span=(0, 9), match='bbbbbbbbb'>

p.match('1aaaa')
None

p.match('aaa1aaa')
<_sre.SRE_Match object; span=(0, 3), match='aaa'>

1. Search : 전체 문자열에서 첫번째 매치 찾기

p.search('aaaaa')
<_sre.SRE_Match object; span=(0, 5), match='aaaaa'>

p.search('11aaaa')
<_sre.SRE_Match object; span=(2, 6), match='aaaa'>

p.search('aaa11aaa')
<_sre.SRE_Match object; span=(0, 3), match='aaa'>

p.search('1aaa11aaa1')
<_sre.SRE_Match object; span=(1, 4), match='aaa'>

1. Findall : 모든 매치를 찾아 리스트로 변환

p.findall('aaa')
['aaa']

p.findall('11aaa')
['aaa']

p.findall('1a1a1a1a1a')
['a', 'a', 'a', 'a', 'a']

p.findall('1aa1aaa1a1aa1aaa')
['aa', 'aaa', 'a', 'aa', 'aaa']

1. Finditer : 모든 매치를 찾아 반복가능 객체로 반환

p.finditer('a1bb1ccc')
<callable_iterator object at 0x7f850c4285f8>

f_iter = p.finditer('a1bb1ccc')
for i in f_iter:
    print(i)

1-7. 매치 객체의 메서드

패턴 객체의 메서드를 통해 리턴된 매치 객체는 아래와 같은 정보를 담고 있다.

<_sre.SRE_Match object; span=(매치 시작지점 인덱스, 매치 끝지점 인덱스), match='매치된 문자열'>

매치 객체는 내부 정보에 접근할 수 있는 네 가지 메서드를 제공한다.

p = re.compile('[a-z]+')
result = p.search('1aaa11aaa1')
print(result)

위의 코드를 실행하면 아래의 매치 오브젝트를 얻는다.

<_sre.SRE_Match object; span=(1, 4), match='aaa'>

매치 객체의 메서드를 실행한 결과는 아래와 같다.

result.group()
aaa

result.start()
1

result.end()
4

result.span()
(1, 4)

1-8. 그룹화

정규표현식을 () 안에 넣으면 그 부분만 그룹화된다. groups 메서드를 통해 그룹들을 튜플 형태로 리턴 할 수 있다.

p = re.search('(hello)(world)', 'helloworld') # 정규표현식 hello와 world의 매치 결과를 각각 그룹화하였다
grouping = p.groups()
print(grouping)

('hello', 'world') # 각 그룹의 매치 결과가 튜플로 묶여서 리턴됨

group 메서드를 통해 각 그룹을 호출할 수 있다.

p.group() # 인자를 넣지 않으면 전체 매치 결과 리턴
helloworld

p.group(0) # group()와 같다
helloworld

p.group(1) # 1번 그룹 매치 결과 리턴
hello

p.group(2) # 2번 그룹 매치 결과 리턴
world

1-9. 컴파일 옵션

정규표현식을 컴파일 할 때 옵션을 지정해줄 수 있다.

변수이름 = re.compile('정규표현식', re.옵션)

DOTALL, S

.은 줄바꿈 문자 \\n 를 제외한 모든 것과 매치된다. 컴파일 할 때 re.DOTALL 또는 re.S 옵션을 넣어주면 \\n 까지 매치되도록 할 수 있다.

p = re.compile('.') # 옵션 없음
result = p.findall('1a\\nbc')
print(result)

['1', 'a', 'b', 'c'] # \\n이 매치되지 않음

p = re.compile('.', re.DOTALL) # re.DOTALL 옵션 추가
result = p.findall('1a\\nbc')
print(result)

['1', 'a', '\\n', 'b', 'c'] # \\n까지 매치

IGNORECASE, I

re.IGNORECASE 또는 re.I 옵션을 넣어주면 대소문자를 구별하지 않고 매치된다.

p = re.compile('[a-z]') # 소문자만 매치
result = p.findall('aAbB')
print(result)

['a', 'b']

p = re.compile('[a-z]', re.IGNORECASE) # re.IGNORECASE 옵션 추가
result = p.findall('aAbB')
print(result)

['a', 'A', 'b', 'B'] # 소문자와 대문자 모두 매치

MULTILINE, M

re.MULTILINE 또는 re.M 옵션을 넣어주면 여러 줄의 문자열에 ^ 와 $ 를 적용할 수 있다.

text = '''student-1-name: James
student-2-name: John
student-3-name: Jordan
teacher-1-name: Mike
student-5-name: John'''

p = re.compile('^student.*') # 뒤따라 오는 문자 종류와 개수에 상관없이 student로 시작하는 문자열 매치 
result = p.findall(text)
print(result)

['student-1-name: James'] # 첫 줄만 매치되었다.

p = re.compile('^student.*', re.MULTILINE) # re.MULTILINE 옵션 추가
result = p.findall(text)
print(result)

['student-1-name: James', 'student-2-name: John', 'student-3-name: Jordan', 'student-5-name: John']
# student로 시작하는 모든 줄이 매치되었다.

p = re.compile('.*John$') # John으로 끝나는 문자열 매치
result = p.findall(text)
print(result)

['student-5-name: John'] # 가장 마지막 줄만 매치되었다

p = re.compile('.*John$', re.MULTILINE) # re.MULTILINE 옵션 추가
result = p.findall(text)
print(result)

['student-2-name: John', 'student-5-name: John'] # John으로 끝나는 모든 줄이 매치됨

VERBOSE, X

re.VERBOSE 또는 re.X 옵션을 주면 좀 더 가독성 좋게 정규표현식을 작성할 수 있게 된다. 아래의 두 표현식은 동일하게 작동한다.

p = re.compile(r'&[#](0[0-7]+|[0-9]+|x[0-9a-fA-F]+);')

p = re.compile(r"""
 &[#]                # Start of a numeric entity reference
 (
     0[0-7]+         # Octal form
   | [0-9]+          # Decimal form
   | x[0-9a-fA-F]+   # Hexadecimal form
 )
 ;                   # Trailing semicolon
""", re.VERBOSE) # re.VERBOSE 옵션 추가

re.VERBOSE 옵션을 추가하면 정규표현식에 컴파일시 자동으로 제거되는 공백과 코멘트를 추가할 수 있게된다.(단, [] 안에 입력된 공백문자 제외)

정규식에서 /를 쓰려면

실제 코드에서는 ////를 써주면 된다

참고 :

[Python 문법] 정규표현식 (Regular Expressions)

점프 투 파이썬

1. 개요

1-1. 이 글을 정리한 이유 ⭐️

• 현재도 코드리뷰를 하고 있지만, 매뉴얼이나 규칙이 있었으면 하는 마음으로 만들었습니다.
• 분명 시간도 추가적으로 들고 귀찮을 수도 있겠지만, 좋은 코드를 만들었으면 합니다.
• 남들 따라하는 것이 아닌, 우리만의 코드리뷰 문화를 이야기해보고 결정하여, 정착시켰으면 합니다.

1-2. 코드리뷰를 하면 뭐가 좋을까?

1. 자신은 알고 있는 부분을 타인에게 설명하면서 다시 생각을 정립할 수 있습니다. (자신 실력 상승)
2. 타인에게 설명하기 위해 작성한 코드를 한번 더 보게 되어 스스로 확인하게 됩니다. (셀프 피드백)
3. 코드를 짤 때 최대한 이해하기 쉽게 짜게 된다. (가독성 좋고, 좋은 코드 작성 가능성 상승)
4. 자신이 개발한 부분만 아는 것이 아니라, 동료들의 부분을 좀 더 알게 되어 전반적인 서비스 로직의 이해도가 올라간다. (서비스 이해도 향상)
5. Code Convention(패턴)을 확실하게 통일할 수 있다. (통일성)
6. 자신이 놓친 실수를 피드백하고 도와줄 수 있다. ( print문 실수, 오타 등 실수캐치 )
7. 동료의 코드를 보면서 새로운 스타일이나 깨달음을 얻을 수 있습니다. (발전)

즉, 코드리뷰는 단순히 버그를 사전에 발견하거나 문제점을 찾는 목적을 넘어서
전체적인 조직의 역량을 강화하는 중요한 역할을 한다.

2. 코드 리뷰 매뉴얼

2-1. 기본 규칙

1. 서로의 잘못이나 오류를 지적하려는 의도가 아니라 피드백을 해주는 것이다. ( 공격적인 말투는 절대 X )
2. 코드엔 정답이 없기때문에, 무조건 누가 맞는게 아니라, 함께 발전시키는 것이다.
3. 질문을 하거나 대답을 할 때는 상대방이 상황을 전혀 모르다고 가정하고 충분한 문맥을 전달해야 한다.
4. 당장 운영에 문제가 있는 hotfix건과 주석 제거와 같이 로직에 큰 변화가 없는 건은 스킵한다.
5. 작은 작업 및 기능 단위로 PR(Pull Request)를 올리고, Merge 전에 코드리뷰를 진행한다.

2-2. 코드리뷰 규칙 ⭐️⭐️

PR남기는 사람

• PR 본문은 PR 템플릿(Pull Request Template)에 따라 일관된 형태로 남긴다.
• PR에는 최소 2명의 리뷰 담당자를 지정한다.

리뷰어

• 리뷰 담당자는 가벼운 마음으로 아래 역할을 수행한다.
  1. 오타 찾기 ( print문, 오타, convention오류 등 )
  2. 모르는 것 질문하기 ( 변수명, 비즈니스 로직 등 )
     • 질문받은 사람은 이를 설명하면서 다시 복기할 수 있고 질문한 사람은 답변을 보고 로직에 관한 지식을 얻는 게 목적
  3. 새로운 대안 제시하기 ( 이건 A 목적인 건가요? A 목적이 맞는다면 이렇게 해보면 어떨까요?)
  4. 되도록 읽는 사람이 한 번에 정보를 확인할 수 있도록 한다. ( 가독성 생각하기 )
  5. 급한 우선순위 작업이 아니라면, PR을 틈틈히 Review하자 ( 당일 내로 처리하는 것 추천 )
  6. 리뷰할 것이 없으면, 칭찬남기기. → 모든 리뷰는 댓글에 하면된다.
  7. 만약 너무 바쁜 상황이라, Reivew를 하지 못할 상황이라면 다른 사람을 리뷰어로 지정해달라고 말하자.

2-3 Pull Request Template

제목

PR의 제목에는 가장 뒤에 [D-??] (??에 숫자 넣기)

언제까지 리뷰를 요청하는지 적기. (우선순위 파악 목적)

만약 오늘까지 리뷰를 해줬으면 하면, D-0이렇게 추가

Ex) D-1 이벤트 페이지 구현완료

본문

### 작업 분류
- [ ] 버그 수정
- [ ] 신규 기능
- [ ] 기존 기능 수정

### 기능 기획 
	<!--
		왜 이 기능을 추가했는지 간단하게 적기
		ex) 고양이가 울지 않으니 고양이 같지 않아서, 고양이 야옹소리 기능 추가
	-->

### 작업 개요 ( 대분류 ) 
	<!--
		ex) 고양이가 야옹 소리를 내도록 수정
	-->

### 작업 상세 내용 ( 상세 분류 )
	<!--
	  ex)
	  1. 네 발 짐승 클래스에 `크앙` 함수 추가
	  2. 고양이 클래스에서 `크앙` 함수에 `미야아옹.wav` 재생시킴
	-->

### 테스트 내역
	<!--
	  ex)
	  1. 페이징이 잘 처리되는지 확인
	  2. 특정한 값을 넣었을때 제대로 처리하는지 확인
	-->

아래 링크를 참고하면 PR Template 생성 가능 (Repository 관리자만 가능 - Bitbucket 관련)

Save time with default pull request descriptions - Bitbucket

리뷰어 선정

이건 각자 팀에 맞게 알아서 설정

2-4. 리뷰 예시

리뷰 내용 가장 앞에 Pn을 입력하면 좋을 것 같습니다. ( 코멘트를 강조하는 수준 표현 )

• P1: 꼭 반영해주세요 (Request changes)

리뷰어는 PR의 내용이 서비스에 중대한 오류를 발생할 수 있는 가능성을 잠재하고 있는 등 중대한 코드 수정이 반드시 필요하다고 판단되는 경우, P1 태그를 통해 리뷰 요청자에게 수정을 요청합니다. 리뷰 요청자는 p1 태그에 대해 리뷰어의 요청을 반영하거나, 반영할 수 없는 합리적인 의견을 통해 리뷰어를 설득할 수 있어야 합니다.

• P2: 웬만하면 반영해 주세요 (Comment)

작성자는 P2에 대해 수용하거나 만약 수용할 수 없는 상황이라면 반영할 수 없는 이유를 들어 설명하거나 다음에 반영할 계획을 명시적으로(JIRA 티켓 등으로) 표현할 것을 권장합니다. Request changes 가 아닌 Comment 와 함께 사용됩니다.

• P3: 그냥 사소한 의견입니다 (Approve)

작성자는 P3에 대해 아무런 의견을 달지 않고 무시해도 괜찮습니다.

3. 마무리

더 좋은 코드와 서비스를 만들기 위해서는 좋은 개발문화가 있어야 합니다.

현실에 타협하지 않고 더 좋은 서비스를 만들기 위해 코드리뷰 문화가 더 잘 정착하면 좋다.

억지로 하는 것은 문화가 아닙니다. 우리가 왜 하는지 알고, 함께 자발적으로 만들어나가는 것이 문화라고 생각한다.

코드리뷰 문화도 정답이 있는 것이 아니라 팀의 특성에 따라 잘맞는 방법이 다르다.

제가 쓴 것이 정답이 아닌, 함께 이야기해보고 자신의 팀에 가장 잘 맞는 코드리뷰 문화를 만들면 좋겠습니다.

참고자료 : 

코드리뷰가 쏘아올린 작은공 | 우아한형제들 기술블로그

코드 리뷰 | TechWell

코드 리뷰의 목적은 성장이어야 한다

주니어 개발자들의 (얕은) 코드리뷰 도입기

코드 리뷰 in 뱅크샐러드 개발 문화 | 뱅크샐러드

이번에는 주로 작은 서비스에서 자주 쓰이는 EventBus에 대해 알아볼 것이다. 조금 규모가 커지면, 보통 Vuex를 사용하는 경향이 있다. 그래도 알아두면 나쁠것은 없으니 알아보자.

1. 부모/자식 컴포넌트 사이에서 호출하기 위한 설정 -> 부모컴포넌트와 자식컴포넌트 사이에는 특별한 호출방식이 있다.
2. 모든 컴포넌트에 적용할 데이터/메소드 설정 -> 전역변수로 생각하면 편하다.
3. 전혀 관계없는 컴포넌트 사이에서 호출하기 위한 설정 -> 아무관계도 아니지만, 전역으로 할 필요는 없는 경우

3. 전혀 관계없는 컴포넌트 간의 호출 - EventBus

일반적으로 메소드, 변수를 정의할 때 한 오브젝트나 컴포넌트 단위로 묶어서 사용되기 때문에 이벤트를 사용할 필요가 없이 현재 위치에 포함된 메소드/변수를 호출하여 사용할 수 있습니다. 하지만 각각 분리되어 있는 개체에 전송하거나 알려줘야한다면 어떻게 해야할까요?

이럴때 공통으로 데이터들을 주고 받을 수 있는 공간을 만들고, 이를 통해서 서로 규격에 맞춰 데이터들을 주고 받으면 될 것 입니다. 이벤트를 등록하고 받을 준비가 끝났다면 언제 어디서든지 데이터들을 주고 받고, 각 이벤트요청 상황에 따라 원하는 메소드들을 수행할 수 있게 만든 것이 EventBus입니다. 쉽게 말해 컴포넌트간 메소드들을 서로 호출하게 해주는 것입니다. 아무 관계가 없는 컴포넌트 사이에서도 가능합니다.

vue.js에서 이벤트를 쉽게 다루기 위해 EventBus라는 개념을 이용할 수 있으며, 누구나 쉽게 사용할 수 있습니다.

// 이벤트버스 생성
var EventBus = new Vue()

// 이벤트 발행
EventBus.$emit('message', 'hello world');

// 이벤트 구독
EventBus.$on('message', function(text) {
    console.log(text);
});

자, 이렇게 하여 vue.js에서 이벤트를 쉽게 활용할 수 있습니다. 위와 같이 구현해놓는다면 컴포넌트, Vueapp이 전혀 다르더라도 서로 쉽게 호출할 수 있습니다.

이렇게 Vue에서 데이터/메소드를 호출/교환하는 방법에 대해 알아봤습니다. 저도 공부를 하며 정리한 것이라 틀린내용이 있을 수 있습니다. 또한 제가 모르는 것들이 더 많을 수도 있습니다. 그럴땐 꼭 피드백 부탁드립니다. 감사합니다.

참고 블로그 : 

https://vuejs-kr.github.io/jekyll/update/2017/02/13/vuejs-eventbus/

https://song8420.tistory.com/379

저번에 이어서 이번에는 전역적으로 사용할 수 있는 방법에 대해 알아보자.

1. 부모/자식 컴포넌트 사이에서 호출하기 위한 설정 -> 부모컴포넌트와 자식컴포넌트 사이에는 특별한 호출방식이 있다.
2. 모든 컴포넌트에 적용할 데이터/메소드 설정 -> 전역변수로 생각하면 편하다.
3. 전혀 관계없는 컴포넌트 사이에서 호출하기 위한 설정 -> 아무관계도 아니지만, 전역으로 할 필요는 없는 경우

2. 모든 컴포넌트에 적용하기 - Vuex Store

2-1. Vuex란?

Vuex는 Vue.js의 상태관리 라이브러리로 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 의도적인 방법으로 상태를 변경 및 관리할 수 있다. React의 Redux와 비슷하다고 보면 된다.

컴포넌트는 일반적으로 부모-자식의 관계를 가지고 props와 event를 통해 서로의 데이터를 주고받는다고 하였다.

하지만 Vuex는 말 그대로 중앙 집중식 저장소 이기 때문에 props와 event에 얽매이지 않아도 된다.

컴포넌트의 구조가 복잡한 경우에는 props와 event를 통한 데이터 전달보다는 Vuex를 통해 별도의 저장소에서 데이터를 관리하는 것이 올바르다. 쉽게말해서 전역변수로 지정하면, 어디던지 다 쓸 수 있다는 말.

2-2. Vuex 구조

Vuex는 state, mutations, action, getters 4가지 형태로 관리가 되며, 이때 이 관리 포인트는 store 패턴을 사용하고 통상 store라고 불린다. 이 4가지는 서로간의 간접적으로 영향이 있으며 단방향 데이터 흐름으로 볼수 있다.

여기서는 간단하게 4가지의 개념만 소개하겠다. (사용방법은 다른 블로그 참조)

1. State

State는 Vue 컴포넌트에서 data로 볼 수 있다. 

원본 소스의 역할을 하며, View와 직접적으로 연결되어있는 Model이다. 

이 state는 직접적인 변경은 불가능하고 mutation을 통해서만 변경이 가능하다.

mutation을 통해 state가 변경이 일어나면 반응적으로 View가 업데이트된다.

핵심 : 쉽게 말해 변수라고 생각하면된다. 이 값을 바꾸려면, mutation의 함수를 통해서만 바꿀 수 있다.

2. Mutations

Mutation은 state를 변경하는 유일한 방법이고 이벤트와 유사하다. 

mutation은 함수로 구현되며 첫 번째 인자는 state를 받을 수 있으며, 두 번째 인자는 payload를 받을 수 있다. (payload는 변경하고 싶은 값을 뜻함)  (동기처리 기준)

여기서 payload는 여러 필드를 포함할 수 있는 객체형태도 가능하다.

이 mutation은 일반적으로(Helper를 쓰지 않는 경우)는 직접 호출을 할 수 없으며, commit을 통해서만 호출할 수 있다.

결론 : 변수를 바꾸는 함수. 쉽게 setter라고 이해하면 편하다.

호출 방식 : commit (state, payload)

3. Action

Action은 mutation과 비슷하지만 mutation과는 달리 비동기 작업이 가능하다. 

또한 mutation에 대한 commit이 가능하여 action에서도 mutation을 통해 state를 변경할 수 있다.

action에서는 첫 번째 인자를 context 인자로 받을 수 있으며 이 context에는 state, commit, dispatch, rootstate와 같은 속성들을 포함한다. 두 번째 인자는 mutation과 동일하게 payload로 받을 수 있다.

commit을 통해 mutation을 호출했다면 Action은 dispatch를 통해서 호출한다.

context의 속성을 보면 dispatch가 있는 것으로 보아 action에서는 서로 다른 action을 호출할 수 있다는 것을 볼 수 있다.

결론 : Mutation을 호출하는 함수. 비동기 작업에 사용되므로, 주로 Action을 호출해서 Mutation을 실행시킴

호출 방식 : dispatch('함수명', '전달인자')

4. Getters

Getters는 쉽게 Vue 컴포넌트에서 Computed로 볼 수 있다. 

말로 풀자면 계산된 속성인데 getter의 결과는 종속성에 따라 캐시 되고 일부 종속성이 변경된 경우에만 다시 재계산된다.

즉, 특정 state에 대해 어떠한 연산을 하고 그 결과를 View에 바인딩할 수 있으며, state의 변경 여부에 따라 getter는 재계산이 되고 View 역시 업데이트를 일으킨다.

이때 state는 원본 데이터로서 변경이 일어나지 않는다.

결론 : state를 수정하고 나서 값을 업데이트 할 때 확인용으로 호출 (잘안쓰는 것 같음..)

호출 방식 : this.$store.getters['경로/함수명']

이렇게 전반적인 vuex store에 대한 개념을 알아봤다. 마지막으로는 잘 안쓰이지만, 알아두면 좋을 EventBus에 대해 설명하겠다.

참고 블로그 :

https://kdydesign.github.io/2019/05/09/vuex-tutorial/

http://ccambo.github.io/Dev/Vue/5.what-is-the-store-in-vuex/