jam 블로그

SPA(Single Page Application)는 하나의 페이지로 구성된 웹 애플리케이션으로, 다른 페이지로 이동하지 않고도 동적으로 콘텐츠를 변경하고 제공할 수 있습니다. 이러한 SPA 웹 애플리케이션을 개발하려면 어떤 기술과 지식이 필요할까요? SPA를 개발하려면 JavaScript, HTML, CSS에 대한 지식이 필요합니다. 특히 JavaScript Framework/Library(ex. React, Vue.js, Angular)를 사용하여 웹 애플리케이션을 개발하는 방법에 대한 경험이 필요합니다. 또한 REST API와의 통신, 라우팅, 상태관리 등에 대한 이해도 중요합니다. 프론트엔드 개발자가 SPA를 구현하려면 이러한 지식과 기술들을 잘 이해하고 활용할 수 있어야 합니다. HTML, CS..

React 18은 React 프레임워크의 새로운 버전입니다. 이번 버전에서는 기존의 React와 비교하여 많은 기능 개선 및 업그레이드가 이루어졌습니다. 예를 들어, 성능을 개선하고 안정성을 확보하기 위해 다양한 업그레이드가 이루어졌습니다. 주요 기능 서버 사이드 렌더링 개선: 이번 버전에서는 기존에 있었던 서버 사이드 렌더링의 성능 이슈가 해결되었습니다. 이로 인해 더욱 빠르고 안정적인 서버 사이드 렌더링이 가능해졌습니다. 이 기능의 개선으로 인해, 사용자들은 더욱 빠른 웹 페이지 로딩 시간을 경험할 수 있게 되었습니다. 새로운 이벤트 모델: 기존의 이벤트 모델에서 발생하던 문제점들을 개선하였습니다. 예를 들어, 이제 이벤트 처리가 더욱 직관적이고 유연해졌습니다. 이로 인해, 사용자 경험과 개발자 경험..

HTTP/3 2019년 9월 정도에 새로운 웹 표준인 HTTP/3에 대한 지원을 발표하였습니다. 파트 내에서 웹 로딩 및 접근 속도를 위해서 조사를 하였습니다. HTTP Protocol 발전 과정 요약 HTTP/0.9 HTTP 초기 버전에는 버전 번호가 없지만 추후 버전과 구별을 위해 붙여졌습니다. 특징 GET 메소드만 존재 HTTP 헤더가 존재하지 않음 HTTP/1.0 0.9버전에서 브라우저와 서버 모두 융통성을 가지도록 확장되었습니다. 특징 버전 정보가 각 요청 사이내로 전송되기 시작 (HTTP/1.0 GET ~) HTTP Status code가 라인 또는 시작 부분에 붙어 전송 브라우저의 요청에 대한 성공 실패 여부 확인 및 그에 따른 동작 HTTP 헤더 개념이 요청, 응답 모두에 도입 메타 데이터..

React의 전반적인 것 Created: Feb 14, 2020 4:08 PM React React는 Facebook에서 만든 SPA(Single Page Application)을 만들기 위해 고안된 언어입니다. 비슷한 것으로는 Vue, Angular가 있습니다. 설치 및 실행 # node를 먼저 설치 후 진행해야합니다. # node 설치 후 # create-react-app은 그간 설정하기 어려웠던 webpack 등을 자동으로 만들어주는 명령어 입니다. npm create-react-app project-name cd project-name # 실행 시 localhost:3000으로 가상 서버가 띄워집니다. yarn startReact 기초 해당 글은 16.12 최신 버전을 기반으로 작성하였습니다. p..

Webpack이란? Webpack은 최신 javascript application을 위한 정적 모듈 번들러입니다. 좀 더 설명하면 es6를 쓰는 javascript들을 모아서 하나의 파일로 만듭니다. 설정에 따라서 sass나 이미지 등도 bundle 시킬 수 있습니다. 주 목적은 다중 파일들을 하나로 묶어서 웹 로딩 시 파일 다운로드 되는 것들 최대한 줄여보자입니다. Webpack에 넣을 패키지들 호환성 문제가 되지 않는 선에서 최신 버전으로 설치할 예정입니다. (최신을 사랑합니다.) webpack typescript babel 설정하기 필요한 package들을 다 설치해 봅시다. # npm 대신 yarn을 설치하고 사용할 수 있습니다. # webpack 설치 npm install -D webpack w..