전체 글18 SPA vs MPA SPA 는 무엇인가?Single Page Application. 즉, 사용자와의 상호작용을 위해 단일 HTML 페이지를 로딩하고, 추가 데이터는 동적으로 불러와서 페이지를 새로 고치지 않고 갱신하는 형태의 어플리케이션이다. 작동방식: - 초기 페이지 로딩 시, 필요한 HTML, CSS, JavaScript 를 한번에 불러온다. 하나의 HTML을 가져온 후, JS를 이용해서 유저와 상호작용 시마다 필요한 DOM을 만들어준다. 유저가 앱을 사용하면서 필요한 추가 데이터는 동적으로 불러와서 페이지를 새로고침 없이 계속 갱신한다. 주로 CSR(Client Side Rendering) 방식으로 구현된다. SPA의 장점: - 속도 및 반응성: SPA는 대부분의 리소스가 애플리케이션의 수명 동안 한 번만 로드되고 .. 2024. 5. 20. 요즘은 왜 jQuery 를 안쓰는가 ? jQuery 를 더이상 사용하지 않는 이유를 알기 위해선, 그 당시 jQuery를 왜 많이 도입하고 사용했는지를 함께 알아보면서 그 때와 지금의 차이점을 알아볼 필요가 있다. jQuery 의 사용 이유와 더이상 사용하지 않는 이유 1. 브라우저 호환성 + 웹 표준 API 확장 초기 웹 개발에서는 브라우저 호환성 문제가 큰 문제였다. 브라우저 호환성 또는 웹 호환성이란 운영체제 및 브라우저 간 동일한 웹 사이트 경험을 제공하는 하는 것으로, 이를 준수하지 않으면 다양한 운영체제 환경 및 브라우저에서 사용이 불가능한 문제가 발생한다. jQuery는 이 호환성 문제를 해결하는 강력한 도구로 등장하여, 다양한 브라우저에서 일관된 방식으로 JavaScript를 사용할 수 있도록 해주었다. jQuery가 본격적으.. 2024. 5. 14. Why React? | 리액트 왜 사용하세요? 요즘의 프론트엔드 개발자라면 누구나 알고 있어야 하는 리액트. 딱히 프론트엔드 개발자가 아니더라도 웹개발에 관심이 있는 개발자라면 누구나 리액트가 인기있고 대세라는 것은 모두 알고 있는 사실이다. 개발자에게 의미있는 NPM 다운로드 수 기준으로만 본다면, 모던 웹 라이브러리/프레임워크(Modern Web Library/Framework) 즉, Angular, React, Vue 이 3대장 사이에서도 압도적인 다운로드 숫자를 가지며, 프로덕션 환경에서 가장 많이 쓰인다는 jQuery도 따라올 수 없는 수준이다. 그리고 이 격차는 점점 더 벌어지고 있다. React의 출시는 2013년이지만 본격적으로 인기가 많아진 시기는 React Hooks가 출시된 2019년 즈음부터인것 같다. 그 이전에는 클래스형 컴포.. 2024. 5. 14. 웹 페이지 로드 과정 | Google.com 을 입력하면 일어나는 일 - Overview 1. 유저가 사용자 인터페이스에 google.com 이라는 URL을 입력한다.모든 웹사이트 URL은 특정한 IP 주소와 연결되어있다.IP 주소는 DNS에 저장되어 있다.DNS의 주된 목적은 인간 친화적인 탐색을 위한 것이다.2. 브라우저는 입력된 google.com에 해당하는 IP를 찾기위해 DNS 기록에 대한 캐시를 검사한다.캐시는 네트워크 트래픽을 규제하고 데이터 전송 시간을 향상시키기 위해 필수적이다.순서: 먼저 브라우저 캐시를 검사한다. - 브라우저는 유저가 방문했던 DNS 기록을 일정시간동안 유지한다.OS 캐시를 검사한다. 브라우저 캐시에 찾고있는 IP가 없으면, 브라우저는 OS에 system call을 날려서 기록을 검사한다. (OS 또한 DNS 기록에 대한 캐시를 유지한다.)라우터 캐시를 검.. 2024. 5. 13. 변수 - JS Deep Dive 와 ECMAScript 참고 변수를 사용하려면, 1. 변수 Declaration (선언)값을 저장하기 위한 메모리 공간 확보. 변수 이름과 메모리 공간의 주소 연결해서 값을 저장할 수 있도록 준비var 키워드의 경우, 확보된 메모리 공간에는 undefined값이 암묵적으로 할당2. 변수 Initialization (초기화)선언된 이후, 최초로 값을 할당하는 것ECMA에서 살펴본 'let', 'const' 키워드 변수와 'var' 로 선언된 변수의 정의는 아래와 같다.let, const 에 대한 설명'let' and 'const' declarations define variables that are scoped to the running execution context's LexicalEnvironment. The variables .. 2024. 5. 6. 4년차 프론트엔드 개발자가 운영하는 블로그 2021년 4월에 취직을 해서 개발자를 업으로 삼은지 3년하고도 1개월이 지났고, 햇수로는 4년차인 프론트엔드 개발자입니다. 그동안 경험했던 기술 스택을 정리해보겠습니다. 프레임워크:- Typescript 를 기반으로 한 React 와 Next.js- 그리고 요즘 진행하고 있는 Electron 상태 관리 툴:- Redux- Recoil- React-Query CI/CD:- Husky- Azure pipeline 찍먹해본 다른 것들도 있겠지만, 이력서에 '나 이런거 할 수 있어요' 라고 내세울 수 있는 것만 적으니 쓸 것이 굉장히 간단해지네요. 그래서 앞으로 기록해보려고 합니다.지금까지 해왔던 것들, 앞으로 하고 싶은 것들, 그리고 이력서에 구구절절 나타낼 수 없는 것들을. 그리고 조금은 뽐내보고 싶습니.. 2024. 4. 30. 이전 1 2 다음
