앵귤러는 화면을 어떻게 그릴까?
10분
앵귤러 성능 개선의 핵심, 렌더링 원리 이해하기! Zone.js부터 변경 감지, 실제 DOM 업데이트까지 앵귤러의 작동 방식을 배우고, OnPush 전략을 적용하여 앱 성능을 최적화하는 방법을 알아보세요.
Sass @import 및 Legacy API 해결 방법
3분
Sass의 @import 구문이 Dart Sass 3.0.0에서 사용 중단되며, Legacy JS API도 더 이상 지원되지 않습니다. 이 글에서는 @use와 @forward로의 전환 방법을 설명하고, Vite에서 Legacy API 경고를 해결하는 방법을 안내합니다. Sass와 Vite 설정을 최신 상태로 유지하여 원활한 개발 환경을 구축하세요.
쉐도우 돔을 스타일링 하는 방법
14분
HTML은 모두 DOM으로 변환된다. DOM은 자바스크립트로 엑세스하고 CSS로 스타일링 할 수 있다. Shadow DOM은 요소 내부에 Shadow DOM 이라는 자체 DOM을 생성할 수 있다. 웹 사이트의 소스를 보다가 위와 같은 것을 발견한다면 그것이 쉐도우 돔이 적용된 것이다. Shadow DOM을 사용하는 이유? 페이지의 다른 자바스크립트나 CSS로 부터 컴포넌트를 보호 컴포넌트에 대한 …
React Suspense에 대해서 알아보자
7분
React Suspense는 비동기 작업 완료까지 컴포넌트 렌더링을 잠시 멈추고, 로딩 상태를 보여줍니다. Suspense 컴포넌트는 fallback 속성을 사용해 대기 UI를 정의하며, React.lazy로 동적 로딩을 지원합니다. API fetch와 메모리 캐싱 기법을 통해 비동기 데이터 관리를 효율화합니다.
BLEX 2024 4월 개발노트
4분
BLEX의 2024년 4월 개발노트입니다. 초대장을 도입하여 오픈형 블로그에서 다소 폐쇠적인 서비스로 변경되었습니다. 메인 페이지, 프로필 페이지의 디자인이 리뉴얼 되었으며 시리즈 페이지의 UI가 개선되었습니다. 개발노트에 작성한 작업들을 진행하며 느낀점을 담은 월간회고를 작성하였습니다.
웹 앱 API 개발을 위한 GraphQL 1~4장 정리
15분
GraphQL을 보다 잘 사용하기 위해서 '웹 앱 API 개발을 위한 GraphQL' 도서의 1-4장 부분에서 새롭게 알게된 것이나 주요한 내용들을 정리하였습니다. GraphQL 소개, 그래프 이론, GraphQL 쿼리 작성과 스키마 설계에 대한 내용을 다루고 있습니다.
Docker 이미지 사이즈 최적화
4분
문득 내가 이용하는 도커 이미지들의 사이즈가 엄청 작다는 것을 알게 되었다. 내가 빌드한 것은 GB 단위여서 당연히 그게 정상인 줄 알았는데 애용한던 filebrowser/filebrowser는 30.6MB밖에 되지 않았다. 그래서 이번에 이미지 사이즈를 최적화 하는 방법에 대해서 알아 보았다. 시험삼아 이미지 사이즈를 최적화해 볼 이미지는 sd-prompt-palette 프로젝트다.
2024 1분기 회고
11분
1월 회고[업무]회사에서 중요한 프로젝트를 진행중이다. 이 작업을 하면서 내가 주체적으로 일하지 않는다는 생각이 강하게 들었다. 그냥 시키는 대로만 하고 그 외에 부분은 크게 신경쓰지 않는 태도로 작업을 했던것 같다. 아직 업무에 익숙하지 않아서 그런걸 수도 있겠지만, 다음 프로젝트에서는 개선하도록 해야겠다. [되고 싶지 않은 모습]뭘 해야될지 모를 때... 삶의 목표를 잡아주는 …
React - Server Component
3분
리액트 18에서 Server Component 라는 개념이 추가되었다. 서버 컴포넌트란? 서버에서 렌더링되는 컴포넌트이다. (이 이상의 표현이 아직은 떠오르지 않는다.) 하지만 사실 리액트에서는 이미 컴포넌트를 서버에서 렌더링 하는 방법을 제공하고 있었다. 근데.. 왜.. 필요..? 기존 컴포넌트를 서버 사이드 렌더링 (이하 SSR) 할 때 어떤 문제들이 있었을까? 1. 하이드레이션사용자는 서버에서 렌더링 된 HTML과 …
BLEX 2023 12월 개발노트
1분
⭐ 추가된 항목 💬 사용자 포스트 검색 사용자의 프로필 > 포스트에 검색 입력창이 추가되었습니다. 💬 태그 클라우드 페이지 추가 블렉스에 존재하는 모든 태그를 모아 볼 수 있는 태그 클라우드 페이지를 추가하였습니다. 태그명과 동일한 URL로 작성된 포스트는 태그 상세 페이지에서 태그를 대표하는 설명글로 표기됩니다. 💬 간편 발행 버튼 추가 포스트 발행시 …
BLEX 2023 11월 개발노트
1분
⭐ 추가된 항목 💬 알림 설정 추가 원하는 알림만 수신할 수 있도록 알림 설정을 추가하였습니다. 기존 사용자를 비롯하여 서비스에 가입시 기본적으로 모두 비활성화 된 상태이므로 알림 수신을 원할 경우 활성화가 필요합니다. 💬 포스트 설정 페이지 필터 추가 [설정 > 포스트 관리 > 포스트]에서 정렬 외 포스트에 설정된 태그, 시리즈 및 …
Angular :: Pipe
8분
이 글은 Angular에서 템플릿에 데이터를 변환하는 파이프에 대한 설명이며, 내장 파이프와 커스텀 파이프의 생성 방법과 옵션에 대해 다룹니다. 내장 파이프로는 AsyncPipe, DatePipe, CurrencyPipe 등이 있으며, 커스텀 파이프는 @Pipe 데코레이터를 사용하여 생성하며, 옵션으로는 name, pure, standalone 등이 있습니다. 코드 예시와 함께 파이프의 활용 방법을 자세히 설명하고 있습니다.
Angular :: Standalone Component
11분
앵귤러에서의 모듈은 어플리케이션 구조를 정의하고 코드 재사용성을 높이는데 도움이 되지만, 종종 복잡성과 오버헤드를 증가시키는 문제가 발생한다. 이에 대한 해결책으로 나온 것이 SCAM 패턴이며, 그에 연장선으로 독립형 컴포넌트가 앵귤러 14부터 실험적으로 도입되었고, 모듈에 대한 이해 없이도 개발이 가능하여 진입 장벽을 낮추었다. 독립형 컴포넌트는 모듈과 공존하며, 레이지 로딩 및 부트스트랩 등 다양한 기능을 활용해 쉽게 앱을 만들 수 있다.
소소한 타입스크립트 팁
13분
타입스크립트 코드 작성 시, 불필요한 선언 최소화, for in 활용하여 객체 순회, 동일 배열 다른 타입에는 구분값 활용, any 사용 최소화 및 안전한 타입 단언을 통해 코드 안정성 강화. 이러한 방법을 통해 코드의 가독성과 유지보수성을 향상시킬 수 있습니다.
이번 SPA 개발은 앵귤러 어떠세요?
12분
SPA(Single Page Application)는 하나의 HTML 파일에서 사용자가 웹 사이트의 모든 기능을 사용할 수 있는 웹 애플리케이션 형태를 나타냅니다. SPA는 웹 페이지를 새로고침하지 않고 필요한 영역만 업데이트하여 사용자에게 빠른 상호작용을 제공하며, 웹 사이트를 컴퓨터 프로그램이나 모바일 앱과 유사한 경험으로 만들어줍니다. 여기서는 앵귤러를 활용한 SPA 개발에 대한 내용을 다루고 있습니다.
Angular :: Component - 2
10분
앵귤러 컴포넌트에서 자식 엘리먼트 참조 및 컨텐츠 프로젝션에 대해 알아봅니다. @ViewChild를 사용하여 자식 컴포넌트를 참조하고 <ng-content> 태그를 활용하여 컨텐츠를 전달하는 방법을 다룹니다. 단일 및 다중 슬롯 컨텐츠 프로젝션에 대해 살펴보며 조건부 렌더링 방법도 소개합니다.
Angular :: Component - 1
11분
Angular 컴포넌트는 화면을 구성하는 기본 단위로 HTML 템플릿과 동작을 포함합니다. 컴포넌트의 라이프사이클 메서드는 초기화 및 상태 변화를 관리합니다. 스타일 캡슐화는 Shadow DOM, Emulated, 또는 캡슐화하지 않는 None 옵션 중에서 선택할 수 있습니다. 데이터 바인딩은 Input을 통해 부모 컴포넌트로 데이터 전송을 하고, Output과 EventEmitter를 통해 이벤트 바인딩을 처리할 수 있습니다.
Angular :: HttpClient
14분
Angular의 HttpClient 모듈은 서버 통신을 간편하게 처리하는 도구로, Observable을 통해 비동기적으로 데이터를 요청 및 응답 처리합니다. Interceptor를 사용하여 요청 및 응답을 가공하여 데이터 캐싱과 같은 기능도 만들 수 있습니다. 모듈을 임포트하고 서비스에서 HttpClient를 주입하여 사용하며, 다양한 옵션과 Pipe 함수를 통해 요청 및 응답을 다룰 수 있습니다.
Angular :: Dependency Injection
5분
Angular에서 의존성 주입은 놀랍게도 자동화되어 있습니다. 컴포넌트 생성자에 매개변수로 서비스를 선언하면 Angular 인젝터가 필요한 서비스를 주입해줍니다. 서비스의 재사용과 관심사 분리를 촉진하며, @Injectable로 등록된 서비스는 providedIn 설정을 통해 최적화된 싱글톤으로 관리됩니다. 또한, @Optional, @Self, @SkipSelf, @Host와 같은 데코레이터를 사용하여 의존성 주입 토큰을 제어할 수 있습니다.
Angular :: Directive
7분
Angular 디렉티브는 HTML 요소 동작 및 모양을 제어하는데 사용됩니다. 기본 어트리뷰트, 구조 디렉티브, 커스텀 디렉티브, 커스텀 구조 디렉티브로 나뉘며, 사용자 정의 디렉티브를 생성하여 HTML 요소에 동작 및 스타일을 추가할 수 있습니다.
안드로이드 폰을 개발 서버로 만들기
8분
이 글에서는 Debian 컨테이너를 띄우고 code-server를 활용해서 브라우저 내에서 VSCode 환경으로 접근해서 개발 작업을 진행할 수 있도록 하는 것, ssh로 원격으로 접근할 수 있는 방법, GUI가 필요한 경우를 대비해 VNCserver 설정 과정을 다루고 있다.
termux 'process completed signal 9 press enter' 해결
2분
안드로이드 12부터 생겨난 팬텀 프로세스 모니터를 비활성화하여 termux가 강제로 종료되지 않도록 작업하는 글이다.
setInterval 대신 setTimeout 쓰기
4분
setInterval은 지정한 간격마다 무조건 실행되어 정확한 타이밍을 보장하지 않고, 실행 시간이 길어지면 문제가 발생할 수 있다. 따라서 setTimeout을 사용하여 콜백 실행 후 남은 시간만큼 간격을 조절하는 방식이 더 안정적이며, 실행 시간이 예측 어려운 경우 일관된 간격으로 실행되도록 개선할 수 있다.
Svelte의 상태 관리
9분
이 글은 바닐라 JavaScript로 프론트엔드를 개발하다가 복잡성에 직면하여 Svelte를 적용하고 얻은 경험에 대해 이야기합니다. Svelte의 상태 관리 및 리액티브 선언, 전역 스토어 및 구독 스토어 등의 기능에 대해 다루고 있습니다. 이를 통해 Svelte가 UI 관리를 효율적으로 할 수 있는 방법을 제공한다는 점을 이야기 합니다.