07/24 - 07/28

[kunheejeon]

07/24

Frontend Roadmap

Internet

• Packet: A small unit of data that is transmitted over the internet
• Domain Name: A human-readable name that is used to identify a website, such as google.com
• DNS: The Domain Name System is responsible for translating domain names into IP addresses
• HTTP: The Hypertext Transfer Protocol is used to transfer data between a client (such as a web browser) and a server (such as a website)
• HTTPS: An encrypted version of HTTP that is used to provide secure communication between a client and server
• SSL/TLS: The Secure Sockets Layer and Transport Layer Security protocols are used to provide secure communication over the internet
• Sockets: A socket is a combination of an IP address and a port number, representing a specific endpoint for communication
  • being used to establish connections between devices and transfer data between applications

HTTP

• TCP/IP based application layer communication protocol which standardizes how the client and server communicate with each other
• HTTP follows a classical “Client-Server model” with a client opening a connection request, then waiting until it receives a response
• It's a stateless protocol, that means that the server does not keep any data (state) between two requests

Browsers

• a software application that enables a user to access and display web pages or other online content through its graphical user interface
• flow: parsing HTML to construct the DOM tree -> render tree construction -> layout of the render tree -> painting the render tree
• structure
  • User Interface: address bar, back/forward button, bookmarking menu, etc
  • Browser engine: marshals actions between the UI and the rendering engine
  • Rendering engine: responsible for displaying requested content
  • ex) if the requested content is HTML, the rendering engine parses HTML and CSS, and displays the parsed content on the screen
  • Networking: for network calls such as HTTP requests, using different implementations for different platform behind a platform-independent interface
  • UI backend: used for drawing basic widgets like combo boxes and windows, This backend exposes a generic interface that is not platform specific. Underneath it uses operating system user interface methods.
  • JavaScript interpreter: Used to parse and execute JavaScript code
  • Data storage: as a persistence layer, browser may need to save all sorts of data locally, such as cookies
  • also support storage mechanisms such as localStorage, IndexedDB, WebSQL and FileSystem

DNS

• Humans access information online through domain names
• ex) 123.456.78.90 (IP address) <-> google.com
• Web browsers interact through Internet Protocol (IP) addresses
• DNS translates domain names to IP addresses so browsers can load Internet resources

Hosting

• Shared Hosting: a web hosting service where many websites reside on one web server connected to the Internet
• VPS Hosting: a virtual server that simulates a physical server, however, in reality, the machine is shared among several users
• Dedicated server: hosted by a company and only allows one client company to access the server

[kunheejeon]

07/26

Auth

Getting Permission Client(Browser) -> request with credentials -> Server -> Response to Client

Server-side Sessions

• Popular for full stack applications
• coupled frontend and backend api
• after login, store unique identifier on server, send same identifier to client
• then client sends identifier along with requests to reach protected resources

Authentication Tokens

• work great with decoupled backend api
• create a token on backend and send it to client
  • token's validity can only be checked and proven by the backend
  • the token is created with help of some private key only known by the backend

Version Control Systems

• allow to track changes to your codebase/files over time
• allow to go back to some previous version of the codebase without any issues
• help in collaborating with people working on the same code
  • avoid the frustration of copying and merging the changes from others into main codebase

Git

• open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency
• https://www.atlassian.com/git/tutorials/learn-git-with-bitbucket-cloud
• https://cs.fyi/guide/git-cheatsheet

Repo Hosting Services

• repository hosting services (GitHub)
  • internet hosting for software development and version contro
  • offers the distributed version control and source code management functionality of Git

[kunheejeon]

07/27

Modern CSS

• writing CSS in our modern front-end applications is completely different from past way of writing CSS

• methods such as Styled Components, CSS Modules, Styled JSX, Emotion, etc

• Styled components

  • a CSS-in-JS library that enables you to write regular CSS and attach it to JavaScript components
  • Simple dynamic styling: adapting the styling of a component based on its props
  • a global theme is simple and intuitive without having to manually manage dozens of classes
  • Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles
  • combined with code splitting -> loading the least amount of code necessary

• CSS Modules

  • CSS files in which all class names and animation names are scoped locally by default
  • edit any CSS file with assurance and without concern for how it would affect other sites

    import classes from './PageContent.module.css';
    <div className={classes.content}>

CSS frameworks

• provides a fully functional CSS stylesheet, allow to create a web page by simply coding the HTML
  • simply use appropriate classes, structure, and IDs
• includes classes for popular website features like as the footer, slider, navigation bar, hamburger menu, column-based layouts

• CSS framework vs utility-first CSS framework

  • Bootstrap (CSS framework)

  • provides a set of pre-designed CSS styles and components

  • a larger file size compared to Tailwind due to its built-in components and features

  • provide a cohesive and consistent design language with its pre-designed components and styles

  • excellent choice for smaller to medium-sized projects that don't require highly custom designs

  • Tailwind (utility-first CSS framework)

  • providing pre-designed components, offers a tons of collection of small utility classes that can be combined to build custom styles (flexible)

  • smaller because it mainly consists of utility classes, allowing use of only what you need and minimize unused styles

  • providing building blocks (utility classes) and empowers developers to design interfaces from scratch with maximum flexibility

  • great on larger projects or projects that demand custom designs and a consistent design system