본문 바로가기

기술67

AI 툴 썸네일이미지생성, 콘텐츠자동생성, 숏폼자동생성 기술 주도로 세상이 급격하게 변하고 있고, 미물인 개개인은 현재 위치에서 변화에 둔감하다. 지구 자전 속도는 적도를 기준으로 시속 약 1.670km, 지구 공전 속도는 평균 시속 107,208km(초속 29.78km) 이다.2008년 영화 "지구가 멈추는 날" (스콧 데릭슨 감동, 키아누 리브스 주연 외) 처럼 지구가 멈추면 어떻게 될까 갑자기 멈춘다면 지구상 생명은 모두 사라질 가능성이 높다. 실제로 지구 온난화로 자전 속도가 변하고 있고 어느 순간 갑자기 한순간에 큰 재난이 올지도 모른다. 지금 현재도 변화하고 있는 지구, 그 구체에 점 하나도 안되는 인간 개개인은 땅 위에 붙어서 변화를 못느낀다. 기술 변화도 같고, 경제 변화도 같고, 환경 변화도 결국 하나같이 변화에 민감하게 대응하는 사람이 잘 .. 2025. 2. 23.
CI/CD 개발 프로세스 알아보기 어플리케이션 개발 단계부터 배포 때까지 모든 단계들을 자동화를 통해 더 효율적이고 빠르게 사용자에게 빈번이 배포할 수 있도록 만드는 것 CI - Continuous Integration - 지속적인 통합 CD - Continuous Delivery - 지속적인 제공 or Continous Deployment - 지속적인 배포 CI 코드 변경사항을 주기적으로 빈번하게 머지해야 한다. 통합을 위한 단계 (빌드, 테스트, 머지)의 자동화 CD CI에서 자동으로 빌드, 테스트 한 후 배포를 준비 단계에서 수동으로 검수하고 배포하는 과정 (Continous Delivery) 이 과정에서 자동으로 배포하도록 하는 것을 Continous Deployment 라고 한다. 개발자가 작은 단위로 기능을 나누어 주기적으로 .. 2021. 9. 5.
뷰 라우터 뷰 라우터 - 뷰 페이지 전환을 위한 공식 라이브러리 라우팅 Routing 은 웹 페이지 간의 이동 방법이다. 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA, Single Page Application)에서 사용한다. 싱글 페이지 애플리케이션은 페이지를 이동할 때마다 서버에 웹 페이지를 요청하고 새로 갱신하지 않고, 미리 해당 페이지를 받아 놓고 페이지 이동 시 클라이언트의 라우팅을 이용해 화면을 갱신하는 패턴을 적용한 애플리케이션이다. 장점은 페이지간 전환시 깜빡임 없이 부드럽게 전환하며 화면 조작이 빨라 사용자 경험이 향상된다. 뷰, 리엑트, 앵귤러 같은 프런트엔드 프레임워크 사용을 하지 않고도, HTML 과 라우팅 자바스크립트 라이브러리를 이용해 라우팅 방식의 페이지 이동을 구현할 수 있다.. 2021. 1. 20.
VS Code 한글판 사용하기 Visual Studio Code 영문판 사용자라면, 영어에 익숙한 사람이거나 친숙한 사람일 겁니다. 아니라면 영어 공부를 하는 개발자거나, 이도 아니라면 아마도 한글판에 대한 갈망이 생깁니다. 이미 영문판 VS Code 를 설치했고, 한글화를 하고 싶을 때, 방법입니다. 1. ctrl + shift + p 를 눌러 명령 팔레트를 실행합니다. 2. 입력창에 display 라고 치면, 아래에, Configure Display Language (표시 언어 구성 명령)이 자동 필터링 목록에 뜹니다. 3. 아래에 있는 Install Additional Language 를 선택합니다. 4. 왼쪽 확장 프로그램 마켓플레이스 입력창에 @category:"language packs" 가 자동으로 입력되면서 하단에 언어.. 2021. 1. 19.
VSCode 확장프로그램 VSIX 다운로드 및 오프라인 설치 인터넷이 연결된 곳에서는 vscode extension market 에서 조회 설치를 하면 그만입니다. 하지만 종종 인터넷이 없는 곳에서 visual studio code 를 사용하고 꼭 필요한 확장 프로그램 / 익스텐션 / extension 을 설치해야 한다면. 1. 휴대용 저장장치를 준비합니다. 2. vscode marketplace 사이트에서, 해당 확장프로그램을 조회한 후, 오른쪽 좁은 섹션에 있는 Resources > Download Extension 을 클릭하면, 다운로드를 할 수 있습니다. 3. 다운로드한 파일 확장자는 .vsix 이며, 이 파일을 저장장치(ex. USB 메모리 스틱)에 저장합니다. 그리고 설치할 컴퓨터에서 vscode 를 실행하고 vsix 를 설치합니다. 1. vscode .. 2021. 1. 18.
화살표 함수 Arrow Function 화살표 함수는 익명함수이다.기존의 익명함수를 매우 간단하게 한줄로 표현할 수 있다.  화살표 함수 작성하는 순서 기억법 1) 코드로 한줄로 바꾼다. 2) function 삭제, { } 삭제, 삭제한 { 위치에 => 를 작성한다. 3) return 을 삭제한다. // Arrow Function// always anonymousconst simplePrint = function(){ console.log('simplePrint');});const simplePrint = () => console.log('simplePrint');const add = function(a, b){ retrun a + b;};const add = (a, b) => a + b;const simpleMultiply = (a, b.. 2021. 1. 15.
include js 파일 만들기 CSS 에서 @import 처럼 js 파일 불러오기 requiers.js 안쓰고 JavaScript 로 DOM 생성하는 방법으로 js 파일을 찍어서 포함시킨다.  html TEST : JS Load JS 아래는 loader.js 소스 /** * loader.js */function load(files){ for (i=0; i 2021. 1. 14.
프런트엔드 성능 최적화 - 렌더링 최적화 2. 렌더링 최적화 1. 레이아웃 스래싱 2. 가상돔 3. 웹 워커 1. 레이아웃 스래싱 HTML과 CSS를 파싱해서 렌더 트리를 만들어 레이아웃을 그린다. 레이아웃을 그리는 작업은 요소 하나 하나 크기와 위치를 측정하기 때문에 오래 걸리고 비용이 큰 과정이다. 페인트를 하고 화면을 뿌린다. HTML-DOM > CSS-CSSOM > Redner Tree > Layout > Paint > 화면 뿌리기 이 과정이 DOM 변경으로 인해 반복된다. 강제 동기 레이아웃은 DOM 조작이 없는데도 불구하고 이 과정을 강제로 진행해서 강제 동기 레이아웃이라고 한다. 이런 강제 동기 레이아웃을 유발할 수 있는 코드는 한번만 쓰고 캐싱한다. 2. 가상돔 가상돔은 DOM변경을 최소화하는데 의의가 있다. Proxy와 가상돔을.. 2021. 1. 13.
프런트엔드 성능 최적화 - 로딩 최적화 크게 로딩 최적화와 렌더링 최적화에 대한 글 최적화를 왜 하나. 사이트를 최적화하면 로딩 시간이 적게 들고 방문자는 사이트에 오래 머물고, 다시 찾고, 클릭률 상승, 매출이 는다 통계가 있다. 1. 로딩 최적화 방법 2. PWA 케이스 소개 3. 랜더링 최적화 방법 목적은 로딩이 빨라야 하고 랜더링이 부드러워야 한다. 1. 로딩 최적화 1) 브라우저 기준 최적화의 문제점 2) 사용자 기준 최적화 3) 프리 렌더러 4) PWA 사례 2. 렌더링 최적화 1) 레이아웃 스래싱 2) 가상돔 3) 웹 워커 1. 로딩 최적화 (브라우저 기준) 1) Navigation Timing : Resource, Processing, Load 2) 로딩과 Critical Rendering Path 관계 3) 로딩 성능 : 자바.. 2021. 1. 12.

티스토리툴바