MERN Stack คืออะไร? MERN Stack ก็คือ Tech Stack (Technology Stack) ที่ใช้ในการสร้างเว็บไซต์ หรือ Web Application รูปแบบหนึ่ง โดยคำว่า M E R N เป็นคำย่อของเทคโนโลยี 4 อย่าง เพื่อกระชับให้เดฟ หรือ โปรแกรมเมอร์ไม่ต้องพูดชื่อเต็ม ๆ ของเทคโนโลยีทั้งสี่อย่างนั้น ในบทความนี้ผมจะมาอธิบายว่าเทคโนโลยีทั้งสี่อย่างนี้คืออะไร แต่ละเทคโนโลยีมีหน้าที่อะไร และที่สำคัญ MERN Stack ทำให้เราเขียนเว็บ เขียนแอปได้ง่าย และเร็วอย่างไร MERN Stack ประกอบไปด้วยอะไรบ้าง? M MongoDB - ฐานข้อมูลแบบ NoSQL E Express - เฟรมเวิร์กที่ช่วยในการเขียนเว็บเซิร์ฟเวอร์บน Nodejs R React - Library ฝั่ง Frontend N Nodejs - ตัวรัน Server (Runtime Environment) ภาษาเดียวเอาอยู่ ด้วย JavaScript (จาวาสคริปต์) ก่อนจะพูดถึงเทคโนโลยีทั้งสี่อย่าง ผมขออนุญาตพูดถึงภาษาโปรแกรมที่ใช้ใน MERN Stack ก่อนนะครับ สิ่งที่น่าใจคือองค์ประกอบถึงสามในสี่อย่างของ MERN Stack นั้นใช้ภาษาโปรแกรมภาษาเดียวกันคือ JavaScript (จาวาสคริปต์) องค์ประกอบเหล่านั้นได้แก่ React Nodejs และ Express ใช้ภาษาโปรแกรมภาษาเดียวดีอย่างไร? การใช้ภาษาโปรแกรมภาษาเดียวทำให้เดฟเรียนรู้ได้ไว นอกจากนั้นการทำงานเป็นทีมก็ง่ายขึ้นด้วย คนในทีมจะสามารถอ่านและเข้าใจโค้ดได้ง่าย ไม่ว่าคน ๆ นั้นจะเมนในการเขียน Frontend หรือ Backend ก็จะสามารถเข้าใจโค้ดได้ทั้งหมด และสำหรับเดฟที่เป็น Full Stack เขียนทั้งหน้าบ้านและหลังบ้าน ก็จะไม่เจอปัญหาเรื่องความสับสนของ Syntax เมื่อต้องเขียนสลับฝั่ง MERN Stack จริง ๆ แล้วมีองค์ประกอบแค่สามอย่าง ไม่ใช่สี่!
5+0. 33+0=0. 83 สำหรับประเภทบวก (+) น้ำหนักรวมเท่ากับน้ำหนักของ d1+d2=1+0. 83=1. 83 พบว่าน้ำหนักรวมของประเภทบวกมากกว่าน้ำหนักรวมของประเภทลบ ด้วยวิธีการของ Weighted Nearest Neighbors จึงสรุปได้ว่า จุดสีชมพูเป็นประเภทเดียวกับข้อมูลบวก (+) ■K-NN Algorithm ■1. กำหนดขนาดของ k ■2. คำนวณระยะห่าง (Distance) ของข้อมูลที่ต้องการพิจารณากับกลุ่มข้อมูลตัวอย่าง ■3. จัดเรียงลำดับของระยะห่าง และเลือกพิจารณาชุดข้อมูลที่ใกล้จุดที่ต้องการพิจารณาตามจำนวน k ที่กำหนดไว้ ■4. พิจารณาข้อมูลจำนวน k ชุด และสังเกตว่ากลุ่ม (Class) ไหนที่ใกล้จุดที่พิจารณาเป็นจำนวนมากที่สุด ■5. กำหนด Class ให้กับจุดที่พิจารณา ■k-Nearest Neighbors ทำให้เราทราบประเภทข้อมูลของสิ่งของที่เรายังไม่เคยจำแนกมาก่อนได้ ในการใช้งานจริงยังมีเงื่อนไขบางอย่างที่เราต้องพิจารณาเป็นพิเศษ K-nearest neighbor จัดทำโดย นที ไทยธรรม ภาสกร สุวรรณโท
เพื่อให้ React ทำการสร้าง file ต่างๆของ React ใน Project ของเราครับ จากนั้นพอเสร็จแล้ว ก็ให้เราสั่ง npm start แล้วรอแปปนึง จะมี browser เด้งขึ้นมาหน้าตาก็จะประมาณนี้ เท่านี้ก็ถือว่าเรียบร้อย สร้าง Project สำเร็จแล้วว สำหรับใครที่ติดปัญหา หรือไม่เข้าใจตรงไหนก็สามารถทักเข้ามาถามผมได้ที่ Fanpage: Mos Programmer แล้วเจอกันใหม่ในบทความหน้าครับ
เราสามารถมองและแบ่งส่วนติดต่อผู้ใช้งานออกเป็นส่วนย่อยๆที่ไม่มีความเกี่ยวข้องกันและสามารถนำไปใช้ซ้ำในที่อื่นๆได้ด้วยคอมโพเนนท์ ในหัวข้อนี้เราจะมาเริ่มต้นทำความรู้จักกับแนวคิดของคอมโพเนนท์กัน ในส่วนของ รายละเอียดการใช้งาน API ของคอมโพเนนท์สามารถดูได้ที่นี่ โดยแนวคิดแล้วคอมโพเนนท์นั้นคล้ายกับฟังก์ชัน JavaScript โดยที่มันรับข้อมูล (เรียกว่า "พรอพส์") เข้ามาแล้วตอบกลับด้วย React element ซึ่งเป็นสิ่งที่ถูกนำไปแสดงบนหน้าจอ ฟังก์ชันและคลาสคอมโพเนนท์ วิธีที่ง่ายที่สุดในการสร้างคอมโพเนนท์คือการเขียนขึ้นมาด้วย JavaScript ฟังก์ชัน function Welcome ( props) { return < h1 > Hello, { props. name} h1 >;} ฟังก์ชันนี้ถือเป็น React คอมโพเนนท์เพราะมันรับข้อมูล "พรอพส์" (มาจากภาษาอังกฤษคำว่า Properties) อ็อปเจคและตอบกลับไปด้วย React element เราเรียกคอมโพเนนท์ลักษณะนี้ว่า "ฟังก์ชันคอมโพเนนท์" เพราะรูปแบบการเขียนของมันเป็นแบบฟังก์ชันของ JavaScript เรายังสามารถสร้างคอมโพเนนท์โดยใช้ คลาส ES6 class Welcome extends React. Component { render () { return < h1 > Hello, { this. props.
62 ในขั้นตอนการพัฒนา ใช้คำสั่งน้อยลง ตั้งแต่เวอร์ชั่น 0. 60 react native จะ Link native dependencies ให้อัตโนมัติ และ iOS pods ง่ายขึ้นมาก ด้วยเหตุที่ใช้ภาษา Javascript เป็นหลักในการเขียนโปรแกรม ทำให้นักพัฒนาสายเว็บไซต์ที่มีความรู้ คุ้นเคยกับ Javascript, CSS Syntax อยู่แล้ว ทำความเข้าใจ และใช้เวลาศึกษาเรียนรู้ได้ไม่ยาก ความยากของ React Native นั้นจึงอยู่ที่การทำความเข้าใจ โครงสร้างโปรเจค, เครื่องมือที่ใช้พัฒนา, simulator, cocoapods, command line, debug tool, etc.