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

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

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

velog.io

3분 Recoil

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

dracure

velog.io

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

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

dracure

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

cloudmt.co.kr

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

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

dracure

cloudmt.co.kr

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

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

dracure

cloudmt.co.kr

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

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

dracure

cloudmt.co.kr

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

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

dracure

velog.io

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

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

dracure

velog.io

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

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

dracure

velog.io

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

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

dracure

velog.io

아일랜드 아키텍쳐

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

dracure

velog.io

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

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

dracure

velog.io

react와 vue 시장 차이

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

dracure