TIL-20220709

회고

• 오늘도 CS Core는 못했다. 주말이란 핑계를 대본다.
• 다음 주 부터는 TIL말고 TW(This Week)IL으로 일주일 단위로 일별 배운걸 다시보고 정리하자. 안그러니 계속 까먹는다.
• Next.js/FastAPI 조합이 괜찮아 보인다. with Docker
• 토이 프로젝트랑 병행하면서 하자.
• 괜찮은 기업들은 다 코테를 본다 그래서 CS Core는 더욱이 해야한다.
• 어차피 implementation details은 경험에서 우러나오겠지만 최종 레벨은 core 이해력에 갈린다. (finance에서도 겪은 실수를 여기서 또 반복하지 말자.)

React

• Sharing State Between Components
  • Lifting state up by example
    • Step 1: Remove state from the child components
    • Step 2: Pass hardcoded data from the common parent
    • Step 3: Add state to the component parent
  • A single source of truth for each state

Next.js

• Pages
  • Pages with Dynamic Routes
  • Pre-rendering
    • Two forms of Pre-rendering
  • Static Generation (Recommended)
    • Static Generation without data
    • Statid Generation with data
      • Scenario 1: Your page content depends on external data
      • Scenario 2: Your page paths depend on external data
    • When should I use Static Generation?
  • Server-side Rendering

• SSR: Server-Side Rendering
  • getServerSideProps
    • When does getServerSideRpops run
    • When should I use getServerSideProps
      • getServerSideProps or API Routes
    • Fetching data on the client side
    • Using getServerSideProps to fech data at request time
    • Caching with Server-Side Rendering (SSR)
    • Does getServerSideProps render an error page

• SSG: Static-Site Generation
  • getStaticProps
    • When should I use getStaticProps?
    • When does getStaticProps run
    • Using getStaticProps to fetch data from a CMS
    • Write server-side code directly
    • Statically generates both HTML and JSON
    • Where can I use getStaticProps
    • Runs on every request in development
    • Preview Mode

• CSR: Client-side rendering
  • Client-side data fetching
    • Client-side data fetching with useEffect
    • Client-side data fetching with SWR

• Dynamic routing
  • getStaticPaths
    • When should I use getStaticPaths?
    • When does getStaticPaths run
      • How does getStaticProps run with regards to getStaticPaths
    • Where can I use getStaticPaths
    • Runs on every reqeust in develpment

• Built-In CSS Support
  • Adding a Global Stylesheet
    • Import styles from node_modules
  • Adding Component-Level CSS
  • Sass Support
    • Customizing Sass Options
    • Sass Variables
  • CSS-in-JS
  • FAQ
    • Does it work with JavaScript disabled?

• Layouts
  • Examples
    • Single Shared Layour with Custom App
    • Per-Page Layouts
    • With TypeScript
    • Data Fetching

FastAPI (Python)

• CORS (Cross-Origin Resource Sharing)
  • Origin
  • Steps
  • Wildcards
  • Use CORSMiddleware
    • CORS preflight requests
    • Simple requests