Web

안녕하세요.오늘은 Wordpress에서 파일업로드 공간을 MiniO로 설정하는 방법에 대해 알아보도록 하겠습니다. 들어가며저는 Docker에서 이전에 작성했던 MiniO를 구축하여 사용 중입니다. MiniO를 활용할 수 있는 방법을 생각하던 중, 구축했던 WordPress에 연동하여 사용하면 좋을 것 같아 진행해 보았지만 쉬운 여정이라 생각했지만 생각보다 험난하게 성공했던 여정을 공유하면 좋을 것 같아 이 글을 작성하게 되었습니다. 저의 현재 WordPress 버전은 6.5.2입니다. 결과적으로 성공한 플러그인은 "Media Cloud"입니다. 해당 글은 "WP Offload Media Lite" 플러그인 설치를 시작으로 "Media Cloud" 플러그인 설치 과정으로 내용이 진행됩니다. 급하시거나 성공..

안녕하세요.오늘은 Wordpress의 빠른 퍼포먼스를 위해 필요하다는 Memcached를 설치하는 방법을 알려드리겠습니다. 저는 arm64 기반의 시스템에서 Ubuntu를 OS로 사용하고 있고 Docker Container를 통해 Wordpress를 동작시켰습니다. 다른 기반의 시스템에서는 다른 과정을 거치거나 필요 없을 수도 있습니다. 이 글에서는 다른 시스템에서의 과정은 다루지 않습니다!들어가며Wordpress는 블로그를 시작하기 전  항상 비교되는 블로그 플랫폼 중 하나였습니다. 자체 호스팅으로도 운영할 수 있을 만큼 많은 높은 자유도를 가진 플랫폼이었습니다. 티스토리를 시작하면서 한편에는 궁금함이 계속 남아있어서 해결하기 위해 Wordpress를 Docker로 한번 설치해 보았습니다. 그 과정에서..

안녕하세요.오늘은 웹 브라우저의 렌더링 과정에 대해 알아보도록 하겠습니다. 들어가며많은 이용자들은 웹에서 정보를 확인함에 있어 즉각적으로 확인하기를 기대하는 추세입니다. 즉, 조금이라도 늦게 된다면  웹 페이지의 사용자들은 기다려주지 않고 이탈이 빠르게 일어난다는 얘기이기도 합니다. 그런면에서 웹 브라우저에서의 렌더링 과정은 아름다운 이미지, 선명한 텍스트, 상호 작용 가능한 요소들이 완벽하게 배치시키고 빠르고 매끄럽게 표시하는데 있어 중요한 역할을 합니다. HTML과 CSS를 파싱하여 마지막 픽셀을 화면에 표시하기까지 어떠한 과정이 있을까요? 하나씩 알아보록 하겠습니다. 첫번째: HTML 및 CSS 파싱렌더링 과정의 첫 단계는 파싱입니다. 사용자가 웹 페이지를 요청하면 브라우저는 해당 페이지와 관련된 ..

안녕하세요.오늘은 화살표 함수와 일반 함수에 대해 알아보도록 하겠습니다. 들어가며자바스크립트는 다양한 방식으로 함수를 정의할 수 있습니다. 그중 두 가지 주요 방식으로는 일반적인 함수 선언 방식과 ES6(ECMAScript 2015)에서 도입된 화살표 함수 선언 방식입니다. 모두 재사용 가능한 코드 블록을 캡슐화하는 목적을 수행하지만 각자 고유한 특징을 보여줍니다. 두 가지 방식에 어떠한 차이가 있을까요? 천천히 알아보도록 하겠습니다.  자바스크립트의 일반 함수일반 함수는 두 가지 방식으로 정의할 수 있습니다.함수 선언 방식함수 선언방식은 function 키워드를 통해 작성하여 사용하는 방식입니다.function greet(name) { console.log("Hello, " + name + "!");..

안녕하세요.오늘은 자바스크립트의 프로토타입(Prototype)에 대해 알아보도록 하겠습니다. 들어가며자바스크립트는 다양한 애플리케이션을 만드는 데 사용할 수 있는 유연한 언어입니다. 여기에는 프토토타입이라는 개념이 기반이 되어 있습니다. 흔히 자바스크립트를 프로토타입 기반 언어(prototype-based language)라고도 불리는 이유 중 하나입니다. 그래서 프로토타입이 무엇일까요? 객체 생성에는 어떠한 영향을 줄까요? 천천히 알아 보도록 하겠습니다.프로토타입(Prototype)이란?프로토타입은 자바스크립트 객체의 구성 요소로, 객체 상속과 속성 위임을 가능하게 합니다. 즉, 자바스크립트에서 프로토타입은 객체를 만들기 위한 청사진 역할을 하며 재사용이 가능한 속성과 메서드를 가지고 있으며 다른 객체..

안녕하세요.오늘은 자바스크립트에서 사용하는 apply(), call(), bind()에 대해 알아보도록 하겠습니다. 들어가기 전에자바스크립트의 강력함은 그 유연성에 있으며, 이 유연성의 핵심 요소 중 하나는 함수 콘텍스트입니다. 때로는 우리가 이 콘텍스트를 직접 제어해야 할 때가 있습니다. 이때 call(), apply(), bind()가 등장합니다. 이들은 함수 호출 방식과 this가 참조하는 대상을 조작할 수 있도록 하는 메서드입니다.자바스크립트에서 this는 무엇일까요? this는 함수 호출방식에 따라 동적으로 결정됩니다. 일반함수로 호출한 경우 Global 객체 Method로 호출할 경우 호출한 객체생성자 함수를 호출할 경우 생성자 함수가 생성할 인스턴스call() / apply() / bind(..

안녕하세요.오늘은 Javascript 개발을 하다 보면 한 번쯤은 들어봤을 클로저(Closure)에 대해 알아보도록 하겠습니다. 클로저란?자바스크립트에서 함수가 외부 범위의 변수를 기억하는 것처럼 보이는 현상을 접한 적이 있나요? 클로저(Closure)는 자바스크립트에서 외부 함수가 실행된 후에도 외부 범위에 대한 접근 권한을 유지하는 함수입니다. 이는 내부 함수가 외부 함수 범위의 변수를 "닫아서" 가비지 컬렉션(Garbage collection)으로부터 보호하는 것을 의미합니다.   들어가기 전에 알아야 할 자바스크립트 지식렉시컬 스코핑 (Lexical Scoping)렉시컬 스코핑은 변수의 접근성을 코드 내 위치에 따라 결정하는 방식을 뜻합니다.. 이 정적 접근 방식은 복잡한 코드 기반에서 예측 가능..

안녕하세요.JavaScript에서 변수를 선언하는 세 가지 주요 방법인 var, let, const에 대해 알아보도록 하겠습니다.각 키워드의 특징과 장단점, 사용 예시 등을 자세히 살펴보겠습니다.  변수 키워드 - varvar는 JavaScript에서 가장 오래된 변수 선언 방식입니다. var로 변수를 선언하면 가장 가까운 함수의 범위에 스코프가 지정됩니다. 이는 var로 선언된 변수가 함수 스코프를 갖는다는 것을 의미합니다. var 변수는 재선언과 재할당이 가능합니다.  재선언동일한 이름으로 새로운 변수를 선언하는 것재할당기존 변수에 새로운 값을 할당하는 것특징함수 범위var변수는 함수 범위에서 유효합니다.호이스팅 있음var 변수는 함수의 맨 위로 올라가는 것처럼 작동합니다. 이는 예상치 못한 오류를 ..

안녕하세요.오늘은 모바일 기기에서 실행 중인 화면을 Chrome DevTools를 통해 디버깅하는 방법을 알아보도록 하겠습니다.Chrome DevTools 소개Chrome DevTools는 Google Chrome 브라우저에 직접 내장된 웹 개발자 도구입니다. 이것은 웹 개발자들을 위한 디버깅, 편집 및 분석 기능을 제공하여 웹 개발자들에게 필수적인 도구로 자리 잡았습니다. 문제 해결, 성능 최적화 또는 디자인 변경 실험 등에 여러 방면에서 사용되는 도구입니다. 사용할 명령어chrome://inspectchrome://inspect란 무엇인가?Chrome DevTools의 핵심에는 모바일 장치를 검사하고 디버깅하는 기능인 chrome://inspect가 있습니다. 많은 개발자가 데스크톱 웹 개발을 위해 ..

안녕하세요.오늘은 REST API에 대해 알아보도록 하겠습니다. REST?REST는 REpresentational State Transfer의 약어로 네트워크 응용 프로그램을 디자인하는 아키텍처 스타일입니다. 기본적으로 REST는 클라이언트-서버 모델을 기반으로하며 클라이언트가 서버의 리소스에 액세스하거나 수정하기 위한 요청을 보냅니다. 이러한 리소스는 JSON 또는 XML과 같은 표준 데이터 형식을 사용하여 이해하기 쉽고 조작하기 쉬워집니다. REST를 활용한 API는 간결성, 확장 가능성 및 다양한 프로그래밍 언어 및 플랫폼과의 호환성 때문에 널리 사용되고 있습니다.REST API?REST API는 상태를 유지하지 않는 통신(Stateless)을 특징으로하며, 클라이언트의 각 요청은 서버가 이를 충족..

부족한 지식은 웹서핑을 통해 수집하여 하나의 글로 정리한 것입니다. 작성한 내용을 기반으로 '절대적으로 A보다 B가 더 좋다!'라는 취지의 내용이 아닙니다. 여러 가지 환경에 따라 성능의 차이는 작성한 내용과 다를 수 있습니다.안녕하세요.웹 개발에 있어서 올바른 기술을 선택하는 것은 프로젝트의 성공에 상당한 영향을 미칠 수 있습니다. SVG(Scalable Vector Graphics)와 캔버스(Canvas)는 웹 상에서 그래픽을 생성하는 데 널리 사용되는 두 가지 인기 있는 옵션입니다. 하지만 개발 요구 사항에 가장 적합한 선택은 무엇일까요? SVG와 Canvas의 차이점을 알아보도록 하겠습니다.들어가며HTML는 사용자 경험을 향상시키기 위해 더 나은, 표준화된, 풍부한 그래픽을 제공하기 위해 꾸준히 ..

안녕하세요.오늘은 React의 Component의 LifeCycle에 대해 알아보도록 하겠습니다. 들어가며React Component의 Life Cycle에 관련된 Method는 React Component가 생성(Mount), 갱신(Update), 제거(Unmount)되는 과정에서 눈에 띄지 않게 자동으로 호출되는 특별한 Method입니다. 이를 활용한다면 각 단계에서 원하는 작업을 효율적으로 동작시켜 애플리케이션에 중요한 역할을 할 수 있을 것입니다.왜 중요할까?중요함의 내용을 알기 위해서는 어떠한 역할을 수행하는지 알아야 합니다.컴포넌트 초기화Mount 단계에서 초기 State 설정, 데이터 가져오기 또는 타사 라이브러리와 연동변경에 대한 응답props 또는 State가 변경될 때 UI 업데이트 또..

안녕하세요.오늘은 SSR(Server Side Rendering)과 CSR(Client Side Rendering)에 대해 알아보도록 하겠습니다. 들어가며웹 개발을 하면서 자주 언급되는 두 용어는 SSR(Server Side Rendering)과 CSR(Client Side Rendering)입니다. 두 기술 모두 웹 페이지를 사용자에게 렌더링 하여 보이는 데 사용되는 기술이지만 방식이 다릅니다. 방식마다 고유한 장점과 그에 따른 단점을 가지고 있어 Frontend 개발자들은 애플리케이션 최적화에 있어 제일 먼저 고려할 사항 중 하나입니다. 이 글에서는 SSR과 CSR의 작동방식, 장단점을 비교하며 내용을 살펴보도록 하겠습니다.SSR과 CSR 이해하기구체적인 내용에 대해 파헤치기 전에 SSR과 CSR에 ..