소소한 코딩일지

SPA란? SPA(Single Page Application)는 단일 페이지로 구성된 웹 애플리케이션을 말한다. 정적인 파일을 먼저 다운로드하고, 이후 사용자의 조작에 따라 필요한 데이터만 서버에서 비 동직적으로 받아오면서 동작한다. 그래서 트래픽의 총량을 줄일 수 있고, 애플리케이션의 형태나 웹 사용성(UX)에서 이점을 가진다. SPA의 장점 1. 새로운 페이지를 요청하게 되면 필요한 부분만 재랜더링되기 때문에 전체적 트래픽 감소와 더불어 랜더링에서 좋은 효율을 보인다. 2. 새로운 부분만 재랜더링 되기 때문에 사용자 입장에서도 매우 자연스러운 화면 전환을 경험할 수 있다. 3. 컴포넌트 별로 개발할 수 있다. SPA의 단점 1. 필요한 리소스를 초기에 다운로드 받기 때문에 초반 로드 속도가 느리다. ..

React관련 과제를 수행하면서 화면 랜더링을 최적화하는 역할을 수행해야 했고, 관련 지식이 전혀 없어 구글링을 수행했습니다. 그 결과 React.memo(), useMemo(), useCallback()이라는 세 가지 메서드를 경험하게 되었고, 이후 활용 가능성이 높은 메서드들이라 생각해 세 가지에 대해서 공부한 내용을 정리해보려고 합니다. React.memo() React.memo() 컴포넌트의 Re-rendering을 방지하는 메서드입니다. 기본적인 동작은 컴포넌트가 전달받는 props가 바뀌지 않았다면 리 랜더링이 일어나지 않도록하여 컴포넌트 리랜더링 성능 최적화를 해줄 수 있는 함수입니다. 사용 예) import React from "react"; function Card({ cardConten..

Bundling(번들링) 이란 웹 페이지의 고도화로 인해 다양한 파일들 사이의 상호작용이 발생하고 대규모 웹 서비스들이 탄생하게 되면서, 무수한 코드라인을 관리하기 힘들어졌다. 대표적인 문제점들로 다음과 같은 사항들이 있을 수 있다. 1. 전역 범위를 갖는 수많은 JS파일 내 변수의 중복선이 발생할 수 있다. 2. 수 백개에 달하는 JS 파일로 인한 늦은 로딩 3. 수동적인 개발 루틴 이러한 문제들을 해결해줄 수 있는 것이 바로 'Bundler'이다. Bundler는 연관성이 높은 자원을 모듈로 묶어주는 도구를 의미하고 아래와 같은 장점을 기대할 수 있다. 1. 모듈 단위의 코드 작성이 가능 2. 네트워크 병목현상 완화 가능 (최적화, 네트워크 코스트 절감) 3. 웹 개발 작업 자동화 웹팩 (Webpac..

웹 팩을 공부하면서 babel이라는 tranpiler에 대해서도 자연스럽게 알게 되었습니다. tranpiler와 compiler 가 이름도 비슷하고 하는 일도 어느 정도 유사해서 두 가지 차이점을 정리해보려고 합니다. Compiler 컴파일러의 경우 한 언어로 작성된 소스코드를 다른 코드로 변환시키는 것을 말합니다. ex) Java -> bytecode, C -> assembly 언어 Transpiler 트랜스 파일러의 경우 한 언어로 작성된 소스코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환하는 것을 말합니다. ex) ES6 -> ES5, C++ -> C Compiler와 Transpiler 모두 소스 코드를 변환시키지만 Compiler의 종류 중에 Transpiler라는 비슷한 수준으로 언어를 ..

프로젝트를 하면서 웹팩을 본 적은 있지만 실제 내가 핸들링해본 적이 없다. 웹팩이라는 bundler에 대해 공부를 하면서 이번 기회에 webpack을 가지고 직접 build 가능한 프로젝트를 한번 생성해보고, 그 과정을 정리해보기 위해서 글을 쓴다. 기본 세팅 mkdir webpack-demo //실습 폴더 생성 cd webpack-demo npm init -y //package.json 생성 npm install webpack webpack-cli --save -dev // 웹팩 라이브러리 설치 npm lodash //lodash 라이브러리 설치 위 명령어로 실습 폴더와 라이브러리를 세팅한다. 그러면 다음과 같은 폴더 구성으로 세팅이 완료된다. 다음으로 루트 경로에 index.html과 src/inde..

Element와 Node라는 개념을 안 지 얼마 되지 않았다. 이 두가지의 차이를 정리하게 된 계기는 전에도 JS에는 비슷한 기능을 가진 메서드들이 좀 있네? 이런 생각을 가진 적이 있다. 예를 들어 바로 이전글에 포스팅한 textContent와 innerText가 있을 수 있다. 이 두가지를 한 번 정리하면 이후 메서드들을 보다 정확하게 사용할 수 있을 것 같다는 생각 들어서 이번 글을 쓰게 되었다. DOM 트리를 보면 Node는 Element를 포함하는 개념이라는 것을 볼 수 있다. DOM은 노드라는 단위에 html 문서를 파싱한 정보를 담고 있고, 그 정보는 노드 간 관계에 따라 노드 트리로 구성된다. Element는 Element Node로 노드의 종류이다. 노드의 종류는 다음과 같다. 노드 설명..

textContent와 innerText는 특정 Element의 텍스트를 가져온다는 점에서 유사한 부분이 많은 메소드들이다. 이 두 가지의 차이점을 정리해보고, 또 innerHtml과 는 또 어떻게 다른지 정리해보려고 한다. textContent vs innerText 다음과 같이 두가지 경우에 대해서 어떤 결과들을 출력하는지 확인해 보았다. 1. 안녕하세요 2. 안 녕하 세요 (hidden) ( 공백에는 빈칸 2칸 ) 안녕하세요 안 녕하 세요hidden 결과는 다음과 같이 나온다. 두 구문 모두 내부 text를 가져온다는 점은 같다. 하지만 두 번째 테스트에서 textContent는 빈칸 축약 없이 그대로 가져오지만 innerText는 빈칸 축약이 반영된 결과가 나왔다. 그리고 textContent는 ..

DOM은 Document Object Model로 웹 페이지에 대한 인터페이스를 말한다. DOM은 페이지에 대한 API로 DOM을 통해 페이지의 구조나 내용을 읽고, 조작이 가능하다. 웹 페이지 구축 과정 웹페이지를 구축하는 단계는 기준에따라 여러 단계로 분리가능하다. 하지만 주요 랜더링 경로 단계를 이해함에 있어는 크게 두가지 단계로 나뉘어진다. 첫번째, 브라우저가 html문서를 분석하여 최종적으로 랜더링할 내용을 결정하는 단계, 두번째, 브라우자게 랜더링을 수행하는 단계 첫번째 단계에서 나오는 산출물이 우리가 흔히 들어본 "렌더 트리"다. 렌더 트리는 렌더링에 필요한 내용(HTML) 과 스타일(CSS)이다. 자세히 말하면 HTML을 구문 분석한 DOM 과 CSS를 분석한 CSSOM이다. DOM이 만들..

새로운 프로젝트를 시작하면서 Vue-Bootstrap 템플릿을 사용하게 되었다. 템플릿을 사용하면서 필요한 package를 install 하는 중에 sass 관련 에러가 발생했다. 아래 sass의 공식문서에 따르면 node-sass뿐만 아니라 libSass라는 라이브러리를 더이상 사용하지 않는다는 내용이었다. 그 대신 Dart-Sass라는 패키지로 대체하여 사용하라고 권장하고 있다. node-sass와 LibSass를 더이상 사용하지 않는 이유에 대해서는 아래 Reference를 확인해보면 좋을 것 같다. 내가 사용하려는 템플릿에서는 node-sass를 사용하고 있었지만 이는 현재 m1 맥북을 사용하는 환경에서는 설치가 되지 않아 에러가 나는 것이었다. 내가 해결한 방법은 권장사항과 같이 node-sas..

상황 프로젝트 중, Navigation의 버튼에 따라 routing이 필요했다. TDD 방식을 적용시켜 Jest로 route에 관련된 테스트 코드를 미리 작성했고, 그에 따라 Navbar.vue파일에 Navigation Bar를 제작하였다. 코드는 다음과 같이 제작하였다. {{ m.name }} Navbar를 사용하면서 사용자가 버튼을 클릭했을 때 버튼의 색상도 함께 변화시키기 위해 Click 이벤트로 selectMenu를 발생시켰고, select Menu 내부에서 해당 페이지로 넘어가게끔 코드를 작성했다. beforeEach(() => { wrapperApp = mount(App, { global: { plugins: [router], stubs: [routes], }, }); }); it('routi..