리액트 18 동시성 렌더링2025년 12월 14일3분이전 버전의 React(17 이하)에서 렌더링은 동기적이고 중단 불가능한 작업이었다. React 18은 이러한 문제를 해결하기 위해 동시성 렌더링을 도입했다. 핵심은 렌더링 성능 개선이 아니라, 중요한 작업을 먼저 처리할 수 있는 반응성을 확보하는 데 있다.
바퀴를 재발명하지 않기2025년 11월 23일4분프론트엔드 개발자라면 공감할 '바퀴 재발명'의 함정! 최적화와 통제권 강박이 본질을 흐리고 기술 부채를 낳는 이유를 가상의 인물 '코너씨'의 이야기로 풀어냅니다. 소유 효과, 매몰비용 오류와 같은 심리적인 요인까지 분석하며, 핵심 문제에 집중하고 나머지는 위임하는 진정
NPM: Git과 Tarball로 의존성 관리2025년 11월 16일4분회사 디자인 시스템을 수정하며 개발해야 했으나, 정식 배포는 너무 오래 걸렸습니다. 동료 팁으로 Git/Tarball로 직접 설치하는 법을 알게 되었습니다. 프라이빗/베타 버전 관리에 매우 효율적이겠습니다.
자바스크립트를 원래 자리에 되돌려 놓기2025년 9월 4일7분장고 풀스택에서 Next.js로 전환했다가 다시 장고로 복귀한 경험을 다룬 글. 리액트 서버 컴포넌트(RSC)의 한계와 Vite, 섬 아키텍처를 활용한 현대적 풀스택 개발 방식을 설명합니다.
앵귤러는 화면을 어떻게 그릴까?2025년 4월 6일10분앵귤러 성능 개선의 핵심, 렌더링 원리 이해하기! Zone.js부터 변경 감지, 실제 DOM 업데이트까지 앵귤러의 작동 방식을 배우고, OnPush 전략을 적용하여 앱 성능을 최적화하는 방법을 알아보세요.
Sass @import 및 Legacy API 해결 방법2024년 11월 21일3분Sass의 @import 구문이 Dart Sass 3.0.0에서 사용 중단되며, Legacy JS API도 더 이상 지원되지 않습니다. 이 글에서는 @use와 @forward로의 전환 방법을 설명하고, Vite에서 Legacy API 경고를 해결하는 방법을 안내합니다. Sass와 Vite 설정을 최신 상태로 유지하여 원활한 개발 환경을 구축하세요.
쉐도우 돔을 스타일링 하는 방법2024년 9월 8일14분HTML은 모두 DOM으로 변환된다. DOM은 자바스크립트로 엑세스하고 CSS로 스타일링 할 수 있다. Shadow DOM은 요소 내부에 Shadow DOM 이라는 자체 DOM을 생성할 수 있다. 웹 사이트의 소스를 보다가 위와 같은 것을 발견한다면 그것이 쉐도우 돔이 적용된 것이다. Shadow DOM을 사용하는 이유? 페이지의 다른 자바스크립트나 CSS로 부터 컴포넌트를 보호 컴포넌트에 대한 …
리액트 18 서스펜스 (Suspense)2024년 7월 6일2분React Suspense는 비동기 작업 완료까지 컴포넌트 렌더링을 잠시 멈추고, 로딩 상태를 보여줍니다. Suspense 컴포넌트는 fallback 속성을 사용해 대기 UI를 정의하며, React.lazy로 동적 로딩을 지원합니다. API fetch와 메모리 캐싱 기법을 통해 비동기 데이터 관리를 효율화합니다.
웹 앱 API 개발을 위한 GraphQL 1~4장 정리2024년 4월 27일15분GraphQL을 보다 잘 사용하기 위해서 '웹 앱 API 개발을 위한 GraphQL' 도서의 1-4장 부분에서 새롭게 알게된 것이나 주요한 내용들을 정리하였습니다. GraphQL 소개, 그래프 이론, GraphQL 쿼리 작성과 스키마 설계에 대한 내용을 다루고 있습니다.
리액트 19 서버 컴포넌트 (RSC)2024년 3월 11일2분리액트 18에서 Server Component 라는 개념이 추가되었다. 서버 컴포넌트란? 서버에서 렌더링되는 컴포넌트이다. (이 이상의 표현이 아직은 떠오르지 않는다.) 하지만 사실 리액트에서는 이미 컴포넌트를 서버에서 렌더링 하는 방법을 제공하고 있었다. 근데.. 왜.. 필요..? 기존 컴포넌트를 서버 사이드 렌더링 (이하 SSR) 할 때 어떤 문제들이 있었을까? 1. 하이드레이션사용자는 서버에서 렌더링 된 HTML과 …
이번 SPA 개발은 앵귤러 어떠세요?2023년 11월 3일12분SPA(Single Page Application)는 하나의 HTML 파일에서 사용자가 웹 사이트의 모든 기능을 사용할 수 있는 웹 애플리케이션 형태를 나타냅니다. SPA는 웹 페이지를 새로고침하지 않고 필요한 영역만 업데이트하여 사용자에게 빠른 상호작용을 제공하며, 웹 사이트를 컴퓨터 프로그램이나 모바일 앱과 유사한 경험으로 만들어줍니다. 여기서는 앵귤러를 활용한 SPA 개발에 대한 내용을 다루고 있습니다.
Svelte의 상태 관리2023년 6월 21일9분이 글은 바닐라 JavaScript로 프론트엔드를 개발하다가 복잡성에 직면하여 Svelte를 적용하고 얻은 경험에 대해 이야기합니다. Svelte의 상태 관리 및 리액티브 선언, 전역 스토어 및 구독 스토어 등의 기능에 대해 다루고 있습니다. 이를 통해 Svelte가 UI 관리를 효율적으로 할 수 있는 방법을 제공한다는 점을 이야기 합니다.
실용적인 프론트엔드 테스트2022년 5월 11일4분프론트엔드 테스트에 대한 고민과 어려움을 다룬 글입니다. 클린 아키텍처에서 설명하는 테스트의 이유와 프론트엔드에서 테스트할 내용, 시각적 요소의 검증 방법, 기능적 테스트 방법, 그리고 Jest와 Cypress의 사용에 대한 내용이 담겨있습니다. 테스트는 비용이며, 시각적 테스트와 기능적 테스트를 분리하고 전문 도구를 고려하는 것이 좋습니다.
GitHub Action으로 Yew.rs 배포하는 방법2022년 3월 2일2분YewYew는 React와 유사한 구조를 Rust 기반으로 개발한 프론트엔드 프레임워크로, WASM으로 배포됩니다. Rust 개발환경에서 WASM 빌드 시 필수적으로 실행해야하는 rustup target add wasm32-unknown-unknown 명령어와 GitHub Action을 이용한 자동화 방법에 대해 설명하고 있습니다.
[JavaScript] badland의 상태 관리2022년 1월 21일11분필자는 프론트엔드 어플리케이션의 전역 상태 관리를 위해서 badland라는 라이브러리를 활용하고 있다. 이 글은 후에 면접에서 "상태관리 어떻게 하셨어요?"라고 묻는 질문에 답하기 위해서 작성하는 글이다. badland· GitHub @baealex # 우선 널리 알려진 상태 관리 라이브러리를 사용하지 않은 이유는 Redux의 상태관리가 지나치게 복잡해 보였기 때문이었고, Recoil은 간단했으나 (그 당시) IE에서 비정상적인 동작을 …
Python으로 웹 프론트엔드 개발하기2021년 12월 25일17분Brython은 자바스크립트 대신 파이썬3를 이용하여 웹 클라이언트 사이드 개발을 할 수 있도록 지원하는 프로젝트이다. 이 글에서는 Brython의 사용법과 간단한 예제 코드를 소개하며, 자바스크립트와의 차이점도 다룬다. Brython은 파이썬 문법과 브라우저 API를 모두 사용할 수 있으며, 자바스크립트에서 사용하는 getElementById와 querySelector 메서드도 제공한다. 또한, 타이머 함수인 set_timeout과 set_interval도 지원하고 있다.
장고에 TypeScript와 SCSS 도입하기2020년 6월 9일8분프론트엔드 개발에서 ES6 문법과 TypeScript, SCSS를 도입하면서 코드의 가독성과 유지보수성이 높아졌다. 이를 위해 Node.js를 사용하여 자동으로 트랜스파일링하는 코드를 작성하였다. Python으로도 시도하였지만 Node.js가 더 효율적이었다.
Electron 시작하기 (With React)2020년 4월 24일17분일렉트론은 Web Stack을 이용하여 데스크톱 어플리케이션을 개발할 수 있는 도구이다. GitHub에서 Atom을 제작하기 위해서 만들었으며 일렉트론을 사용하여 만들어진 어플리케이션은 Slack, VS Code, Discord가 있다. 기본적으로 크로미움을 내장하고 있는 것으로 보인다. 프레임워크 구성 main.js 메인 프로세스 데스크톱 앱의 백엔드 역할을 수행 앱 자체의 총괄적인 부분(Node.js와 거의 동일) 업데이트 제어 OS GUI …
한 달 안에 취업하기 #82020년 2월 2일3분오늘 할 일 알고리즘 1문제 SPA 프로젝트 진행 프로그래밍 관련 영상 리뷰해보기 알고리즘 1문제 오늘의 문제: https://app.codesignal.com/arcade/intro 친구의 추천으로 위의 사이트에 들어가 intro 1,2,3번 문제를 풀었다. 앞으로 이곳의 문제를 좀 풀어보려고 한다. 문제도 영어로 되어있어서 녹슬어있는 영어실력에 기름칠도 할 겸. 원어라 문제수도 많고 종류도 다양해보여서 기존의 Programmers는 잠시 중단할 예정이다. …
한 달 안에 취업하기 #72020년 2월 1일2분오늘 할 일 알고리즘 1문제 SPA 프로젝트 진행 프로그래밍 관련 영상 리뷰해보기 알고리즘 1문제 오늘의 문제 : 문자열 내 p와 y의 개수 솔루션 : GitHub SPA 프로젝트 진행 SPA Project 개발 노트 프로그래밍 관련 영상 리뷰해보기 오늘의 영상 : 테크보이 워니 - 개발자의 포트폴리오 - 취업을 위한 포트폴리오 완벽 가이드 …
한 달 안에 취업하기 #62020년 1월 30일2분오늘 할 일 알고리즘 1문제 SPA 프로젝트 프로그래밍 관련 유튜브 리뷰해보기 알고리즘 1문제 오늘의 문제 : 구명보트 Github SPA 프로젝트 [SPA Project] 개발노트 프로그래밍 관련 유튜브 리뷰해보기 오늘의 영상 : VELOPERT 최초 공개?! React계의 문익점이 말하는 프론트엔드 개발 React의 아버지 Velopert님의 인터뷰 영상이 있길래 가져와봤다. 전체적으로 React의 장점을 나열해 놓은 …
한 달 안에 취업하기 #52020년 1월 29일1분오늘 할 일 알고리즘 1문제 velopert님의 React Router 강의 수강 SPA 프로젝트 최대한 진행해보기 알고리즘 1문제 오늘의 문제 : 가장 큰 수 Programmers GitHub 필자는 매일 알고리즘을 1문제씩 풀고있는 스터디에 참여중이다. 그리고 얼마전부터 level 1에서 level 2로 올렸는데 하루하루 문제푸는게 쉽지가 않다. 오늘은 스터디를 시작한 후 첫 실패작이다. 테스트 케이스에만 …
한 달 안에 취업하기 #42020년 1월 28일6분오늘 할 일 알고리즘 1문제 Javascript Array 메소드 공부 SPA 프로젝트 주제 선정 프로젝트 최대한 진행해보기 기업 리뷰 1곳 프로그래밍 관련 유튜브 영상 1개 리뷰 알고리즘 1문제 GitHub Math.floor(x) : x보다 작은 정수중 최대값을 return Javascript Array 메소드 공부 Javascript Array Method 정리 SPA 프로젝트 주제 선정 고민을 많이 했는데 …
한 달 안에 취업하기 #32020년 1월 27일6분오늘 할 일 알고리즘 1문제 (programmers level 2로) Node.js 공부 최대한 해보기 기업 리뷰 1곳 프로그래밍 관련 유튜브 영상 1개 리뷰 알고리즘 1문제 GitHub array.some 개념을 사용하여 풀었다. Node.js 공부 최대한 해보기 이건 진짜 변명이 아니라 지금은 Node.js 할 떄가 아닌것 같습니다.. 그 어제 TodoList 프론트를 짜는데 생각대로 척척 짜지지가 …
![[JavaScript] badland의 상태 관리](/resources/media/images/title/2022/1/21/baealex/1_Z5zBqApg.png.minify.png)
