iT邦幫忙

front-end相關文章
共有 486 則文章
鐵人賽 Modern Web DAY 19
Angular 深入淺出三十天 系列 第 19

技術 [Angular 深入淺出三十天] Day 18 - 路由(一)

「Leo,我一直有個問題想問你。」Wayne 神秘兮兮的說。 「什麼問題?」看他這麼神秘兮兮的我也緊張了起來。 「既然是 SPA ,就代表整個 Web 從頭到尾...

鐵人賽 Modern Web DAY 21
Angular 深入淺出三十天 系列 第 21

技術 [Angular 深入淺出三十天] Day 20 - 路由(三)

「原來 Angular 的路由是這樣設定的,比我想像中簡單耶!」Wayne 做完練習之後正玩得不亦樂乎。 「是滿簡單的,不過目前只有第一層而已。在實務上應用時一...

鐵人賽 Modern Web DAY 30

技術 30. [WEB] 從輸入網址列到渲染畫面,過程經歷了什麼事情?

相信讀者您在生活中,多少都會有搜尋、瀏覽網頁的經驗吧?輸入網址、而身為網頁製造者的前端工程師,你真的知道你寫出來的網頁在部屬之後,是怎麼從網址變成頁面,進而顯...

鐵人賽 Modern Web
Angular 深入淺出三十天 系列 第 31

技術 [Angular 深入淺出三十天] Day 30 - Angular 小學堂(四之四)

昨天的登入頁、購物車頁與結帳成功頁大家都有順利套完版嗎?! 如果沒有的話沒關係,看完今天的文章再繼續努力吧!! 結帳頁套版 今天一開始我們先來套結帳頁的版...

鐵人賽 Modern Web DAY 3

技術 DAY03 - 前端與後端的溝通起點 - API

前端除了要切版與設計師的溝通之外,在資料串接的部分,就是與後端工程師溝通的時候了! 後端要怎麼把資料給前端呢?在開始串接前通常又會做哪些事呢? 01.API規格...

鐵人賽 Modern Web DAY 23
Angular 深入淺出三十天 系列 第 23

技術 [Angular 深入淺出三十天] Day 22 - 路由(五)

Angular 是一個很注重模組化開發的框架 還記得我在 基礎結構說明(一) 有提到過這句話嗎? 我一直覺得這句話是在使用 Angular 開發時,很重要的...

鐵人賽 Modern Web DAY 30

達標好文 技術 Day 30 -『破釜沉舟的轉職路 - 去年說要成為軟體工程師的我,今年 38 歲了,我成為工程師了嗎?』-- 終於完賽了,謝謝所有人,最後謝謝自己

與鐵人賽結緣是去年第 11 屆 去年大概 7 月的時候,大概學習前端才不滿 3 個月,因緣際會的來到了 it 邦幫忙這個寶庫,發現了鐵人賽,真的也不知道是哪根...

技術 關於 git stash 你可能不知道的用法

相信大家可能都會有這種經驗: 當你在開發某一功能時,突然被PM打斷,要求你現在要先去修正一個急單,這時候你可以有兩個選擇: 直接下commit,然後開始改急單...

鐵人賽 Modern Web DAY 30
Angular 深入淺出三十天 系列 第 30

技術 [Angular 深入淺出三十天] Day 29 - Angular 小學堂(四之三)

好的,我們今天要開始套版了!! 首先先到 GitHub 上把我已經切好的版型下載下來。 不過為了避免有人不知道怎麼下載,容我先小小地說明一下: 點擊 GitHu...

鐵人賽 Modern Web DAY 27

技術 27. [WEB] Cookie & Session 是什麼?

Cookie 和 Session 這兩個名詞,相信大部分的開發者都不會太陌生,特別是 Cookie,從社群網站、電商平台、Google Analytics 分...

鐵人賽 Modern Web DAY 29
Angular 深入淺出三十天 系列 第 29

技術 [Angular 深入淺出三十天] Day 28 - Angular 小學堂(四之二)

昨天我們把落單的 UI 元件跟其模組關聯完之後,今天接著要來設定路由的部份! 開始設定路由前,可以先看看我們準備好的路徑定義檔 - app-path.const...

鐵人賽 Modern Web DAY 22
Angular 深入淺出三十天 系列 第 22

技術 [Angular 深入淺出三十天] Day 21 - 路由(四)

到目前為止,我們都是只有用 Component 來設定我們的路由。但在實際應用上,通常我們會將相關的功能包裝成一個一個的 NgModule ,而每個 NgMod...

鐵人賽 Modern Web
Angular 深入淺出三十天 系列 第 32

達標好文 技術 [Angular 深入淺出三十天] Day 31 - 三十天之後

「耶~~~ 我套完了!!」Wayne 套版完之後開心地大聲嚷嚷著。 「喂,冷靜一點,這裡是公眾場合耶。」我笑著推了他一下。 「抱歉抱歉,我太興奮了!!Angul...

鐵人賽 Modern Web DAY 2

技術 【Day 2】React.js介紹 && 第一個 React 程式

這是 React 從 0 到 1 系列的第二篇,今天廢話不多說,直接進入正題。今天將簡單介紹 React.js 的基礎概念,最後建立我們第一個 React 的程...

鐵人賽 Modern Web DAY 25
Angular 深入淺出三十天 系列 第 25

技術 [Angular 深入淺出三十天] Day 24 - 路由(七)

相信大家都用使用過 Facebook 吧? 當我們想在 Facebook 發文或留言的時候,如果不小心按到上一頁/下一頁,抑或是沒有取消發文或留言的狀態就想離開...

鐵人賽 Modern Web DAY 3

技術 【Day 3】CRA專案架構

昨天介紹了 React 的特色與元件化開發的特色,也使用 create-react-app 建構了我們的第一個 React 程式專案,今天將延續昨日 CRA 建...

鐵人賽 Modern Web DAY 4

技術 Day 04. 前線維護・函式型別 X 積極註記 - Function Types

閱讀本篇文章前,仔細想想看 大概可以解釋普通 JS 物件(也就是 JSON 格式,或筆者所謂的狹義物件)在 TypeScript 裡的推論機制。 知道筆者...

鐵人賽 Modern Web DAY 28
Angular 深入淺出三十天 系列 第 28

技術 [Angular 深入淺出三十天] Day 27 - Angular 小學堂(四之一)

這次小學堂要跟大家一起練習的是一個簡單的 EC 網站。 素材是來自剛好在鐵人賽前夕時,由六角學院在 The F2E - 前端修練精神時光屋 舉辦的 【網頁排版P...

鐵人賽 Modern Web DAY 20

達標好文 技術 Day 20 -『破釜沉舟的轉職路 - 去年說要成為軟體工程師的我,今年 38 歲了,我成為工程師了嗎?』-- 終於我開始丟履歷了

從完成履歷到真的開始丟求職信 其實我有一個習慣,那就是不蒐集完全盤的訊息,讓自己心中浮現了一個 map,我不會輕舉妄動,就連去大飯店吃 buffet,我都會入...

鐵人賽 Modern Web DAY 23

技術 23. [FE] 網頁的快取機制是怎麼運作的?

筆者在剛開始寫網頁時,總是會遇到改了檔案重新整理畫面卻沒更新,或是更新了一張圖檔到伺服器但網頁內容沒有更換等情況,使得現在按 Ctrl/CMD + R 時,小...

鐵人賽 Modern Web DAY 1
前端開發 30 個問題 系列 第 1

技術 What is DOCTYPE?

前言2020 秋天,我將用 30 天的時間,來嘗試回答和網路前端開發相關的 30 個問題。30 天無法一網打盡浩瀚的前端知識,有些問題可能對有些讀者來說相對...

鐵人賽 Modern Web DAY 27
Angular 深入淺出三十天 系列 第 27

技術 [Angular 深入淺出三十天] Day 26 - 路由總結(二)

子路由模組 當我們將頁面或功能包裝成模組的時候,也能在其中加入路由的設定,使其變成含有路由的子路由模組。 跟 AppRoutingModule 不一樣的是,子路...

鐵人賽 Modern Web DAY 5

技術 【Day 5】 第一個 hook - useState

今天終於要介紹 React hooks 中的第一個hook 了 - useState,Start! 建立自己的 component 在講解 state 概念與...

鐵人賽 Modern Web DAY 2
前端開發 30 個問題 系列 第 2

技術 關於 <link> 的兩三事

前言2020 秋天,我將用 30 天的時間,來嘗試回答和網路前端開發相關的 30 個問題。30 天無法一網打盡浩瀚的前端知識,有些問題可能對有些讀者來說相對簡...

鐵人賽 Modern Web DAY 11

技術 Day 11 -『破釜沉舟的轉職路 - 去年說要成為軟體工程師的我,今年 38 歲了,我成為工程師了嗎?』-- 年齡到底是不是個問題

歲月真是把殺豬刀嗎? 在我去年正式開始學習前端技術前,還在蒐集各式各樣資訊的時候,我曾在網路上尋尋覓覓各大神與名師,希望能夠獲得他們的一些建議或是聽到一些想聽...

鐵人賽 Modern Web DAY 24

技術 【Day 24】 useRef

useRef 是一個可以讓我們抓取到 DOM 節點的 hooks。 實作上非常簡單,直接來看範例吧: import React, { useRef } from...

鐵人賽 Modern Web DAY 27

達標好文 技術 Day 27 -『破釜沉舟的轉職路 - 去年說要成為軟體工程師的我,今年 38 歲了,我成為工程師了嗎?』-- 前端工程師新鮮人,on board 了

兒子準備向幼稚園 on board,我也將向新公司 on board 了 在轉職的這一段時間,我將近一年半沒有上班了,每天就是陪伴著兒子起床,幫他準備好,並且...

技術 [筆記] React 如何使用 Redux-Observable:副線打怪一下(2)

為何要使用Redux-Observable? 首先,一開始我們都知道redux跟react搭配的很好,redux扮演著資料倉儲的角色,但是許多的side eff...

鐵人賽 Modern Web DAY 14

技術 14. [JS] 深拷貝是什麼?如何實現?

在 前天的文章 中,我們討論了 JavaScript 的資料型別,其中最特殊的莫過於物件;在這個萬物皆物件的語言中,如何完美的複製物件,也就成了開發過程中頻繁...

鐵人賽 Modern Web DAY 8

技術 【Day 8】Class component && Functional component

今天與明天會來短暫介紹一下 class-based 的 component,今天將講解 class component 的基礎,也比較一下與 functiona...