한정님 글 목록

한정

프론트엔드 개발자@LINE+

Seoul, Korea

Joined on 2022년 01월 04일

12:39 1/04

junghan92.medium.com

12:39

junghan92.medium.com

Stories by Jung Han on Medium
https://junghan92.medium.com/

Stories by Jung Han on Medium

저작도구: Medium

최종 피드 수집: 2025-01-13 18:16

전체 (60)

(번역) 프런트엔드 아키텍처 시각화하기

원문: https://frontendatscale.com/issues/17
이해하기 쉬운 프런트엔드 아키텍처 다이어그램을 그리는 방법
안녕하세요, 여러분! 👋 지난 몇 주 동안 프런트엔드 아키텍처 워크숍 준비를 열심히 해왔는데요

000

읽기모드

18d

(번역) 예제와 함께하는 유스 케이스(Use Case) 테스팅 튜토리얼

원문: https://www.lambdatest.com/learning-hub/use-case-testing
개요
유스케이스 테스트는 시작부터 끝까지 시스템의 모든 트랜잭션을 포괄하는 테스트 케이스를 식별하는 데 도움이 되는 블랙

000

읽기모드

18d

(번역) 상태 전이(State transition) 테스팅 기법

원문: https://testsigma.com/blog/state-transition-testing/
소프트웨어 시스템이 점점 더 복잡해지면서 시스템의 동작이 신뢰할 수 있으며 예측할 수 있도록 보장하는 것이 더욱 중요해지고 있습

000

읽기모드

18d

(번역) 의사결정 테이블(Decision Table) 테스팅 완벽 개요

원문: https://testsigma.com/blog/decision-table-testing/
소프트웨어 테스팅 업계에서는 “완벽한 테스팅은 신화이며 실현 불가능하다”라는 말이 있습니다. 이를 뒷받침하듯 각각의 장단점을 가진

000

읽기모드

(번역) GeeksForGeeks > 테스팅 기법

GeeksForGeeks > Testing Techniques 목차의 세 글을 번역해 공유드립니다.
동등 분할 기법(Equivalence Partitioning Method)
소프트웨어 테스팅 — 경곗값 분석(Boundary Va

000

읽기모드

(번) 빌드 시스템 없이 프런트엔드 자바스크립트 라이브러리 불러오기

(번역) 빌드 시스템 없이 프런트엔드 자바스크립트 라이브러리 불러오기
원문: https://jvns.ca/blog/2024/11/18/how-to-import-a-javascript-library/
저는 빌드 시스템 없이 자바스크

000

읽기모드

(번역) 리액트 컴파일러 사용법 — 완벽 가이드

(번역) 리액트 컴파일러 사용법 — 완벽 가이드
원문: https://www.freecodecamp.org/news/react-compiler-complete-guide-react-19/
이 튜토리얼에서는 리액트 컴파일러가 어떻게

react-compiler

react

000

읽기모드

(번역) 구글이 색인 과정에서 자바스크립트를 처리하는 방법

원문: https://vercel.com/blog/how-google-handles-javascript-throughout-the-indexing-process
MERJ와 버셀의 실증적 연구를 통해 구글의 렌더링 과정을 밝혀보겠습

google

seo

javascript

000

읽기모드

(번역) 디자인 시스템에 적합한 코드

원문: https://www.figma.com/ko-kr/blog/introducing-code-connect/
오늘, 우리는 코드 연결(Code Connect)기능 베타 버전을 발표합니다. 이는 개발자들에게 코드를 더 나은 접근

figma

design-systems

frontend-development

000

읽기모드

오늘 리액트 컴파일러를 사용해 봤는데, 어땠을 것 같나요?

오픈소스화된 리액트 컴파일러를 사용해 이제 리액트에서 메모이제이션을 사용할 필요가 없는지 살펴봅니다.
원문: https://www.developerway.com/posts/i-tried-react-compiler
제가 생각해 낸

compilers

react

000

읽기모드

(번역) 웹에서 텍스트 크기 조정에 대해 다시 생각하기

원문: https://medium.com/airbnb-engineering/rethinking-text-resizing-on-web-1047b12d2881
에어비앤비는 큰 글자가 필요한 호스트와 게스트를 위한 웹 접근성 개선에 상

fonts

frontend

000

읽기모드

리액트 네이티브 0.74 — Yoga 3.0, 브릿지 없는 새로운 아키텍처 등

리액트 네이티브 0.74 — Yoga 3.0, 브릿지 없는 새로운 아키텍처 등
원문: https://reactnative.dev/blog/2024/04/22/release-0.74
오늘 리액트 네이티브 0.74가 출시됩니다! 이번

frontend

react-native

000

읽기모드

(번역) 리액트 컴파일러의 타입 시스템

원문: https://www.recompiled.dev/blog/type-system/
리액트 컴파일러가 무엇인지 궁금하다면 최근 업데이트 글에서 배경지식을 읽어보시기를 바랍니다. 이 글은 컴파일러의 이론이 궁금한 분들을 위한 글

react

compilers

000

읽기모드

10M

(번역) 컴파일러 이론과 반응성

원문: https://www.recompiled.dev/blog/ssa/
리액트 컴파일러는 컴파일러 이론에 대한 배경지식 없이 이해하기 어려운 다양한 전통적인 컴파일러 변환(transform)을 구현합니다. 이 글에서는 정적 단일

react

compilers

000

읽기모드

10M

(번역) 머신러닝을 배우지 마세요

ML모델을 사용해 소프트웨어를 빌드하는 방법을 학습하세요
원문:https://medium.com/@calebkaiser/dont-learn-machine-learning-8af3cf946214
면책 사항: 이 글은 업계에 대한 학

machine-learning

000

읽기모드

10M

(번역) DDD, Hexagonal, Onion, Clean, CQRS, … 이 모든 것을 어떻게 함께 사용할까요?

(번역) DDD, Hexagonal, Onion, Clean, CQRS, … 이 모든 것을 어떻게 함께 사용할까요?
원문: https://herbertograca.com/2017/11/16/explicit-architecture-

clean-architecture

architecture

ddd

hexagonal-architecture

000

읽기모드

11M

동형 매핑 타입(homomorphic mapped type)이 도대체 뭔가요?

원문: https://andreasimonecosta.dev/posts/what-the-heck-is-a-homomorphic-mapped-type/
도입
예전에 처음으로 타입스크립트 핸드북을 통해 “동형”이라는 용어를 봤을 때

typescript

000

읽기모드

당신은 고품질 소프트웨어를 구축하는 방법을 배운 적이 없습니다

(번역) 당신은 고품질 소프트웨어를 구축하는 방법을 배운 적이 없습니다
원문: https://www.florianbellmann.com/blog/never-taught-qa
개요
중요한 QA 조치가 누락된 소프트웨어 프로젝트에 참

software-development

000

읽기모드

(번역) 시그널(Signals)

원문: https://preactjs.com/guide/v10/signals
시그널은 앱 상태를 관리하기 위한 반응형 상태 기본 요소(primitive)입니다.
시그널의 가장 큰 차별점은 컴포넌트와 UI의 상태 변경을 가능한 가장

frontend

signal

preact

000

읽기모드

(번역) CRDT에 대한 인터랙티브 입문

원문: https://jakelazaroff.com/words/an-interactive-intro-to-crdts/
CRDT에 대해 들어 본 적이 있고, 무엇인지 궁금한 적이 있나요? 알아보긴 했지만 학술 논문과 수학 전문 용어

javascript

crdt

frontend

003

읽기모드

(번역) 웹 성능을 개선하기 위한 세 가지 큰 수단에 대한 레이아웃 위치의 영향

원문: https://performance.shopify.com/blogs/blog/how-layout-position-impacts-three-big-web-performance-levers
우리는 Shopify 판매자들의 웹

frontend

performance

000

읽기모드

(번역) 어떻게 우리는 자바스크립트 번들 크기를 33% 줄였는가?

원문: https://dropbox.tech/frontend/how-we-reduced-the-size-of-our-javascript-bundles-by-33-percent
웹 사이트에서 버튼을 클릭하려다가 페이지가 이동해 엉뚱

rollup

javascript

002

읽기모드

npm 생태계 중심에 있는 거대한 버그

원문: https://blog.vlt.sh/blog/the-massive-hole-in-the-npm-ecosystem
역자 주: tarball은 npm에서 사용되는 압축 파일 형식입니다. tarball은 일반적으로 .tgz 확장

node

npm

000

읽기모드

(번역) 자바스크립트로 첫 ChatGPT 플러그인 만들기

원문: https://www.sitepoint.com/javascript-chatgpt-plugin/
챗 플러그인 시스템은 ChatGPT의 기능을 확장하고, 자체 비즈니스 데이터를 통합하며, 고객이 비즈니스와 상호작용할 수 있는

chatgpt

javascript

000

읽기모드

(번역) Next.js의 app 디렉터리 아키텍처 이해하기

원문: https://www.smashingmagazine.com/2023/02/understanding-app-directory-architecture-next-js/
짧은 요약: 새로운 app 디렉터리 아키텍처는 최근 출시된

javascript

react

nextjs

000

읽기모드

(번역) 리액트 vs Signals: 10년이 지난 지금

원문: https://dev.to/this-is-learning/react-vs-signals-10-years-later-3k71
윈스턴 처칠은 이런 말을 했습니다.
역사로부터 배우지 못한 사람은 그 역사를 되풀이할 수밖에 없는

signal

qwik

solid

react

000

읽기모드

(번역) 자바스크립트 Signal의 진화

원문: https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob
최근 프런트엔드 생태계에서 ‘Signal’이라는 용어에 대한 논의가 활발하게 이뤄지고 있

javascript

solidjs

qwik

+ 더보기

002

읽기모드

(번역) ‘Create React App 권장을 Vite로 대체’ PR 대한 Dan Abramov의 답변

PR 링크: https://github.com/reactjs/reactjs.org/pull/5487
배경지식
미국 유튜버이자 CEO인 Theo는 React Docs에서 최근 별다른 발전이 없는 CRA를 권장하고 있는 문구를 제거하

frontend

vitejs

create-react-app

react

000

읽기모드

Korean FE Article 1년 회고

번역 활동인 Korean FE Article이 어느덧 1년이 다 되어간다. 연말이 다가오기도 했고 생각을 한번 정리할 때가 된 것 같아서 회고를 해보려 한다.
2022
Korean FE Article은 22년 1월 30일 ‘How

frontend

000

읽기모드

(번역) 어쨌든 함수형 프로그래밍의 장점은 뭔가요?

원문: https://jrsinclair.com/articles/2022/whats-so-great-about-functional-programming-anyway/
이 글은 제 책 ‘함수형 프로그래밍에 대한 회의론자의 가이드’의

functional-programming

javascript

000

읽기모드

(번역) 우리가 CSS-in-JS와 헤어지는 이유

원문: https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b
안녕하세요. 저는 Sam입니다. Spot의 소프트웨어 엔지니어 이자 널리 사용되고 있는 CSS-in-JS

javascript

frontend

css-in-js

emotionjs

000

읽기모드

(번역) 리액트 렌더링의 미래

원문: https://prateeksurana.me/blog/future-of-rendering-in-react/
UI 제작 라이브러리로서 리액트의 인기는 시간이 지날수록 점점 더 빠르게 증가하고 있습니다. 라이브러리 인기도를 나

react18

react

frontend

000

읽기모드

next/future/image 소개

next.js를 사용하시는 분들은 이미 아시겠지만 next/image라는 이미지 컴포넌트가 존재합니다. img태그를 직접 사용하지 않고 next/image 컴포넌트를 사용하는 것을 권장하고 있는데요. 문서에 소개된 장점을 살펴보면

javascript

react

frontend

nextjs

000

읽기모드

(번역) 세분화된 반응형(Fine-Grained Reactivity)에 대한 핸즈온 소개

원문: https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf
반응형 프로그래밍은 수년간 존재해왔지만, 유행이었다 다시 사라지는 것으로 보입

solidjs

reactive-programming

reactive

javascript

000

읽기모드

(번역) 재개 가능성(Resumability), 그게 뭐야?

원문: https://dev.to/this-is-learning/resumability-wtf-2gcm
최근 들어 재개 가능성이라는 용어를 들어본 적이 있을 겁니다. 누군가가 Miško Hevery의 새로운 프레임워크인 Qwik의

frontend

marko

javascript

009

읽기모드

(번역) V8 함수 최적화

원문: https://erdem.pl/2019/08/v-8-function-optimization
설치 (선택)
당신의 컴퓨터에서 실행하길 원하지 않는다면, 이 섹션을 건너뛰세요.
먼저 전체 패키지(노드 혹은 웹 브라우저) 없이

javascript

chrome

000

읽기모드

JSON.stringify() 가속화 라이브러리 살펴보기

JSON 메서드 많이 사용하시죠? 저도 크지 않은 객체, 그리고 특정 객체나 함수가 담기지 않은 경우에(함수나 정규식, Date 등등..) 딥 카피가 필요한 경우 아래의 코드처럼 자주 사용하곤 했는데요.
Continue readi

javascript

json

stringify

0037

읽기모드

(번역) 주의 깊게 XMLHttpRequest 재시도하기

원문: https://lofi.limo/blog/retry-xmlhttprequest-carefully
Continue reading on Medium »

error-handling

javascript

xhr

000

읽기모드

(번역) 엣지(Edge) 컴퓨팅이 뭘까요? 강아지 모자를 뜨개질하는 것과 같습니다.

원문: https://austingil.com/edge-compute-knitted-dog-hats/
Continue reading on Medium »

frontend

remix

edge-computing

000

읽기모드

새로운 “Performance Insights” 개발자 도구 살펴보기

개요
Continue reading on Medium »

devtools

000

읽기모드

(번역) :where() :is() :has()? 당신의 삶을 더 쉽게 만들어 줄 새로운 CSS 선택자

원문: https://polypane.app/blog/where-is-has-new-css-selectors-that-make-your-life-easier/
멋진 도구를 만들고 좋은 글을 작성해주신 Polypane팀에게 감사를

css

css-selectors

000

읽기모드

(번역) 네 시대의 자바스크립트 프레임워크

원문: https://www.pzuraq.com/blog/four-eras-of-javascript-frameworks
Continue reading on Medium »

frontend

javascript

001

읽기모드

(번역)자바스크립트 함수 합성, 뭐가 그렇게 대단할까?

원문: https://jrsinclair.com/articles/2022/javascript-function-composition-whats-the-big-deal/
Continue reading on Medium »

functional-programming

javascript

composition

0011

읽기모드

(번역) 레이아웃 알고리즘 이해하기

CSS를 보다 직관적으로 만드는 멘탈 모델 전환
Continue reading on Medium »

layout

css

009

읽기모드

재택용 사무실을 만들었습니다

창업을 한건 아니구요..
Continue reading on Medium »

001

읽기모드

(번역) 명확한 리액트 파일/디렉터리 구조

원문: https://www.joshwcomeau.com/react/file-structure/
Continue reading on Medium »

javascript

frontend

typescript

react

000

읽기모드

(번역) Solid.js는 내가 항상 바랬던 React의 모습입니다

원문: https://typeofnan.dev/solid-js-feels-like-what-i-always-wanted-react-to-be/
Continue reading on Medium »

react

reactjs

solidjs

000

읽기모드

(번역) 리액트 네이티브의 새로운 아키텍처 톺아보기

원문 : https://medium.com/coox-tech/deep-dive-into-react-natives-new-architecture-fb67ae615ccd
Continue reading on Medium »

react-native

react

architecture

0013

읽기모드

(번역) Remix vs Next.js

Remix와 Next.js의 객관적인 비교
Continue reading on Medium »

react

remix

nextjs

000

읽기모드

(번역) How React server components work: an in-depth guide

원문: https://blog.plasmic.app/posts/how-react-server-components-work/#what-are-react-server-components
Continue reading on Medium

reactjs

javascript

react

009

읽기모드

(번역) Memoization으로 더 빠른 React Apps 만들기

Original Article: https://blog.px.dev/ui-performance/
Author: Nick Lanam
Continue reading on Medium »

react-devtools

react

000

읽기모드

playwright test로 E2E 테스트 하기(vs. Cypress)

들어가기
Continue reading on Medium »

cypress

javascript

e2e-testing

+ 더보기

007

읽기모드

라이트하우스 성능 지표 살펴보기

아주 조금만 더 알아보기🔎
Continue reading on Jung-han »

frontend

lighthouse

performance

002

읽기모드

d3-geo, TopoJSON, canvas를 이용한 맵 차트 그리기

TOAST UI Map Chart 4를 새롭게 준비하면서 조사했던 지도 그리는 방법에 대해 간단하게 공유하려고 합니다.
Continue reading on Medium »

javascript

maps

toastui

+ 더보기

000

읽기모드

CodeSandbox 활용하기

프런트엔드 개발자를 위한 CodeSandbox CLI, API 활용방법
Continue reading on Jung-han »

codesandbox

javascript

000

읽기모드

모든길은 Rome으로 통할까?

[번역] 모든 길은 Rome으로 통할까?
Front-end 툴 체인 Rome 훑어보기
원문: https://aralroca.com/blog/do-all-roads-lead-to-rome
Rome이 무엇인지, 자바스크립트 생태계에

rome

toolchain

javascript

development

000

읽기모드

prettier 2.0 에서 달라진 옵션 살펴보기

prettier 2.0은 두 달 전(2020.3) 정식 릴리즈되었습니다. 바로 적용을 하려다 조금 기간을 두고 적용하자는 의견이 있어 쪼-금 두고 봤습니다. 두 달 정도 시간이 지나 Chart 4.0 개발에 Prettier2.0을

prettier

codeformatter

front-end-development

development

000

읽기모드

expo로 앱 만들어본 후기(vs vanilla react-native)

함께해서 즐거웠고 다신 만나지 말자✋
이 글에서는 expo를 통해 앱을 하나 만들고 출시를 하면서 느꼈던 점을 담았습니다. 개인적인 느낌이며 경험이었기 때문에 만약 잘못된 내용이 있으면 댓글로 알려주시면 바로 수정하도록 하겠습니다

development

react-native

expo

000

읽기모드

Github Action을 마켓에 등록해보자

지난 글에서는 github actions를 이용해 workflow를 만드는 법을 소개했다. 이번 시간은 Github Market place에 등록되어있는 액션들처럼 쉽게 가져다가 쓸 수 있는 액션을 만들어보려고 한다.
마켓에 등록

github-actions

development

open-source

browserstack

000

읽기모드

(사용자를) 생각하게 하지마!

📖 책 읽고 필요한 내용 정리하기
사용자를 생각하게 하지 마!
초판이 나온지 벌써 20년 정도 되었다. 3번의 개정이 이뤄졌지만 마지막 개정은 14년도였다. 5년이 훨씬 더 넘게 시간이 흘렀다. 책을 살 때 약간의 걱정을 했지만

review

002

읽기모드

Stories by Jung Han on Mediumhttps://junghan92.medium.com/

Stories by Jung Han on Medium
https://junghan92.medium.com/