profile
FE Developer πŸ’‘
post-thumbnail

[React] μš”μ†Œ μ™Έ μ™ΈλΆ€ μ˜μ—­ 클릭

μΈμŠ€νƒ€κ·Έλž¨ 클둠 μ½”λ”© ν”„λ‘œμ νŠΈ μž‘μ—…μ€‘, 더보기 λ²„νŠΌμ„ ν† κΈ€ ν΄λ¦­μ‹œ 메뉴창이 뜨고 λ‹«νžˆλ„λ‘ λ§Œλ“€μ–΄λ†“μ€ μƒνƒœμ΄λ‹€. μ—¬κΈ°μ„œ λ‚˜λŠ” 메뉴창 μ™Έμ˜ μ˜μ—­μ—λ„ 클릭할 μ‹œ 메뉴창이 λ‹«νžˆλ„λ‘ ν•˜κ³ μ‹Άμ–΄ν–ˆλ‹€. 찾던 λ‚΄μš©μ€‘, λ‹¨μˆœν•˜κ²Œ μ „μ²΄μ˜μ—­μ„ νƒœκ·Έλ‘œ 감싼 ν›„ ν•΄λ‹Ή μ „μ—­ νƒœκ·Έμ˜ onClick

2024λ…„ 3μ›” 24일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[ESlint] SyntaxError: Failed to load parser '@typescript-eslint/parser' declared in '.eslintrc.json μ—λŸ¬

next ν”„λ‘œμ νŠΈλ₯Ό μ‹œμž‘ν•˜λ € 초기 μ„ΈνŒ…μ€‘, λ‹€μŒκ³Ό 같은 eslint μ—λŸ¬ 문ꡬ가 λ–΄λ‹€.초기 eslintrc.json λŠ” λ‹€μŒκ³Ό 같이 μžλ™μœΌλ‘œ μ„€μ •λ˜μ–΄μžˆλ˜ 상황이닀.next.js 초기 μ„ΈνŒ…(eslint, prettier) κ΄€λ ¨ 글을 μ„œμΉ˜ν•˜μ˜€λŠ”λ°, μœ„μ˜ λΆ€λΆ„λ§ŒμœΌλ‘  μ™„λ²½ν•˜κ²Œ

2024λ…„ 1μ›” 21일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[javascript] body 슀크둀 막기

슀크둀 κΈ°λŠ₯을 λ§‰μ•„μ•Όν•˜λŠ” μƒν™©μ—μ„œ λŒ€λΆ€λΆ„μ€ body 에 overflow-y: hidden 을 μ£ΌλŠ” 방법이 μ œμ‹œλ˜μ§€λ§Œ, 그렇지 μ•Šμ€ 경우 μžλ°”μŠ€ν¬λ¦½νŠΈλ‘œ 이λ₯Ό μ²˜λ¦¬ν•΄μ•Όν•œλ‹€.μ²˜μŒμ—” μ•„λž˜μ™€ 같이 이벀트λ₯Ό μ£Όμ—ˆμ§€λ§Œ μž‘λ™ν•˜μ§€ μ•Šμ•˜λ‹€ γ… λ‘λ²ˆμ§Έ μ‹œλ„λ‘œ μ•„λž˜μ™€ 같이 λ‹€λ₯Έ μ΄λ²€νŠΈμ—λ„ 적

2023λ…„ 12μ›” 7일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[Swiper.js] νŽ˜μ΄μ§€ 링크 이동, ν˜„μž¬ μŠ¬λΌμ΄λ“œ ν‘œμ‹œ (hash navigation μ˜΅μ…˜) (1)

μ‚¬μš©μž μž…λ ₯폼을 μ—¬λŸ¬ λ‹¨κ³„λ‘œ μž‘μ„±ν•  수 μžˆλŠ” 뢀뢄을 λ ˆμ΄μ–΄ νŒμ—…μ‹μœΌλ‘œ λ„μ–΄μ§€λŠ”κ²ƒμ΄ μ•„λ‹Œ, λΈŒλΌμš°μ € μƒμ—μ„œλ„ λ’€λ‘œκ°€κΈ°, μ•žμœΌλ‘œ κ°€κΈ°κ°€ κ°€λŠ₯ν•œ λžœλ”©νŽ˜μ΄μ§€ ν˜•μ‹μœΌλ‘œ λ§Œλ“€κ³  μ‹Άμ—ˆλ‹€. μ•„λž˜μ™€ 같은 μ‚¬ν•­λ•Œλ¬Έμ΄μ—ˆλ‹€.4개의 νŽ˜μ΄μ§€λ‘œ λΆ„λ¦¬ν•˜λ©΄ νŽ˜μ΄μ§€ 이동 μ‹œ 이전에 μž…λ ₯ν•œ μ‚¬μš©μžμ˜ μž…

2023λ…„ 12μ›” 6일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[javascript] μ„Έλ‘œ 슀크둀 μŠ¬λΌμ΄λ“œ κ΅¬ν˜„

이미 ν’€νŽ˜μ΄μ§€ 슀크둀이 κ΅¬ν˜„λ˜μ–΄μžˆλŠ” μƒνƒœνŠΉμ • νŽ˜μ΄μ§€λ‚΄μ—μ„œ μŠ¬λΌμ΄λ“œκ°€ μ„Έλ‘œλ‘œ μŠ€ν¬λ‘€λ˜λŠ” ꡬ쑰둜 λ§Œλ“€μ–΄μ•Ό ν•˜λŠ”λ°, ν’€νŽ˜μ΄μ§€ 슀크둀 κΈ°λŠ₯κ³Ό 겹쳐 슀크둀 이벀트λ₯Ό κ΅¬ν˜„ν•˜λŠ”λ° 쉽지 μ•Šμ•˜λ‹€..ν•΄λ‹Ή νŽ˜μ΄μ§€μ— λ„λ‹¬ν•˜λ©΄ body 의 μŠ€ν¬λ‘€μ„ 막은 ν›„ μŠ¬λΌμ΄λ“œλ₯Ό μ‹€ν–‰ν•˜κ²Œ ν•˜κ³ , μŠ¬λΌμ΄λ“œ

2023λ…„ 12μ›” 6일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[javascript]select λ°•μŠ€ option 선택에 λ”°λ₯Έ input μž…λ ₯μ°½ μΆ”κ°€/μ‚­μ œ

select λ°•μŠ€μ—μ„œ ν’ˆλͺ©μ˜ μ’…λ₯˜ 개수λ₯Ό μž…λ ₯ν•˜λ©΄, κ°œμˆ˜μ— 따라 input 칸이 μΆ”κ°€λ˜λŠ” κΈ°λŠ₯을 κ΅¬ν˜„ν•΄λ³΄μ•˜λ‹€. (ν’ˆλͺ©μ€ 4κ°œκΉŒμ§€ μž…λ ₯ κ°€λŠ₯)개수λ₯Ό λ³€κ²½μ‹œ, κ°œμˆ˜κ°€ 적어지면 적어진 개수만큼 λ’€μ—μ„œλΆ€ν„° input μ‚­μ œ, μž…λ ₯값이 같이 제좜될 수 μžˆμœΌλ―€λ‘œ 그에 λ”°λ₯Έ valu

2023λ…„ 12μ›” 6일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[Swiper] svg λ²„νŠΌμ„ μ΄μš©ν•œ pagination μ»€μŠ€ν…€ (loop, update() κΈ°λŠ₯)

pagination 의 bullets μš”μ†Œλ₯Ό css μ»€μŠ€ν…€ ν•˜λŠ”κ²ƒμ΄ μ•„λ‹Œ, νŠΉμ΄ν•œ λͺ¨μ–‘μ˜ μ•„μ˜ˆ λ‹€λ₯Έ λ²„νŠΌμ„ pagination 으둜 λ§Œλ“€κ³  μ‹Άμ–΄ svg λ₯Ό μ‚¬μš©ν–ˆλ‹€. ν•˜μ§€λ§Œ λ§Žμ€ λ‚œκ΄€μ΄ μžˆμ—ˆλŠ”λ°, κΈ°μ‘΄ λ‚΄μž₯된 pagination 을 μ“΄λ‹€λ©΄ μŠ€νƒ€μΌλ§Œ λ°”κΎΈλ©΄ λ˜μ§€λ§Œ μ•„μ˜ˆ

2023λ…„ 10μ›” 25일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[Javascript] μ„œλͺ… μž…λ ₯폼 - μ •κ·œν‘œν˜„μ‹μ„ ν†΅ν•œ μœ νš¨μ„± 체크 & html ν…μŠ€νŠΈ/μŠ€νƒ€μΌ 볡사

아웃룩 이메일 μ„œλΉ„μŠ€μ˜ μ„œλͺ…을 등둝할 λ•Œ, 이미 λ§Œλ“€μ–΄μ§„ html 을 κ·ΈλŒ€λ‘œ μ„œλͺ…에 볡사 λΆ™μ—¬λ„£κΈ° ν•  수 μžˆλŠ” κΈ°λŠ₯을 λ§Œλ“€κ³ μž ν–ˆκ³  이λ₯Ό μžλ°”μŠ€ν¬λ¦½νŠΈλ‘œ κ΅¬ν˜„ν•˜λ €ν•œλ‹€.μ™Όμͺ½ form 에 이름, 번호 등을 μž…λ ₯ν•˜λ©΄ 였λ₯Έμͺ½ 화면에 κ·ΈλŒ€λ‘œ 정보가 μŠ€νƒ€μΌμ΄ μž…ν˜€μ§„ 채 λ°˜μ˜λ¨μ™„μ„±λœ

2023λ…„ 10μ›” 24일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[React-hook-form] λΉ„λ°€λ²ˆν˜Έ 일치 μœ νš¨μ„±μ²΄ν¬

νšŒμ›κ°€μž… νƒ­μ—μ„œ λΉ„λ°€λ²ˆν˜Έλ₯Ό μž…λ ₯ ν›„ ν•΄λ‹Ή λΉ„λ°€λ²ˆν˜Έκ°€ λ§žλŠ”μ§€ ν•œ 번 더 ν™•μΈν•˜λŠ” β€œλΉ„λ°€λ²ˆν˜Έ 확인” 인풋을 μƒμ„±ν–ˆλ‹€. react-hook-form ν™˜κ²½μ—μ„œ useController λ₯Ό 톡해 Input μ»΄ν¬λ„ŒνŠΈλ‘œ λ§Œλ“  상황이닀.λΉ„λ°€λ²ˆν˜Έκ°€ λ§žμ§€ μ•Šμ„ μ‹œ 'λΉ„λ°€λ²ˆν˜Έκ°€ μΌμΉ˜ν•˜μ§€

2023λ…„ 10μ›” 11일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[React.js] μ•„μ½”λ””μ–Έ μ»΄ν¬λ„ŒνŠΈ

μ•½κ΄€λ™μ˜ νŽ˜μ΄μ§€λ₯Ό λ§Œλ“€λ•Œ, μ•„μ½”λ””μ–Έ ν˜•νƒœλ‘œ μ•½κ΄€λ‚΄μš©μ„ ν΄λ¦­ν•˜λ©΄ 확인할 수 μžˆλ„λ‘ ν•˜κ³  μ²΄ν¬λ°•μŠ€μ™€ 제λͺ©μ€ λ³΄μ΄λŠ” ꡬ쑰λ₯Ό λ§Œλ“€κ³  μ‹Άμ—ˆλ‹€.β‡’ μ΄μš©μ•½κ΄€μ—μ„œ λˆ„λ₯Ό 수 μžˆλŠ” 제λͺ©λ²„νŠΌκ³Ό μ²΄ν¬λ°•μŠ€λŠ” κ·ΈλŒ€λ‘œ λ‘” μƒνƒœλ‘œ, μ»¨ν…μΈ λ§Œ 열리고 λ‹«νžˆλŠ” κ΅¬μ‘°ν•˜λ‚˜μ˜ κΈ°λŠ₯을 ν•˜λŠ” μ»΄ν¬λ„ŒνŠΈ λ‚΄ μ‘΄μž¬ν•˜

2023λ…„ 10μ›” 4일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[React.js] ν΄λ¦½λ³΄λ“œ 볡사 라이브러리, λ³΅μ‚¬λ²„νŠΌ μ»΄ν¬λ„ŒνŠΈ 생성

ν…μŠ€νŠΈλ₯Ό λ³΅μ‚¬ν•˜λŠ” λ²„νŠΌ κΈ°λŠ₯이 μžˆμ–΄ λ¦¬μ•‘νŠΈ ν™˜κ²½ 볡사기λŠ₯을 μ§€μ›ν•΄μ£ΌλŠ” 라이브러리λ₯Ό ν™œμš©ν•΄ μ•„λž˜μ™€ 같이 μž‘μ—…ν•˜μ˜€λ‹€.ν•˜μ§€λ§Œ ν•΄λ‹Ή λ²„νŠΌμ΄ λ‹€λ₯ΈνŽ˜μ΄μ§€μ—μ„œλ„ 쀑볡 μ‚¬μš©λ˜μ–΄ μ»΄ν¬λ„ŒνŠΈλ‘œ λ‹€μ‹œ μž¬κ΅¬μ„±ν•˜μ—¬ μž‘μ—…ν•΄λ³΄μ•˜λ‹€.볡사가 λ˜μ—ˆλ‹€λŠ” μ•Œλ¦Όμ„ λ„μš΄ ν›„ 2초 뒀에

2023λ…„ 10μ›” 4일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[Next.js] μ™ΈλΆ€ 이미지가 μ•ˆλœ¨λŠ” ν˜„μƒ

next ν”„λ‘œμ νŠΈμ—μ„œ μ™ΈλΆ€μ—μ„œ κ°€μ Έμ˜€λŠ” 이미지λ₯Ό μ—…λ‘œλ“œν•˜λŠ” μž‘μ—… 쀑 이미지가 μ•ˆλœ¨λŠ” ν˜„μƒμ΄ λ°œμƒν–ˆλ‹€.이미지 url 은 잘 가져와져 μ„œλ²„μͺ½ λ¬Έμ œλŠ” μ•„λ‹Œκ²ƒ κ°™μ•˜κ³ , srcκ²½λ‘œκ°€ β€œ/\_next/img~ 와 같이 정상적이지 μ•Šκ²Œ λ Œλ”λ§λ˜μ–΄μžˆμ—ˆλ‹€.ꡬ글링 κ²°κ³Ό κ·Έ 원인은, N

2023λ…„ 7μ›” 19일
Β·
1개의 λŒ“κΈ€
Β·
post-thumbnail

[Webtorm, intellij] 속성(attribute) μžλ™μ™„μ„± κΈ°λŠ₯

TailwindCSS λ₯Ό μ‚¬μš©ν•˜λŠ”λ° 자꾸 className={} 객체 ν˜•νƒœλ‘œ μžλ™μ™„μ„±λ˜λŠ” 점이 λ„ˆλ¬΄ λΆˆνŽΈν•΄μ„œ 섀정을 λ°”κΎΈκ³ μž ν–ˆλ‹€. λ¨Όμ € ν™•μž₯ν”„λ‘œκ·Έλž¨μ΄ 원인인가 μ‹Άμ–΄ λͺ¨λ‘ λΉ„ν™œμ„±ν™” μ‹œμΌœλ΄€μ§€λ§Œ, μ—¬μ „νžˆ μžλ™μ™„μ„± κΈ°λŠ₯은 κ·ΈλŒ€λ‘œμ˜€κ³  μ΄λŠ” λ‚΄μž₯된 κΈ°λŠ₯μ΄λž€ 것을 μœ μΆ”ν•  수 μžˆμ—ˆ

2023λ…„ 7μ›” 6일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[Next.js] SWR 데이터 κ°±μ‹  μ•ˆλ˜λŠ” ν˜„μƒ

문제 상황: κ΄€λ¦¬μžκ°€ 업무일지에 λŒ“κΈ€μ„ λ“±λ‘ν•˜λŠ” κΈ°λŠ₯을 λ§Œλ“œλŠ” 쀑 λŒ“κΈ€μ΄ λ“±λ‘λ˜μ–΄ ν•΄λ‹Ή λŒ“κΈ€μ΄ μ†ν•œ 리슀트 데이터가 λ³€κ²½ λ˜μ—ˆλŠ”λ°, λ³€κ²½λœ 데이터가 ν΄λΌμ΄μ–ΈνŠΈ 츑으둜 λ°”λ‘œ κ°±μ‹ λ˜μ§€ μ•ŠλŠ” λ¬Έμ œκ°€ λ°œμƒν–ˆλ‹€. 이 λ•Œλ¬Έμ— μ‚¬μš©μžκ°€ λŒ“κΈ€μ„ μ“΄ λ°”λ‘œ 직후 화면이 μ—…λ°μ΄νŠΈ λ˜μ§€ μ•Š

2023λ…„ 7μ›” 6일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[Webstorm, intellij] 컀밋 μ·¨μ†Œ, 컀밋 λ©”μ‹œμ§€ μˆ˜μ •

이전에 vscode ν™˜κ²½μ—μ„œ git 을 μ‚¬μš©ν•  λ•ŒλŠ” 일일히 터미널에 git add, commit, reset λ“± λͺ…λ Ήμ–΄λ₯Ό μž…λ ₯ν•˜μ—¬ κ΄€λ¦¬ν–ˆμ—ˆλ‹€. ν•˜μ§€λ§Œ webstorm νŽΈμ§‘κΈ°λ₯Ό μ‚¬μš©ν•œ 이후, ν˜„μž¬ μ €λŸ° λͺ…령어듀을 μΉ  ν•„μš”μ—†μ΄ κ°„νŽΈν•˜κ²Œ git 을 λ‹€λ£° 수 μžˆλ‹€. 이런 편리

2023λ…„ 6μ›” 1일
Β·
1개의 λŒ“κΈ€
Β·
post-thumbnail

[jQuery] νŒμ—…μ΄ μ—΄λ¦° μƒνƒœμ˜ URL μƒμ„±ν•˜κΈ°

νŠΉμ • νŽ˜μ΄μ§€μ˜ SNS λ“± μ™ΈλΆ€ 곡유λ₯Ό μœ„ν•΄ URL 링크λ₯Ό μƒμ„±ν•˜κ³  μ‹Άμ—ˆλ‹€. 링크λ₯Ό ν΄λ¦­ν•˜λ©΄ νŠΉμ • νŒμ—…μ΄ μ—΄λ¦° μƒνƒœλ‘œ νŽ˜μ΄μ§€κ°€ λ„μ–΄μ§€λŠ” ꡬ쑰여야 ν•˜λŠ”λ°, 해보지 μ•Šμ€ μž‘μ—…μ΄λΌ μ• λ₯Ό μ’€ λ¨Ήμ—ˆλ‹€.

2023λ…„ 5μ›” 24일
Β·
2개의 λŒ“κΈ€
Β·
post-thumbnail

[Javascript] νŒμ—…μ°½ λ‹«κΈ° λ²„νŠΌ closest()

νŽ˜μ΄μ§€ μž‘μ—…μ„ ν•˜λ˜ 쀑 νŒμ—…μ°½ κΈ°λŠ₯을 κ΅¬ν˜„ν•˜κ³  μžˆμ—ˆλ‹€. 그리고 λ‹«κΈ° λ²„νŠΌμ„ λˆ„λ₯΄λŠ” κΈ°λŠ₯μ—μ„œ 클릭된 λ²„νŠΌ(event.target)의 λΆ€λͺ¨λ₯Ό μ°Ύμ•„ ν•΄λ‹Ή λ²„νŠΌμ„ μžμ‹μœΌλ‘œ 가진 νŒμ—…μ„ λ‹«λŠ” κΈ°λŠ₯을 μž‘μ—…λ˜ 쀑 μž‘μ€ λ¬Έμ œκ°€ λ°œμƒν–ˆλ‹€.

2023λ…„ 5μ›” 17일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[Javascript] RPG κ²Œμž„ (λͺ¬μŠ€ν„° 작기)

λͺ¬μŠ€ν„° κ²Œμž„μ€ RPG κ²Œμž„μœΌλ‘œ, κ²Œμž„μ—λŠ” 크게 두 가지 λͺ¨λ“œκ°€ μžˆλ‹€. λͺ¨ν—˜, νœ΄μ‹, μ’…λ£Œ μ€‘μ—μ„œ μ„ νƒν•˜λŠ” 일반 λͺ¨λ“œμ™€ λͺ¨ν—˜μ„ λ– λ‚˜μ„œ 적을 λ§Œλ‚˜κ²Œ 될 λ•Œ λŒμž…ν•˜λŠ” μ „νˆ¬ λͺ¨λ“œμ΄λ‹€. μ „νˆ¬ λͺ¨λ“œμ—μ„œλŠ” 적을 κ³΅κ²©ν•˜κ±°λ‚˜ 체λ ₯을 νšŒλ³΅ν•˜κ±°λ‚˜ 도망간닀.μ›Ήκ²Œμž„ 링크html, css μ½”λ“œ

2023λ…„ 5μ›” 8일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[PlanetScale] error: database branch is not ready yet

planetscale λ°μ΄ν„°λ² μ΄μŠ€μ™€ μ—°κ²°ν•˜κ³ μž pscale connect λ₯Ό ν•˜λŠ”λ° 연결이 μ•ˆλ˜κ³  λ‹€μŒκ³Ό 같은 μ—λŸ¬κ°€ λ°œμƒν–ˆλŠ”λ°, ꡬ글링 κ²°κ³Ό κ·Έ 이유λ₯Ό κ³΅μ‹λ¬Έμ„œμ—μ„œ λ°”λ‘œ μ•Œμ•„λƒˆλ‹€.μ°Έκ³ : https://planetscale.com/docs/concepts/da

2023λ…„ 3μ›” 24일
Β·
0개의 λŒ“κΈ€
Β·
post-thumbnail

[React.js] 이미지 μ—…λ‘œλ“œ 버그

제둜초의 NodeBird κ°•μ˜ ν”„λ‘œμ νŠΈλ₯Ό 직접 리뉴얼 ν•˜λŠ”μ€‘μ— λ‹€μŒκ³Ό 같은 버그λ₯Ό λ°œκ²¬ν–ˆλ‹€.β‡’ κ²Œμ‹œλ¬Ό μž‘μ„± 쀑 이미지λ₯Ό μ—…λ‘œλ“œν•˜λŠ” κΈ°λŠ₯은 type 이 file 인 input 에 onChange 이벀트λ₯Ό κ±Έκ³  μ—…λ‘œλ“œ λ¦¬λ“€μ„œκ°€ λ””μŠ€νŒ¨μΉ˜λ˜λŠ” κ΅¬μ‘°κ²Œμ‹œλ¬Όμ„ μž‘μ„±ν•˜κΈ° μœ„ν•΄ β€œre

2023λ…„ 3μ›” 24일
Β·
0개의 λŒ“κΈ€
Β·