13 POSTS

Frontend 2

  • #html#frontend

    HTML์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ธ๊ฐ€? ๋ผ๋Š” ๋…ผ์Ÿ๋ณด๋‹ค ์ค‘์š”ํ•œ ๊ฒƒ

    ๋”์ด์ƒ HTML ๋…ผ๋ž€์€,, ๋„ค์ด๋ฒ„,,,

    13๋ถ„
  • #devops#frontend#ci-cd

    ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋กœ์ ํŠธ๋ฅผ ์œ„ํ•œ github CI workflow

    ์‚ฌ๋ž‘ํ•ด์š” Github

    11๋ถ„
  • #browser#css#frontend

    ์›น ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ณธ ์‚ฌํŒŒ๋ฆฌ 15์˜ ๋ณ€ํ™”์™€ ๋Œ€์‘

    ์ฃฝ์ธ๋‹ค ์‚ฌํŒŒ๋ฆฌ

    5๋ถ„
  • #nextjs#frontend

    Nextjs์—์„œ Server Side props๋ฅผ ์ƒˆ๋กœ๊ณ ์นจํ•˜๊ธฐ

    ํ•ญ์ƒ ๊ฐ์‚ฌํ•˜์‹ญ์‹œ์˜ค and I also, nextjs ์กฐ์•„

    3๋ถ„
  • #css#frontend

    overflow: auto vs overflow: scroll ์™œ ์œˆ๋„์šฐ์—์„œ๋งŒ ์“ธ๋ชจ์—†๋Š” ์Šคํฌ๋กค๋ฐ”๊ฐ€ ๋…ธ์ถœ๋ ๊นŒ

    ๋งจ๋‚  ๋งฅ๋งŒ ๋ด์„œ ์ด๋Ÿฐ ์ค„๋„ ๋ชฐ๋ž๋‹ค ๋ฐ˜์„ฑํ•ฉ๋‹ˆ๋‹ค

    4๋ถ„
  • #nextjs#frontend#web-performance

    Nextjs 10 ๋ฆด๋ฆฌ์ฆˆ ๋ฐ ์ ์šฉ ํ›„๊ธฐ

    nextjs ์ •๋ง ์—ด์ผํ•˜๋„ค

    9๋ถ„
  • #javascript#frontend

    (ํ•จ์ˆ˜ํ˜•์œผ๋กœ) ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ HTML ๋ฒ„ํŠผ ์ค‘๋ณต ํด๋ฆญ ๋ฐฉ์ง€ํ•˜๊ธฐ

    ์–ด๋ ธ์„ ๋•Œ ๋‚ด๊ฐ€ ์–ด๋–ป๊ฒŒ ํ–ˆ๋”๋ผ?

    5๋ถ„
  • #frontend#react#angular

    ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๊ฐ€ ์•Œ์•„์•ผ ํ•˜๋Š” Angular์™€ React์˜ Change Detection

    [What every front-end developer should know about change detection in Angular and React](https://indepth.dev/what-every-front-end-developer-should-know-about-change-detection-in-angular-and-react/)๋ฅผ ๋ฒˆ...

    16๋ถ„
  • #nextjs#react#frontend

    NextJS 1. Page & Route

    ์š”์ฆ˜ ๋ฆฌ์•กํŠธ๋ฅผ ์“ฐ๋Š” ๋งŽ์€ ํ”„๋กœ์ ํŠธ์—์„œ, SSR์„ ์ง€์›ํ•˜๊ธฐ ์œ„ํ•ด [nextjs](https://nextjs.org/)๋ฅผ ์“ฐ๊ณ  ์žˆ๋‹ค. ์ดˆ๊ธฐ ๋กœ๋”ฉ ์†๋„๋‚˜, SEO ์ง€์› ์ด์Šˆ ๋“ฑ ๋“ฑ ๋•Œ๋ฌธ์— ์•„๋ฌด๋ž˜๋„ SPA๋Š” ์š”์ฆ˜ ํŠธ๋ Œ๋“œ์—์„œ ๋งŽ์ด ๋ฐ€๋ฆฐ ๊ธฐ๋ถ„์ด๋‹ค. ๋ฌผ๋ก  [razzle](https://github.com/jaredpalmer/razzle) ์„ ์“ฐ๊ฑฐ๋‚˜ custom ser...

    8๋ถ„
  • #nextjs#frontend

    NextJS 2. Data Fetching

    [nextjs์˜ ๊ณต์‹ ๋ฌธ์„œ](https://nextjs.org/docs/basic-features/data-fetching)๋ฅผ ๋ณด๊ณ  ์š”์•ฝํ•œ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค. ```toc tight: true, from-heading: 1 to-heading: 2 ``` ## 1. getInitialProps Nextjs 9.3 ์ด์ „์—๋Š” `getInitialProps` ๋ฐ–์—...

    13๋ถ„
  • #gatsby#frontend

    ๋ธ”๋กœ๊ทธ ๊ฐœํŽธํ–ˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜Ž

    ์ฃผ๋ง์— ์ง‘๊ตฌ์„์— ํ˜ผ์ž ์˜ค๋ž˜์žˆ์„ ์ผ์ด ์žˆ์–ด์„œ, ์ƒ๊ฐ๋‚œ ๊น€์— ๋ธ”๋กœ๊ทธ๋ฅผ ๊ฐœํŽธํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด ์ „์—๋Š” hexo ๊ธฐ๋ฐ˜์œผ๋กœ ๋งŒ๋“ค์–ด์ง„ ๋ธ”๋กœ๊ทธ๋ฅผ ์ž‘์—…ํ–ˆ๋Š”๋ฐ, hexo ์ƒํƒœ๊ณ„๊ฐ€ ๊ด€๋ฆฌ๊ฐ€ ์ž˜ ์•ˆ๋˜๊ณ  ์žˆ๋Š” ๊ฑด์ง€ ํ”Œ๋Ÿฌ๊ทธ์ธ์ด๋‚˜ ๊ธฐ๋Šฅ๋“ค์ด ์ œ๋Œ€๋กœ ๋™์ž‘์„ ์•ˆํ•˜๋”๊ตฐ์š”. wordpress -> ??? -> github pages -> hexo -> gatsby ๊นŒ์ง€ ๋ฒŒ์จ ๊ฐœํŽธ๋งŒ ํ•œ ๋‹ค์„ฏ๋ฒˆ ์ฏค...

    3๋ถ„
  • #react#javascript#frontend

    ๋ฆฌ์•กํŠธ ๋ฉด์ ‘ ์งˆ๋ฌธ ๋ชจ์Œ (1)

    [๋ชฉ์ฐจ](/2019/08/13/reactjs-interview-questions/) ```toc tight: true, from-heading: 2 to-heading: 3 ``` ## Core React ### What is React ๋ฆฌ์•กํŠธ๋Š” ์˜คํ”ˆ์†Œ์Šค ํ”„๋ก ํŠธ์—”๋“œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ, ํŠนํžˆ ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ๊ตฌ์ถ•์„...

    64๋ถ„
  • #nextjs#frontend#typescript

    Typescript, React, NextJs, Koa, Styled Component ๋กœ ํ”„๋ก ํŠธ์—”๋“œ ํ™˜๊ฒฝ ๋งŒ๋“ค๊ธฐ

    ์ด ๋ฌธ์„œ๋Š” ๋” ์ด์ƒ ์—…๋ฐ์ดํŠธ ํ•˜์ง€ ์•Š์„ ์ƒ๊ฐ์ด๋‹ค. ๋Œ€์‹  https://github.com/yceffort/koa-nextjs-react-typescript-boilerplate ์—ฌ๊ธฐ์—์„œ ๊ณ„์† ํ•ด์„œ ๋งŒ๋“ค์–ด ๊ฐ€๊ณ  ์žˆ๋‹ค. ## ์‚ฌ์šฉํ•œ ์˜คํ”ˆ์†Œ์Šค ### React ์ž์„ธํ•œ ์„ค๋ช…์€ ์ƒ๋žต ํ•œ๋‹ค ### Nextjs [NextJs](https://nextjs.org...

    4๋ถ„