Kiến thức để ứng tuyển vị trí intern Frontend

#1

Chào các a/c, em hiện là sinh viên sắp bước vào năm 2. Hướng đi chính của em là web. Em muốn xin intern nhưng hơi tự ti.
Về tư duy thuật toán thì em dùng đc các cấu trúc dữ liệu cơ bản stack,queue,tree,set, map, graph. Nhưng em nghĩ FE thì chắc không đụng gì đến các bài thuật toán phức tạp. Cày trên hackerank đc 1 thời gian. Em hiểu OOP và cũng hay dùng.
Về Front end thì em đã có kiến thức cơ bản về FE như sau:
CSS: flexbox, grid, responsive,…SCSS
Javacript: DOM, …
ReactJS: lifecycle, react hooks, state manage bằng redux . Co thể tự viết đc 1 trang cơ bản. Nhưng chưa dùng middleware.
Demo: http://fashionshop49.herokuapp.com/
Trang này em đang làm dở bằng reactjs
Liệu em đã đủ kiến thức để xin intern học hỏi thêm được không ạ? Nếu chưa các a/c có thể cho em xin keyword về kiến thức em còn thiếu đó với ạ.

1 Like
#2

Tham khảo link này: https://roadmap.sh/frontend

2 Likes
#3

Dạ em học bám theo đây đang ở Modern CSS rồi ạ

#4

Dại nhất là xin vào đâu đó làm để học hỏi thêm mà nói ra miệng, không công ty nào muốn trở thành nơi để học viên học việc rồi biến đâu. Cứ ứng tuyển vào làm nhân viên, còn việc học hỏi thêm là chuyện đương nhiên. Tự tin đi làm, không có thực tập intern làm gì cho mệt.

7 Likes
#5

Nói thế nào nhỉ, nhìn sơ qua thì có vẻ ổn đấy, trang load không quá chậm, thử resize hay chuyển về di động thấy ok.
Nhưng nhìn vào trong thì thấy nó sao sao ấy

  1. Bạn không có sự thống nhất trong cách viết. Ví dụ viết <MyRoute /> nhưng lại <Header></Header>
  2. Dump component, nó không xử lý state, không cần viết nó thành Class (Footer, SubMenuHuge, Toggle, SubMenuHuge…)
  3. Sử dụng key là index của map là tối kị trong react, bạn nên đọc thêm về key, đây là 1 ví dụ: https://egghead.io/lessons/react-use-the-key-prop-when-rendering-a-list-with-react
  4. Side Cart bị dở là click delete product không có confirm có muốn xóa không mà ấn là bay luôn
  5. Swatch của bạn update phải nói là rất chậm, nhưng không hề có loading cho người dùng biết, trong khi mấy cái component không làm gì thì bạn lại cho vào HOC (HOC làm duy nhất nhiệm vụ add loading vào)
    Chỗ này cũng khó trách bạn, bạn dùng image, click nó mới load image từ server về, nên có sự trễ là dễ hiểu. Nhưng không biết là do máy mình hay thế nào mà nó phải mất cỡ 10s mới load đc cái ảnh, click xong k thấy update gì tưởng lỗi. Thường những trường hợp này người ta sẽ cache lại image để không phải load đi load lại nữa.

Đấy mới nêu tạm 5 cái thôi, toàn cơ bản cả.

Nói thêm mấy cái ngoài thì:

  1. http://fashionshop49.herokuapp.com/product/shop_mens/WindAnorak-Sport-Men’s/2020 Trang này loading cứ quay mãi. Vì sao có trang này á? vì mình thấy url thay đổi kiểu /1, /2, /3, thử thay đổi /2020 xem xử lý bug sao

  2. Có thể set qty âm -> price âm

  3. Ấn vào add to cart -> side cart sẽ mở ra hiển thị, tại đây ấn vào Buy không thấy có gì xảy ra, thay đổi qty rồi ấn enter cũng k thấy update gì cả (có thể hiểu là chưa làm)
    Cái mình muốn nói ở chỗ này là người ta muốn xem mấy thứ như click buy, hay đổi qty thì minicart update bạn lại không làm, bạn lại làm cái có sẵn của thẻ input. Khi bạn để <input type="number" /> tự động khi ấn arrow key nó sẽ update số (changeQuantityByKey)

  4. Ấn vào add to cart sẽ cộng vào lượng qty, nhưng mà mini cart lại không update chút nào. Refresh, đổi trang đều không update.
    Vì sao cái này lại quan trọng? Vì đây là chỗ thể hiện khả năng sử dụng redux. Redux là thứ giúp giữ state cho toàn trang

  5. Trong React hiếm khi mình thấy thao tác với Dom trực tiếp như bạn đang làm (trừ những trường hợp với lib bên khác - điều mà trong project này bạn không dùng) mình không đọc kỹ code bạn lắm nên không chắc nhận xét có chuẩn không, nhưng cái mình tự tin nhận xét thì ở Component Cart.js, bạn sử dụng state gán class thì sẽ chuẩn hơn là thao tác DOM.

  6. Nhìn lại thì bạn ghi có cả kiến thức hook, nhưng cả bài viết toàn class. Nhưng cũng may là bạn chỉ viết class, chứ lại nửa class nửa hook chắc chết mất. Cần có sự thống nhất trong cách viết như mình đã nêu ở đầu.
    Nhưng nếu giả sử mình là người phỏng vấn thì mình sẽ lại phải lộn lại hỏi bạn xem là kiến thức hook bạn viết ở chỗ nào. Hoặc nếu không có thời gian thì mình k hỏi bạn nữa, cho out luôn.

Lại nói thêm về thuật toán, thực ra không liên quan lắm trong ví dụ này, nhưng rèn thuật toán sẽ giúp bạn có tư duy tốt hơn.
Là ở chỗ cái cart_reducer.js ấy, bạn thử hình dung nếu có nhiều sản phẩm trong cart, và nhiều thuộc tính hơn ở mỗi product, thì việc bạn sử dụng find (tức là for… -> nhiều sản phẩm thì for càng chậm) sau đó bạn lại check tiếp từng thuộc tính (nhiều thuộc tính nhìn code càng rối). Nên thay vì làm thế, bạn kiểm tra theo Id, update thẳng giá trị vào Id là ăn luôn, khỏi phải check (dữ liệu dạng hash hay trong js nó ở dạng object)

Lời khuyên của mình là cứ làm project, cứ áp dụng công nghệ, nhưng cần học kĩ cơ bản một chút, ví dụ cách sử dụng key chẳng hạn, hay async/await, Promise khác gì nhau? Vì sao mình nhắc phần này vì trong Search/Search.js của bạn sử dụng await một cách máy móc. Nếu await sau không phụ thuộc vào kết quả await trước, thì nên cho nó chạy song song, bạn đang cho nó chạy độc lập.

9 Likes
#6

Em cảm ơn anh rất nhiều vì đã check kĩ project của em và định hướng học tập. Project này em build lúc mới học reactjs nên code rất ẩu vì muốn launch thành quả nhanh, em xin lỗi nhiều ạ :((

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?