SOSOLOG

πŸ‘‹@SO_YOUNG
πŸ“ μ†Œμ†Œν•˜κ²Œ λ„μ μ΄λŠ” 개발둜그

GitHubTwitter

Tailwindcssλ₯Ό μ†Œκ°œν•©λ‹ˆλ‹€.(with. twin.macro + emotion)

TailwindCSSλŠ” utility-first CSS ν”„λ ˆμž„μ›Œν¬μž…λ‹ˆλ‹€. 이 κΈ€μ—μ„œλŠ” utility-first CSS에 λŒ€ν•œ κ°œλ…κ³Ό TailwindCSSλ₯Ό μ–΄λ–»κ²Œ μ‚¬μš©ν•  수 μžˆλŠ”μ§€ μ†Œκ°œν•©λ‹ˆλ‹€. ν‰μ†Œ TailwindCSS에 관심이 μžˆμœΌμ…¨κ±°λ‚˜ λ„μž…μ„ κ³ λ €ν•˜κ³  κ³„μ‹œλ‹€λ©΄ ν•œλ²ˆμ―€ μ½μ–΄λ³΄μ‹œλ©΄ 쒋을 것 κ°™μŠ΅λ‹ˆλ‹€. utility-first CSS utility-firs…

μ„±μž₯에 μ€νƒ„ν™˜μ€ μ—†λ‹€

첫 νšŒμ‚¬μ— μž…μ‚¬ν•˜κΈ° μ „λΆ€ν„° β€˜κ°™μ΄ μ„±μž₯ν•  수 μžˆλŠ” νšŒμ‚¬β€™λ₯Ό μ°Ύκ³  μ‹Άμ—ˆκ³ , λ‚΄ λͺ©ν‘œλŠ” κ°œλ°œμžλ‘œμ„œ β€˜λ©ˆμΆ”μ§€ μ•Šκ³  μ„±μž₯ν•˜λŠ” 것’이닀. μž‘λ…„μ— 이 주제둜 많이 κ³ λ―Όν–ˆμ—ˆκ³  κ·Έ λ‚΄μš©μ„ λ°œν‘œμ—μ„œ κ³΅μœ ν•˜κΈ°λ„ ν–ˆμ—ˆλ‹€. μ§€κΈˆ λ‹€μ‹œ 생각해본 μ„±μž₯에 β€˜μ€νƒ„ν™˜β€™μ€ μ—†κ³  맀번 λ§Žμ€ 고민을 톡해 이뀄진닀고 μƒκ°ν•œλ‹€. κ·Έ λ‚΄μš©μ„ 짧게 정리해 보렀 ν•œλ‹€. μ •μ˜ β€˜μ„±μž₯β€™μ΄λΌλŠ” λ‹¨μ–΄λŠ” …

Cookie Recipes

μž‘λ…„μ— λ°œν‘œλœ Chrome SameSite μ •μ±…κ³Ό μ›Ή μ‚¬μ΄νŠΈμ˜ 인증 κΈ°λŠ₯을 κ΅¬ν˜„ν•˜λŠ” κ³Όμ •μ—μ„œ β€˜μΏ ν‚€β€™μ— λŒ€ν•΄ ν•œ 번쯀 λ“€μ–΄ 보셨을 κ²ƒμž…λ‹ˆλ‹€. 이 ν¬μŠ€νŒ…μ—μ„œλŠ” μΏ ν‚€κ°€ 무엇이고, μ–΄λ–€ μ’…λ₯˜κ°€ μžˆλŠ”μ§€, μΏ ν‚€μ˜ νŠΉμ„±κ³Ό μ—°κ΄€λœ λΈŒλΌμš°μ € 정책듀을 μ‚΄νŽ΄λ΄…λ‹ˆλ‹€. μΏ ν‚€ μΏ ν‚€λž€ μ›Ήμ‚¬μ΄νŠΈμ˜ 정보λ₯Ό λΈŒλΌμš°μ € μͺ½μ— μ €μž₯ν•˜λŠ” μž‘μ€ νŒŒμΌμž…λ‹ˆλ‹€. DBλŠ” ν΄λΌμ΄μ–ΈνŠΈμ˜ μš”μ²­μ— μ˜ν•΄ 데이…

μ•Œμ•„λ‘λ©΄ μ“Έλͺ¨ μžˆλŠ” Navigator지식

ν”„λŸ°νŠΈμ—”λ“œ κ°œλ°œμ—μ„œ 객체에 λŒ€ν•œ μ‚¬μš©μ„ 빼놓을 수 μ—†μŠ΅λ‹ˆλ‹€. 이 ν¬μŠ€νŒ…μ—μ„œλŠ” navigator객체의 μ—¬λŸ¬ 가지 속성듀에 λŒ€ν•΄ μ‚΄νŽ΄λ΄…λ‹ˆλ‹€. κ°μ²΄λŠ” λŒ€ν‘œμ μΈ User Agent뿐만 μ•„λ‹ˆλΌ μ‚¬μš©μžμ˜ μƒνƒœμ— κ΄€ν•œ μ—¬λŸ¬κ°€μ§€ 정보λ₯Ό λ‹΄κ³  μžˆμŠ΅λ‹ˆλ‹€. navigator의 속성듀은 읽기 μ „μš©μœΌλ‘œ μ ‘κ·Όν•  수 μžˆμŠ΅λ‹ˆλ‹€. react-adaptive-hooks ChromeL…

Saga Patternκ³Ό redux-saga

redux 비동기 처리λ₯Ό μœ„ν•΄ redux-sagaλ₯Ό μ‚¬μš©ν•΄λ³΄μ‹  적이 μžˆμœΌμ‹ κ°€μš”? β€œThe mental model is that a saga is like a separate thread in your application that’s solely responsible for side effects. redux-saga is a redux middlewar…

λ˜λŒμ•„λ³΄λŠ” index.html - Part 2

Part 1μ—μ„œλŠ” link tag와 script tag에 λŒ€ν•΄ μ•Œμ•„λ³΄μ•˜μŠ΅λ‹ˆλ‹€. 이번 νŽΈμ—μ„œλŠ” OpenGraph(μ΄ν•˜ og), favicon, charset, lang에 λŒ€ν•΄ μ•Œμ•„λ΄…λ‹ˆλ‹€. OpenGraph Protocol OpenGraph Protocol(μ΄ν•˜ og)μ΄λž€, Facebookμ—μ„œ μ •μ˜ν•œ HTMLλ¬Έμ„œμ˜ 메타 데이터 정보λ₯Ό μ λŠ” 방식에 λŒ€ν•œ κ·œμ•½β€¦

λ˜λŒμ•„λ³΄λŠ” index.html - Part 1

React, Vue, Angular 같은 Library ν˜Ήμ€ Framework둜 κ°œλ°œν•  경우 λΉŒλ“œ 결과물인 index.html은 μžλ™μœΌλ‘œ μƒμ„±λ˜κΈ° λ•Œλ¬Έμ— 직접 λ³Ό ν•„μš”κ°€ 없을 μˆ˜λ„ μžˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ, μ΅œμ’… html의 ꡬ성 μš”μ†Œλ₯Ό 잘 νŒŒμ•…ν•˜κ³  μžˆλ‹€λ©΄ μ„±λŠ₯ κ°œμ„ μ΄λ‚˜ λ””λ²„κΉ…ν•˜λŠ” μƒν™©μ—μ„œ μš©μ΄ν•˜κ²Œ ν™œμš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. Parts 1편: link, script t…

2020λ…„ λ‚΄κ°€ μƒκ°ν•œ μ’‹μ€μ½”λ“œ

μž‘λ…„ λ°œν‘œμ—μ„œ β€˜μ§€μ‹μ΄ λ§Žλ‹€κ³  ν•΄μ„œ λ°˜λ“œμ‹œ 쒋은 μ½”λ“œλ₯Ό μ“Έ 수 μžˆλŠ” 것은 μ•„λ‹ˆλ‹€.β€˜λΌκ³  ν–ˆλ‹€. λ¬Όλ‘  μ•„λŠ” 것이 λ§Žμ•„μ§€λ©΄ 쒋은 μ½”λ“œλ₯Ό μž‘μ„±ν•  ν™•λ₯ μ΄ λ†’μ•„μ§ˆ μˆ˜λŠ” μžˆλ‹€. ν•˜μ§€λ§Œ, β€˜μ’‹μ€ μ½”λ“œβ€™λΌλŠ” λ‹¨μ–΄λŠ” 지식 말고도 κ³ λ €ν•΄μ•Ό ν•  점이 λ§Žμ€ 단어이닀. 이 글은 λ‚΄κ°€ 생각해본 쒋은 μ½”λ“œμ— λŒ€ν•΄ μ†Œκ°œν•˜λŠ” 글이닀. β€˜μ’‹λ‹€β€™λΌλŠ” λ¬Έμž₯μ—μ„œ μ•Œ 수 μžˆλ“―, 주관적 생각일 …

[λ²ˆμ—­] Kubernetes Services simply visually explained

이 글은 μ›μž‘μžμ˜ ν—ˆλ½μ„ λ°›κ³  원문을 λ²ˆμ—­ν•œ κΈ€μž…λ‹ˆλ‹€. Parts Part 1: this article Part 2: Kubernetes Ingress simply visually explained TL;DR ClusterIP의 근간이 λ˜λŠ” 4개의 μ„œλΉ„μŠ€κ°€ μžˆμŠ΅λ‹ˆλ‹€. NodePortμ„œλΉ„μŠ€λ₯Ό μƒμ„±ν•˜λ©΄ ClusterIP도 μƒμ„±λœλ‹€κ³  μƒμƒν•΄λ΄…μ‹œλ‹€. 그리고, …

Deploy 2019

μ§„μ •ν•œ 연말이닀. 그리고 μ˜¬ν•΄λ„ λ§Žμ€ λΆ„λ“€μ˜ νšŒκ³ κΈ€μ΄ 올라였고 μžˆλ‹€. 곧 νšŒκ³ κΈ€μ„ μ“΄λ‹€κ³  ν•˜λ‹ˆ, 이런 말을 λ“€μ—ˆλ‹€. β€œνšŒκ³ ν•˜λ©΄ λ°˜μ„±λ§Œ ν•˜κ²Œ 되고, λ‚΄λ…„μ˜ κ³„νšμ€ 뢀담이 λ˜λŠ”κ²ƒ κ°™μ•„μ„œ μ•ˆμ“°κ²Œ λ˜λ”λΌκ΅¬μš”. λ™κ°ν•œλ‹€. λ‚˜μ˜ νšŒκ³ κΈ€μ€ β€˜λ°˜μ„±β€™μ΄ μ•„λ‹Œ β€˜λ˜λŒμ•„λ΄„β€™, β€˜κΈ°λ‘β€™μ„ λͺ©μ μœΌλ‘œ μž‘μ„±ν•œλ‹€. λ‚˜μ˜ 2019년은 μ–΄λ• μ„κΉŒ? λͺ¨ν—˜μ΄μž λ„μ „μ΄μ—ˆλ˜ μΈν„΄κΈ°κ°„μ—μ„œ 쒋은 결…