프런트엔드 개발자로서 AI 활용 프로젝트를 해봐도 막상 이력서에 쓸 때는 고민이 많았다. 모델을 직접 다루는 것도 아니고, 프런트 입장에서 어필할 요소가 생각보다 적었기 때문이다. 이 책은 그런 경험을 어떻게 정리하고, 면접에서 어떤 질문이 나올 수 있으며 어떻게 대비해야 하는지 감을 잡게 해줬다. 개인적으로 가장 만족스러운 부분이었다.기술 파트도 알찼다. HTML, CSS, JavaScript 같은 기초부터 프레임워크, Next.js까지 과하지도 부족하지도 않은 분량으로 다뤄서 면접 준비 흐름 잡기에 좋았다. 여기에 인프라, 보안, 네트워크처럼 프런트엔드 개발자가 제대로 공부할 기회가 없던 주제까지 챙겨준 점도 반가웠다.AI 경험을 어떻게 보여줄지 막막한 프런트엔드 개발자, 기초부터 면접 범위를 한 권..

[[Korean FE Article] 리액트가 마침내 가장 큰 문제를 해결했습니다"useEffectEvent"의 묘미kofearticle.substack.com](https://kofearticle.substack.com/p/korean-fe-article-77f?utm_campaign=email-half-post&r=6zb57f&utm_source=substack&utm_medium=email)TL;DRuseEffect 내에서 state/props를 사용하면 오래된 값을 참조하는 "stale closure" 문제가 발생한다. 기존에는 useRef로 우회했지만, React 19.2의 useEffectEvent는 의존성 배열에서 state를 제거하면서도 항상 최신값에 접근할 수 있게 해준다.특히 타이머/구..

https://yozm.wishket.com/magazine/detail/3009/TL;DRthis는 함수가 호출될 때 결정되는 실행 문맥을 가리키는 예약어.어디서 선언되었나가 아니라 어떻게 호출되었나에 따라 변한다.전역 공간: 브라우저에선 window, Node.js에선 global일반 함수: 기본적으로 전역 객체메서드: 점 앞에 붙은 호출 객체생성자 함수: new로 생성된 새 인스턴스명시적 바인딩: call, apply, bind로 직접 주입한 객체Keyword바인딩: this와 특정 객체를 연결하는 과정Insight객체 안에 있는 변수 사용하라고 명령하는 것과 같음.

모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년 | 요즘IT플렉스 웹 제품은 일주일에 한 번 모든 제품이 함께 배포되는 정기 배포 체제로 운영되고 있었습니다. 웹 클라이언트 플랫폼 팀은 이 프로세스를 끝내고 각 스쿼드가 독립적으로 배포할 수 있도yozm.wishket.com### TL;DR플렉스(flex)팀이 3년간 비대해진 모노레포의 의존성 지옥을 해결하기 위해 14개의 레포지토리로 분리(폴리레포 전환)하고, 정기 배포 체제를 탈피한 1년 5개월간의 여정을 다룬다. 단순히 구조를 바꾸는 것이 아니라, 코드 간의 명확한 경계를 세우고 인지 부하를 줄인 것이 핵심이다. ### Keywords통 버저닝(Bundle Versioning): 수십, 수백 개의 패키지를 하나하나 개별적으로 버전 관리하는 게..

모노레포 이렇게 좋은데 왜 안써요?스냅, 패션톡, 체험단 등 커뮤니티 제품들을 운영하고 있는 무신사테크 커뮤니티 트라이브 프론트엔드 팀의 모노레포 도입기techblog.musinsa.com### TL;DR1. 왜 도입했는가? (문제 해결)무신사는 10개가 넘는 서비스를 따로 관리하다 보니 다음과 같은 문제가 있었다.반복 작업: 새 프로젝트를 만들 때마다 환경 설정(Lint, 설정 파일 등)을 처음부터 다시 해야 함.비효율: 공통 디자인 컴포넌트(버튼, 배너 등)를 프로젝트마다 각각 복사해서 쓰다 보니, 하나 고치면 10군데를 다 고쳐야 함.해결책: 모노레포를 도입해서 "설정"과 "공통 코드"를 한곳에 모으고, 모든 프로젝트가 이를 가져다 쓰도록 바꿨다.2. 어떻게 구현했는가? (기술적 전략)도구: Yar..

(번역) 리액트와 함께 일반적으로 사용되는 라이브러리들리액트를 처음 사용하는 경우, 함께 사용하는 라이브러리가 너무 많아서 압도될 수 있습니다. 이 글에서는 여러분이 방향을 잘 잡을 수 있도록 라이브러리들에 대한 간략한 요약을 제공합니다.velog.io### TL;DR 상태 관리 (State): #Zustand #ReduxToolkit #Jotai #Recoil데이터 통신 (Data Fetching): #TanStackQuery(React Query) #SWR스타일링 (Styling): #TailwindCSS #Styled-components #Emotion폼 & 유효성 (Forms): #ReactHookForm #ZodUI 컴포넌트 (UI Libs): #MUI #RadixUI #HeadlessUI###..

https://devowen.com/516TL;DR50줄 미만이면 복붙: 코드가 짧으면 설치하지 말고 소스 코드를 프로젝트에 직접 복사해서 쓸 것(Vendoring).배보다 배꼽: 50줄 쓰려고 수 메가바이트짜리 거대 라이브러리를 설치하는 건 보안과 성능에 죄악pnpm why나 lock 파일을 열어볼 것. 내가 설치 안 했어도 이미 프로젝트 안에 들어와 있는 코드가 많다.공짜 의존성 찾기: 이미 다른 라이브러리 때문에 설치된 패키지(예: esbuild)가 있다면, 그걸 활용해서 새 의존성 추가 비용을 '0'으로 만들자.Knip: 사용 안 하는 패키지와 파일을 찾아주는 '마법' 같은 도구. (강력 추천)Renovate: 업데이트를 미루지 말고 조금씩 자주 할 것.디스크/번들 분석기: Grand Perspe..

https://kofearticle.substack.com/p/korean-fe-article-tailwind-css-a08TLDR[&…] 구문을 사용한 임의 변형은 테일윈드의 유틸리티 클래스 패러다임 내에서 사실상 모든 CSS 선택자를 작성할 수 있게 한다. &는 해당 클래스가 적용된 요소를 나타내며, 그 뒤의 모든 것은 표준 CSS 선택자 구문(공백은 _로 대체)이다.keyword임의 변형: [...] 대괄호를 사용해 Tailwind에 없는 커스텀 선택자를 만드는 기능, Tailwind가 지원 안하는 복잡한 CSS 선택자도 직접 타이핑해서 먹일 수 있다는 뜻의 공식 명칭후손 선택자 & _ : CSS의 부모 자식 관계를 내부에서 표현하는 방식타이포그라피 플러그인 prose: [&_...] 노가다를 하지..

Link: https://ykss.netlify.app/translation/react_router_take_on_rsc/?utm_source=substack&utm_medium=emailTLDR리액트 라우터가 서버 컴포넌트(RSC) 지원을 추가하고 있다. 리액트 라우터의 RSC 접근 방식에 대해 알려준다.리액트 라우터 앱에서 RSC 활성화 방법부터, RSC 도입 전 사용하던 loader의 사용, 증분 마이그레이션, 서버 함수를 만드는 방법, loader에서의 RSC와 RSC 라우트 선택의 사례, 서버 컴포넌트 사용하면서 정적 빌드 가능한 점까지 언급한다. keywordreact routerloaderinsight- next.js를 따라가는 리액트 라우터의 모습이 상당히 인상적이었다.- 리액트 라우터의 ..

Tldr실무 보안 및 사용 전략1. 인증 토큰(JWT) 관리localStorage 주의: XSS(스크립트 탈취) 공격에 취약하므로 민감한 토큰 저장은 위험하다.쿠키 권장: HttpOnly 플래그를 설정하여 자바스크립트 접근을 차단하고, SameSite 옵션으로 CSRF 공격을 방어해야 한다.하이브리드 전략: 보안을 위해 Refresh Token은 HttpOnly 쿠키에, Access Token은 메모리나 sessionStorage에 두는 방식이 널리 쓰인다.2. 데이터 타입 관리Web Storage(로컬/세션)는 문자열만 저장 가능하다.객체나 배열을 저장할 때는 JSON.stringify()를, 불러올 때는 JSON.parse()를 사용해야 하며, 오류 방지를 위해 try-catch 문을 권장한다.3. ..