Front-End (14) 썸네일형 리스트형 SPA (Single-page Application) 데스크탑에 비해 성능이 낮은 모바일에 대한 니즈가 증가하면서 스마트폰을 통해 웹페이지를 출력하기 위해서는 기존 방식과는 다른 접근이 필요해졌다. 이를 위해 등장한 기법이 바로 SPA이다. Single-page application (SPA) 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트 SPA에서 HTML, JavaScript, CSS 등 필요한 모든 코드는 하나의 페이지로 불러오거나, 적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가하는데, 보통 사용자의 동작에 응답하게 되는 방식이다. SPA와의 소통은 웹 서버와의 동적인 통신을 수반하기도 한다. 이러한 접근은 연속되는 페이지들 간의 사용자 경험의 간섭을.. 최상의 웹 앱 성능을 위한 기술, WebAssembly WebAssembly 웹 어셈블리(webAssembly, WASM)란, C나 C++과 같은 프로그래밍 언어를 컴파일해서 어느 브라우저에서나 빠르게 실행되는 바이너리 형식(0,1로 이루어진 이진 형식)으로 바꿔주는 기술을 뜻한다. (프로그래밍 언어가 아니다!) 필자는 항상 궁금했다. JavaScript의 현재 성능이 웹 개발의 최선일까? 조금 더 성능을 향상 시킬 수는 없을까? 이를 위해 만들어진 WASM라는 기술이 흥미로워 포스팅을 하게 되었다. 주 목적은 웹 페이지에서 고성능의 어플리케이션을 가능케 하는 것이지만 포맷은 다른 환경에서도 실행 및 연동되도록 설계가 되어있다. W3C는 모질라, 마이크로소프트, 구글, 애플의 기여와 함께 표준을 관리하고 있다. 일반적으로 웹 개발자가 웹 어플리케이션을 개발할.. 최근 MS가 출시한 gitHub 툴 'Scalar' 최근 마이크로 소프트가 Git을 통한 생산성 향상을 위해 새로운 툴을 출시했다. Git은 분산 버전 제어 시스템으로 기본적으로 각 Git 저장소에는 전체 히스토리에 있는 모든 파일의 사본이 있다. 중간 규모의 팀이라도 매 달 수백 메가 바이트를 추가하여 수 천 개의 커밋을 만들 수 있다. repository가 커지면 Git은 모든 데이터를 관리하는 데 어려움을 겪을 수 있다. 수정 된 파일을 보고하거나 최신 데이터를 얻기 위해 대기하는 시간이 낭비된다. 이러한 명령이 느려지면 개발자는 대기를 중지하고 컨텍스트 전환을 시작해야 한다. (이는 생산성에 해를 끼친다.) Microsoft에서 Git용 VFS를 사용하여 Windows OS repository를 지원한다. 가상화 된 파일 시스템을 사용하여 repo.. 성능 최적화 개발자에게 성능이란 굉장히 중요하다. 최근 웹 애플리케이션에서는 복잡한 기능과 UI를 통해 기능이 더욱 무거워지고 있다. 특히 Instagram, facebook, Pinterest 등의 SNS 플랫폼 같은 경우 빠른 리로딩 시간이 필요하므로 성능 최적화가 더욱 중요하다. 개발자는 끊임없이 구조를 단순화하고 최대한 렌더링 시간을 줄이기 위해 고민해야 한다. 최근 Grid 컴포넌트 성능 개선 작업을 통해 느꼈던 포인트들과 성능 최적화를 위한 사전 지식과 최적화 방법들을 정리해본다. 브라우저는 웹 페이지에 필요한 리소스를 내려받고 해석한 다음 여러 계산 과정을 거쳐 콘텐츠를 화면에 보여준다. 이를 브라우저의 로딩 과정이라고 하며 다운로드, 파싱, 스타일, 레이아웃, 페인트, 합성으로 나뉜다. 단계마다 어떤 .. 2020년의 웹 기술 개발 스택 웹 응용 프로그램을 개발할 때 고려해야 할 가장 중요한 것은 앱의 기반이 되는 기술 스택이다. 적절한 기술 스택을 통해 적은 예산으로 가장 큰 효과를 제공하는 것은 기업 입장에서는 특히 어려운 과제이며 올바른 기술 스택 사용은 프로젝트의 성공과 실패를 결정짓는 중요한 열쇠다. 물론 필자는 프로젝트를 직접 운영하고 있지도 않고, 사용할 기술 스택을 선택할 입장이 아니기 때문에 해당 사항이 없다. 하지만 2020년을 살아가는 Front-End 개발자로서 쌓아나가야 할 기술 스택의 방향성을 정하는 데 도움이 되고자 포스팅을 해본다. 2020년 웹 기술 개발 스택 최신 웹 기술 스택을 선택하기 이전에 웹 응용 프로그램 개발 프로세스 구성요소를 명확하게 이해해야 한다. 웹 개발에는 크게 클라이언트 쪽과 서버 쪽의.. 첫 포스팅, 2020 tistory를 시작했다! 이번 2월은 여러모로 심경의 큰 변화들이 있었다. 항상 밀어두는 숙제같았던 자기개발에 손을 얹기 시작한 것. 현재 프론트엔드 개발 시장을 살펴보니 "Front-End = Design" 이라는 고정 관념이 깨지면서 여태까지의 내 커리어와 어렸을 때부터 그려왔던 미래에 일관성을 느끼며 흥미롭게 느껴진다. 내가 어떤 부분이 부족한지 실감 하면서 싱숭생숭한 마음을 다 잡으며 내가 2월 한 달동안 한 것들과 해야할 것들을 정리해본다. 요가 시작 한달 차 - 일주일만에 자세가 많이 교정되었다. 심신 안정에 좋음. React.js, node.js 튜토리얼 - 생활코딩과 Velopert 강의를 활용하고 있다. 내게 필요한 것? - GitHub Commit / tistory 운영 / 메모 생활.. 이전 1 2 다음
