Search

AI3 - 18일차 μ˜€μ „

λΉ λ₯Έ μš”μ•½ νŒ€μ€ FX 개발 μ•ˆκ²½μ„ μ„€μ •ν•˜κ³  Java κ°œλ…μ„ μ΄ν•΄ν•˜λŠ” 데 쀑점을 두고 이전 ν™œλ™μ˜ 계속에 λŒ€ν•΄ λ…Όμ˜ν–ˆμŠ΅λ‹ˆλ‹€. λ˜ν•œ Javaμ—μ„œ κ·Έλž˜ν”½ μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€λ₯Ό κ°œλ°œν•˜λŠ” 기술인 Java FX와 μΈν„°νŽ˜μ΄μŠ€ ꡬ쑰화에 λŒ€ν•œ FXML μ‚¬μš©μ„ νƒκ΅¬ν–ˆμŠ΅λ‹ˆλ‹€. λŒ€ν™”λŠ” λ˜ν•œ Java FXλ₯Ό μ‚¬μš©ν•˜μ—¬ 화면을 λ§Œλ“€κ³  μ „ν™˜ν•˜λŠ” κ³Όμ •, Java FXμ—μ„œ XML μ‚¬μš© 및 데이터 전솑, 그리고 JavaFX와 FXML을 μ‚¬μš©ν•˜μ—¬ 둜그인 화면을 λ§Œλ“œλŠ” 방법에 λŒ€ν•΄ λ‹€λ£¨μ—ˆμŠ΅λ‹ˆλ‹€. λ‹€μŒ 단계 β€’ νŒ€: Java FX μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ— μ μ ˆν•œ MVC νŒ¨ν„΄ ꡬ쑰λ₯Ό μ„€μ •ν•©λ‹ˆλ‹€. β€’ νŒ€: Scene Builder와 ν•„μš”ν•œ 라이브러리λ₯Ό μ‚¬μš©ν•˜μ—¬ Java FX 개발 ν™˜κ²½μ„ μ„€μ •ν•©λ‹ˆλ‹€. β€’ νŒ€: Java FX SDK 경둜 및 Scene Builder κ²½λ‘œμ— λŒ€ν•œ Windows ν™˜κ²½ 섀정을 κ΅¬μ„±ν•©λ‹ˆλ‹€. β€’ νŒ€: μ μ ˆν•œ λͺ¨λ“ˆ κ΅¬μ„±μœΌλ‘œ μƒˆλ‘œμš΄ Java FX ν”„λ‘œμ νŠΈ ꡬ쑰λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. β€’ νŒ€: FXML을 μ‚¬μš©ν•˜μ—¬ 둜그인 ν™”λ©΄ UIλ₯Ό VBox λ ˆμ΄μ•„μ›ƒ, 라벨, ν…μŠ€νŠΈ ν•„λ“œ 및 λ²„νŠΌμœΌλ‘œ λ§Œλ“­λ‹ˆλ‹€. β€’ νŒ€: FXML을 μ‚¬μš©ν•˜μ—¬ κΈ°λ³Έ λ¬΄λŒ€ 및 μž₯λ©΄ 관리λ₯Ό κ΅¬ν˜„ν•©λ‹ˆλ‹€. β€’ νŒ€: FXMLμ—μ„œ λ²„νŠΌ 클릭에 λŒ€ν•œ μ μ ˆν•œ 이벀트 처리λ₯Ό κ΅¬μ„±ν•©λ‹ˆλ‹€. β€’ νŒ€: μ—¬λŸ¬ μž₯λ©΄ 간에 ν™”λ©΄ μ „ν™˜ κΈ°λŠ₯을 κ΅¬ν˜„ν•©λ‹ˆλ‹€. β€’ νŒ€: 헀더 및 ν‘Έν„° μ„Ήμ…˜μ— λŒ€ν•œ μž¬μ‚¬μš© κ°€λŠ₯ν•œ FXML ꡬ성 μš”μ†Œλ₯Ό λ§Œλ“­λ‹ˆλ‹€. β€’ νŒ€: Java FX 컨트둀 및 λ ˆμ΄μ•„μ›ƒμ— λŒ€ν•œ μ μ ˆν•œ κ°€μ Έμ˜€κΈ° λ¬Έμž₯을 μ„€μ •ν•©λ‹ˆλ‹€. μš”μ•½ FX 개발 μ•ˆκ²½μ„ μ„€μ •ν•©λ‹ˆλ‹€. νšŒμ˜μ—μ„œ ALOHAλŠ” FX 개발 μ•ˆκ²½μ„ μ„€μ •ν•˜κ³  Java κ°œλ…μ„ μ΄ν•΄ν•˜λŠ” 데 쀑점을 두고 μ „λ‚  ν™œλ™μ˜ 계속에 λŒ€ν•΄ λ…Όμ˜ν–ˆμŠ΅λ‹ˆλ‹€. λ˜ν•œ ν•™μŠ΅μ˜ μ€‘μš”μ„±κ³Ό μ„œλ²„λ₯Ό μ‹€ν–‰ν•˜κ³  μ—°κ²°ν•΄μ•Ό ν•  ν•„μš”μ„±μ— λŒ€ν•΄ λ…Όμ˜ν–ˆμŠ΅λ‹ˆλ‹€. ALOHAλŠ” ν•„μš”ν•œ 경우 μ§ˆλ¬Έμ„ν•˜κ³  λͺ…확성을 ꡬ할 ν•„μš”κ°€ μžˆλ‹€κ³  κ°•μ‘°ν–ˆμŠ΅λ‹ˆλ‹€. νŒ€μ€ λ˜ν•œ Gatter λ©”μ„œλ“œμ˜ μ—­ν• κ³Ό λ©”μ„œλ“œμ—μ„œ λ°˜ν™˜ μœ ν˜•μ„ μ •μ˜ν•΄μ•Ό ν•  ν•„μš”μ„±μ— λŒ€ν•΄ λ…Όμ˜ν–ˆμŠ΅λ‹ˆλ‹€. Java FX μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€ 개발 κ°•μ‚¬λŠ” Javaμ—μ„œ κ·Έλž˜ν”½ μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€λ₯Ό κ°œλ°œν•˜κΈ°μœ„ν•œ 기술 인 Java FXλ₯Ό μ†Œκ°œν•©λ‹ˆλ‹€. 그듀은 μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€λ₯Ό λ§Œλ“€κ³  κ΅¬μ‘°ν™”ν•˜λŠ” 데 μ‚¬μš©λ˜λŠ” 단계, μž₯λ©΄ 및 λ…Έλ“œμ™€ 같은 핡심 κ°œλ…μ„ μ„€λͺ…ν•©λ‹ˆλ‹€. κ°•μ‚¬λŠ” λ˜ν•œ μ‚¬μš©μž μƒν˜Έ μž‘μš©μ„ μœ„ν•œ 컨트둀, ν™”λ©΄ ꡬ성을 μœ„ν•œ λ ˆμ΄μ•„μ›ƒ μš”μ†Œ 및 μ‚¬μš©μž λ™μž‘μ„ μ²˜λ¦¬ν•˜λŠ” μ΄λ²€νŠΈμ— λŒ€ν•΄ μ„€λͺ…ν•©λ‹ˆλ‹€. λ˜ν•œ μŠ€νƒ€μΌλ§μ— CSSλ₯Ό μ‚¬μš©ν•˜κ³  μΈν„°νŽ˜μ΄μŠ€ ꡬ쑰화에 FXML을 μ‚¬μš©ν•˜μ—¬ λ””μžμΈκ³Ό κΈ°λŠ₯성을 λΆ„λ¦¬ν•˜κ³  μ½”λ“œ 쑰직을 κ°œμ„ ν•˜λŠ” 데 도움이 λœλ‹€κ³  μ–ΈκΈ‰ν•©λ‹ˆλ‹€. Java FX ν”„λ‘œμ νŠΈ μ½”λ“œ κ²€ν†  μ—°μ‚¬λŠ” μžμ‹ μ΄ λ§Œλ“  Java FX ν”„λ‘œμ νŠΈμ— λŒ€ν•΄ λ…Όμ˜ν•˜λ©°, νœ΄μ‹ ν›„ μ½”λ“œλ₯Ό μžμ„Ένžˆ κ²€ν† ν•  것이라고 μ–ΈκΈ‰ν•©λ‹ˆλ‹€. 그듀은 "남성 집사" ꡬ성 μš”μ†Œμ™€ 일뢀 μΈν„°νŽ˜μ΄μŠ€ μš”μ†Œ λ“± ν”„λ‘œμ νŠΈμ˜ λ‹€μ–‘ν•œ 츑면을 μ‚΄νŽ΄λ΄…λ‹ˆλ‹€. λ°œν‘œμžλŠ” 각 μ±•ν„°λ§ˆλ‹€ λ³„λ„μ˜ ν”„λ‘œμ νŠΈλ₯Ό λ§Œλ“€ κ³„νšμ΄λ©°, κΈ°μ‘΄ μ½”λ“œλ₯Ό κ°œμ„ ν•˜κΈ° μœ„ν•΄ λͺ‡ 가지 λ³€κ²½ 사항을 μ μš©ν•  것이라고 λ§ν•©λ‹ˆλ‹€. JavaFX 개발 ν™˜κ²½ μ„€μ • κ°•μ‚¬λŠ” μƒˆλ‘œμš΄ JavaFX ν”„λ‘œμ νŠΈλ₯Ό λ§Œλ“€κ³  개발 ν™˜κ²½μ„ μ„€μ •ν•˜λŠ” 과정을 μˆ˜μ—…μ— μ•ˆλ‚΄ν•©λ‹ˆλ‹€. λ˜ν•œ Eclipse ν™˜κ²½μ„€μ •μ—μ„œ JavaFX SDK 및 Scene Builder 경둜λ₯Ό κ΅¬μ„±ν•˜λŠ” 방법을 μ„€λͺ…ν•©λ‹ˆλ‹€. 그런 λ‹€μŒ ν΄λž˜μŠ€λŠ” κΈ°λ³Έ JavaFX μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ„ μœ„ν•œ μ½”λ“œλ₯Ό μž‘μ„±ν•˜κΈ° μ‹œμž‘ν•˜λ©°, 메인 λ©”μ„œλ“œλΆ€ν„° μ‹œμž‘ν•˜μ—¬ Application 클래슀의 μ‹œμž‘ λ©”μ„œλ“œλ₯Ό μš°μ„ μ‹œν•©λ‹ˆλ‹€. κ°•μ‚¬λŠ” μ€€λΉ„ μž‘μ—…κ³Ό μ• ν”Œλ¦¬μΌ€μ΄μ…˜ μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€ μ΄ˆκΈ°ν™”λ₯Ό μœ„ν•œ μ‹œμž‘ λ°©λ²•μ˜ μ€‘μš”μ„±μ„ κ°•μ‘°ν•©λ‹ˆλ‹€. ν”„λ‘œκ·Έλž˜λ° 및 개인 κ²½ν—˜μ— λŒ€ν•΄ λ…Όμ˜ν•©λ‹ˆλ‹€. 토둠은 ν”„λ‘œκ·Έλž˜λ°κ³Ό 개인 κ²½ν—˜κ³Ό κ΄€λ ¨λœ λ‹€μ–‘ν•œ 주제λ₯Ό λ‹€λ£Ήλ‹ˆλ‹€. μ—°μ‚¬λŠ” μ°½ 크기 μ„€μ •, μ•„μ΄μ½˜ μΆ”κ°€ 및 전체 ν™”λ©΄ λͺ¨λ“œ κ΅¬ν˜„μ„ ν¬ν•¨ν•˜μ—¬ κ·Έλž˜ν”½ μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€κ°€μžˆλŠ” ν”„λ‘œκ·Έλž¨μ„ λ§Œλ“œλŠ” 방법에 λŒ€ν•΄ μ΄μ•ΌκΈ°ν•©λ‹ˆλ‹€. 그듀은 λ˜ν•œ λ„€νŠΈμ›Œν‚Ήμ„ μœ„ν•œ 사진 μΉ΄λ“œμ™€ QR μ½”λ“œλ₯Ό μ‚¬μš©ν•˜λŠ” 사업 아이디어에 λŒ€ν•΄ ν† λ‘ ν•©λ‹ˆλ‹€. 그런 λ‹€μŒ λŒ€ν™”λŠ” λˆμ„ λ²„λŠ” μ€‘μš”μ„±κ³Ό κ³΅λΆ€μ˜ μ–΄λ €μ›€μœΌλ‘œ λ„˜μ–΄κ°‘λ‹ˆλ‹€. λ§ˆμ§€λ§‰μœΌλ‘œ μ—°μ‚¬λŠ” λŒ€ν•™ μ‹œμ ˆ, 특히 κ·Ήμž₯ ν΄λŸ½μ— μ°Έμ—¬ν–ˆλ˜ 것을 νšŒμƒν•˜λ©° μ½”λ”©κ³Ό μ—°κ·Ή μ œμž‘ μ‚¬μ΄μ˜ μœ μ‚¬μ μ„ λ– μ˜¬λ¦½λ‹ˆλ‹€. Java FX ν™”λ©΄ μ „ν™˜ ν”„λ‘œμ„ΈμŠ€ νšŒμ˜μ—μ„œ ALOHAλŠ” Java FXλ₯Ό μ‚¬μš©ν•˜μ—¬ 화면을 λ§Œλ“€κ³  μ „ν™˜ν•˜λŠ” 과정에 λŒ€ν•΄ λ…Όμ˜ν–ˆμŠ΅λ‹ˆλ‹€. λ¬΄λŒ€ μ„€μ •, μž₯λ©΄ 생성 및 λ ˆμ΄μ•„μ›ƒ ν• λ‹Ή 방법을 μ„€λͺ…ν–ˆμŠ΅λ‹ˆλ‹€. ALOHAλŠ” λ˜ν•œ λ ˆμ΄μ•„μ›ƒμ— λ²„νŠΌμ„ μΆ”κ°€ν•˜κ³  ν™”λ©΄ κ°„ μ „ν™˜μ„ μœ„ν•œ 클릭 이벀트λ₯Ό λ“±λ‘ν•˜λŠ” 방법을 μ‹œμ—°ν–ˆμŠ΅λ‹ˆλ‹€. νŒ€μ€ μ½”λ“œλ₯Ό ν…ŒμŠ€νŠΈν•˜μ—¬ ν™”λ©΄ λ³€ν™”λ₯Ό κ΄€μ°°ν–ˆμŠ΅λ‹ˆλ‹€. λŒ€ν™”λŠ” ALOHAκ°€ νŒ€μ—κ²Œ μ½”λ“œλ₯Ό 계속 μ—°μŠ΅ν•˜κ³  ν…ŒμŠ€νŠΈν•˜λ„λ‘ κ²©λ €ν•˜λ©΄μ„œ λλ‚¬μŠ΅λ‹ˆλ‹€. Java FX 및 λ°μ΄ν„°μ˜ XML 이 토둠은 XML(Extensible Markup Language)κ³Ό Java FX 및 데이터 μ „μ†‘μ—μ„œμ˜ μ‘μš©μ— 쀑점을 λ‘‘λ‹ˆλ‹€. λ°œν‘œμžλŠ” XML이 Java FX μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€λ₯Ό μ •μ˜ν•˜κ³  ν΄λΌμ΄μ–ΈνŠΈμ™€ μ„œλ²„ 간에 데이터λ₯Ό μ „μ†‘ν•˜λŠ” ν˜•μ‹μœΌλ‘œ μ‚¬μš©λœλ‹€κ³  μ„€λͺ…ν•©λ‹ˆλ‹€. 이듀은 JSON이 데이터 전솑에 더 일반적으둜 μ‚¬μš©λ˜κ³  μžˆμ§€λ§Œ XML은 μ—¬μ „νžˆ ν™œμš©λœλ‹€κ³  μ–ΈκΈ‰ν•©λ‹ˆλ‹€. μ—°μ‚¬λŠ” μ‹€μ‹œκ°„ 날씨 정보에 μ‚¬μš©λ˜λŠ” XML의 예제λ₯Ό 보여주며 데이터 포털을 톡해 날씨 데이터에 μ•‘μ„ΈμŠ€ν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. λ˜ν•œ API 킀와 XML ν˜•μ‹μ„ μ‚¬μš©ν•˜μ—¬ 데이터λ₯Ό μš”μ²­ν•˜λŠ” 방법에 λŒ€ν•΄ κ°„λž΅ν•˜κ²Œ μ„€λͺ…ν•©λ‹ˆλ‹€. FXML: JavaFX μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€ λ§ˆν¬μ—… 이 토둠은 JavaFX μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€λ₯Ό μ •μ˜ν•˜λŠ” 데 μ‚¬μš©λ˜λŠ” λ§ˆν¬μ—… 언어인 FXML에 쀑점을 λ‘‘λ‹ˆλ‹€. FXML을 톡해 κ°œλ°œμžλŠ” UI λ””μžμΈκ³Ό κΈ°λŠ₯성을 뢄리할 수 있으며, UIλŠ” XML ν˜•μ‹μœΌλ‘œ μ •μ˜λ˜κ³  κΈ°λŠ₯은 Java μ½”λ“œλ‘œ κ΅¬ν˜„λ©λ‹ˆλ‹€. λ°œν‘œμžλŠ” λ ˆμ΄μ•„μ›ƒ ꡬ성 μš”μ†Œ(AnchorPane, BorderPane, VBox, HBox)와 UI 컨트둀(TextField, PasswordField, Button)κ³Ό 같은 λ‹€μ–‘ν•œ FXML μš”μ†Œλ₯Ό μ„€λͺ…ν•˜κ³  fx:id 속성 및 이벀트 ν•Έλ“€λŸ¬λ₯Ό μ‚¬μš©ν•˜μ—¬ FXML μš”μ†Œλ₯Ό Java μ½”λ“œμ— μ—°κ²°ν•˜λŠ” 방법에 λŒ€ν•΄ μ„€λͺ…ν•©λ‹ˆλ‹€. λŒ€ν™”λŠ” λ˜ν•œ λͺ¨λ“ˆμ‹ 섀계λ₯Ό λ§Œλ“€κ³  MVC(Model-View-Controller) νŒ¨ν„΄μ„ μ‚¬μš©ν•  수 μžˆλŠ” κΈ°λŠ₯을 ν¬ν•¨ν•˜μ—¬ FXML μ‚¬μš©μ˜ 이점에 λŒ€ν•΄ μ–ΈκΈ‰ν•©λ‹ˆλ‹€. JavaFX 둜그인 ν™”λ©΄ 생성 κ°€μ΄λ“œ λ°œν‘œμžλŠ” JavaFX와 FXML을 μ‚¬μš©ν•˜μ—¬ 둜그인 화면을 λ§Œλ“œλŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. ν”„λ‘œμ νŠΈ μ„€μ •, 메인 클래슀 생성 및 FXML을 μ‚¬μš©ν•˜μ—¬ λ ˆμ΄μ•„μ›ƒμ„ μ •μ˜ν•˜λŠ” 과정을 μ„€λͺ…ν•©λ‹ˆλ‹€. λ°œν‘œμžλŠ” Scene Builderλ₯Ό μ‚¬μš©ν•˜μ—¬ λ ˆμ΄λΈ”, ν…μŠ€νŠΈ ν•„λ“œ 및 λ²„νŠΌ μΆ”κ°€λ₯Ό ν¬ν•¨ν•˜μ—¬ μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€λ₯Ό μ‹œκ°μ μœΌλ‘œ λ””μžμΈν•˜λŠ” 방법을 λ³΄μ—¬μ€λ‹ˆλ‹€. λ˜ν•œ 크기, κΈ€κΌ΄ 및 UI μš”μ†Œμ˜ μ •λ ¬κ³Ό 같은 속성을 μ‘°μ •ν•˜λŠ” 방법에 λŒ€ν•΄ μ„€λͺ…ν•©λ‹ˆλ‹€. λ°œν‘œμžλŠ” κ°€μ Έμ˜€κΈ°μ™€ Scene Builder μ—°κ²°μ—μ„œ λͺ‡ 가지 문제λ₯Ό λ°œμƒμ‹œν‚€μ§€λ§Œ μž‘μ—…μ„ μ™„λ£Œν•˜κΈ°μœ„ν•œ ν•΄κ²° 방법과 λŒ€μ•ˆ 접근법을 μ œκ³΅ν•©λ‹ˆλ‹€.