🌱 RORY LOG
πŸ’» Profile
profile_image
Rory
Frontend, Product Developer
Never feel that's not my job.
πŸ”Ž Search
πŸ“‚ All Posts
JavaScript
μžλ°”μŠ€ν¬λ¦½νŠΈ 이벀트 루프 원리

μžλ°”μŠ€ν¬λ¦½νŠΈ 이벀트 루프 원리

Jan 11, 2024

μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ 이벀트 루프 원리λ₯Ό μ•Œμ•„λ΄…λ‹ˆλ‹€.

React
[React Query] react-query λ₯Ό μ΄μš©ν•œ Optimistic Updates 방법 μ•Œμ•„λ³΄κΈ°

[React Query] react-query λ₯Ό μ΄μš©ν•œ Optimistic Updates 방법 μ•Œμ•„λ³΄κΈ°

Jan 5, 2024

react-query λ₯Ό μ΄μš©ν•˜μ—¬ μžμ—°μŠ€λŸ½κ²Œ UI μ—…λ°μ΄νŠΈλ₯Ό ν•΄λ³΄μž

Open Source
Prettier Config νŒ¨ν‚€μ§€ μ œμž‘μœΌλ‘œ 개발 생산성 높이기 (feat. CJS와 ESM)

Prettier Config νŒ¨ν‚€μ§€ μ œμž‘μœΌλ‘œ 개발 생산성 높이기 (feat. CJS와 ESM)

Dec 31, 2023

ν”„λ‘œμ νŠΈλ₯Ό 생성할 λ•Œλ§ˆλ‹€ 맀번 μ„€μ •ν•΄μ£Όμ–΄μ•Ό ν•˜λŠ” Prettier νŒŒμΌμ„ μ•„μ˜ˆ Package 둜 λ°°ν¬ν•΄μ„œ, 개발 생산성을 κ°œμ„ ν•΄λ³΄λ € ν•œλ‹€.

πŸ“— Cheet Sheet

2023/12 백둜그 정리

Dec 26, 2023

2023.12. 백둜그 정리

Troubleshooting

[TroubleShooting] Supabase RLS Auth 의 κ°œλ…κ³Ό Next.js μ μš©ν•˜κΈ°

Dec 10, 2023

Supabase ν”„λ‘œμ νŠΈμ—μ„œ RLS Auth 의 κ°œλ…μ„ μ•Œμ•„λ³΄κ³  Next.js 에 μ μš©ν•΄λ³΄κΈ°

Retrospective
TIL 정리

TIL 정리

Nov 18, 2023

λ‚˜μ€‘μ— μ΅μˆ™ν•΄μ§€λ©΄ 써먹을 지식듀 - 보.또.보 (보고 또 보기)

HTML/CSS

CSS-in-CSS 와 CSS-in-JS

Nov 17, 2023

CSS-in-CSS 와 CSS-in-JS λ₯Ό λΉ„κ΅ν•΄λ³΄μž

React Native

React Native + Expo 개발 κ³Όμ • 기둝

Nov 14, 2023

React Native 와 Expo λ₯Ό ν™œμš©ν•œ ν”„λ‘œμ νŠΈλ₯Ό κ°œλ°œν•˜λ©°, λ§ˆμ£Όν•œ 이슈λ₯Ό μ •λ¦¬ν•©λ‹ˆλ‹€.

Retrospective

일 μž˜ν•˜λŠ” κ°œλ°œμžκ°€ 되기 μœ„ν•œ μ—°μŠ΅

Nov 14, 2023

개발 κ³Όμ •μ—μ„œ Task 관리 잘 ν•˜λŠ” 방법을 정리

Troubleshooting

[μ»΄ν¬λ„ŒνŠΈ 뢄리 μ—°μŠ΅-2] 톡일성이 깨진 폼 UI λŒ€μ‘ν•˜κΈ°

Nov 11, 2023

μ»΄ν¬λ„ŒνŠΈ 뢄리 μ—°μŠ΅ 2탄, 톡일성이 깨진 폼 UI 에 λŒ€μ‘ν•˜κΈ°

Troubleshooting
React hook form λ Œλ”λ§ 이슈 ν•΄κ²°ν•˜κΈ°

React hook form λ Œλ”λ§ 이슈 ν•΄κ²°ν•˜κΈ°

Nov 10, 2023

React hook form 을 μ‚¬μš©ν•˜λ©° λ§ˆμ£Όν–ˆλ˜ μ»΄ν¬λ„ŒνŠΈ λ Œλ”λ§ 문제λ₯Ό ν•΄κ²°ν•΄λ³΄μž.

Diary

λ‚˜λ§Œμ˜ 주파수 μ°ΎκΈ°

Nov 6, 2023

λ‚¨κ³Όμ˜ λΉ„κ΅λŠ” 금물, μ²œμ™Έμ²œμ΄μ•Ό

Diary

λΆˆν™•μ‹€μ„±μ— λŒ€ν•˜μ—¬

Nov 2, 2023

μš°λ¦¬λŠ” 항상 β€˜μ„ νƒβ€™μ„ ν•œλ‹€.

Web
μ„Έμ…˜, μΏ ν‚€, 둜컬 μŠ€ν† λ¦¬μ§€ μ•Œμ•„λ³΄κΈ°

μ„Έμ…˜, μΏ ν‚€, 둜컬 μŠ€ν† λ¦¬μ§€ μ•Œμ•„λ³΄κΈ°

Oct 30, 2023

μ„Έμ…˜, μΏ ν‚€, 둜컬 μŠ€ν† λ¦¬μ§€μ— λŒ€ν•œ κ°œλ…μ„ μ •λ¦¬ν•˜κ³ , 둜그인 과정을 κ΅¬ν˜„ν•΄λ³΄μž.

Diary

κΈ°λŠ₯ 쀑심 쑰직과 λͺ©μ  쀑심 쑰직

Oct 11, 2023

Seminar
[μ„Έλ―Έλ‚˜ λ©”λͺ¨] SLASH21 - μ‹€λ¬΄μ—μ„œ λ°”λ‘œ μ“°λŠ” Frontend Clean Code

[μ„Έλ―Έλ‚˜ λ©”λͺ¨] SLASH21 - μ‹€λ¬΄μ—μ„œ λ°”λ‘œ μ“°λŠ” Frontend Clean Code

Oct 9, 2023

클린 μ½”λ“œλ₯Ό μž‘μ„±ν•˜κ³  μ‹Άμ–΄ 봀던 ν† μŠ€ μ„Έλ―Έλ‚˜ μ˜μƒ λ©”λͺ¨

CS

[λΆμŠ€ν„°λ””] 혼곡컴운 λ©”λͺ¨

Oct 4, 2023

ν˜Όκ³΅μ»΄μš΄μ„ 보며 κΈ°μ–΅ν•΄μ•Ό ν•  λ‚΄μš©μ„ λ©”λͺ¨ν•œλ‹€.

JavaScript
JS μŠ€ν„°λ”” 쑰각 λͺ¨μŒ

JS μŠ€ν„°λ”” 쑰각 λͺ¨μŒ

Oct 2, 2023

ν•˜λ‚˜μ”© κ°„λ‹¨ν•˜κ²Œ μΆ”κ°€ν•΄κ°€λŠ” μžλ°”μŠ€ν¬λ¦½νŠΈ κΈ°λ³Έ 지식 λͺ¨μŒ

Next.js
λ Œλ”λ§μ— κ΄€ν•˜μ—¬ - Next.js 편

λ Œλ”λ§μ— κ΄€ν•˜μ—¬ - Next.js 편

Sep 25, 2023

μ§€λ‚œ μ›Ή λΈŒλΌμš°μ € λ Œλ”λ§, React λ Œλ”λ§ νŽΈμ— 이어, μ΄λ²ˆμ—” Next.js 의 λ Œλ”λ§μ— κ΄€ν•΄ 닀뀄보렀 ν•œλ‹€.

CS

CORS κΈ°λ³Έ κ°œλ…κ³Ό λ™μž‘ 방식

Sep 20, 2023

CORS κ°„λ‹¨ν•œ 정리

CS

CS κΈ°λ³Έ: ν”„λ‘œμ„ΈμŠ€μ™€ μŠ€λ ˆλ“œ

Sep 20, 2023

λ‹€μ‹œ μ •λ¦¬ν•˜λŠ” ν”„λ‘œμ„ΈμŠ€μ™€ μŠ€λ ˆλ“œ

React
λ Œλ”λ§μ— κ΄€ν•˜μ—¬ - React 편

λ Œλ”λ§μ— κ΄€ν•˜μ—¬ - React 편

Sep 20, 2023

μ§€λ‚œ μ›Ή λΈŒλΌμš°μ € λ Œλ”λ§ νŽΈμ— 이어, μ΄λ²ˆμ—” React 의 λ Œλ”λ§μ— κ΄€ν•΄ 닀뀄보렀 ν•œλ‹€.

Web
λ Œλ”λ§μ— κ΄€ν•˜μ—¬ - μ›Ή λΈŒλΌμš°μ € 편

λ Œλ”λ§μ— κ΄€ν•˜μ—¬ - μ›Ή λΈŒλΌμš°μ € 편

Sep 18, 2023

μ§€κΈˆκΉŒμ§€ Next.js 와 React λ₯Ό μ‚¬μš©ν•΄μ™”μ§€λ§Œ, 아직도 λ Œλ”λ§ 과정에 λŒ€ν•΄ μ„€λͺ…해봐라 ν•˜λ©΄ μ œλŒ€λ‘œ λ§ν•˜μ§€ λͺ»ν•œλ‹€..!

React
Context API 와 Redux

Context API 와 Redux

Sep 16, 2023

자, νƒœμ΄ˆ λ§ˆμ„λ‘œ λŒμ•„κ°€μ„œ λ‹€μ‹œ μ „μ—­ μƒνƒœλ‘œ μ‹œμž‘ν•œλ‹€.

JavaScript
ν˜Έμ΄μŠ€νŒ…μ— λŒ€ν•΄ μ•Œμ•„λ³΄κΈ°

ν˜Έμ΄μŠ€νŒ…μ— λŒ€ν•΄ μ•Œμ•„λ³΄κΈ°

Sep 2, 2023

JS λ³€μˆ˜ μ’…λ₯˜μ— λŒ€ν•œ 볡기λ₯Ό 해보렀 ν•œλ‹€.

CI/CD
Github Action 을 μ΄μš©ν•œ Supabase auto type generating κ³Ό NPM νŒ¨ν‚€μ§€ 배포 (1)

Github Action 을 μ΄μš©ν•œ Supabase auto type generating κ³Ό NPM νŒ¨ν‚€μ§€ 배포 (1)

Sep 1, 2023

β€˜λ©€ν‹° λ ˆν¬β€™μ™€ β€˜λͺ¨λ…Έ λ ˆν¬β€™ 에 λŒ€ν•˜μ—¬

React
[React Query] react-query SSR μ§€μ›ν•˜λŠ” 방법 μ•Œμ•„λ³΄κΈ°

[React Query] react-query SSR μ§€μ›ν•˜λŠ” 방법 μ•Œμ•„λ³΄κΈ°

Aug 18, 2023

react-query 둜 SSR μ§€μ›ν•˜λŠ” 방법을 μ•Œμ•„λ³΄μž.

CI/CD
Github Action 을 μ΄μš©ν•œ Supabase auto type generating κ³Ό NPM νŒ¨ν‚€μ§€ 배포 (2)

Github Action 을 μ΄μš©ν•œ Supabase auto type generating κ³Ό NPM νŒ¨ν‚€μ§€ 배포 (2)

Aug 8, 2023

이전 ν¬μŠ€νŒ…μ—μ„œ 닀룬 λͺ¨λ…Έλ ˆν¬μ˜ κ°œλ…μ— μ°©μ•ˆν•˜μ—¬, supabase νƒ€μž…μ„ μžλ™μœΌλ‘œ μ œλ„ˆλ ˆμ΄νŠΈν•˜κ³  이λ₯Ό νƒ€μž… νŒ¨ν‚€μ§€λ‘œ μ œμž‘ν•΄λ³΄μž

React
[React Query] react query 의 μƒνƒœ 관리 방법 μ•Œμ•„λ³΄κΈ°

[React Query] react query 의 μƒνƒœ 관리 방법 μ•Œμ•„λ³΄κΈ°

Aug 4, 2023

react-query μ—μ„œ 데이터 패치 μƒνƒœλ₯Ό ν™•μΈν•˜λŠ” status 값을 μ•Œμ•„λ³΄μž.

React
[React Query] useInfiniteQuery 둜 λ¬΄ν•œ 슀크둀 μ§€μ›ν•˜κΈ°

[React Query] useInfiniteQuery 둜 λ¬΄ν•œ 슀크둀 μ§€μ›ν•˜κΈ°

Aug 1, 2023

react-query 의 λ¬΄ν•œ 슀크둀 지원을 μœ„ν•΄ λ§Œλ“  useInfiniteQuery λ₯Ό μ•Œμ•„λ³΄μž

UI/UX
Typography에 λŒ€ν•œ 탐ꡬ

Typography에 λŒ€ν•œ 탐ꡬ

Jul 19, 2023

타이포 κ΄€λ ¨ κ°„λ‹¨ν•œ 지식을 정리해보고, μ›Ή 가독성을 높일 수 μžˆλŠ” 방법에 λŒ€ν•΄ μ†Œκ°œν•œλ‹€.

CI/CD
Supabase Generating types (with GitHub Actions)

Supabase Generating types (with GitHub Actions)

Jul 1, 2023

졜근 μ‚¬μ΄λ“œ ν”„λ‘œμ νŠΈλ₯Ό μ§„ν–‰ν•˜λ©΄μ„œ Supabaseλ₯Ό ν™œμš©ν•˜κ²Œ λ˜μ—ˆκ³ , 맀번 νƒ€μž…μ„ μ •μ˜ν•΄μ•Ό ν•˜λŠ” λΆˆνŽΈν•¨μ΄ μžˆμ–΄μ„œ 이λ₯Ό 해결해보렀 ν•œλ‹€.

React
Framer motion μ‹œμž‘ν•˜κΈ°

Framer motion μ‹œμž‘ν•˜κΈ°

Jun 17, 2023

μ• λ‹ˆλ©”μ΄μ…˜μ„ μ†μ‰½κ²Œ κ΅¬ν˜„ν•˜λŠ” 방법은 λ¬΄μ—‡μΌκΉŒ?

Troubleshooting
Next 13 react hydration error ν•΄κ²°ν•˜κΈ°

Next 13 react hydration error ν•΄κ²°ν•˜κΈ°

Jun 9, 2023

Next.js Hydration μ΄λž€ 무엇이고, 였λ₯˜λŠ” μ–΄λ–»κ²Œ ν•΄κ²°ν•˜λ©΄ 될까?

HTML/CSS
HTML 을 μ΄μš©ν•˜μ—¬ μƒˆ νƒ­μœΌλ‘œ 링크 μ—΄κΈ° (feat.Tabnabbing)

HTML 을 μ΄μš©ν•˜μ—¬ μƒˆ νƒ­μœΌλ‘œ 링크 μ—΄κΈ° (feat.Tabnabbing)

Jun 5, 2023

κΈ°λ³Έμ μ΄λ©΄μ„œλ„ 자주 μ‚¬μš©λ˜λŠ”, μƒˆ νƒ­μœΌλ‘œ 링크 μ—¬λŠ” 방법에 λŒ€ν•΄ μ•Œμ•„λ³΄λ € ν•œλ‹€.

Diary

λ‚˜μ˜ 개발자 λ‘œλ“œλ§΅

Jun 4, 2023

λ‚˜λŠ” μ–΄λ””λ‘œ κ°€μ•Όν• κΉŒ

Next.js
Next.js13 μ—…λ°μ΄νŠΈ 사항 정리

Next.js13 μ—…λ°μ΄νŠΈ 사항 정리

May 23, 2023

Next.js 13 μ—…λ°μ΄νŠΈ 사항을 ν™•μΈν•΄λ³΄μž.

React
ReactDOM.createPortal 에 λŒ€ν•˜μ—¬

ReactDOM.createPortal 에 λŒ€ν•˜μ—¬

May 20, 2023

React의 createPortal 둜 Modal 을 κ΅¬ν˜„ν•΄λ³΄μž.

JavaScript
import / export κΈ°λ³Έ μ‚¬μš© 방법

import / export κΈ°λ³Έ μ‚¬μš© 방법

May 6, 2023

React μ—μ„œ λͺ¨λ“ˆκ°„ μ½”λ“œ κ³΅μœ μ™€ μž¬μ‚¬μš©μ„ μœ„ν•΄ 자주 μ‚¬μš©λ˜λŠ” import / export ES6 ꡬ문에 λŒ€ν•΄ μ•Œμ•„λ³΄κ³ μž ν•œλ‹€.

Web
LightHouse 점수 κ°œμ„ μ„ ν†΅ν•œ νŽ˜μ΄μ§€ 고도화 - Performance / SEO / μ ‘κ·Όμ„± 및 유의 사항 정리

LightHouse 점수 κ°œμ„ μ„ ν†΅ν•œ νŽ˜μ΄μ§€ 고도화 - Performance / SEO / μ ‘κ·Όμ„± 및 유의 사항 정리

May 1, 2023

λžœλ”© νŽ˜μ΄μ§€ lighthouse 점수 κ°œμ„ μ„ μ§„ν–‰ν•˜λ©° 배운 점듀을 정리해보렀 ν•œλ‹€.

Next.js
μž¬λ―Έμžˆμ—ˆλ˜ on-damand ISR λ„μž…κΈ°

μž¬λ―Έμžˆμ—ˆλ˜ on-damand ISR λ„μž…κΈ°

Apr 30, 2023

on-demand ISR 둜 νŒ€μ˜ 생산성을 κ°œμ„ ν•΄λ³΄μž.

React
RxJS 둜 polling 을 κ΅¬ν˜„ν•˜λŠ” 방법 탐ꡬ

RxJS 둜 polling 을 κ΅¬ν˜„ν•˜λŠ” 방법 탐ꡬ

Apr 30, 2023

ν”„λ‘ νŠΈμ—μ„œ api λ₯Ό 반볡적으둜 ν˜ΈμΆœν•˜μ—¬ response λ₯Ό ν™•μΈν•˜λŠ” 방법은 λ¬΄μ—‡μΌκΉŒ?

Retrospective
μ½”λ“œ 리뷰에 λŒ€ν•œ κ³ λ―Ό (feat. 1λ…„μ°¨ μ£Όλ‹ˆμ–΄)

μ½”λ“œ 리뷰에 λŒ€ν•œ κ³ λ―Ό (feat. 1λ…„μ°¨ μ£Όλ‹ˆμ–΄)

Apr 20, 2023

μ½”λ“œ 리뷰λ₯Ό 잘 ν•˜λ €λ©΄ μ–΄λ–»κ²Œ ν•΄μ•Ό ν• κΉŒ?

Troubleshooting

[μ»΄ν¬λ„ŒνŠΈ 뢄리 μ—°μŠ΅-1] ν•˜λ‚˜μ˜ μ»΄ν¬λ„ŒνŠΈμ— μ—¬λŸ¬ UI λ₯Ό λ³΄μ—¬μ€˜μ•Ό ν•˜λŠ” 경우 λŒ€μ‘ν•˜κΈ°

Feb 1, 2023

μ»΄ν¬λ„ŒνŠΈ 뢄리 μ—°μŠ΅ 1탄, ν•˜λ‚˜μ˜ μ»΄ν¬λ„ŒνŠΈμ— μ—¬λŸ¬ UI λ₯Ό 보여주어야 ν•˜λŠ” 경우 λŒ€μ‘ν•˜κΈ°

Next.js
Next.js 와 Minimizing bundle size 방법 적용기

Next.js 와 Minimizing bundle size 방법 적용기

Jan 5, 2023

λͺ¨λ“ˆμ„ μž„ν¬νŠΈν•΄μ˜€λŠ” μ‹œκ°„μ΄ λ„ˆλ¬΄ 느렀 초기 λ‘œλ”©μ΄ 였래 κ±Έλ¦¬λŠ” λ¬Έμ œκ°€ μžˆλŠ” 상황이 λ°œμƒν•˜μ˜€λ‹€.

πŸ’» Profile
Rory
Frontend, Product Developer
Never feel that's not my job.
πŸ’¬ Contact
github
email