Review Front-end developer internship at Dek-D

รีวิวการฝึกงาน Front-end developer ที่ Dek-D

🙏 สวัสดีฮะ ก่อนอื่นเลยเราชื่อ เฟม(Fame) เรียนอยู่ที่ ICT Mahidol University ปี 3 ขึ้นปี 4 มาฝึกงานที่ Dek-D ตั้งแต่วันที่ 1 มิถุนายน 2563 จนถึงวันที่ 7 สิงหาคม 2563 นี่เป็นการฝึกงานครั้งแรกในชีวิตเลยแหละ และนี่ก็เป็น blog ครั้งแรกของเราด้วยนะะ ถ้ามีจุดผิดพลาดหรืออ่านแล้วงงๆ เราก็ขอโทษไว้ก่อนเลยนะครับ เอาละเริ่มกันเลย !!

จุดเริ่มต้น

เข้าเรื่องเลยดีกว่า เราอยู่ปีสามแล้วก็หาที่ฝึกงานอยู่ใช้มั้ยละ แล้วเราก็เจอประกาศของ Dek-D ว่ามีการประกาศรับสมัคร นักศึกษาฝึกงานตำแหน่ง Developer เราก็เลยลองไปอ่านรายละเอียดที่ทางเว็บประกาศไว้ของ Front-end Developer ซึ่งสิ่งที่เขาส่งให้มาเป็นการบ้านในการสมัครก็คือ การทำ Slider โดยใช้ JS, HTML, CSS ในการทำขึ้นมาให้ Function ใช้งานได้ตามรูปเลย

รูปตัวอย่างจากทางเว็บ Dek-D

ซึ่งเราก็ได้ทำแล้วอัพขึ้น GitHub พร้อมเปิด Public แล้วก็ส่งไปตามเมลที่ประกาศในเว็บไซต์ และก็ผ่านตามเงื่อนไขและได้ตกลงว่าจะฝึกเป็นเวลา 2 เดือน แต่ทว่าช่วงที่เราจะต้องเข้าไปฝึกงานนั้นเป็นช่วงที่ COVID-19 มาพอดีเลย การฝึกงานของเราก็เลยจะแบ่งออกเป็นสองช่วงใหญ่ๆ ก็คือ ฝึกที่บ้าน(WFH) กับ เข้าออฟฟิศ ซึ่งฟิลลิ่งในการฝึกงานทั้งสองแบบนั้นแตกต่างกันมาก จนหัวหมุนกันเลยทีเดียว

เราจะขอเล่าเรื่อง scope ของการงานที่เราทำก่อนนะ แล้วค่อยไปถึงเรื่องชีวิตประจำวันของการฝึกงาน

Scope ของการฝึกงาน 🖥

ในส่วนของการฝึกงานตำแหน่งเรานั้นเราได้เข้าไปอยู่ทีม School ของ Dek-D ซึ่งตัว Front-end ของทีมนี้จะใช้ React.js กับ Next.js เป็นหลักเลย ซึ่งแน่นอนว่าสองตัวนี้เป็น Framework ที่ดังอยู่แล้ว Community ก็ค่อนข้างใหญ่เลยละ

React.js + Next.js

อย่างแรกเลยสิ่งที่เราได้มาฝึกกับทีม School ก็คือ พื้นฐานของ React ไม่ว่าจะเป็น React life cycle, การ render, state props ซึ่งเราก็ได้ใช้เวลาประมาณ 1 อาทิตย์ ในการทบทวน React ที่เคยเรียนเมื่อนานมาแล้วกับ Concept ใหม่ๆที่เราพึ่งจะมารู้จักซึ่งก็คือ Hooks นั่นเอง ซึ่งบอกได้เลยว่าส่วนใหญ่ scope งานที่เราเขียนก็จะเป็นพวก Function component ทั้งนั้นเลยเราก็เลยได้ใช้ Hook เยอะมากๆ จนถึงมากที่สุด รวมไปถึงการแต่ง css ด้วย styled component

// Class component
import React, { Component } from 'react';
class MyClassComponent extends Component {  
  render() {    
   return (<div>This is class component.</div>);  
  }
}

export default MyClassComponent;

// Functional component
 import React from 'react';

function MyFunctionalComponent{
  return (<div>This is class component.</div>);
}

export default MyFunctionalComponent;

สำหรับส่วนตัวเรา เราชอบที่ React มี Hooks มากเพราะมันช่วยย่อการทำงานใน Process เดิมๆจากที่เราเรียนเมื่อก่อนไปเยอะมากเลย แต่ก็ต้องเจอกับปัญหาใหม่ๆให้มาท้าทายแก้ไขงานกันไป

Hooks

สำหรับ Hooks เราก็ได้ใช้พวก useState(), useRef(), useReducer(), useEffect(), useCallback(), useMemo()เป็นหลักเลยแหละ โดยเฉพาะ useState() ที่เราว่ามีประโยชน์กว่าการเขียน state ของ React class component แบบเก่าที่ค่อนข้างเหนื่อยเวลาเขียนเลยละ ส่วน useEffect() นี่เรียกได้ว่ากินเป็นอาหารเช้ากันเลยทีเดียวเพราะ เราใช้มันแทบจะทุกที่ ที่ต้องมีการ listen รอฟังค่าของ state หรือ props เวลาเปลี่ยน แล้วมันก็จะไป render อีกทำให้เราต้องกลับมานั่งออกแบบใหม่หลายรอบเลยแหละะ

const [state,setState] = useState() // Mostly use

useEffect(()=>{
...
},[dependencies]) // Useful and chaos in the same time

นอกจากการใช้ Hooks ปกติแล้ว เรายังได้ฝึกเขียน Custom Hooks ซึ่งเป็นอะไรที่เปิดโลกมาก เพราะมันสามารถซ่อนความยุ่งเหยิงของ Process ที่ถูกใช้บ่อยๆลงไว้ Hooks ตัวเดียว แล้วยังสามารถเอาไป ใช้ได้อีกในภายภาคหน้า ซึ่งเหมาะมากสำหรับ Project ที่เป็นการเขียนระยะยาว การเขียนทุกอย่างนั้นต้อง Balance ความละเอียดและการใช้ต่อในภายภาคหน้าให้อยู่ในระดับที่เหมาะสมกับโปรเจคนั้นๆเลย แหละ

Styled Component

อีก Highlight ของความรู้ใหม่เราเลยก็คือ styled component ที่ทำให้เราแต่ง css ให้กับ Custom Component ได้เลยใน React ซึ่งง่ายกว่าวิธีการยัด Class เข้าไปแต่งอย่างมาก ทำให้โค้ดอ่านง่ายขึ้น และพลิกแพลงการเขียน css ได้มากขึ้นอีกด้วย

// Easy to manage than inject style object
const CustomDiv = styled.div`
... css here ...
`

// Inject style object
const styles = {
  customDiv : {
    ... css with object key-value pairs
  }
}

GraphQL

นอกจาก React Hooks แล้วเราก็ยังได้ศึกษาเรื่องการเขียน Form เพื่อ query data กับ mutation ด้วย GraphQL แหละ เราก็จะได้งานในการสร้าง Form เพื่อ mutate ข้อมูลผ่าน API ที่พี่ๆมีให้ scope งานก็คือรวมไปตั้งแต่การทำ UI หน้า Form นั้นๆแล้วก็ ทำ Form Control ด้วย state ไปจนถึงการ validate input ที่ใช้ regex เรียกได้ว่าดึงความรู้หลายๆอย่างมารวมกันเพื่อให้ได้ Form ที่รัดกุม

Internship Daily Life 🕗

สำหรับชีวิตการฝึกงาน แบ่งออกเป็น 2 ช่วงหลักๆเลย ก็คือ ช่วงที่ฝึกงานที่บ้าน(WFH) กับ ช่วงที่เข้าออฟฟิศ ซึ่งสองช่วงนี้มีทั้งข้อดีและข้อเสียที่ต่างกัน เพราะสภาพแวดล้อม กับขั้นตอนการทำงานต่างๆนั้นก็ต่างกัน มากๆเลยแหละ ไม่ว่าจะเป็นทั้งการแพลนงาน, การรีวิว code และอีกมากมาย ดังนั้นเราจะขอแบ่งเป็น 2 พาร์ทย่อยในการพูดถึงชีวิตประจำวันละกัน

ช่วงการฝึกงาน

ฝึกงานที่บ้าน (WFH) 🏠

สำหรับช่วงแรกของการฝึกงานนั้น เรายังฝึกงานอยู่ที่บ้านเพราะเนื่องจาก COVID-19 ยังระบาดอยู่ทางบริษัท เลยมีนโยบายการ WFH ทั้ง พนักงานและเด็กฝึกงานอย่างเรา ซึ่งวันแรกเราก็ได้ติดต่อกับพี่ๆในทีมครั้งแรกเลยผ่านไลน์ โดยมีพี่ติส กับ พี่โต้ (พี่ๆในทีม School) ช่วยติดตั้งโปรแกรมต่างๆในการติดต่อกับคนในทีม ไม่ว่าจะเป็น Slack, Google Meet, Email และอีกมากมาย และก็ยังมี พี่เมฆกับพี่โต้ ที่ช่วยในการติดตั้ง IDE, Docker, VPN ในการเชื่อมงานใน local กับตัว repo หลักของบริษัท ซึ่งที่ IDE ที่เราใช้หลักๆเลยก็จะเป็น WebStorm เอาไว้ dev ระหว่างฝึกงาน

ในช่วงที่ฝึกงานที่บ้านนั้น ก็จะมีชีวิตประมาณเหมือนตื่นมาเรียน online ของที่มหาลัย ก็คือตื่นมา กินข้าว อาบน้ำละก็เตรียมตัว plan ในช่วงเช้า ซึ่งการ plan นั้นจะทำทุกๆอาทิตย์ ในวันแรกของแต่ละอาทิตย์ โดยเราจะทำการ plan กันใน trello เพื่อให้ทุกๆคนเห็นว่าเรากำลังจะทำอะไร คิดว่าใช้เวลาเท่าไร แล้วตอนสุดท้ายแต่ละงานใช้เวลาไปเท่าไรอะไรอย่างงี้ แล้วก็จะนำ plan ที่ตั้งไว้ไป plan พี่โน๊ตอีกที ส่วนวันอื่นๆก็จะเป็นการ syncใน Google Meet ทั้งตอนเช้าและตอนเย็น เพื่อติดตามว่าเราทำงานไปถึงจุดไหนแล้วติดขัดอะไรบ้าง ในระหว่างวันเราก็ทำงานที่ได้ plan ไว้ แต่ก็ต้องเผื่อเวลาไว้พักบ้างสายตาบ้างเพราะ เราเคยทำจนเราไมเกรนขึ้นไปเลย🤮 เพราะจ้องจอนานเกินไป

ฝึกงานที่ออฟฟิศ 🏢

หลังจากที่สถาการณ์ COVID-19 เริ่มซาลง เราก็ได้มาเข้าออฟฟิศกันซักที โดยที่ทางบริษัทมีนโยบายเกี่ยวกับ WFH ให้ 2 วันนั่นก็คือ วันพุธ และ วันพฤหัสบดี ให้สามารถทำงานที่บ้านได้ส่วนวันที่เหลืออีก 3 วันก็เข้ามาทำงานที่ออฟฟิศตามปกติ ซึ่งบอกเลยว่าวันแรกที่เรามาที่ออฟฟิศก็ งง มากๆ เรียกได้ว่าต้องปรับความเข้าใจใหม่ของคำว่าออฟฟิศ กันเลยทีเดียว เราเคยเข้าใจว่ามันจะมีความตึงเครียดในระดับนึง แต่บอกเลยว่าที่ Dek-D นั้น สบายๆชิวๆมากๆ การแต่งตัวก็แต่งตัวให้เรียบร้อยก็พอ ไม่ต้องมีเครื่องแบบยูนิฟอร์มอะไรเป็นหลัก แต่ที่นี้ Dek-D นี่แอร์ค่อนข้างหนาว เราก็เลยเลือกที่จะเอาแขนยาวมาใส่บ่อยๆ มุดตัวเป็นหนอนกันเลยทีเดียว 🐛

สำหรับการทำงานนั้นก็ไม่ได้ต่างอะไรจากฝึกงานที่บ้าน มากนัก อาจจะมีการ sync น้อยลงเพราะตอนนี้ทุกคนอยู่พร้อมหน้าพร้อมตากันที่ออฟฟิศแล้ว ที่จะมีแตกต่างไปก็จะเป็นเรื่องของการใช้ชีวิตส่วนอื่นเช่น การกินข้าว การพักผ่อน เข้าห้องน้ำ บลาๆ หลายๆอย่างที่เมื่อก่อน อยู่บ้านเราจะคุ้นเคยกว่า พอมาที่ออฟฟิศเรียกได้ว่าต้องปรับตัวกันพักนึงเลยแหละ กว่าจะรู้ว่าตรงไหนไปตรงไหน แล้วเราก็ไม่ค่อยได้มาแถวสาธรด้วยทำให้งง เข้าไปอีก แต่บอกเลยว่าที่นี่ทุกคนใจดีและ ชิวมากๆทำให้เราผ่อนความตึงออกไปได้เยอะมากๆเลย แหละ 🎉

ภาพเวลามองออกไปจากนอกตึก ส่วนตัวชอบมุมนี้

สรุปเรื่องราว ✍️

เราคิดว่าเราคิดถูกมากเลยที่ได้มาฝึก Front-end developer ที่ Dek-D ทีม School เราได้อะไรหลายๆอย่างมากๆ เป็นประสบการณ์การทำงานที่เป็น งานจริงๆ ขึ้นเว็บจริงๆ Concept ต่างๆที่เราเคยเรียนที่ มหาลัย มันมีทั้งหลายจุดที่ใช้ได้จริงและอีกหลายๆจุดที่ก็ไม่ได้ practical ขนาดนั้น เรียกได้ว่ามันเปลี่ยนมุมมองของเราหลายๆอย่าง ไม่ใช่แค่ได้ความรู้แต่ทั้งเป็นการเปลี่ยนมุมมองในการใช้ชีวิตของนักศึกษา ให้มองถึงอนาคตข้างหน้าตอนทำงานได้อีกด้วย

และที่สำคัญที่สุดเลยคือ พี่ๆที่คอย support เราในการฝึกงานครั้งนี้ ไม่ว่าจะเป็น พี่เมฆ พี่โต้ พี่ติส และพี่ๆคนอื่นๆอีกในทีม โดยเฉพาะพี่เมฆที่เป็นพี่คนที่คอยสอนเราในทุกเรื่องของการฝึกงาน เรียกได้ว่าได้สกิลมาจากพี่เมฆเยอะมากกกกไม่ว่าจะทั้งการเขียน code การวางขั้นตอน และอีกมากมายมากๆๆๆๆ ยกให้เลย MVP

สุดท้ายนี้ก็ขอขอบคุณพี่ๆทุกคน ที่ Dek-D และพี่ๆในทีม School ที่คอย support ผมด้วยนะครับ ยังไงก็ใครที่ยังลังเลอยู่ว่าจะฝึกงานดีมั้ยเราบอกได้เลยว่า ไม่ต้องคิด ฝึกไปเลย ไปตายเอาดาบหน้าเอา แล้วก็สู้ๆครับ!! ✊