부가적인 내용 필요없는 킹갓개발자들은 링크 먼저 받으십쇼!

깃허브 코드 호스팅 링크

부가적인 기능 설명을 하자면, 이렇게 생겨먹은 친구입니다. 코드상에 뷰티파이가 포함되어 있는데 제가 왜 뷰티파이를 선택했냐면, 안쓸거기 때문이죠. 무시하셔도 됩니다...

베이스 폰트를 지정한 뒤 컨버트 폰트를 정해서 적어주게 되면

변환값이 떨어지게 되고, 그 뒤 make scss ... 를 눌러주게 된다면

띠용스 클립보드에 저장이 되었다고 뜹니다.

$font-size-0: 1rem;
$font-size-1: 1.08rem;
$font-size-2: 1.17rem;
$font-size-3: 1.25rem;
$font-size-4: 1.33rem;
$font-size-5: 1.42rem;
$font-size-6: 1.50rem;
$font-size-7: 1.58rem;
$font-size-8: 1.67rem;
$font-size-9: 1.75rem;

이런식으로 결과값을 저장시키고 있고, 저뒤에 인덱스 대로 들어가는거라.. 추후 수정을 겪으셔야합니다.

감사합니다. 정말 글도 대충쓰고 대충 만들었으니. 오류 수정은 pr 올려주시면 바로 수정할 예정입니다.

*꼭 플레이스홀더에 적힌 양식으로 적어주셔야 하고, 그 외 예외처리는 하지 않았습니다. *

감사합니다.

안녕하세요 유사개발자 이종훈입니다.

오늘은 조금 실용적인 부분에 대해 설명을 드리려 합니다.

제목에서 나온거와 같이, 서버를 두지 않고

프론트단에서만 Q&A처리를 하고 싶은 경우가 존재합니다.

소규모 서비스나, 따로 별도의 q&a시스템을 두고싶지 않은 경우도 존재하고요,

이때 쉽게 해결할수 있는 부분이 "SLACK QA BOT" 입니다.

그래서 설명드리는 이름하야 "SLACK QA BOT"을

제작하는 과정을 보여드리려 합니다.

너무 쉽고 예시 레파지 까지 전달 예정이므로 바로바로 후딱후딱 들어오시길 바랍니다!

Slack 계정 만들기

이건 넘어가겠습니다.

Slack WebHook 연결

저희는 서버를 Slack 을 사용할거라, 웹 훅 연결이 필요합니다.

https://slack.com/intl/ko-kr/help/articles/115005265063-Slack%EC%9A%A9-%EC%88%98%EC%8B%A0-%EC%9B%B9%ED%9B%84%ED%81%AC

새 Slack 앱을 생성합니다 버튼을 눌러 Create New App 을 눌러줍니다. 첫번째 버튼을 누른 뒤, 나온 정보를 입력해줍니다.

App Name 은 Slack 에서 알람을 줄 봇 이름입니다.

워크 스페이스는 원하는 워크스페이스에 등록 하면됩니다.

생성을 하신 뒤 Incoming Webhooks 을 눌러줍니다. 그다음 Off로 되어 있던걸 On으로 변경을 해줍니다.

그 후 Add New Webhook to Workspace를 눌러 체널에 봇을 삽입 시켜 줍니다.

그 뒤 나오는 hook url 주소는 절대 노출이 되면 안됩니다.

암호화를 시켜 axios 호출을 해주셔야합니다.

노출되면 슬랙 테러를 받을수도 있습니다. 조심하세욧

그 뒤 이제 코드 부분으로 들어가 보겠습니다.

코드

코드부분에서는 유의해야하는 부분이 있습니다.

1. block 자체는 json 형태로 전달 해야한다. 2. hook url 이 절대로 노출되서는 안된다. 3. block은 커스터마이징이 가능하다.

이렇게 크게 3가지로 생각하시면 됩니다.

우선 커스터마이징 링크는 > 여기 에 올려놨습니다 :) 원하시는 블록으로 교체가 가능합니다.

data() {
    return {
      form: {
        name: '',
        email: '',
        text: '',
      },
    };
  },

const blocks = {
        attachments: [
          {
            color: '#6b72f3',
            blocks: [
              {
                type: 'header',
                text: {
                  type: 'plain_text',
                  text: `🆘 ${this.form.name}님이 문의를 남겨주셨습니다!`,
                  emoji: true,
                },
              },

              {
                type: 'divider',
              },
              {
                type: 'section',
                fields: [
                  {
                    type: 'mrkdwn',
                    text: `*이름:*\n ${this.form.name}`,
                  },
                  {
                    type: 'mrkdwn',
                    text: `*문의 남긴 날짜:*\n ${new Date()}`,
                  },
                  {
                    type: 'mrkdwn',
                    text: `*이메일:*\n ${this.form.email}`,
                  },
                ],
              },
              {
                type: 'section',
                text: {
                  type: 'mrkdwn',
                  text: `*문의 내용:*\n ${this.form.text}`,
                },
              },
            ],
          },
        ],
      };

우선 예제 코드는 Vue 코드로 작성이 되었고, vue를 모르더라도, 충분히 이해가 가실수 있습니다.

우선 저 데이터를 바인딩 하여, 보내주는 형식인데 이 부분은 v-model 에 관해 한번 알아보시면 좋을거 같습니다.

 this.axios.post('아까 나온 hook url', JSON.stringify(blocks));

제가 유의사항을 말씀드렸듯이, post로 전달하는 요소는 json 형태로 빼야합니다.

물론 저 안에서 {} 열어서 전달도 되지만 저는 최대한 간결하게 작업을 하였고,

본인 취향대로 작업을 하시면 될거 같습니다.

결과물을 본다면 이렇게 진행이 되고,

위에 적어놨듯이, 포멧 및 모든 변경사항은 입맛대로 변경이 가능합니다.

우선 정말 쉽고 간결하게 작업을 했는데,

궁금하신점이나, 의아하신 부분은 바로 댓글 달아주시면 확인 뒤 답글 달아드리겠습니다.!!

유의사항 필독

가장 중요한 깃허브링크는 요기! 한번씩 클론하셔서 자기만의 슬랙QA 봇을 만들어봐요!

*현재 올라간 깃 소스코드에 해당되는 슬랙봇 url은 삭제 됐습니다. 그대로 바로 ajax 통신을 하게된다면 오류가 발생하니 꼭 자기만의 hook url을 넣어주세요! 제가 소스코드 설명에 적어드린, url부분에 자신만의 훅을 삽입 하기길 바랍니다. *

**hook url 암호화 방법은 여러가지 있지만, 저는 실무에서 사용한 방법을 소개시켜드리겠습니다.

1. vuex 스토에어 base64 변환후 삽입
2. env (해보진않음) 또 다른 방법이 있다면 소개시켜주세요!

**

그럼 20000

여기서 개발자는 프론트앤드 개발자로 삼습니다.

개발자를 하려고 하는 이유

가장 크게 고민을 해야할 부분이,

내가 왜 개발자를 하고 싶은지 부터 우선 생각을 해봐야합니다.

내가 하고싶은게 없고, 공부를 하기싫어 개발을 도피처로 생각하는 분들이 굉장히 다분하게 보입니다.

이렇게 했을때 대부분의 사람들이 끝까지 가지 못하고, 중간에 하차하게 되는 불상사를 겪습니다.

그래서 정말 처음 선택하시는 분들은 잘 생각을 해보시길 바랍니다.

직종을 새로 시작한다는거 자체가 쉬운도전이지 않을거니깐요.

개발자를 선택하는 과정중 고민해야할 부분은

1. 하루 8시간 넘게 의자에 앉아 키보드를 두드리고 있을수 있나.
2. 잘 풀리지않는 문제를 심도깊게 풀어 갈 수 있나.
3. 계속 발전하는 생태계를 따라 공부를 할 수 있는가.
4. 키보드에 관심이 많은가.
5. goper 티셔츠에 관심이 많은가

제가 생각하는 가장 큰 선택지는 1,2,3이 가장 크게 와닿을거 같습니다.

물론 저도 그랬구요.

서론이 길었지만 제가 전달드리고 싶은 말은 딱 하나입니다.

개발자라는 직종은 메리트가 있지만 도피처가 되면 절대 안된다.

개발자는 돈 많이 벌잖아! 신입연봉 5천 시대라던데?!

맞습니다.

신입연봉 5천만원 시대이고,

연봉 자체가 제가 첫 개발직종을 가질때 보다 대우 및 연봉 자체가 올라가 있습니다.

다만 이건 "실력이 있는 개발자" 에게 주는 연봉이지,

아무것도 없는 백 도화지를 가진 사람에게 주는 연봉이 아니라는걸 명심 하셔야합니다.

저도 돈이 좋고, 돈이 최고라고 생각하는 사람들 중 한명입니다.

하지만 모든 사람이 신입연봉 5천만원을 받을거라는 생각은 잠시 접어 두셨으면 합니다.

본인의 역량이 5천만원이 되지 않는데, 5천만원을 바라게 된다면 문제가 되겠지요.

다만 정말 아무것도 없는 상태에서 열심히 하셔서 통칭 네카라쿠배당 이라고 하는

대기업에 입사를 하셔 신입 연봉 5000을 받으시는분들 꽤 봤습니다.

하고자 하는 말은

이왕 시작한거 끝까지 자기가 할수 있는 대 까지

최대한 역량을 올려, 좋은직장, 좋은 사람들 많이 만나시길 바랍니다. 언젠간 만나게 되고 언젠간 도움을 받게 됩니다. 도움을 줄 때도 있구요.

개발직종은 사수가 무조건 필요해?

모든 직종은 마찬가지이지만, 사수가 있으면 굉장히 편하다고 합니다.

물론 저는 전문적인 사수가 한분도 안계셨어가지고, 정확하게 사수의 유무의 차이를 크게 느끼지 못합니다.

대부분의 연차가 쌓인 분들이 말씀하시길. 꼭 신입들은 사수가 있는곳으로 가라 라고들

많이 말씀하십니다. 왜냐하면 신입분들은 스펀지 같은 존재이기 때문에,

하나를 알려주면 열을 습득합니다.

이때 정말 잘못된 방법으로 알려주게 된다면 그 습관이 잘못 들어 계속 가져가게 됩니다.

좋은 사수를 만나면 잘못된 방법이 아닌 더 나은 방법으로 알려주겠지만,

좋은 사수를 만나기는 쉬운 일은 아닙니다.

제 생각은 차라리 잘못된 방법을 알려주는 사수보단, 잘못된 방법을 깨우치는 본인이 더 발전에 이바지 할거라 생각합니다.

사수가 없더라도, 본인이 더 찾아보고, 주위에 물어보면서, 조금 더 배움의 길을 넓힌다면 꼭 사수가 없더라도, 좋은 개발자로 성장을 하실수 있을거라 믿어 의심치 않습니다.

SI는 절대 가지마

요론 생각을 가지시고 개발을 시작 하시는 분들이 많습니다.

SI라는 걸 가지 말라고 하는게 아닌, 소위 si에서 가끔 발생하는

경력 뻥튀기 하는 곳을 가지 말라고 하는겁니다.

SI가 잘못된게 아닌, SI 경력 뻥튀기 하는곳이 잘못된 거니깐요.

전 SI 현 SM직종에 다니고 있습니다.

둘다의 장점과 단점이 명확하게 있고, 둘다 좋은 경험을 했습니다.

사람마다 원하는 방식이 다르고 일 하는 방식이 다르기 때문에, 뭐가 맞다 뭐가 틀리다가 아닌

서로 다른거 입니다.

포트폴리오는 창작의 요소가 필요

많은 분들이 신입 개발자가 되기위해 클론코딩을 많이들 하십니다.

이게 어느정도는 좋지만 어느정도는 차별성이 없습니다.

신입 개발자 분들은 대부분의 포트폴리오는 클론코딩이고,

대부분의 로직은 비슷하게 들어갑니다.

조지 로이스가 한말 중에

창의성은 거의 모든 문제를 해결할 수 있다. 독창성으로 습관을 깨는 창의적 행동으로 모든일을 극복할 수 있다.

라고 했습니다.

차라리 본인이 만들어보고 싶었던 플랫폼을 조금 부족하지만,

창작 요소가 들어가게 된다면, 더 나은 구직 활동이 될거라 믿어 의심치 않습니다.

깃허브 잔디는 빼곡히 하는게 좋아!

깃허브에서 커밋횟수를 잔디라고 칭합니다 왜냐하면 초록..색 이거든요!!

당신이 채용 담당자라면 어떤 지원자의 깃허브를 더 살펴보게 될까요?

제가 담당자라면, 2번 깃허브를 조금 더 시간을 내서 살펴보게 될거 같습니다.

물론 저 잔디를 채우라는게, readme 수정을 해서 잔디를 채우라는 뜻이 아닌,

내가 개발에 관심이 있고 계속 작업중이라는 걸 어필을 하라는 겁니다.

조금이라도 다른 사람과 차별성을 두고 접근을 하시는게 더 나은 구직활동이 됩니다.

결론

물론 저기중에 잘못된 정보가 있을수도 있고, 이 글을 보면서 기분이 나쁘실수 있는 분들도 계십니다.

우선 사과를 드리고, 정말 제가 겪었던 문제, 조금 더 빠르게 갈수 있는 방법을 소개 드렸습니다.

이 글을 보면서 어떤분은 정말 개발자라는 직종을 계속 가실수도, 어떤분은 포기를 하실수도 있습니다.

다만 이 글을 보면서 조금이나마 도움이 되셨으면 하고,

이 글을 보면서 기분이 나쁘신분들께, 다시 한번 사과 드립니다.

긴 글 읽어주셔서 감사합니다.

왜 제가 유사 개발자라고 생각하냐면, 아직 완벽하게 깨우치지 못했고, 아직까지 많이 부족하기 때문에, 유사 개발자라는 칭호를 마음속 어딘가에 가지고 있습니다.

우선 오늘의 주제는 Vue를 선택한 이유, 그리고 제가 생각하는 입문을 처음 하시는 분들 중에 Vue를 사용하며, 실수하시는 부분들을 긁어 드리려 합니다.

난 아카이누가..좋은데...

가장 크게 핫해지고, 가장 많이 사용 하는 3대장이 있습니다.

이번글은 앵귤러는 포함되지 않습니다.

기존 웹 개발을 처음 시작했다면 먼저 무엇을 선택 해야할지 모르고, 주위에 개발자도 없는 상태면 가장 어려운 결정일수 있습니다. 필자 경험담

저 위에 나온 3개 다 전부 "도구" 일뿐이고, 저걸 못한다고, 웹 개발을 못한지 않고, 조금더 나은 환경에서 개발을 하고 좋은 환경에서 볼수있는 밑바탕을 그려주는 친구들입니다.

우선 맨 처음 선택을 하게 된다면 가장 고민인 부분은

Recat || Vue

이렇게 가장 추천을 많이 했고 고민을 갱장히 많이 했습니다.

그래서 맨날 뱃살을 잡고 고민을 했고, 뷰를 선택 하게 됐습니다.이유는 간단했습니다.

짧은 러닝커브, 그리고 호화로운 공식문서

리엑트에 비해 첫 공부를 시작하는 입장에선 React에 비해 Vue 자체가 러닝커브가 쉽습니다. 제가 생각하는 러닝커브가 짧은 이유는

1. 공식문서화가 정말 잘 되어 있다.
2. 템플릿화가 되어 있어, 일반 HTML 작업을 하듯이 작업을 하면된다.
3. Vue 개발자들은 성격이 착하다

저는 처음 개발을 시작할때 제가 프론트앤드 개발자가 될 줄 모르고 공부를 시작을 했고, 세계 최강 퍼블리셔가 되길 바라며 공부를 시작했기 때문에 React는 저에겐 너무 어려운 벽이였습니다.

그래서 오픈톡방에서 이것저것 물어보고, Vue개발자 한분을 만났는데 그분이 Vue를 추천하게 되어서 여기까지 왔습니다... 그분께 감사를 드려야할지...칼침을 드려야할지...모르겠지만요..

우선 Vue를 보면 굉장히 퍼블리싱 하는거랑 비슷하게 생겼습니다.

<template>

</template>

<script>
export default {};
</script>

<style scoped>
</style>

딱 처음 보더라도 이 3년만에 만난 절친이랑 눈으로 쓰윽 훑고 어색하지 않은 느낌입니다.

그래서 저에겐 신세계였고 너무 편하다고 생각했습니다.

그래서 Vue를 선택하게 되었고 지금까지 Vue를 하며, 밥벌이를 하고 있습니다.

다만 지금 까지는 너무 Vue 자체를 신봉을 했지만 단점도 분명히 존재합니다.

Vue는 못생겼다

뷰는 다른 개발자가 보기엔 너무 못생겼습니다. 그리고 저 또한 못생겼다고 생각하고요,

왜냐하면 틀이 잡혀 있어도 너무 크게 잡혀 있습니다.

물론 이게 편할수 있지만, 뷰를 하다보면 메소드갔다가 라이프사이클 훅 갔다가 데이터 갔다가

정말 왔다갔다를 많이 하게됩니다. 그래서 MX master3 를 사시면 편하게 움직일수 있습니다.

하지만 그 부분을 해결한게 컴포지션 API이고, 이 부분은 별도의 컴포지션 api를 사용하던가,

Vue3로 작업을 하게 된다면 선택사항으로 가능합니다.

물론 저도 컴포지션을 사용을 해봤고 기존 뷰 옵셔널 api 에 비해 사용하기가 훨씬 편했습니다.

https://github.com/curriculum-of-coding/FrontEnd-web

로 컴포지션을 사용을 해봤고, 컴포지블하게 작성은 하지 못했습니다.

Vue에 대해 정확히 이해하고 짜지 않는다면, 코드 자체 퀄리티가 떨어지게 된다.

기본적으로 Vue에서 지원해주는 기능들이 몇가지 있습니다.

Vue를 못생기게 만드는 사람들

*computed,method,watch 등 *

크게 가장 많이 쓰는 부분이고 가장 헷갈리는 부분입니다.

메소드로 리턴을 해서 할수도 있고, computed를 사용해서 해야할때가 존재합니다.

상황에 따라 맞게 사용을 해야 하는데

그냥 무작정, 메소드에 전부 때려박고 리턴을 해주는 코드를 본적이 있습니다.

이렇게 Vue에 대해 정확한 의도를 파악하지 않고 작성을 하게 된다면, 큰 문제가 생깁니다.

간단하게 method랑 computed랑 비교를 하게 된다면,

computed는 인자를 받을 수 없고, method는 일반 js function 처럼 인자를 받을 수 있습니다.

그리고 가장 큰 차이점은 '캐싱' 의 유무입니다. comptued는 캐싱이 되는 반면,

method는 리랜더를 거칠때 함수를 호출하게 됩니다.

의도를 가지고 사용을 하면 추후 문제가 누수가 될 문제를 덜어주게 되고,

추후 인수인계자가 코드를 보고 저렇게 머리를 탁 칠 일은 덜어지게 됩니다.

watch 의 비용 문제

watch 는 기본적으로 cost 자체가 높습니다. 매번 옵저버에서 그 객체를 보고 있게 됩니다.

그만큼 남용하게 된다면, 문제가 생기게 됩니다.

물론 대부분의 경우 computed로 처리가 가능하지만 watch를 사용해야 할 시점이 존재합니다.

다만 일부 개발자들은 이런 비용적인 문제를 생각하지않고, watch를 남발하게 되어,

성능상 이점을 가져가지 못합니다.

처음 Vue를 하면서 많이 하는 실수

템플릿 즉 html 단에 this를 사용한다.

<template>
  <div>{{ this.name }}</div>
</template>

<script>
export default {
  name: 'test',
  data() {
    return {
      name: 'LeeJongHun',
    };
  },
};
</script>

<style scoped></style>

이런식으로 당연히 스크립트 단에서 사용을 하니 this를 템플릿 단에 까지 끌어 올리게 된다.

물론 동작은 하나 굳이 this를 적어줄 필요 없이

<template>
  <div>{{ name }}</div>
</template>

<script>
export default {
  name: 'test',
  computed:{
    name(){
      return 'LeeJongHun'
    }
  }
};
</script>

<style scoped></style>

이런식으로 적어주는게 맞습니다.

https://kr.vuejs.org/v2/guide/syntax.html#%EB%B3%B4%EA%B0%84%EB%B2%95-Interpolation

공식문서 내에서도 보간법 내에는 this를 포함하지 않습니다.

v-for v-if 등 모두 마찬가지입니다.

물론 이 부분은 스타일관련이고, 문제는 저렇게 this를 바인딩 한다고 문제는 일어나지 않지만,

추후 같이 협업 하는 입장에서 템플릿단에 this를 사용을 한다면 이마탁 짤이 저절로 생각 날거 같습니다.

v-dom을 사용하지만 돔을 직접 접근한다.

v-dom은 돔에서 변경된 부분만 갈아엎이치기가 됩니다.

https://www.youtube.com/watch?v=BYbgopx44vo&t=3s&ab_channel=PurelyFunctionaltv

이 영상을 보신다면 더 편하게 이해가 되십니다.

v-dom 과 돔을 직접 접근은 굉장히 상극이고, 같이 쓰게 된다면 추후 사이드 이펙트가 존재합니다.

꼭 dom을 직접 접근을 해야한다면, refs 를 사용해주세요.

아 물론 예외적으로 돔을 접근 해야할때는 존재합니다.

body에 오버플로우를 걸어준다던지, Vue 내부에서 돔 접근을 지원을 해주지 않는다면

어쩔수 없이 접근을 해야겠죠. 다만 refs 자체도 남용은 금물입니다 :)

*여기까지 자주 보이는 실수 및 더 좋은 방향으로 가기 위한 내용을 정리 해봤습니다. 더욱더 나은 Vue 생태계를 위해 더 나은 코드를 위해, 발전해 나가는 유사 개발자 이종훈입니다. 감사합니다. *