|
|
|
|
|
|
|
Ã¥³»¿ë |
|
ÀÌ Ã¥Àº ¸®¾×Æ®¿Í ¸®¾×Æ®¿¡¼ Å×½ºÆ® Äڵ带 ÀÛ¼ºÇÏ´Â ¹æ¹ýÀ» Á» ´õ ½±°Ô ÀÌÇØÇÒ ¼ö ÀÖ°Ô ¾×Æ®ÀÇ ±âÃʺÎÅÍ ¸®¾×Æ®¿¡¼ Å×½ºÆ®¸¦ À§ÇØ »ç¿ëÇÏ´Â Jest¿Í react-testing-library¸¦ ´Ù·ç´Â ¹æ¹ý, ±×¸®°í ¿¹Á¦¸¦ ÅëÇØ ½ÇÁ¦ ÇÁ·ÎÁ§Æ®¿¡¼ ¸®¾×Æ®¿Í ¸®¾×Æ®ÀÇ Å×½ºÆ® Äڵ带 È°¿ëÇÏ´Â ¹æ¹ýÀ» ÀÚ¼¼È÷ ¼Ò°³ÇÏ°í ÀÖ´Ù.
ÀÌ Ã¥Àº ¸®¾×Æ®¿¡ °üÇÑ Ã¥À¸·Î ÀÚ¹Ù½ºÅ©¸³Æ®¿¡ °üÇؼ´Â ´Ù·ç°í ÀÖÁö ¾Ê´Ù. ÇÏÁö¸¸ ¸®¾×Æ®¸¦ óÀ½ Á¢ÇÏ´Â »ç¶÷¿¡°Ô´Â ¸í·É¾î¸¦ º¸¿©ÁÖ¸é¼ ÇϳªÇϳª µû¶ó ÇÒ ¼ö ÀÖ°Ô ¸¸µé¾îÁø Ã¥ÀÌ´Ù.
¸®¾×Æ®¿¡ ´ëÇÑ ÀÌÇØ¿Í Å×½ºÆ® ÁÖµµ °³¹ß¿¡ ´ëÇÑ ÀÌÇظ¦ ÇÑ ¹ø¿¡ ³¡³»°í ½Í´Ù¸é ÀÌ Ã¥À¸·Î ½ÃÀÛÇØ º¸±æ ¹Ù¶õ´Ù. |
|
¸ñÂ÷ |
|
1 ¸®¾×Æ®¶õ?
1.1 ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ ¿ª»ç
1.2 ¸®¾×Æ®ÀÇ Æ¯Â¡
1) °¡»ó µ¼
2) ´Ü¹æÇâ µ¥ÀÌÅÍ ¹ÙÀεù
3) JSX
4) ¼±¾ðÇü ÇÁ·Î±×·¡¹Ö
1.3 ¿ä¾à
2 ¸®¾×Æ® °³¹ß ȯ°æ
2.1 ¸Æ °³¹ß ȯ°æ ¼³Á¤
1) Ȩºê·ç ¼³Ä¡
2) ³ëµå ¼³Ä¡
2.2 À©µµ¿ì °³¹ß ȯ°æ ¼³Á¤
1) ÃÊÄÚ·¿Æ¼ ¼³Ä¡
2) ³ëµå ¼³Ä¡
2.3 ¸®¾×Æ®¸¦ ½ÃÀÛÇÏ´Â ¹æ¹ý
2.4 create-react-app
2.5 ¿ä¾à
3 ¸®¾×Æ®ÀÇ Å×½ºÆ® - Jest
3.1 JestÀÇ ÀåÁ¢
1) Á¦·Î ¼³Á¤
2) ½º³À¼¦
3)¸ðÀÇ °´Ã¼
4) Å×½ºÆ® ÄÚµåÀÇ ºÐ¸®
5) °£´ÜÇÑ API
3.2 ÇÁ·ÎÁ§Æ® Áغñ
3.3 Jest ¼³Ä¡
3.4 »ç¿ë ¹æ¹ý
3.5 Matcher
1) toEqual
2) toBeTruthy, toBeFalsy
3) toContain
4) ±âŸ
3.6 ÄÚµå Ä¿¹ö¸®Áö
3.7 ¿ä¾à
4 ¸®¾×Æ® Å×½ºÆ® - react-testing-library
4.1 react-testing-library
4.2 react-testing-libraryÀÇ ÀåÁ¡
4.3 ÇÁ·ÎÁ§Æ® Áغñ
4.4 react-testing-library ¼³Ä¡
4.5 »ç¿ë ¹æ¹ý
4.6 ¿ä¾à
5 ³ªÀÇ Ã¹ ¸®¾×Æ® ÇÁ·ÎÁ§Æ®
5.1 ŸÀÔ½ºÅ©¸³Æ®
5.2 styled-components
5.3 Àý´ë °æ·Î·Î ÄÄÆ÷³ÍÆ® Ãß°¡
5.4 Prettier
5.5 ¿ä¾à
6 Props¿Í State
6.1 Props¿Í State¶õ
6.2 ÇÁ·ÎÁ§Æ® Áغñ
6.3 °³¹ß
1) App ÄÄÆ÷³ÍÆ®
2) Button ÄÄÆ÷³ÍÆ®
3) Input ÄÄÆ÷³ÍÆ®
4) ToDoItem ÄÄÆ÷³ÍÆ®
5) State
6.4 Å×½ºÆ®
1) Button ÄÄÆ÷³ÍÆ®
2) Input ÄÄÆ÷³ÍÆ®
3) ToDoItem ÄÄÆ÷³ÍÆ®
4) App ÄÄÆ÷³ÍÆ®
6.5 ¿ä¾à
7 Ŭ·¡½º ÄÄÆ÷³ÍÆ®
7.1 Ŭ·¡½º ÄÄÆ÷³ÍÆ®
7.2 ÇÁ·ÎÁ§Æ® Áغñ
7.3 °³¹ß
1) Button ÄÄÆ÷³ÍÆ®
2) Input ÄÄÆ÷³ÍÆ®
3) ToDoItem ÄÄÆ÷³ÍÆ®
4) App ÄÄÆ÷³ÍÆ®
7.4 ¶óÀÌÇÁ »çÀÌŬ ÇÔ¼ö
1) constructor ÇÔ¼ö
2) render ÇÔ¼ö
3) getDerivedStateFromProps ÇÔ¼ö
4) componentDidMount ÇÔ¼ö
5) shouldComponentUpdate ÇÔ¼ö
6) getSnapshotBeforeUpdate ÇÔ¼ö
7) componentDidUpdate ÇÔ¼ö
8) componentWillUnmount ÇÔ¼ö
9) componentDidCatch ÇÔ¼ö
10) È£Ãâ ¼ø¼
7.5 Å×½ºÆ®
7.6 ¿ä¾à
8 Context API¿Í localStorage
8.1 Context API
8.2 ÇÁ·ÎÁ§Æ® Áغñ
8.3 °³¹ß
1) InputContainer ÄÄÆ÷³ÍÆ®
2) ToDoList ÄÄÆ÷³ÍÆ®
3) ToDoList ÄÁÅؽºÆ®
4) App ÄÄÆ÷³ÍÆ®¿¡ ÇÁ·Î¹ÙÀÌ´õ Àû¿ë
5) InputContainer ÄÄÆ÷³ÍÆ®¿¡ ÄÁ½´¸Ó Àû¿ë
6) ToDoList ÄÄÆ÷³ÍÆ®¿¡ ÄÁ½´¸Ó Àû¿ë
8.4 localStorage
8.5 useEffect ÈÅ
8.6 Å×½ºÆ®
1) ToDoList ÄÁÅؽºÆ®
2) InputContainer ÄÄÆ÷³ÍÆ®
3) ToDoList ÄÄÆ÷³ÍÆ®
4) App ÄÄÆ÷³ÍÆ®
8.6 ¿ä¾à
9 react-router
9.1 react-router
9.2 ÇÁ·ÎÁ§Æ® Áغñ
9.3 °³¹ß
1) react-router
2) List ÆäÀÌÁö ÄÄÆ÷³ÍÆ®
3) Add ÆäÀÌÁö ÄÄÆ÷³ÍÆ®
4) InputContainer ÄÄÆ÷³ÍÆ®
5) ToDoItem ÄÄÆ÷³ÍÆ®
6) ToDoList ÄÄÆ÷³ÍÆ®
7) Detail ÆäÀÌÁö ÄÄÆ÷³ÍÆ®
8) PageHeader ÄÄÆ÷³ÍÆ®
9) NotFound ÆäÀÌÁö ÄÄÆ÷³ÍÆ®
9.4 Å×½ºÆ®
1) InputContainer ÄÄÆ÷³ÍÆ®
2) PageHeader ÄÄÆ÷³ÍÆ®
3) ToDoItem ÄÄÆ÷³ÍÆ®
4) ToDoList ÄÄÆ÷³ÍÆ®
5) Add ÆäÀÌÁö ÄÄÆ÷³ÍÆ®
6) Detail ÆäÀÌÁö ÄÄÆ÷³ÍÆ®
7) List ÆäÀÌÁö ÄÄÆ÷³ÍÆ®
8) NotFound ÆäÀÌÁö ÄÄÆ÷³ÍÆ®
9) App ÄÄÆ÷³ÍÆ®
9.5 ¿ä¾à
10 TDD ¸Àº¸±â
10.1 Å×½ºÆ® ÁÖµµ °³¹ßÀ̶õ
10.2 ÇÁ·ÎÁ§Æ® Áغñ
10.3 °³¹ß
1) PageHeader ÄÄÆ÷³ÍÆ®
2) Button ÄÄÆ÷³ÍÆ®
3) List ÆäÀÌÁö ÄÄÆ÷³ÍÆ®
4) Add ÆäÀÌÁö ÄÄÆ÷³ÍÆ®
5) Detail ÆäÀÌÁö ÄÄÆ÷³ÍÆ®
6) Not Found ÆäÀÌÁö ÄÄÆ÷³ÍÆ®
7) App ÄÄÆ÷³ÍÆ®
10.4 ¿ä¾à
ºÎ·Ï
¹èÆ÷ |
|
|
|
ÀúÀÚ
|
|
±èÁ¤Çå
Çѱ¹ÀÇ Áß¼Ò±â¾÷¿¡¼ MFC¸¦ »ç¿ëÇÑ À©µµ¿ì ÇÁ·Î±×·¥ °³¹ßÀ» ½ÃÀÛÀ¸·Î ¾Èµå·ÎÀ̵å, iOS, À¥ °³¹ßÀÚ·Î È°µ¿À» ÇÏ¿´´Ù. ±× ÈÄ, À¥ ÇÁ·Î±×·¡¸Ó·Î¼ È£ÁÖ¿¡¼ È°µ¿ÇÏ¿´À¸¸ç ÇöÀç´Â ÀϺ» ±â¾÷¿¡¼ Ç®½ºÅà ¿£Áö´Ï¾î·Î¼ ¸®¾×Æ®, ¸®¾×Æ® ³×ÀÌƼºê¸¦ »ç¿ëÇÑ ¼ºñ½º¸¦ °³¹ß ÁßÀÌ´Ù. ¾÷¹« ÀÌ¿Ü¿¡µµ ¸®¾×Æ®¿Í ¸®¾×Æ® ³×ÀÌƼºê¸¦ »ç¿ëÇÑ ¾ÛÀ» °³¹ß ÁßÀÌ¸ç ¾Û °³¹ß Áß¿¡ °Þ¾ú´ø ÀÏÀ» ºí·Î±×·Î °ÔÀçÇÏ°í ÀÖ´Ù. 2019³â¿¡´Â ¸¹Àº »ç¶÷ÀÌ ¸®¾×Æ® ³×ÀÌƼºê¸¦ »ç¿ëÇÏ¿© Á» ´õ ½±°Ô iOS¿Í ¾Èµå·ÎÀÌµå ¾ÛÀ» °³¹ßÇÒ ¼ö ÀÖµµ·Ï, <½º¹«µð ÇÑ ÀÜ ¸¶½Ã¸ç ³¡³»´Â React Native>¸¦ Ãâ°£ÇÏ¿´´Ù.
|
|
|
±èÁ¤Çå
|
|
|
±èÁ¤Çå
Çѱ¹ÀÇ Áß¼Ò±â¾÷¿¡¼ MFC¸¦ »ç¿ëÇÑ À©µµ¿ì ÇÁ·Î±×·¥ °³¹ßÀ» ½ÃÀÛÀ¸·Î ¾Èµå·ÎÀ̵å, iOS, À¥ °³¹ßÀÚ·Î È°µ¿À» ÇÏ¿´´Ù. ±× ÈÄ, À¥ ÇÁ·Î±×·¡¸Ó·Î¼ È£ÁÖ¿¡¼ È°µ¿ÇÏ¿´À¸¸ç ÇöÀç´Â ÀϺ» ±â¾÷¿¡¼ Ç®½ºÅà ¿£Áö´Ï¾î·Î¼ ¸®¾×Æ®, ¸®¾×Æ® ³×ÀÌƼºê¸¦ »ç¿ëÇÑ ¼ºñ½º¸¦ °³¹ß ÁßÀÌ´Ù. ¾÷¹« ÀÌ¿Ü¿¡µµ ¸®¾×Æ®¿Í ¸®¾×Æ® ³×ÀÌƼºê¸¦ »ç¿ëÇÑ ¾ÛÀ» °³¹ß ÁßÀÌ¸ç ¾Û °³¹ß Áß¿¡ °Þ¾ú´ø ÀÏÀ» ºí·Î±×·Î °ÔÀçÇÏ°í ÀÖ´Ù. 2019³â¿¡´Â ¸¹Àº »ç¶÷ÀÌ ¸®¾×Æ® ³×ÀÌƼºê¸¦ »ç¿ëÇÏ¿© Á» ´õ ½±°Ô iOS¿Í ¾Èµå·ÎÀÌµå ¾ÛÀ» °³¹ßÇÒ ¼ö ÀÖµµ·Ï, ¡´½º¹«µð ÇÑ ÀÜ ¸¶½Ã¸ç ³¡³»´Â React Native¡µ¸¦ Ãâ°£ÇÏ¿´´Ù.
¤ý ºí·Î±×
https://dev-yakuza.posstree.com/ko/
¤ý ÀúÀÚ ¾Û ¸®½ºÆ®
https://dev-yakuza.posstree.com/app/list/ko/
¤ý ½º¹«µð ÇÑ ÀÜ ¸¶½Ã¸ç ³¡³»´Â React Native
https://github.com/bjpublic/Reactnative
|
½º¹«µð ÇÑ ÀÜ ¸¶½Ã¸ç ³¡³»´Â React Native | ±èÁ¤Çå | ºñÁ¦ÀÌÆÛºí¸¯
ÇöÀå¿¡¼ ¹Ù·Î ½á¸Ô´Â ¸®¾×Æ® with ŸÀÔ½ºÅ©¸³Æ® | ±èÁ¤Çå | ½ÉÅë
|
|
|
|
|
|
|
Ãâ°í¾È³» |
|
|
Ãâ°í¶õ ÀÎÅÍÆÄÅ© ¹°·ùâ°í¿¡¼ µµ¼°¡ Æ÷ÀåµÇ¾î ³ª°¡´Â ½ÃÁ¡À» ¸»Çϸç, ½ÇÁ¦ °í°´´Ô²²¼ ¼ö·ÉÇϽô ½Ã°£Àº »óÇ°Áغñ¿Ï·áÇØ Ãâ°íÇÑ ³¯Â¥ + Åùè»ç ¹è¼ÛÀÏÀÔ´Ï´Ù. |
|
ÀÎÅÍÆÄÅ© µµ¼´Â ¸ðµç »óÇ°ÀÇ Àç°í°¡ ÃæÁ·ÇÒ ½Ã¿¡ ÀÏ°ý Ãâ°í¸¦ ÇÕ´Ï´Ù. |
|
ÀϺΠÀç°í¿¡ ´ëÇÑ Ãâ°í°¡ ÇÊ¿äÇÒ ½Ã¿¡´Â ´ã´çÀÚ¿¡°Ô Á÷Á¢ ¿¬¶ôÇϽðųª, °í°´¼¾ÅÍ(°í°´¼¾ÅÍ(1577-2555)·Î ¿¬¶ôÁֽñ⠹ٶø´Ï´Ù. |
|
¹è¼Ûºñ ¾È³» |
|
|
ÀÎÅÍÆÄÅ© µµ¼ ´ë·®±¸¸Å´Â ¹è¼Û·á°¡ ¹«·áÀÔ´Ï´Ù. |
|
´Ü, 1°³ÀÇ »óÇ°À» ´Ù¼öÀÇ ¹è¼ÛÁö·Î ÀÏ°ý ¹ß¼Û½Ã¿¡´Â 1°³ÀÇ ¹è¼ÛÁö´ç 2,000¿øÀÇ ¹è¼Ûºñ°¡ ºÎ°úµË´Ï´Ù. |
¾Ë¾ÆµÎ¼¼¿ä! |
|
|
°í°´´Ô²²¼ ÁÖ¹®ÇϽŠµµ¼¶óµµ µµ¸Å»ó ¹× ÃâÆÇ»ç »çÁ¤¿¡ µû¶ó Ç°Àý/ÀýÆÇ µîÀÇ »çÀ¯·Î Ãë¼ÒµÉ ¼ö ÀÖ½À´Ï´Ù. |
|
Åùè»ç ¹è¼ÛÀÏÀÎ ¼¿ï ¹× ¼öµµ±ÇÀº 1~2ÀÏ, Áö¹æÀº 2~3ÀÏ, µµ¼, »ê°£, ±ººÎ´ë´Â 3ÀÏ ÀÌ»óÀÇ ½Ã°£ÀÌ ¼Ò¿äµË´Ï´Ù.
(´Ü, Åä/ÀÏ¿äÀÏ Á¦¿Ü) |
|
|
|
|
ÀÎÅÍÆÄÅ©µµ¼´Â °í°´´ÔÀÇ ´Ü¼ø º¯½É¿¡ ÀÇÇÑ ±³È¯°ú ¹ÝÇ°¿¡ µå´Â ºñ¿ëÀº °í°´´ÔÀÌ ÁöºÒÄÉ µË´Ï´Ù.
´Ü, »óÇ°À̳ª ¼ºñ½º ÀÚüÀÇ ÇÏÀÚ·Î ÀÎÇÑ ±³È¯ ¹× ¹ÝÇ°Àº ¹«·á·Î ¹ÝÇ° µË´Ï´Ù.
±³È¯/¹ÝÇ°/º¸ÁõÁ¶°Ç ¹× Ç°Áúº¸Áõ ±âÁØÀº ¼ÒºñÀڱ⺻¹ý¿¡ µû¸¥ ¼ÒºñÀÚ ºÐÀï ÇØ°á ±âÁØ¿¡ µû¶ó ÇÇÇظ¦ º¸»ó ¹ÞÀ» ¼ö ÀÖ½À´Ï´Ù.
Á¤È®ÇÑ È¯ºÒ ¹æ¹ý ¹× ȯºÒÀÌ Áö¿¬µÉ °æ¿ì 1:1¹®ÀÇ °Ô½ÃÆÇ ¶Ç´Â °í°´¼¾ÅÍ(1577-2555)·Î ¿¬¶ô Áֽñ⠹ٶø´Ï´Ù.
¼ÒºñÀÚ ÇÇÇغ¸»óÀÇ ºÐÀïó¸® µî¿¡ °üÇÑ »çÇ×Àº ¼ÒºñÀÚºÐÀïÇØ°á±âÁØ(°øÁ¤°Å·¡À§¿øȸ °í½Ã)¿¡ µû¶ó ºñÇØ º¸»ó ¹ÞÀ» ¼ö ÀÖ½À´Ï´Ù.
|
±³È¯ ¹× ¹ÝÇ°ÀÌ °¡´ÉÇÑ °æ¿ì |
|
|
»óÇ°À» °ø±Þ ¹ÞÀ¸½Å ³¯·ÎºÎÅÍ 7ÀÏÀ̳» °¡´ÉÇÕ´Ï´Ù. |
|
°ø±Þ¹ÞÀ¸½Å »óÇ°ÀÇ ³»¿ëÀÌ Ç¥½Ã, ±¤°í ³»¿ë°ú ´Ù¸£°Å³ª ´Ù¸£°Ô ÀÌÇàµÈ °æ¿ì¿¡´Â °ø±Þ¹ÞÀº ³¯·ÎºÎÅÍ 3°³¿ùÀ̳», ±×»ç½ÇÀ» ¾Ë°Ô µÈ ³¯ ¶Ç´Â ¾Ë ¼ö ÀÖ¾ú´ø ³¯·ÎºÎÅÍ 30ÀÏÀ̳» °¡´ÉÇÕ´Ï´Ù. |
|
»óÇ°¿¡ ¾Æ¹«·± ÇÏÀÚ°¡ ¾ø´Â °æ¿ì ¼ÒºñÀÚÀÇ °í°´º¯½É¿¡ ÀÇÇÑ ±³È¯Àº »óÇ°ÀÇ Æ÷Àå»óÅ µîÀÌ ÀüÇô ¼Õ»óµÇÁö ¾ÊÀº °æ¿ì¿¡ ÇÑÇÏ¿© °¡´ÉÇÕ´Ï´Ù.
|
|
|
|
±³È¯ ¹× ¹ÝÇ°ÀÌ ºÒ°¡´ÉÇÑ °æ¿ì |
|
|
|
°í°´´ÔÀÇ Ã¥ÀÓ ÀÖ´Â »çÀ¯·Î »óÇ° µîÀÌ ¸ê½Ç ¶Ç´Â ÈÑ¼ÕµÈ °æ¿ì´Â ºÒ°¡´ÉÇÕ´Ï´Ù. (´Ü, »óÇ°ÀÇ ³»¿ëÀ» È®ÀÎÇϱâ À§ÇÏ¿© Æ÷Àå µîÀ» ÈѼÕÇÑ °æ¿ì´Â Á¦¿Ü) |
|
½Ã°£ÀÌ Áö³²¿¡ µû¶ó ÀçÆǸŰ¡ °ï¶õÇÒ Á¤µµ·Î ¹°Ç°ÀÇ °¡Ä¡°¡ ¶³¾îÁø °æ¿ì´Â ºÒ°¡´ÉÇÕ´Ï´Ù. |
|
Æ÷Àå °³ºÀµÇ¾î »óÇ° °¡Ä¡°¡ ÈÑ¼ÕµÈ °æ¿ì´Â ºÒ°¡´ÉÇÕ´Ï´Ù. |
|
|
´Ù¹è¼ÛÁöÀÇ °æ¿ì ¹ÝÇ° ȯºÒ |
|
|
|
´Ù¹è¼ÛÁöÀÇ °æ¿ì ´Ù¸¥ Áö¿ªÀÇ ¹ÝÇ°À» µ¿½Ã¿¡ ÁøÇàÇÒ ¼ö ¾ø½À´Ï´Ù. |
|
1°³ Áö¿ªÀÇ ¹ÝÇ°ÀÌ ¿Ï·áµÈ ÈÄ ´Ù¸¥ Áö¿ª ¹ÝÇ°À» ÁøÇàÇÒ ¼ö ÀÖÀ¸¹Ç·Î, ÀÌÁ¡ ¾çÇØÇØ Áֽñ⠹ٶø´Ï´Ù. |
|
|
|
|
|
|