본문 바로가기
닫기
토픽 주제별 분류
서브토픽
필터

  • 스프링캠프 2023 [Session 7] Journey to Modern Spring (클라우드 시대를 맞이하는 스프링의 자세) (박용권)

    youtube.com

    스프링캠프 2023 [Session 7] Journey to Modern Spring (클라우드 시대를 맞이하는 스프링의 자세) (박용권)

    스프링은 지난 십여 년 동안 Microservices, Event Driven, Reactive, Cloud, Serverless 와 같이 다양한 형태의 애플리케이션을 만들 수 있도록 다양한 영역에서 엄청난 발전과 개선을 이루었습니다.
    특히 얼마전 공개된 스프링 6와 스프링 부트 3의 주요 변경사항을 살펴보면 클라우드 네이티브를 위해 큰 노력을 하고 있다는 사실을 알 수 있습니다.
    이 강연에서는 클라우드 네이티브가 무엇인지 살펴보고, 스프링이 클라우드 네이티브를 위해 준비한 것과 지금의 스프링이 있기까지 어떤 여정을 걸어왔는지 가벼운 마음으로 돌아보겠습니다.

    🎙️ 박용권 (당근마켓)
    🗓️ 스프링캠프 2023 Session 7 (2023년 4월 22일)
    🧭 SKT Tower 4층 수펙스홀

    📂 발표자료 https://speakerdeck.com/arawn/journey-to-modern-spring

    📺 스프링캠프 2023 영상 모두 보기 https://www.youtube.com/playlist?list=PLdHtZnJh1KdbR9xXyiVJ-BClLTXCw66y3

    [🔗 스프링캠프 & KSUG]
    스프링캠프 2023 웹 https://springcamp.ksug.org/2023/
    스프링캠프 페이스북 https://www.facebook.com/springcampkr
    스프링캠프 유튜브 https://www.youtube.com/@springcampkr

    KSUG 웹 https://www.ksug.org/
    KSUG 구글 그룹 https://groups.google.com/g/ksug
    KSUG 페이스북 https://www.facebook.com/groups/springkorea
    KSUG 유튜브 https://www.youtube.com/@workerksug7409

    #KSUG #스프링캠프 #모던스프링 #클라우드

    sejinkim

  • Define your design system's foundations - Lesson 2 part 2 : Introduction to design systems

    youtube.com

    Define your design system's foundations - Lesson 2 part 2 : Introduction to design systems

    Figma is free to use. Sign up here: https://bit.ly/3msp0OV

    Habitz design system Community file: https://bit.ly/3BVcql4

    Video course: https://bit.ly/3WwqzyI

    Written course: https://bit.ly/3Oz6nKH

    Foundations are the what of your design system. The building blocks you'll use to create product experiences, like visual styles, colors, typography, and components. As well as patterns, like structures, behaviors, and conventions.

    ____________________________________________________

    Resources:

    Accessibility:

    The Book on Accessibility: https://bit.ly/3WC50gb
    Web Accessibility Checklist: Magenta a11y.com: https://bit.ly/3Ow00ru
    Color Blind Accessibility Manifesto.com: https://bit.ly/43oIuJO
    Adhoc Accessibility Playbook: https://bit.ly/3BP9eHR
    Universal Music: Creative Differences Handbook: https://bit.ly/424EM7g
    Stark's Public Library: https://bit.ly/3MuiUwf
    Book: Accessibility for Everyone: https://bit.ly/3q5KZm6
    Fable: Accessible Usability Scale: https://bit.ly/45rZQHB

    Color:

    WCAG 1.4.1 Use Of Color: https://bit.ly/3OxeqaT
    WCAG 1.4.4 Color Contrast: https://bit.ly/3ODYyDp
    Figma Community: Plugins For Color Contrast: https://bit.ly/3MS5Kuo
    Nielsen Norman Group: Using Color To Enhance Your Designs: https://bit.ly/42TCARb
    Color From DesignSystems.com: https://bit.ly/42XuMhg
    Figma Community: Resources For Color Palettes: https://bit.ly/43hxP4h
    Hubspot’s Color Theory 101: https://bit.ly/3OxkDDx

    Type:

    Typescale by Sam Smith: https://bit.ly/3WsNmLM
    Scaaale by Nicolas Massi: https://bit.ly/3BXDXlP
    Kick Start Your Typographic System by Tom Lowry: https://bit.ly/45oGfYW
    Typescale.com: https://bit.ly/45upBr0

    Other:

    A Complete Guide To Iconography: https://bit.ly/432HH1A
    Spacing. Grids, and Layouts: https://bit.ly/3ozKTCF

    ____________________________________________________

    00:00 - Introduction
    00:08 - Foundations
    00:35 - Accessibility
    01:39 - Color
    02:50 - Try it out
    03:08 - 60 / 30 / 10 Rule
    03:36 - Accessibility considerations for color
    03:58 - Web Content Accessibility Guidelines
    04:42 - Typography
    05:01 - Choosing a font
    05:42 - Type scale
    06:32 - Typography grid tip
    06:46 - Type scale hierarchy
    07:43 - Limits to a type scale
    08:19 - Try out an audit
    8:43 - Elevation
    9:12 - Elevation Tip
    9:32 - Bonus elevation tip
    9:45 - Iconography
    10:01 - Icon system styles
    10:37 - Testing an icon
    11:12 Try out search terms for icons
    11:36 - Icon size, container and padding
    11:58 - Icon styles needs
    12:15 - Icon grid
    12:22 - Grids, layouts and spacing
    12:51 - Layouts and breakpoints
    14:13 - Responsive or fluid breakpoints
    14:28 - Grids
    14:39 - Column grids
    15:20 - Baseline grids
    16:05 - Modular grids
    16:36 - Spacing
    17:33 - Inconsistency
    17:56 - Systematic thinking
    18:10 - Patterns
    19:14 - Wrap up

    ____________________________________________________

    Find us on ⬇️
    Twitter: https://twitter.com/figma
    Instagram: https://www.instagram.com/figma
    LinkedIn: https://www.linkedin.com/company/figma
    Figma forum: https://forum.figma.com/

    ____________________________________________________


    #Figma #Config #FigJam #Tutorial #NothingGreatIsMadeAlone #design #tips #DesignSystems

    AriRaNg

  • The evolution of React APIs and code reuse

    frontendmastery.com

    The evolution of React APIs and code reuse

    Trace the evolution of React APIs and the mental models behind them. From mixins to hooks, to RSCs, understand the tradeoffs along the way.

    dracure

  • 3분 Recoil

    velog.io

    3분 Recoil

    3분만에 Recoil을 훑어보고 리덕스와 비교합니다.

    dracure

  • 타입스크립트 타입 레벨 프로그래밍

    velog.io

    타입스크립트 타입 레벨 프로그래밍

    너희는 전혀 타입하고 있지 않아

    dracure

  • How React ACTUALLY works (DEEP DIVE 2023)

    youtube.com

    How React ACTUALLY works (DEEP DIVE 2023)

    Are you already working with the JavaScript framework React? Or do you want to learn it? No matter how much experience you have, this video will teach you how React work in detail! Some of the topics include, what is React, how can it be used in existing projects, how does reactivity work, how does React keep the UI in sync with the data and more.

    If you found this video helpful,
    please give it a like 👍 and subscribe 📨 for more.

    🐦 Follow me on Twitter
    https://twitter.com/0xAndriy

    ⏰ Timestamps
    0:00 Intro - What is React and what is it not?
    0:50 How to add React to (most basic way)
    2:24 React in combination with other tools
    3:21 What is JSX?
    5:17 Downside of JSX
    6:00 How React updates the DOM
    6:10 Updating the DOM - 1. Trigger
    8:33 Updating the DOM - 2. Render
    9:11 Updating the DOM - 3. Commit
    9:35 Why do we need the Virtual DOM?
    10:31 React diffing algorithm
    12:18 State persistence

    📎 Helpful links
    React Docs: https://react.dev/

    🎵 Where I get my music from
    Epidemic Sound: https://www.epidemicsound.com/referra...

    🤝 Services I use
    NordVPN - https://go.nordvpn.net/SH4vc

    🎥 My gear
    Monitor - Dell S3423DWC 34
    https://amzn.to/3XcAXuR

    Headphones - AKG K240 Studio
    https://amzn.to/3J7vAZJ

    Earbuds - Jabra Elite 4 Active
    https://amzn.to/3Hm4k8M

    Mic - HyperX SoloCast
    https://amzn.to/3QLS6tg

    Keyboard - Apple Magic Keyboard
    https://amzn.to/3GDz9UO

    Trackpad - Apple Magic Trackpad
    https://amzn.to/3CQAq9P

    Camera - Sony a6400
    https://amzn.to/3w4d7Wf

    Lens 1 - Sony 16-50mm f/3.5-5.6
    https://amzn.to/3iDSk99

    Lens 2 - Sony - FE 50mm F1.8 Standard Lens
    https://amzn.to/3GHFheU

    Lens 3 - Samyang SY12M-E-BK 12mm F2.0
    https://amzn.to/3WclDgM

    📬 Inquiries (Collabs, Sponsorships etc.)
    frontstartdev@gmail.com

    dracure

  • React JS + TypeScript로 영업 통계 페이지 개발한 경험

    cloudmt.co.kr

    React JS + TypeScript로 영업 통계 페이지 개발한 경험

    안녕하세요! SD팀(Service Development Team) 이예원입니다. 2022년 SD팀에서 개발한 IAM과 SalesOps부터 올해 진행 중인 Billing v3.0, RPM, SmartRep

    dracure

  • Envoy VS Nginx 성능 비교 테스트를 해봤다

    cloudmt.co.kr

    Envoy VS Nginx 성능 비교 테스트를 해봤다

    Envoy와 Nginx 둘 중 무엇을 쓸까? 한번쯤은 해본 고민일 것입니다. 그래서 간단히 성능 비교를 해보았습니다. 결론은 성능 차이는 있으나 나름의 장단점도 분명하다는

    dracure

  • 번들러 마이그레이션(Webpack to Vite)으로 빌드 속도 높이기

    cloudmt.co.kr

    번들러 마이그레이션(Webpack to Vite)으로 빌드 속도 높이기

    Vite는 Vue.js 팀이 개발한 웹 개발용 빌드 도구로 요즘 인기를 끌고 있습니다. 인기 비결은 뭐니해도 ‘속도’입니다. 개발과 빌드 속도가 매우 빠릅니다. Vite가 빠

    dracure

  • COM 라이브러리를 참조하는 .Net 앱의 컨테이너화

    cloudmt.co.kr

    COM 라이브러리를 참조하는 .Net 앱의 컨테이너화

    최근 통합 클라우드 빌링 서비스인 mateBilling 에서 사용하는 SOAP API 기반 카드결제 API 서버를 RESTful API 서버로 다시 개발하는 작업을 하고 있습니다. 그러면서 앱을 좀더 편리하게 배포하고

    dracure

  • Svelte 구축할 때 경험에 의한 장단점

    velog.io

    Svelte 구축할 때 경험에 의한 장단점

    내가 임시 글에 장황하게 쓰다 말았는데, 원래는 내 경험에 입각하여 소개하려고 했으나, 너무 거품 쩔어서 그냥 간략하게 작성하도록 하겠다.
    내 경험에 입각한 의견이 많으니, 크로스체크는 본인에 맡긴다.

    dracure

  • React SSR 스타일링에 개고생하는 이유

    velog.io

    React SSR 스타일링에 개고생하는 이유

    Next.js 같은 SSR 지원 가능한 프레임워크를 쓰면서 가장 고생하는 게 바로 스타일링일 것이다.물론 쌩으로 쓰는 건 지장 없는데 Styled components, emotion 등 스타일링을 리액트답게 체계적으로 관리할 수 있는 라이브러리를 사용할 경우 말이다.

    dracure

  • Promise 및 (Micro)Task 등의 비동기는 만능이 아니다

    velog.io

    Promise 및 (Micro)Task 등의 비동기는 만능이 아니다

    오늘은 프론트엔드 초보들이 주로 실수하는 패턴을 통해 왜 비동기에서 이렇게 하면 안되는지 설명하는 시간을 갖도록 하겠다.
    길게 설명하기 귀찮으니 자세히 알고싶으면 용어를 검색해서 찾아서 배우도록.

    dracure

  • 아일랜드 아키텍쳐

    velog.io

    아일랜드 아키텍쳐

    Astro 2.0이 출시되었지만 한국에서는 뭐 언제나 그랬듯이 뻔하게 관심이 그다지... 없는 참 삭막한 프론트엔드 분위기라고 하고 싶지만 그러면 니네들 기분 상할 테니 이미 말해버렸지만 할수없지 에라 모르겠다.

    dracure

  • SSR은 풀스택이 아니다 개정판

    velog.io

    SSR은 풀스택이 아니다 개정판

    내가 예전에 썼던 SSR은 풀스택이 아니다를 아예 갈아엎고 다시 쓴 판이라 보면 된다. 그때당시엔 맨탈 나간 상태로 썼기 때문에 어수선해서 정리 좀 해봤다. 어때 나 잘했찌? 찡긋.

    dracure

  • react와 vue 시장 차이

    velog.io

    react와 vue 시장 차이

    시장에서 react를 왜 선호하는지, 왜 vue를 선호하는지 차이점을 알려주도록 하겠다 아쎄이! jqeury 를 들었다면 희망을 버려라 아쎄이! 라이라이차차차.js

    dracure

라이브러리에 저장

좋아하는 강좌들을 수집하고 관리하고 공유하세요

닫기