Skip to content

Instantly share code, notes, and snippets.

View nabigraphics's full-sized avatar
🦋
nabi

jason.hello (제이슨 / Jusung Hwang) nabigraphics

🦋
nabi
View GitHub Profile
@nabigraphics
nabigraphics / boosts.css
Last active July 24, 2023 13:41
Twitter larry back. for arc boosts.
[role="heading"] [aria-label="트위터"] svg {
display: none !important;
}
[role="heading"] [aria-label="트위터"]:after {
content: "";
background:url('https://opensource.twitter.dev/assets/twitter-logo.svg');
width:24px;
height:24px;
background-position: center center;
@nabigraphics
nabigraphics / withAuth.tsx
Created March 28, 2021 11:55
React Fast Refresh 적용하기 - un-named
// Before
const WithAuth = (WrappedComponent) => {
return (props) => (
...code
)
}
export default WithAuth;
// After
const WithAuth = (WrappedComponent) => {
@nabigraphics
nabigraphics / webpack.config.js
Created March 28, 2021 11:52
React Fast Refresh 적용하기 - webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const isDevelopment = process.env.NODE_ENV !== "production";
module.exports = () => {
return {
mode: isDevelopment ? "development" : "production",
entry: { app: "./src/index.tsx" },
const path = require("path");
module.exports = {
webpack: (config, { defaultLoaders }) => {
config.resolve.modules.push(path.join(__dirname, "../../packages/"));
const resolvedBaseUrl = path.resolve(config.context, "../../packages/");
config.module.rules = [
...config.module.rules,
{
"scripts": {
"test": "lerna run test",
"lint": "lerna run lint --parallel",
"lint:fix": "lerna run lint:fix --parallel",
"format": "lerna run format",
"bootstrap": "lerna bootstrap",
"clean-lerna": "lerna clean",
"clean-all": "yarn clean-lerna && rimraf node_modules",
"main": "yarn workspace @project/main",
"webview": "yarn workspace @project/webview"
{
"packages": ["packages/*", "apps/*"],
"version": "0.0.0",
"npmClient": "yarn",
"useWorkspaces": true
}
// pcakge.json
{
"name": "project-name",
"private": true,
"workspaces": {
"packages": [
"apps/*",
"packages/*"
]
/
/apps ---> 실제 서비스 폴더
/main ---> Next.js 기반 웹 서비스 폴더
- package.json
/webview ---> Next.js 기반 웹뷰 서비스 폴더
- package.json
/pacakges ---> 공용으로 사용되는 폴더
/api ---> 서비스 API
- package.json
/common or /components ---> React 컴포넌트 (UI, HOC) 등
TypeScript 25 hrs 49 mins ███████████████▊░░░░░ 75.5%
JavaScript 4 hrs 26 mins ██▋░░░░░░░░░░░░░░░░░░ 13.0%
JSON 3 hrs 33 mins ██▏░░░░░░░░░░░░░░░░░░ 10.4%
Git Config 11 mins ░░░░░░░░░░░░░░░░░░░░░ 0.6%
Other 5 mins ░░░░░░░░░░░░░░░░░░░░░ 0.3%

[공통] 마크다운 markdown 작성법

1. 마크다운에 관하여

1.1. 마크다운이란?

**Markdown**은 텍스트 기반의 마크업언어로 2004년 존그루버에 의해 만들어졌으며 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다. 특수기호와 문자를 이용한 매우 간단한 구조의 문법을 사용하여 웹에서도 보다 빠르게 컨텐츠를 작성하고 보다 직관적으로 인식할 수 있다. 마크다운이 최근 각광받기 시작한 이유는 깃헙(https://github.com) 덕분이다. 깃헙의 저장소Repository에 관한 정보를 기록하는 README.md는 깃헙을 사용하는 사람이라면 누구나 가장 먼저 접하게 되는 마크다운 문서였다. 마크다운을 통해서 설치방법, 소스코드 설명, 이슈 등을 간단하게 기록하고 가독성을 높일 수 있다는 강점이 부각되면서 점점 여러 곳으로 퍼져가게 된다.

1.2. 마크다운의 장-단점

1.2.1. 장점