개발일지

Redux 사용이유

리덕스 (js의 라이브러리)는 가장 사용률이 높은 상태관리 라이브러리이다. 리덕스를 사용하면, 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있다. 추가적으로, 리덕스의 미들웨어라는 기능을 통하여 비동기 작업, 로깅 등의 확장적인 작업들을 더욱 쉽게 할 수도 있게 해준다. 위 그림처럼 Redux는 데이터의 흐름이 단방형으로 흐르는 구조이다. action, reducer, selector, store를 세팅하는 보일러플레이트 코드는 유지보수라는 장점을 가지고 있지만, 상태의 개수가 적더라도 보일러플레이트 코드가 크다는 단점이 있다. Redux 라이브러리의 경..

React vs. Vue vs. Angular

React 라이브러리이며 페이스북의 개발자 Jordan Walke가 처음 만들었다. 페이스북에서 지원하며 공동체의 의해 유지보수 된다. Virtual Dom 지원 SSR - Next.js JSX(JavaScritp + XML) React Native (앱 개발까지 가능하게 해준다) 라이브러리이지만 컴포넌트를 사용한다면, 프레임워크처럼 규칙을 지켜야한다. 장점은 Virtual Dom이다. Dom 트리를 추상화하여 자바스크립트 객체로 만들어 두고 변경되는 부분은 virtual dom에서 처리하여 성능을 높혔다. SPA(Single Page Application) 방식으로 진행한다면 검색엔진 노출(SEO : Search Engine Optimization)에 관련된 문제를 생각 했을 때 SSR을 염두해 둘 수..

런타임(Runtime)과 컴파일타임(Compiletime)의 차이점

런타임(Runtime)과 컴파일타임(Compiletime)의 차이점은 무엇인가? 원문보기 런타임(Runtime)과 컴파일타임(Compiletime)은 소프트웨어 프로그램개발의 서로 다른 두 계층의 차이를 설명하기 위한 용어이다. 프로그램을 생성하기 위해 개발자는 첫째로 소스코드를 작성하고 컴파일이라는 과정을 통해 기계어코드로 변환 되어 실행 가능한 프로그램이 되며, 이러한 편집 과정을 컴파일타임(Compiletime) 이라고 부른다. 컴파일과정을 마친 프로그램은 사용자에 의해 실행되어 지며, 이러한 응용프로그램이 동작되어지는 때를 런타임(Runtime)이라고 부른다. "런타임"과 "컴파일 타임"이라는 용어는 종종 서로 다른 두 가지 타입의 에러를 나타내기 위해 사용되어지곤 하는데, 컴파일 타임 에러는 프..

웹사이트 성능 최적화 방법 (수정필요)

마크업 개발자 입장에서 보는 성능 최적화는 크게 렌더링 최적화와 로딩 최적화 두 가지로 나눌 수 있다. 성능 최적화 = 렌더링 최적화 + 로딩 최적화 렌더링, 로딩 과정을 종합적으로 최적화 하면 웹 성능을 평가하는핵심적인 웹 지표(LCP,FID,CLS) 수치를 개선할 수 있다. 성능 측정 도구 Lighthouse PageSpeed Insights 📌 렌더링 최적화 📍 CSS 최적화 리플로우, 리페인트(Reflow/Repaint)를 고려한 스타일 작성 리플로우란? 브라우저의 스타일이 그려지는 순서이다. 이때 레이아웃의 넓이, 높이, 위치 등에 영향을 주는 css 속성을 변경할 경우 'Layout'부터 다시 그려지게 되는데 이를 리플로우(또는 레이아웃)라고 한다. 리페인트란? 반면 레이아웃에 영향을 주지 않..