Skip to content

Instantly share code, notes, and snippets.

View ninanung's full-sized avatar
🎸
Punk

Seungje Jun ninanung

🎸
Punk
  • Backpackr idus
  • Seoul, South Korea,
View GitHub Profile
@ninanung
ninanung / forMe.md
Last active July 25, 2023 00:35
사실은 내가 보기위한 마크다운 문법설명서 - 1. 제목과 호라이즌

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

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

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

1-1.제목

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

  • 제목과 함께 hr, 즉 호라이즌을 명시적으로 같이 쓴다.
@ninanung
ninanung / forMe2.md
Last active April 16, 2024 06:21
사실은 내가 보기위한 마크다운 문법설명서 - 2. 리스트와 인용구

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

2-1.리스트

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

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

@ninanung
ninanung / forMe3.md
Last active November 8, 2022 06:15
사실은 내가 보기위한 마크다운 문법설명서 - 3. 개행과 문자강조

3.개행과 문자강조

3-1.개행

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

나는 아름다운 나비  
날게를 확짝 펴고  
세상을 아름답게 날거야  
@ninanung
ninanung / forMe4.md
Last active February 22, 2024 00:56
사실은 내가 보기위한 마크다운 문법설명서 - 4. 링크와 이미지넣기

4.링크와 이미지넣기

4-1.링크

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

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

https://gist.github.com/ninanung
@ninanung
ninanung / forMe5.md
Last active November 5, 2022 07:35
사실은 내가 보기위한 마크다운 문법설명서 - 5. 블럭과 테이블

5.블럭과 테이블

5-1.블럭

블럭은 이 문법 설명서를 쭉 보면서 가장 많이 본 부분이기도 합니다. 제가 코드를 보여드릴 때 회색 상자에 코드를 넣었던 것을 기억하실 겁니다. 만약 그 회색 상자가 아니라 그냥 깃헙 기스트에 작성했다면 알아서 변환되어 보이기 때문에 코드를 그대로 보여줄 수 없었을 겁니다. 이걸 해결하기 위한 문법이 바로 코드블럭입니다. 코드블럭을 만드는 방법은 여러가지가 있는데 가장 쉬운 방법부터 올라가 보도록 하겠습니다.

먼저 가장 쉬운 방법은 스페이스바를 4번 누르는 방법입니다.

    for(i=0; i<10; i++) {
    	cout << “게임하고싶다” << endl;
@ninanung
ninanung / ReactAndFCM.md
Last active August 17, 2023 00:20
React에서 FCM을 사용해봅시다.

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
ninanung / login-with-github.md
Last active September 20, 2023 16:16
Github로 로그인하기!

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

1. Github로 로그인하기?

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

2. 목표

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

@ninanung
ninanung / mattermost-interactive-dialog.md
Last active May 30, 2023 02:59
Mattermost의 interactive dialog 기능 예제

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
ninanung / deployment.md
Last active May 1, 2023 03:23
서버 무중단 배포하기! - "블루/그린"과 "현재위치"
@ninanung
ninanung / AVL_binary_tree.md
Last active June 21, 2019 06:53
AVL 이진 트리 알아보기