Skip to content

๐Ÿ“ƒ ํ…Œ์ŠคํŠธ ๋ช…์„ธ์„œ

ํ•ด์‹œ edited this page Aug 9, 2024 · 8 revisions

1.ย useCopyClipBoardย ํ›…

1.1. ํ…Œ์ŠคํŠธ ๋ชฉ์ 

ํด๋ฆฝ๋ณด๋“œ์— ํ…์ŠคํŠธ๋ฅผ ๋ณต์‚ฌํ•˜๋Š” ๊ธฐ๋Šฅ์˜ ๋™์ž‘์„ ๊ฒ€์ฆํ•˜๊ณ , ์„ฑ๊ณต ๋ฐ ์‹คํŒจ ์‹œ ์ ์ ˆํ•œ ํ† ์ŠคํŠธ ๋ฉ”์‹œ์ง€๊ฐ€ ์ถ”๊ฐ€๋˜๋Š”์ง€ ํ™•์ธํ•œ๋‹ค.

1.2. ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค

1.2.1. ํ…์ŠคํŠธ๊ฐ€ ํด๋ฆฝ๋ณด๋“œ์— ์„ฑ๊ณต์ ์œผ๋กœ ๋ณต์‚ฌ๋˜๋Š” ๊ฒฝ์šฐ

์„ค๋ช…: ํด๋ฆฝ๋ณด๋“œ์— ํ…์ŠคํŠธ๊ฐ€ ์„ฑ๊ณต์ ์œผ๋กœ ๋ณต์‚ฌ๋˜๋ฉด ์„ฑ๊ณต ๋ฉ”์‹œ์ง€๊ฐ€ ์ถ”๊ฐ€๋œ๋‹ค.์ž…๋ ฅ:ย 'test text'์˜ˆ์ƒ ๊ฒฐ๊ณผ:

navigator.clipboard.writeText๊ฐ€ย 'test text'๋กœ ํ˜ธ์ถœ๋œ๋‹ค.

ํ›…์˜ ์ฒซ ๋ฒˆ์งธ ๋ฐ˜ํ™˜๊ฐ’์ดย true๊ฐ€ ๋œ๋‹ค.

addToastMock์ด ์„ฑ๊ณต ๋ฉ”์‹œ์ง€์™€ ํ•จ๊ป˜ ํ˜ธ์ถœ๋œ๋‹ค.

1.2.2. ํ…์ŠคํŠธ๊ฐ€ ํด๋ฆฝ๋ณด๋“œ์— ๋ณต์‚ฌ ์‹คํŒจํ•˜๋Š” ๊ฒฝ์šฐ

์„ค๋ช…: ํด๋ฆฝ๋ณด๋“œ์— ํ…์ŠคํŠธ ๋ณต์‚ฌ๊ฐ€ ์‹คํŒจํ•˜๋ฉด ์‹คํŒจ ๋ฉ”์‹œ์ง€๊ฐ€ ์ถ”๊ฐ€๋œ๋‹ค.

์ž…๋ ฅ:ย 'test text'

์˜ˆ์ƒ ๊ฒฐ๊ณผ:navigator.clipboard.writeText๊ฐ€ย 'test text'๋กœ ํ˜ธ์ถœ๋œ๋‹ค.ํ›…์˜ ์ฒซ ๋ฒˆ์งธ ๋ฐ˜ํ™˜๊ฐ’์ดย false๊ฐ€ ๋œ๋‹ค.addToastMock์ด ์‹คํŒจ ๋ฉ”์‹œ์ง€์™€ ํ•จ๊ป˜ ํ˜ธ์ถœ๋œ๋‹ค.


2.ย usePairNameInputsย ํ›…

2.1. ํ…Œ์ŠคํŠธ ๋ชฉ์ 

ํŽ˜์–ด ์ด๋ฆ„ ์ž…๋ ฅ ์ฒ˜๋ฆฌ ๋ฐ ์ž…๋ ฅ๊ฐ’ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ๊ฒ€์ฆํ•œ๋‹ค.

2.2. ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค

2.2.1. ํŽ˜์–ด ์ด๋ฆ„ ์ž…๋ ฅ์ด ์—†๋Š” ๊ฒฝ์šฐ

์„ค๋ช…: ํŽ˜์–ด ์ด๋ฆ„์„ ์ž…๋ ฅํ•˜์ง€ ์•Š์œผ๋ฉด ์—๋Ÿฌ ์ƒํƒœ์™€ ์—๋Ÿฌ ๋ฉ”์‹œ์ง€๊ฐ€ ์„ค์ •๋œ๋‹ค.

์ž…๋ ฅ: ๋นˆ ๋ฌธ์ž์—ด('')์˜ˆ์ƒ ๊ฒฐ๊ณผ:์ฒซ ๋ฒˆ์งธ ํŽ˜์–ด์˜ ์ƒํƒœ๊ฐ€ย 'ERROR'๋กœ ์„ค์ •๋œ๋‹ค.

์ฒซ ๋ฒˆ์งธ ํŽ˜์–ด์˜ ๋ฉ”์‹œ์ง€๊ฐ€ย '๊ฐ’์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'๋กœ ์„ค์ •๋œ๋‹ค.

๋‘ ๋ฒˆ์งธ ํŽ˜์–ด์˜ ์ƒํƒœ๊ฐ€ย 'ERROR'๋กœ ์„ค์ •๋œ๋‹ค.

๋‘ ๋ฒˆ์งธ ํŽ˜์–ด์˜ ๋ฉ”์‹œ์ง€๊ฐ€ย '๊ฐ’์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.'๋กœ ์„ค์ •๋œ๋‹ค.


3.ย useInputย ํ›…

3.1. ํ…Œ์ŠคํŠธ ๋ชฉ์ 

์ž…๋ ฅ ๊ฐ’์˜ ์ƒํƒœ ๊ด€๋ฆฌ ๋ฐ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ๊ฒ€์ฆํ•œ๋‹ค.

3.2. ํ…Œ์ŠคํŠธ ์ผ€์ด์Šค

3.2.1. ์ดˆ๊ธฐ ์ƒํƒœ ํ™•์ธ

์„ค๋ช…: ํ›…์˜ ์ดˆ๊ธฐ ์ƒํƒœ๊ฐ€ ์˜ฌ๋ฐ”๋ฅธ์ง€ ํ™•์ธํ•œ๋‹ค.์˜ˆ์ƒ ๊ฒฐ๊ณผ:์ดˆ๊ธฐ๊ฐ’์ดย 'initial'์ด๋‹ค.์ƒํƒœ๊ฐ€ย 'DEFAULT'์ด๋‹ค.๋ฉ”์‹œ์ง€๊ฐ€ ๋นˆ ๋ฌธ์ž์—ด('')์ด๋‹ค.

3.2.2. ์ž…๋ ฅ ๊ฐ’ ๋ณ€๊ฒฝ ํ™•์ธ

์„ค๋ช…:ย handleChange๊ฐ€ ์ž…๋ ฅ ๊ฐ’์„ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์—…๋ฐ์ดํŠธํ•˜๋Š”์ง€ ํ™•์ธํ•œ๋‹ค.์ž…๋ ฅ:ย 'new value'์˜ˆ์ƒ ๊ฒฐ๊ณผ:์ž…๋ ฅ ๊ฐ’์ดย 'new value'๋กœ ์—…๋ฐ์ดํŠธ๋œ๋‹ค.

3.2.3. ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ ์ˆ˜ํ–‰ ํ™•์ธ

์„ค๋ช…: handleChange๊ฐ€ ์ž…๋ ฅ ๊ฐ’์— ๋Œ€ํ•œ ์œ ํšจ์„ฑ ๊ฒ€์‚ฌ๋ฅผ ์ˆ˜ํ–‰ํ•˜๋Š”์ง€ ํ™•์ธํ•œ๋‹ค.์ž…๋ ฅ: 'new' (๊ธธ์ด๊ฐ€ 5๋ณด๋‹ค ์ž‘์Œ)์˜ˆ์ƒ ๊ฒฐ๊ณผ:์ƒํƒœ๊ฐ€ย 'ERROR'๋กœ ์„ค์ •๋œ๋‹ค.๋ฉ”์‹œ์ง€๊ฐ€ย 'Too short'๋กœ ์„ค์ •๋œ๋‹ค.์ž…๋ ฅ: 'new value' (๊ธธ์ด๊ฐ€ 5 ์ด์ƒ)์˜ˆ์ƒ ๊ฒฐ๊ณผ:์ƒํƒœ๊ฐ€ย 'DEFAULT'๋กœ ์„ค์ •๋œ๋‹ค.๋ฉ”์‹œ์ง€๊ฐ€ ๋นˆ ๋ฌธ์ž์—ด('')๋กœ ์„ค์ •๋œ๋‹ค.

3.2.4. ๊ฐ’ ์ดˆ๊ธฐํ™” ํ™•์ธ

์„ค๋ช…:ย resetValue๊ฐ€ ๊ฐ’์„ ์ดˆ๊ธฐํ™”ํ•˜๋Š”์ง€ ํ™•์ธํ•œ๋‹ค.์˜ˆ์ƒ ๊ฒฐ๊ณผ:์ž…๋ ฅ ๊ฐ’์ด ์ดˆ๊ธฐ๊ฐ’์ธย 'initial'๋กœ ๋Œ์•„๊ฐ„๋‹ค.

๐Ÿ€ ์ฝ”๋”ฉํ•ด๋“€์˜ค

์ „์ฒด

์ •๋ณด

BE

FE

๊ธฐ์ˆ 

์ปจ๋ฒค์…˜

ํ…Œ์ŠคํŠธ

์„ฑ๋Šฅ ๊ฐœ์„  & ์ ‘๊ทผ์„ฑ ๊ฐœ์„  ๋ฆฌํฌํŠธ

์ธํ”„๋ผ

Clone this wiki locally