πŸ§Ÿβ€β™‚οΈ μ •κ·œν‘œν˜„μ‹, μ΄μ œλŠ” 더 이상 λ¬ΌλŸ¬λ‚  곳이 μ—†λ‹€!

9rganizedChaosΒ·2021λ…„ 10μ›” 28일
1
post-thumbnail

πŸ“˜ 미루고 미루던 μ •κ·œν‘œν˜„μ‹ 곡뢀!

λΆ€νŠΈμΊ ν”„ μ½”μŠ€λž€ 자고둜 μ‰΄μƒˆμ—†λŠ” μƒˆ μŠ€νƒκ³Ό μƒˆ 기술 ν•™μŠ΅μ˜ 연속! μš°μ„ μˆœμœ„λ₯Ό μ„€μ •ν•˜κ³  선택과 집쀑을 ν•˜λŠ” 것이 무엇보닀 μ€‘μš”ν•˜λ‹€. 그런 λΆ€νŠΈμΊ ν”„ ν•™μŠ΅κ³Όμ • 쀑 가차없이 νƒˆλ½λœ ν•™μŠ΅ νŒŒνŠΈκ°€ μžˆμ—ˆμœΌλ‹ˆ... μ •κ·œ ν‘œν˜„μ‹! μΈκ°„μ—κ²Œ 이닀지도 μΉœν™”μ μΈ μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό κ³΅λΆ€ν•˜λŠ” λ‚΄κ²Œ μ •κ·œν‘œν˜„μ‹μ€ μœ λ… πŸ‘½ μ™Έκ³„μ–΄πŸ‘½ κ°™μ•˜κ³ , μ½”μŠ€μ—μ„œλ„ 자주 μ‚¬μš©ν•˜λŠ” μ •κ·œ ν‘œν˜„μ‹μ€ κ²€μƒ‰ν•΄μ„œ μš°μ„  κ°€μ Έλ‹€ 써도 λ¬΄λ°©ν•˜λ‹€κ³  이야기해주어 λ‚˜λŠ” 일말의 뢀담감 없이 μ •κ·œν‘œν˜„μ‹μ„ 늘 봐도 λͺ» λ³Έ μ²™ν•˜λ©° 미뀄왔닀!

μ •κ·œν‘œν˜„μ‹μ„ λ§ˆμ£Όν•  λ•Œλ©΄ 늘, "그래, 이 κ±Έ λ‚΄κ°€ 직접 μž‘μ„±ν•  일이 μ–Όλ§ˆλ‚˜ λ˜κ² μ–΄...!"라며 애써 ν•™μŠ΅ ν•„μš”λ₯Ό μ™Έλ©΄ν–ˆμ§€λ§Œ, μš” κ·Όλž˜μ— μ •κ·œν‘œν˜„μ‹μ„ 직접 μž‘μ„±ν•΄μ•Ό ν•  일이 연달아 λͺ‡ λ²ˆμ”©μ΄λ‚˜ μƒκΈ°κ²Œ λ˜μ—ˆλ‹€.


λ¬Έμžμ—΄μ„ 두 개의 인자둜 split 해쀄 λ•Œ!

졜근 μ½”λ”©ν…ŒμŠ€νŠΈ μ€€λΉ„ κ²Έ 맀일 μ•„μΉ¨ μ•Œκ³ λ¦¬μ¦˜ 문제λ₯Ό ν•œ λ¬Έμ œμ”© ν’€λ©΄μ„œ "λ¬Έμžμ—΄μ„ 두 개 이상을 κΈ°μ€€μœΌλ‘œ split"ν•΄μ£Όκ³  싢은 상황이 자주 μžˆμ—ˆλ‹€. 예λ₯Ό λ“€μ–΄ "9+3*8-10+5+1"κ³Ό 같은 λ¬Έμžμ—΄μ΄ μ£Όμ–΄μ‘Œμ„ λ•Œ μ—°μ‚°κΈ°ν˜Έλ“€μ„ κΈ°μ€€μœΌλ‘œ split을 ν•΄μ£Όκ³  싢은 상황!

그럴 λ•Œ λ§ˆλ‹€ μ—¬λŸ¬ μ°¨λ‘€ split() λ©”μ„œλ“œλ₯Ό 써주어야 ν•˜λŠ” 점이 늘 μ–΄λ”˜κ°€ λΆˆνŽΈν–ˆλ‹€. λΆˆνŽΈν•¨μ€ κ°μˆ˜ν•œλ‹€ μΉ˜λ”λΌλ„, μ½”λ“œκ°€ μž₯황해지고 λ³΅μž‘ν•΄μ‘Œλ‹€... λ¬Όλ‘  κΌ­ split ν•˜λ‚˜ λ•Œλ¬Έλ§Œμ€ μ•„λ‹ˆμ—ˆκ² μ§€λ§Œ...!
λͺ¨μͺΌλ‘ κ·Έλž˜μ„œ μ—¬λŸ¬ 개의 기쀀점을 κ°–κ³  split을 ν•΄μ£ΌλŠ” 방법을 μ„œμΉ˜ν•˜λ©΄ 늘 μ •κ·œν‘œν˜„μ‹μ„ 인자둜 λ„˜κ²¨μ£Όλ©΄ λœλ‹€λŠ” 닡이 μ œμ‹œλ˜μ—ˆλ‹€.


ν…ŒμŠ€νŠΈ μ½”λ“œ μž‘μ„± μ‹œ, ν•„μš”!

졜근 λ‚˜λŠ” NextJS에 λ„ˆλ¬΄ λ„ˆλ¬΄ 진심이고, κ°•μ˜λ₯Ό λ“£κΈ° μ‹œμž‘ν–ˆλŠ”λ°, μ‹œμž‘λΆ€ν„° ν…ŒμŠ€νŠΈ μ½”λ“œλ₯Ό μ„ΈνŒ…ν•˜λ©΄μ„œ μ •κ·œν‘œν˜„μ‹μ„ 또 λ‹€μ‹œ λ§ˆμ£Όν•˜κ²Œ λ˜μ—ˆλ‹€...!

κ·Έλž˜μ„œ μƒκ°ν•˜κ²Œ λ˜μ—ˆλ‹€...
μ΄μ œλŠ” 더 이상 λ¬ΌλŸ¬λ‚  곳이 μ—†λ‹€!



μ •κ·œν‘œν˜„μ‹μ€ νŒ¨ν„΄πŸ§©κ³Ό ν”Œλž˜κ·ΈπŸš©

말 κ·ΈλŒ€λ‘œ 이닀. μš°μ„  μ •κ·œ ν‘œν˜„μ‹μ€ νŒ¨ν„΄κ³Ό ν”Œλž˜κ·Έλ‘œ κ΅¬μ„±λœλ‹€. νŒ¨ν„΄κ³Ό ν”Œλž˜κ·ΈλΌ 함은 μ•„λž˜μ™€ κ°™λ‹€.

기본적으둜,

  • νŒ¨ν„΄: λ¬Έμžμ—΄μ˜ μΌμ •ν•œ κ·œμΉ™μ„ ν‘œν˜„ν•œλ‹€.
  • ν”Œλž˜κ·Έ: μ •κ·œν‘œν˜„μ‹μ˜ 검색 방식을 μ„€μ •ν•œλ‹€.

νŒ¨ν„΄μ— λŒ€ν•΄μ„œ μ•Œμ•„λ³΄μž! 😯

  • μš°μ„  νŒ¨ν„΄μ€ /둜 μ—΄κ³  λ‹«μœΌλ©°, λ¬Έμžμ—΄μ˜ λ”°μ˜΄ν‘œλŠ” μƒλž΅ν•œλ‹€! (λ”°μ˜΄ν‘œλ₯Ό νŒ¨ν„΄ μ•ˆμ— ν¬ν•¨μ‹œν‚€λ©΄, λ”°μ˜΄ν‘œκΉŒμ§€λ₯Ό ν•˜λ‚˜μ˜ νŒ¨ν„΄μœΌλ‘œ 포함해 κ²€μƒ‰ν•œλ‹€.)
  • νŒ¨ν„΄μ€ μ•„λž˜μ™€ 같이 λ‹€μ–‘ν•œ ν‘œν˜„μ‹μ„ ν™œμš©ν•œλ‹€.

좜처: https://velog.io/@denmark-choco/javascript-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D

좜처: https://aftersiesta.tistory.com/3

κ·Έλ ‡λ‹€λ©΄ μ§€κΈˆκ» 자주 μ‚¬μš©ν•΄μ˜€λ˜ μ •κ·œν‘œν˜„μ‹μ„ λΆ„μ„ν•΄λ³΄μž!
λ‹€μŒμ€ μ•„μ΄λ””λ‘œ μ‚¬μš© κ°€λŠ₯ν•œμ§€ κ²€μ‚¬ν•˜λŠ” μ •κ·œν‘œν˜„μ‹μ΄λ‹€.

μœ„ νŒ¨ν„΄μ„ μ’…ν•©ν•΄μ„œ 뢄석해보면 κ²°κ΅­,
μœ„ μ •κ·œν‘œν˜„μ‹μ€ "μž„μ˜μ˜ μ•ŒνŒŒλ²³ λŒ€λ¬Έμž, μ†Œλ¬Έμž, 숫자둜 이루어진 λ¬Έμžκ°€ 4, 10번 λ°˜λ³΅λ˜λŠ” ν˜•νƒœμ˜ λ¬Έμžμ—΄"을 λ‚˜νƒ€λƒ„μ„ μ•Œ 수 μžˆλ‹€.


κ·Έλ ‡λ‹€λ©΄ ν”Œλž˜κ·ΈλŠ” 무엇? 🧐

ν”Œλž˜κ·ΈλŠ” μ•žμ„œ μ‚΄νŽ΄λ³΄μ•˜λ‹€μ‹œν”Ό μ •κ·œν‘œν˜„μ‹μ˜ 검색 방식을 μ„€μ •ν•˜κΈ° μœ„ν•΄ μ‚¬μš©ν•œλ‹€.
ν”Œλž˜κ·Έμ˜ μ˜λ―ΈλŠ” λ‹€μŒκ³Ό κ°™λ‹€.

  • i : Ignore Case, 말 κ·ΈλŒ€λ‘œ λŒ€μ†Œλ¬Έμžλ₯Ό κ΅¬λ³„ν•˜μ§€ μ•Šκ³  νŒ¨ν„΄μ„ κ²€μƒ‰ν•œλ‹€.
  • g: Global, λŒ€μƒ λ¬Έμžμ—΄ λ‚΄μ—μ„œ νŒ¨ν„΄κ³Ό μΌμΉ˜ν•˜λŠ” λͺ¨λ“  λ¬Έμžμ—΄μ„ μ „μ—­ κ²€μƒ‰ν•œλ‹€. (이 μ˜΅μ…˜μ„ 주지 μ•ŠμœΌλ©΄ 첫 번째둜 κ²€μƒ‰λ˜λŠ” νŒ¨ν„΄λ§Œ λ°˜ν™˜)
  • m: Multi Line: λ¬Έμžμ—΄μ˜ 행이 λ°”λ€Œλ”λΌλ„ νŒ¨ν„΄ 검색을 κ³„μ†ν•œλ‹€.

μœ„ μ„Έ ν”Œλž˜κ·Έκ°€ μƒλŒ€μ μœΌλ‘œ μ€‘μš”ν•˜κ³  자주 μ‚¬μš©λ˜λŠ” ν”Œλž˜κ·Έλ“€μ΄λ‹€.
이 외에도 s, u, y λ“±μ˜ ν”Œλž˜κ·Έλ“€μ΄ μ‘΄μž¬ν•˜μ§€λ§Œ, μƒλŒ€μ μœΌλ‘œ 자주 μ‚¬μš©λ˜μ§€ μ•ŠλŠ”λ‹€.

  • s:.이 κ°œν–‰ 문자 \n도 ν¬ν•¨ν•˜λ„λ‘ β€˜dotall’ λͺ¨λ“œλ₯Ό ν™œμ„±ν™”ν•œλ‹€.
  • u: μœ λ‹ˆμ½”λ“œ 전체λ₯Ό μ§€μ›ν•œλ‹€.
  • y: 문자 λ‚΄ νŠΉμ • μœ„μΉ˜μ—μ„œ 검색을 μ§„ν–‰ν•œλ‹€.

μ •κ·œν‘œν˜„μ‹ λ©”μ„œλ“œ!

μžλ°”μŠ€ν¬λ¦½νŠΈμ—μ„œ μ •κ·œν‘œν˜„μ‹μ„ λ¦¬ν„°λŸ΄λ‘œ 생성할 μˆ˜λ„ μžˆμ§€λ§Œ, RegExp μƒμ„±μž ν•¨μˆ˜λ₯Ό ν†΅ν•΄μ„œλ„ 생성할 수 μžˆλ‹€. 그말인 즉, RegExpλΌλŠ” μƒμ„±μž ν•¨μˆ˜κ°€ μ‘΄μž¬ν•œλ‹€λŠ” 것이닀!

μ½˜μ†”μ— RegExp.prototype을 μž…λ ₯ν•˜λ©΄ μ•„λž˜μ™€ 같은 좜λ ₯을 μ‚΄νŽ΄λ³Ό 수 μžˆλ‹€.
μ •κ·œν‘œν˜„μ‹μ—λŠ” λ‹€μ–‘ν•œ λ©”μ„œλ“œλ“€ (+ν”„λ‘œνΌν‹°λ“€)이 μžˆμŒμ„ μ•Œ 수 μžˆλ‹€.
이 쀑 λͺ‡ κ°€μ§€λ§Œ μ‚΄νŽ΄λ³΄λ©΄!

RegExp.prototype.exec

const target = "Is this all there is?";
const regExp = /is/;

regExp.exec(target);
// ['is', index: 5, input: 'Is this all there is?', groups: undefined]

μœ„ λ©”μ„œλ“œλŠ” 인수둜 전달 받은 λ¬Έμžμ—΄μ— λŒ€ν•΄ μ •κ·œ ν‘œν˜„μ‹μ˜ νŒ¨ν„΄μ„ 검색해 맀칭 κ²°κ³Όλ₯Ό λ°°μ—΄λ‘œ λ°˜ν™˜ν•˜κ³ , 맀칭 내역이 μ—†μœΌλ©΄ null을 λ°˜ν™˜ν•œλ‹€.

RegExp.prototype.test

const target = "Is this all there is?";
const regExp = /is/;

regExp.test(target);
// true

testλŠ” ν•΄λ‹Ή μ •κ·œν‘œν˜„μ‹ νŒ¨ν„΄μ— ν•΄λ‹Ήν•˜λŠ” νŒ¨ν„΄μ΄ μžˆλŠ”μ§€ μ—†λŠ”μ§€λ₯Ό λΆˆλ¦¬μ–Έ κ°’μœΌλ‘œ λ°˜ν™˜ν•œλ‹€!

일단 퇴각!

μ •κ·œν‘œν˜„μ‹μ˜ 전체 컨셉은 이와 κ°™λ‹€. μ§€κΈˆ λ‹Ήμž₯ μ„Έμ„Έν•œ κΈ°ν˜Έλ“€μ„ ν•˜λ‚˜ν•˜λ‚˜ μ™ΈμšΈ ν•„μš”λŠ” μ—†κ² λ‹€.
전체 컨셉을 λͺ…ν™•ν•˜κ²Œ μ΄ν•΄ν–ˆκ³ , μ€‘μš”ν•œ νŒ¨ν„΄ κΈ°ν˜Έλ“€κ³Ό ν”Œλž˜κ·Έ, λ©”μ„œλ“œλ“€μ„ μ•Œμ•„λ‘μ—ˆμœΌλ‹ˆ 이제 μ‹€μ „μ—μ„œ ν•„μš”ν• λ•Œ ν™œμš©ν•˜λ©΄μ„œ 감을 μ΅ν˜€μ•Όκ² λ‹€.
μ•½κ°„ μ΄ˆλ“±ν•™μƒ 일기 같이 마무리 된 것 같은데... μ•„λ¬΄νŠΌ!

profile
λΆ€μ •ν™•ν•œ μ •λ³΄λ‚˜ 잘λͺ»λœ μ •λ³΄λŠ” λŒ“κΈ€λ‘œ μ•Œλ €μ£Όμ‹œλ©΄ λΉ λ₯΄κ²Œ μˆ˜μ •ν† λ‘ ν•˜κ² μŠ΅λ‹ˆλ‹€, κ°μ‚¬ν•©λ‹ˆλ‹€!

0개의 λŒ“κΈ€