ninanung

2.리스트와 인용구(BlockQuote)

2-1.리스트

리스트는 점점 작은 부분을 설명할 때 사용합니다. 예를 들면

1.사람의 몸
1-1.머리
1-1-1.뇌
뇌는 말랑말랑하다. 그러하다
1-2.다리

ninanung

4.링크와 이미지넣기

4-1.링크

링크는 많이 사용해봐서 아실거라고 생각합니다. 현재 페이지에서 다른 페이지로 보내거나 다른 페이즈를 보여주기 위한 일종의 연결 통로입니다. 보통은 그 페이지의 이름이나 주소를 그대로 링크로 쓰는 경우가 많습니다. 마크다운은 당연히 링크에 대한 문법을 가지고 있습니다. 지금부터 하나씩 알아보겠습니다.

우선은 가장 간단한 링크 방법입니다. 단순히URL만으로 링크를 만드는 방식입니다.

https://gist.github.com/ninanung

ninanung

Github로 로그인하기 feat.Vue and Node.js

1. Github로 로그인하기?

요즘들어 "~로 로그인하기" 가 많아지고 있다. 페이스북이나 구글이 대표적이고, 한국에서는 네이버도 많이 사용하며 개발자 관련 웹에서는 깃허브도 껴있는 경우가 많다. 이런 식의 다른 서비스를 통해 인증하는 방식을, OAuth 인증 방식이라고 하는 모양이다. 내가 회사 업무를 위해 사용하는 몇몇 소프트웨어도 이러한 인증을 지원하는 경우가 많다. 이 글에서는 그러한 인증을 구현하지는게 아니라 그러한 인증을 사용해 보자는 것에 목적을 둔다. 어떤 방식으로 인증하는지를 직접 사용해보고 OAuth방식 인증의 절차를 알아보는 기회도 될것이다.

2. 목표

위와 같이 버튼을 누르면 Github에서 인증을 실행하고 관련 데이터를 받아오는 동작을 구현해 볼 것이다.

ninanung

React에서 FCM사용하기

이 글을 이해하기 위한 선행지식

• React
• NPM
• curl이나 request모듈과 같은 요청관련 지식
• Javascript에 대한 지식
• FCM은 https혹은 localhost에서만 동작하며 http에서는 동작하지 않습니다.

많은 회사들이 웹앱을 구축할 때 React를 사용하고 있습니다. 솔직히 우리나라는 아직도 frontend 프레임워크보다는 전통적인 방식의 웹을 선호하는 경향이 있는 것 같지만 스타트업과 같은 많은 젊은 회사들이 React를 사용합니다. 그럴 경우 빠른 웹 구축을 위해 Google이나 AWS의 서비스를 많은 사용하는데요, FCM도 push notification을 빠르게 구축할 수 있게 해주는 Firebase 서비스의 하나입니다. 이름부터 Firebase Cloud Messaging(FCM)이죠. 이 글을 통해서는 아주 간단한 알림서비스 구축에 대해서 다뤄보도록 하겠습니다. 천천히 한번 알아보도록 하죠.

ninanung

너와 나를 위한 마크다운 문법정리!

마크다운 문법, 정말 간단하지만 구글링을 해도 뭔가 좀 애매합니다. 설명이 다르거나 부족하거나 저 같은 초보자가 보고 배우기 애매한 경우가 좀 있었습니다. 그래서 저 스스로의 마크다운 문법 공부를 위한 실습 겸 가이드를 위해 문법정리를 작성해 보고자 합니다. 참고로 이 정리는 깃허브에서 사용하는 것을 전제로 합니다.

1.제목과 호라이즌 - html의 h1테그와 hr테그

1-1.제목

먼저 제목입니다. 제목을 쓰는 방법은 두 가지로 나눌 수 있습니다.

• 제목과 함께 hr, 즉 호라이즌을 명시적으로 같이 쓴다.

ninanung

mattermost interactive dialog

Mattermost의 v5.6에서 추가된 interactive dialog 는 사용자에게서 더 구조적인 데이터를 받기위해 만들어졌다. 데이터를 받을 때 사용되는 요소들로는, HTML의 <input> 테그의 기능들과 유사한 text, select, textarea 이렇게 세가지가 현재 구현 가능하다. text는 짧은 문자열을, select는 드롭다운 메뉴를 통해 리스트에서 한가지 요소를, textarea는 장문의 문자열을 받을때 사용할 수 있다. 해당 예제는 Mattermost server로 dialog를 열도록 요청하고 사용자가 작성한 값들을 서버 로그로 print하는 단순한 예제이다. 서버는 Node.js 를 통해 구동한다.

동작구조

interactive dialog 의 동작 순서는 아래 그림을 참고하면 된다.

trigger_id

ninanung

서버 무중단 배포하기! - "블루/그린"과 "현재위치"

목차

• Ice Breaking
• In-Place Deployment
• Blue-Green Deployment
• Conclusion

Ice Breaking

ninanung

이 글의 코드는 저자의 Github에서 확인할 수 있습니다. 이 글은 Redux를 직접 사용해 보았거나 최소한 관련 지식이 있다는 전제하에 설명합니다. 만약 모른다면 관련 공부를 먼저 해주세요.

때늦은 React Hooks 시리즈 5탄 - useReducer/Custom Hooks

저번글에서 React Hooks를 이용한 router를 설명해 보겠다고 했으나 계획을 조금 변경했습니다. 아무래도 이 부분은 설명하고 넘어가야 어떻게 다른 Hooks들이 동작하는지를 설명할 수 있을 것 같았습니다. 우선은 미뤄뒀던 useReducer를 설명해보죠.

useReducer

Redux, Reducer에 대한 개념은 React의 다양한 컴포넌트들에서 통합적으로 state를 관리하기 위해 고안되었습니다. 이 말이 무엇이냐면, 어플리케이션 전체를 관통하는 상태관리가 필요했기 때문에 만들어 졌다는 말입니다. 컴포넌트들의 상하에 따라 값을 주고 받는 것에 한계가 있고, 어떻게 구현을 한다고 해도 관리가 복잡해지는 문제가 있었기 때문입니다. useReducer는 함수형 컴포넌트에서의 Redux를 어느정도 대신하는 역할을 합니다. 어차피 설명을 줄줄이 하는 것 보다는 직접 보는게 빠르기 때문에 코드를 우선 보도록 하죠.

ninanung

이 글의 코드는 저자의 Github에서 확인할 수 있습니다.

때늦은 React Hooks 시리즈 2탄 - useEffect

useEffect

지난글에서 useState를 이미 살펴 보았습니다. 간단히 정리하자면 "함수형 컴포넌트에서도 state를 사용할 수 있다! 개꿀!" 이었죠? 하지만 사용만 한다고 다가 아닌것이 우리내 코딩 인생이고, 복잡한 로직을 위한 다양한 기능들을 살펴볼 필요가 당연히 있습니다. useEffect는 그러한 기능들 중 하나로 useState가 기존의 방식을 대체하는 것 처럼 해당 기능 역시 componentDidUpdate와 componentDidMount를 대신한다고 봐도 좋을 것 같습니다. 정확한 기능을 먼저 말해보자면, 리엑트 컴포넌트가 렌더링될때 자동으로 해당 함수를 호출하게 되는데, 지난글에서 설명한 Hook을 이를 통해 이해할 수 있을 것 같네요. 특정 동작이 발생하면 특정 행동을 자동으로 실행한다. 네, Hook입니다.

const UseEffectExample = () => {
 const [test, setTest] = useState('initial value');

ninanung

3.개행과 문자강조

3-1.개행

원래는 1장에서 설명했어야 하는 부분이라고 생각합니다. 왜냐하면 처음 마크다운을 할 때 도대체 어떻게 줄을 바꾸는 건지 몰라서 엄청 해맸거든요. html은 <br>이나<p>를 사용하지만 마크다운에서도 그렇게 사용하는건 좀 허접합니다. 그냥 워드처럼 enter키도 아닙니다. 그러면 어떻게 할까요? 코드를 보겠습니다.

나는 아름다운 나비  
날게를 확짝 펴고  
세상을 아름답게 날거야