강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Front-end

Sinabro JavaScript

Xây dựng nền tảng kỹ năng và sự tự tin vững chắc bằng cách phát triển nhiều chủ đề khác nhau từ đầu bằng JavaScript.

(4.9) 29 đánh giá

587 học viên

  • eunjae
자바스크립트
vanillajs
JavaScript
vanilla-js

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • Phát triển các kỹ năng JavaScript cốt lõi mà không cần khuôn khổ

  • Hiểu sâu hơn về hệ sinh thái JavaScript

Nâng cao! Xây dựng các kỹ năng JS cốt lõi của bạn .

💡 “Nó có tác dụng, nhưng tại sao nó lại có tác dụng?”

Chúng tôi luôn sử dụng nhiều thư viện và framework khác nhau để phát triển web, nhưng đôi khi rất khó để hiểu chính xác những gì đang diễn ra. Hệ sinh thái JavaScript rất phức tạp và đan xen với rất nhiều yếu tố khác nhau, nên việc khám phá những bí ẩn có thể rất khó khăn.

Sinabro JavaScript cung cấp bước đệm để thăng cấp từ trình độ cơ bản lên trình độ trung cấp và từ trình độ trung cấp lên trình độ cao cấp .

“Phát triển web quá phức tạp.”

Điều này là do nợ kỹ thuật và vô số yếu tố đan xen đã tích tụ trong quá trình phát triển của hệ sinh thái JavaScript. Mặc dù bạn có thể tự mình tìm hiểu, nhưng việc ngồi xuống và học hỏi từ từ với một người đã có kinh nghiệm cũng là một ý tưởng hay.

“Tôi có thể làm được, nhưng tôi không đủ tự tin.”

Nếu bạn không hiểu các nguyên tắc cơ bản về cách thức hoạt động của các framework và thư viện bạn sử dụng, bạn rất dễ hoảng loạn ngay cả khi gặp phải những lỗi nhỏ. Bài giảng này sẽ hướng dẫn bạn cách các chủ đề quan trọng hoạt động như thế nào bằng cách phát triển mà không cần thư viện .

“Tôi muốn nâng cao kỹ năng phát triển của mình.”

Lặp lại các dự án đồ chơi tương tự có thể giúp bạn nhanh hơn, nhưng để đào sâu hơn đòi hỏi một chiến lược khác. Một khi bạn hiểu sâu sắc các khái niệm cốt lõi, bạn sẽ có được nền tảng kiến thức cơ bản, cho phép bạn dễ dàng nắm bắt bất kỳ khuôn khổ hoặc công nghệ mới nào xuất hiện.

“Những điều mới mẻ đang xuất hiện rất nhanh.”

JavaScript, đặc biệt là front-end, vẫn còn nhiều vấn đề cần giải quyết, và nhiều nỗ lực liên tục được thực hiện. Do đó, vô số thư viện, framework và khái niệm mới đang xuất hiện. Tuy nhiên, hầu hết trong số đó là những nỗ lực nhằm giải quyết các vấn đề hiện có theo những cách mới.

Khi bạn đã thử giải quyết các vấn đề hiện tại mà không có những giải pháp đó, bạn sẽ dễ dàng so sánh và hiểu được cách các giải pháp mới giải quyết chúng theo cách khác nhau như thế nào .

🙌🏻 Xin chào, tôi là Eunjae Lee.

Tôi chủ yếu làm việc ở mảng phát triển front-end tại các công ty như Daum, Kakao và Algolia. Hiện tại, tôi đang là lập trình viên full-stack tại Storyblok.

Sau một thời gian dài làm việc tại một công ty khởi nghiệp, tôi chợt nhận ra mọi thứ đã thay đổi quá nhiều. Tôi đã sử dụng AngularJS từ năm 2014 đến cuối năm 2017, nhưng mãi đến năm 2018 tôi mới bắt đầu học được tất cả những điều mình đã bỏ lỡ. Bắt đầu với ES6, React, Babel, v.v., và cứ thế không ngừng.

Việc chuyển đến Pháp vào năm 2019 và gia nhập công ty Algolia là một cơ hội tuyệt vời để tôi hiểu sâu hơn về nhiều khái niệm khác nhau và làm việc với chúng. Tôi đã có được một bức tranh toàn diện bằng cách trực tiếp tham gia vào các khái niệm và đặt câu hỏi cho những người xung quanh. Sau một thời gian, tôi bắt đầu suy nghĩ về việc có một nội dung được tổ chức tốt về những chủ đề này sẽ hữu ích như thế nào , và cuối cùng điều này đã dẫn tôi đến việc tạo ra một khóa học.


📖 Danh sách nội dung (Tổng cộng 13 giờ 16 phút)

1. Cơ bản về DOM API

Tìm hiểu DOM API cơ bản và thực hành cấu trúc HTML và đính kèm sự kiện mà không cần framework front-end. (1 giờ 3 phút)

  • innerHTML
  • tạo phần tử
  • appendChild
  • addEventListener

2. Tạo một trung tâm mua sắm

Hãy cùng triển khai danh sách sản phẩm và giỏ hàng trong trung tâm thương mại. Mục tiêu của chúng ta là triển khai các tương tác động trực tiếp bằng DOM API. Khi sản phẩm được thêm vào và xóa khỏi giỏ hàng, chúng ta sẽ phát triển một hệ thống cập nhật đồng thời cùng một dữ liệu (số lượng) trên nhiều màn hình (danh sách sản phẩm và giỏ hàng). Thông qua quy trình này, chúng ta sẽ trải nghiệm tầm quan trọng của một nền tảng front-end hiện đại. (1 giờ 20 phút)

Tiếp theo, chúng tôi sẽ cấu trúc lại danh sách sản phẩm và giỏ hàng của trung tâm mua sắm đã triển khai thành nhiều thành phần, xem xét thiết kế, ý nghĩa và vai trò để giúp chúng dễ quản lý hơn. (52 phút)

Cuối cùng, thay vì tìm kiếm thủ công các phần tử DOM và cập nhật số lượng của chúng, hãy triển khai một phương pháp tự động cập nhật DOM theo phản ứng khi dữ liệu được cập nhật. (52m)

3. Cơ bản về máy chủ web

Tìm hiểu những kiến thức cơ bản về máy chủ web bằng cách sử dụng Express. Các chức năng không cần máy chủ do Vercel và Netlify cung cấp hiện nay rất dễ dàng và tiện lợi, nhưng trước khi chúng ra mắt, chúng ta sẽ tìm hiểu cách cấu trúc back-end bằng Express.

Chúng ta cũng sẽ tìm hiểu về CORS, một vấn đề gặp phải trong quá trình hiển thị dữ liệu từ giao diện người dùng được hỗ trợ bởi Vite yêu cầu máy chủ Express. (45 phút)

4. Phương pháp mảng

Chúng ta sẽ thực hành các phương thức Array tiêu biểu như filter, map và reduce thông qua nhiều ví dụ khác nhau. Chúng tôi giả định bạn đã quen thuộc với ngữ pháp cơ bản, và chúng ta sẽ tiếp tục với một bài tập thực hành. (1 giờ 18 phút)

5. Cơ bản về thư viện npm

Chúng ta sẽ khám phá cấu trúc của thư viện npm, từ từ đi sâu vào các vấn đề phức tạp xung quanh CommonJS và ES Modules, và triển khai thư viện của chúng ta trực tiếp lên npm. (27 phút)

6. Tạo một truy vấn nhỏ

Hãy cùng xây dựng một tập hợp con jQuery rất nhỏ. Tìm hiểu cách thiết lập monorepo bằng Yarn Workspace và trải nghiệm quy trình làm việc tổng thể để phát triển thư viện bằng cách làm việc trên thư viện, ứng dụng mẫu và trang tài liệu trong đó.

Chúng ta sẽ viết các bài kiểm tra đơn vị bằng vitest, trải nghiệm những thách thức phát sinh trong quá trình xây dựng thư viện và khám phá Tree-Shake. (1 giờ 7 phút)

7. Trang thông tin phim ảnh

Hãy cùng xây dựng một trang web tìm kiếm phim. Kết quả rất đơn giản, nhưng tập này sẽ đề cập đến các khái niệm quan trọng. Chúng ta sẽ tìm hiểu về History API của trình duyệt và sử dụng nó để triển khai định tuyến phía máy khách, tương tự như React Router. (45 phút)

Tiếp theo, chúng ta sẽ triển khai render phía máy chủ trực tiếp trên máy chủ Express và hydrat hóa nó trên máy khách. Đến cuối hướng dẫn này, bạn sẽ hiểu khá chi tiết về quy trình hydrat hóa + SSR của Next.js. (1 giờ 14 phút)

8. Thực hành không đồng bộ

Tương tự như tập thực hành phương thức Mảng, chúng ta sẽ thực hành các lệnh gọi lại, lời hứa, async và await để xử lý tính không đồng bộ tốt hơn. (38 phút)

9. Tạo một blog tĩnh

Nhiều trang web tĩnh được xây dựng bằng các công cụ như Jekyll, Gatsby và Next.js. Hãy cùng xem cách các công cụ này tạo ra các trang web tĩnh và mô phỏng quy trình xây dựng của chúng.

Trong quá trình này, chúng ta sẽ xây dựng một blog tĩnh từ các bài đăng Markdown bằng cách sử dụng tập lệnh Node.js, không cần bất kỳ khuôn khổ hoặc công cụ nào, và triển khai nó lên Vercel. (1 giờ 3 phút)

10. Tạo CLI

Hãy cùng xem xét cấu trúc của thư viện npm cho CLI, tạo CLI của riêng mình và triển khai nó lên npm. Sau đó, chúng ta sẽ chạy lệnh npm install -g Có thể lắp đặt và sử dụng như (48m)

11. Tạo thư viện biểu mẫu

Trước đây, chúng ta thường tạo các biểu mẫu như trên. Hãy cùng triển khai theo cách cũ để xem nó hoạt động như thế nào. Và giờ, chúng ta đã hiểu tại sao cách này không được thực hiện. Chúng ta cũng hiểu được lợi ích của các thư viện như react-hook-form, vốn được sử dụng rộng rãi hiện nay, và chúng ta sẽ tạo ra một thứ tương tự. (1 giờ 4 phút)

👥 Nếu bạn tham gia lớp học

Những người mua khóa học sẽ được mời tham gia kênh Discord dành riêng cho học viên . Hãy đặt bất kỳ câu hỏi nào phát sinh trong suốt khóa học. Bạn cũng có thể học hỏi từ các câu hỏi do người khác đăng.

Tôi hy vọng chúng ta có thể cùng nhau học hỏi thông qua các câu hỏi và thảo luận miễn phí trong một không gian mà việc không biết gì cũng không sao. Mục tiêu quan trọng nhất của chúng tôi là nâng cao sự tự tin của bạn với JavaScript.


❓ Câu hỏi thường gặp

H. Bạn có sử dụng Tailwind CSS trong bài giảng của mình không?

Chỉ trong một tập "Xây dựng Cửa hàng Trực tuyến", tôi sử dụng Tailwind CSS để thiết kế. Nếu bạn chưa quen với Tailwind CSS, bạn có thể tự viết CSS theo bất kỳ cách nào bạn muốn. Nếu quan tâm, bạn cũng có thể tham khảo video miễn phí của tôi.

H. Tôi có thể nghe cái này được không?

Thật khó để nói chắc chắn, nhưng nếu bất kỳ điều nào sau đây áp dụng cho bạn, bạn có thể muốn tham gia khóa học này.

  • Hiểu được sự khác biệt giữa let và const.
  • Bạn có thể xử lý các mô-đun bằng cách nhập/xuất.
  • Tôi biết sự khác biệt giữa import và require ở một mức độ nào đó.
  • Tôi hiểu ngữ pháp này: const { name, address } = person .
  • Bạn có thể tạo một ứng dụng quản lý việc cần làm đơn giản bằng React hoặc Vue.js bằng cách lưu trữ việc cần làm trong các biến mà không cần cơ sở dữ liệu.
  • Nếu bạn sử dụng React, có lẽ bạn biết cách sử dụng useEffect và useMemo.
  • Nếu bạn được yêu cầu tạo một ứng dụng Việc cần làm, bạn có thể hình dung sơ qua các thành phần sẽ được chia nhỏ như thế nào.

H. Nó khác với các bài giảng khác như thế nào?

Nhiều khóa học tập trung vào việc xây dựng các dự án cụ thể. Các khóa học này thường hướng dẫn một quá trình kết hợp dần dần các công nghệ, thư viện và dịch vụ khác nhau. Mặc dù điều này hữu ích trong việc tìm hiểu "cái gì" và "cách thức" kết hợp các yếu tố khác nhau, nhưng rất khó để giải thích phần "lý do" của các khóa học này.

Trong Sinabro JavaScript, bạn sẽ tìm hiểu lịch sử về cách thức một số chủ đề nhất định được thực hiện trong quá khứ và lý do tại sao chúng được thực hiện theo cách này ngày nay, hiểu được ưu và nhược điểm của từng phương pháp. Và bằng cách triển khai các tính năng mà các framework ẩn giấu, bạn sẽ hiểu tại sao chúng lại làm như vậy.

Biết "Cái gì" và "Cách thức" là rất quan trọng, nhưng nếu không có "Tại sao", bạn sẽ khó mà tiến xa được. Thiếu tự tin vào phát triển thường bắt nguồn từ việc thiếu "Tại sao". Khi một lỗi xảy ra, bạn không hiểu rõ tình huống, nên không biết cách khắc phục. Áp dụng kết quả tìm kiếm trên Google có thể khắc phục được lỗi, nhưng bạn lại không hiểu tại sao. Điều này khiến bạn cảm thấy bất an và lo lắng không biết phải làm gì nếu tình huống tương tự lại xảy ra.

Do đó, việc hiểu chính xác "lý do" là điều cần thiết để nâng cao trình độ. Mặc dù học thực hành là một cách, nhưng việc học hỏi từ một người đã trải qua quá trình này và giải thích chi tiết cũng là một phương pháp hiệu quả. Trên thực tế, nhu cầu cho các khóa học trung cấp này chắc chắn sẽ thấp hơn so với người mới bắt đầu, đó là lý do tại sao các khóa học chuyên sâu như vậy rất hiếm.

H. Có lớp học thử không?

Đây rồi! Trước khi xem bài giảng này, tôi đã tạo một video ngắn miễn phí với một số bài tập khởi động hữu ích. Bạn cũng có thể xem qua tại liên kết .

H. Có giảm giá cho sinh viên hoặc người tìm việc không?

Có, bạn có thể. Chúng tôi sẽ giảm giá cho bạn sau khi hoàn tất quy trình xác minh đơn giản.

H. Tôi có một câu hỏi khác!

Vui lòng gửi email hoặc nhắn tin trực tiếp cho tôi trên Twitter và tôi sẽ trả lời. Tôi sống ở Pháp, vì vậy xin hãy thông cảm rằng phản hồi của tôi có thể bị chậm trễ do chênh lệch múi giờ.

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • "Nó hoạt động được, nhưng tại sao điều này lại xảy ra?"

  • "Phát triển web quá phức tạp"

  • "Tôi có thể làm được nhưng tôi không tự tin"

  • "Tôi muốn nâng cao kỹ năng phát triển của mình."

  • "Có quá nhiều thứ mới xuất hiện nhanh chóng."

Cần biết trước khi bắt đầu?

  • Đây không phải là khóa học dành cho người mới bắt đầu học JavaScript. Đây là khóa học dành cho các bài tập cốt lõi từ cấp cơ sở đến cấp cơ sở và từ cấp cơ sở đến cấp cao.

Xin chào
Đây là

607

Học viên

30

Đánh giá

15

Trả lời

4.9

Xếp hạng

2

Các khóa học

안녕하세요. 이은재입니다. 프랑스에서 살고 있어요. 집에서 멍 때리고 냥이들 바라보는 걸 좋아하고, 저녁 식사 후에 한 시간 정도 산책하는 걸 즐깁니다. 시끄럽고 붐비는 도심이 부담돼서 파리 인근 소도시에 살고 있고, 새 구경을 좋아하고, 채소를 키우는 취미가 있어요.

좀 더 개발 관련 얘길 하자면, 2022년 11월부터 Storyblok 이라는 Headless CMS 서비스를 만드는 곳에서 개발자 유저들을 위한 extension platform 을 만들고 있어요.

2019년에 Algolia 라는 클라우드 기반의 검색 솔루션 회사에 입사하기 위해 프랑스로 이주했어요. 그 회사에서 InstantSearch 라는 오픈소스 UI 라이브러리를 만드는 일을 했어요. Vanilla JavaScript, React, Vue.js, Angular 총 네 가지 버전으로 라이브러리를 제공하기 위해 공통 로직을 따로 관리하고 각 flavor 는 최소한의 wrapper 이도록 하는 작업에 시간을 가장 많이 썼어요. 그 외에도 업무적으로 여러 오픈 소스 프로젝트에 참여했어요.

그전에는 한 스타트업에서 한국과 싱가폴에서 풀스택으로 3년 정도 일했고, 그 전에는 카카오와 다음 커뮤니케이션에서 4-5년간 주로 프론트엔드 업무를 했어요.

Chương trình giảng dạy

Tất cả

118 bài giảng ∙ (19giờ 56phút)

Tài liệu khóa học:

Tài liệu bài giảng
Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

29 đánh giá

4.9

29 đánh giá

  • damyo님의 프로필 이미지
    damyo

    Đánh giá 1

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    그동안 봐왔던 강의와는 다른 느낌, 살짝 쉬어가는 느낌으로 편안하게 수강했습니다. 강의가 가벼웠다거나 쉬웠다는 의미는 아니에요. 예전에는 많은 지식과 기술을 때려 넣은(?) 강의가 좋기도 했지만(돈 값은 한다는 기분😁), 가끔은 따라잡기 버거울 때도 있고, 수강생들을 위한 강의인지 강사님이 아는 것을 트로피처럼 진열하고 본인의 업적을 쌓기 위함인지 헷갈리는 경우도 있었는데요. 은재님의 강의는 밸런스가 참 좋았던 것 같습니다. 적당히 넓고, 적당히 깊은 느낌이었어요. 무엇보다 공식을 암기하는 것이 아닌, 풀이하듯이 사고의 흐름을 따라가는 경험을 할 수 있어서 좋았어요. 모르고 있었지만 그냥 당연하게 생각하고 궁금해하지 않았던 것들, 중요하지 않다고 치부하고 관심도 가지지 않았던 부분들도 한번씩 언급해주셔서 다시 생각해보는 계기가 되기도 했구요. 문제를 어떻게 대하고 사고할 것인지, 그동안 나는 어떤 자세로 일했는지 되돌아봐야겠습니다. 기회가 된다면 은재님의 개발자로써의 팁(어떤 도구들을 사용하는지, 어떤 방식으로 일/협업하는지 등)도 공유해주시면 너무 좋을 것 같아요. 다음에 또 좋은 강의로 만나뵙길 기대하겠습니다. 감사합니다.

    • 이은재
      Giảng viên

      와 그런 느낌 받으셨다니 너무 기쁘네요. 진짜 강의 기획하던 시점부터 "차근 차근" 한 주제씩 배워나갈 수 있으면 좋겠다고 생각했는데, 그런 느낌 받으셨다니 너무 행복합니다. 개발 도구라던가 협업 방식에 대해서도 보너스 에피소드 한번 고민해보겠습니다 😊

  • Gichul Roh님의 프로필 이미지
    Gichul Roh

    Đánh giá 14

    Đánh giá trung bình 4.7

    5

    100% đã tham gia

    강의자가 코드짜는 철학자 같습니다. 개발이란게 어떻게 보면 재밌는 일인데, 다시금 그 재미를 찾게 해주었습니다. 처음엔 강의가 단가가 좀 있어서 망설였었는데, 끝까지 1차 완강했습니다. 두세번은 봐야할 듯 합니다. 앱을 만드는 강의는 많은데 Node 환경이나 라이브러리 개발 강의어서 덕분에 관련 개발환경들의 이해도가 높아졌습니다. 다음 강의도 기대하겠습니다. 멀리서 건승하시기 바랍니다. 끝으로 섹션12 정적블로그 만들기 Deployment 영상에 1분 남짓 blackout 나는 부분 있습니다.

    • 이은재
      Giảng viên

      너무 좋은 평가 감사합니다 😊 말씀하신 영상에 긴 공백이 있었네요. 덕분에 제거 후 다시 올렸습니다. 감사합니다!

  • miho2582님의 프로필 이미지
    miho2582

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    58% đã tham gia

    평소 강사님의 SNS계정을 염탐하길 좋아하는데 강의를 소개하셔서 냉큼 커리큘럼부터 읽어봤어요. 마침 취준을 하며 바닐라 자바스크립트 기반의 프로젝트를 하던 시기였는데, 프로젝트를 하면서 아직도 자바스크립트 실력이 충분하지 못하구나! 라는 생각을 많이 했거든요. 라이브러리 & 프레임워크에서 편리한 기능을 자바스크립트로 어떻게 구현하는지에 대한 인사이트, 그리고 TDD나 npm 배포 등 혼자 공부하기엔 부담되는 개념을 알려주는 강의였어요. FE 를 공부하면서 막연하게 알고는 있지만 자세히 알아보려면 힘든 개념을 강사님과 함께 따라가니까 부담을 덜 수 있어서 좋았어요. 자바스크립트에서 빠르게 리액트로 넘어갔거나, 리액트로 개발을 시작했는데 막히는 부분이 있는 사람들에게 추천하고 싶은 강의예요. 이 강의는 취준하는 지금도 유용하지만 1년전... 인사이트를 마구 갈망했던 시기의 저에게 보여줬다면 박수를 치면서 봤을 강의라고 생각해요. 디스코드가 따로 개설되어서 수강자들을 관리해주시는 점과, 취준생 할인코드를 배포해주시는 점까지 여러모로 사려 깊은 강사분이세요! 추천합니다! (그리고 영상 속에서 잠깐 나오는 고양이도 귀여워요. ☺️)

    • 이은재
      Giảng viên

      안녕하세요. 도움이 되었다니 정말 다행이에요 🥹 좋은 말씀 너무 감사하고 취준도 잘 되시길 응원합니다!

  • 이현지님의 프로필 이미지
    이현지

    Đánh giá 2

    Đánh giá trung bình 5.0

    5

    97% đã tham gia

    3년차 주니어 개발자입니다! 강좌를 탐색하다가 마음이 가서 바로 구매 후 들어봤는데 너무 좋았습니다ㅎㅎ 회사에서는 기능 개발 위주로 하다보니 프로젝트 셋업이나 코어 JS 개념을 접하기 어려웠는데, 이렇게 다양하면서 필수적인 지식들을 다뤄주셔서 너무 유익하고 좋았습니다. JS를 이용하여, React 처럼 동작하게 하기, SSR 직접 구현하신 것도 인상깊었고, 그 외에도 번들러나 모듈 개념도 다뤄주셔서 좋았습니다. 고기를 주는게 아닌, 고기 잡는 방식을 알려주는 강좌인것 같습니다ㅎㅎ 강좌를 들으면서 수업 구성에 대해 많은 고민을 하신게 느껴졌습니다. 틈틈히 복습하겠습니다. 감사합니다~!

    • 이은재
      Giảng viên

      좋은 말씀 감사합니다 😊 저도 고기가 아닌 고기 잡는 방법을 알려드리는데 초점을 최대한 둬봤는데요, 그렇게 느끼셨다니 너무 기쁘네요. 질문 생기시면 언제든 남겨주세요. 감사합니다!

  • evanjin님의 프로필 이미지
    evanjin

    Đánh giá 9

    Đánh giá trung bình 4.9

    5

    14% đã tham gia

    깊은 인사이트에서 나오는 강의! 추천합니다 :)

    • 이은재
      Giảng viên

      감사합니다 evanjin 님 😊

2.989.421 ₫

Khóa học khác của eunjae

Hãy khám phá các khóa học khác của giảng viên!

Khóa học tương tự

Khám phá các khóa học khác trong cùng lĩnh vực!