본문 바로가기

프론트엔드63

jquery를 사용하지 않게 된 이유 [ jQuery ]jQuery는 JS를 작성하는것은 재밌어야 한다는 모토를 가진 JS 라이브러리적게 쓰고 많은 일을 하게(write less, do more) 도와주는 JS 라이브러리라고 생각하면 됨일반적으로 반복적인 작업을 수행하고 불필요한 마크업을 제거, 짧고 이해하기 쉬운 코드를 작성할 수 있게 해줌 예를 들어 jQuery가 등장하기 이전에는 XMLHttpRequest를 사용하여 비동기 통신을 처리해야 했음let xhr = new XMLHttpRequest();xhr.open('POST', '/test');xhr.send();xhr.onload = function () { if (xhr.status != 200) { console.error(`${xhr.status}: ${xhr.status.. 2024. 5. 20.
Jotai 리액트에서 훅의 개념으로 상태관리를 시작한 최초의 라이브러리 중 하나이며, 최소 상태 개념인 Atom을 처음 사용한 Recoil!! 많은 회사에서나 프로젝트에서 사용하는 전역 상태 관리 라이브러리임 하지만 20년 처음 만들어졌지만 아직 정식으로 출시한 라이브러리가 아니며 Recoil 팀에서는 리액트 18에서 제공되는 동시성 렌더링, 서버 컴포넌트, Streaming SSR이 지원되기 전까지는 1.0.0을 릴리스 하지 않을것이라고 함 따라서 실제 프로덕션에 사용하기에는 안전성, 성능, 사용성이 떨어질수 있음 또한 가장 큰 핵심 포인트는 핵심개발자가 이미 퇴사한 상태라고 함 원래 Recoil을 사용하는 기업들이 많았는데 현재 Jotai와 Redux, Zustand로 변경하는 모습도 보여 이참에 Recoil과.. 2024. 5. 8.
DX UX(User Experience)는 고객이 이용하는 서비스에 대한 사용자 경험의 만족도를 의미함UX 개선 작업을 통해 고객들의 서비스 만족도를 개선하고 이는 곧 더 많은 사용자 유입으로 이어지며 나아가 해당 비즈니스의 수익 증진으로 이어지게 됨 DX는 이러한 UX에서 U(User)를 D(Developer)를 대입한것으로 개발자들이 본인의 업무 환경에서 서비스를 개발하며 느끼는 경험의 만족도이며, 이를 개선하는 작업을 통해 팀과 프로젝트에 지속적으로 긍정적인 영향을 미치는 것을 말함 SW 개발은 결국 사람(개발자)들의 지적 활동이기 때문에 사람들이 어떤 생각을 가지고 일하고 있으며 동기를 부여하고 더 나은 참여도를 이끌어내는 것이 중요함 심리학의 관점에 따라 개발자 경험(DX)을 세가지 분류로 나눌 수 .. 2024. 4. 3.
MSA(마이크로서비스 아키텍처) [ MSA(마이크로서비스 아키텍처) ]MSA는 여러 개의 작은 서비스로 구성되어 각 서비스가 독립적으로 개발되고 배포되는 구조즉 하나의 큰 어플리케이션을 여러개의 작은 어플리케이션으로 쪼개어 변경과 조합이 가능하도록 만든 아키텍쳐 ▶ MSA의 등장배경Monolithic Architecture는 소프트웨어의 모든 구성요소가 한 프로젝트에 통합되어있는 형태 아직까지는 많은 소프트웨어가 Monolithic 형태로 구현되어 있음소규모 프로젝트에는 Monolithic Architecture가 훨씬 합리적임 간단한 Architecture이고, 유지보수가 용이하기 때문하지만 규모가 커지게 되면Monolithic Architecture 단점이 명확함서비스/프로젝트가 커지면 커질수록, 영향도 파악 및 전체 시스템 구조의.. 2024. 3. 23.
React v18 - 2 [ React DOM Client ] react-dom/client에 새로운 API가 추가되었음 ▶ createRoot(domNode, options?) createRoot는 브라우저 DOM 노드 안에 React 컴포넌트를 표시하는 루트를 생성할 수 있음 'ReactDOM.render' 대신 사용하며, 리액트 18의 새로운 기능은 이것없이 동작하지 않음 import { createRoot } from 'react-dom/client'; const domNode = document.getElementById('root'); const root = createRoot(domNode); root.render(); 리액트는 domNode를 위해서 root를 만들것이고, 그 안에 있는 DOM을 관리 root를 만.. 2024. 2. 24.
React v18 - 1 [ React ] ▶useId const id = useId() usdId는 클라이언트와 서버간의 hydration의 mismatch를 피하면서 유니크 아이디를 생성할 수 있는 새로운 훅 이는 주로 고유한 'id'가 필요한 접근성 API와 사용되는 컴포넌트에 유용할 것으로 기대됨 고유 ID를 생성하려면 구성 요소의 최상위 수준에서 호출해야함 굳이 전역 변수를 증가시키는 것보다 useId를 권장하는 이유는 클라이언트 구성 요소가 hydration(수화)되는 순서가 서버 HTML이 생성된 순서와 일치하지 않을 수 있으므로 증가하는 카운터로 이를 보장하는 것은 매우 어려움 useId를 호출하면 하이드레이션이 작동하고 출력이 서버와 클라이언트 간에 일치하는지 확인할 수 있음 import { useId } fro.. 2024. 2. 16.
CSS vs CSS-in-CSS vs CSS-in-JS [ CSS ] CSS는 지금까지 사용하면서 명확한 단점이 존재했음 모듈화가 어려움 클래스 이름의 최소화 문제(방법론을 사용하면 어느 정도 해소는 되겠으나 완전한 해결은 아닌 듯함) CSS의 우선순위를 파악하기 어려움 요즘 CSS 같은 경우 매우 많은 업데이트를 해왔기 때문에 변수 사용, 중첩(nesting) 사용 등 많이 편리해졌지만 아직 불편한 점이 많이 있음 [ CSS-in-CSS ] Pre-/Post-processors (CSS 전처리기) CSS Frameworks CSS Modules ▶ Pre-/Post-processors 흔히들 알고 있는 CSS 전처리기를 의미 자신만의 특별한 구문(Syntax)을 가지고 CSS를 생성하는 프로그램 CSS가 변수와 중첩을 제공하기 이전부터, 전처리기를 통해 변.. 2024. 1. 12.
CSS in JS [ CSS in JS ] CSS스타일을 추상화한 JS객체 대신, CSS스타일 문법을 그대로 사용하여 스타일 컴포넌트로 사용할 수 있는 것 현재 사용 중인 스타일만 DOM에 포함 JS와 CSS 사이의 상수 및 함수를 교환할 수 있음 Global namespace로 클래스명을 다르게 짓기 위한 고충을 피할 수 있음 미사용 코드를 검출 가능 CSS 로드 우선 순위 이슈를 해결할 수 있음 [ styled-components ] 손쉬운 유지보수(컴포넌트에 영향을 미치는 스타일을 찾기 위해 여러 파일을 검색할 필요 x) 고유한 CSS 클래스 생성 - 스타일 컴포넌트를 추척해서 css 로 작성된 `` 스타일을 고유한 css 클래스 이름으로 변경 스타일 컴포넌트에 의해 자동 생성된 고유 CSS 클래스 이름은 sc-접두.. 2024. 1. 12.
Context API 개발을 하다보면 전역상태로 관리할 상태가 많지 않을때 전역상태라이브러리를 쓰는 것보다는 ContextApi를 사용하는 것이 낫지 않을까라는 생각이 들기에 이번에 ContextApi를 파보기로 함 [ Context ] Context는 리액트 컴포넌트 간에 어떠한 값을 공유할수 있게 해주는 기능 주로 전역적(global)으로 필요한 값을 다룰 때 사용하며 꼭 전역적일 필요는 없음 따라서 리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이라고 접근하는 것이 좋음 Props로만 데이터를 전달하게 되면 깊숙히 위치한 컴포넌트에 데이터를 전달해야할 경우 여러 컴포넌트를 거쳐 연달아서 Props를 설정해주어야 해 불편하고 가독성이 떨어지고 비효율적이며 실수할 가능성이 높아짐(Pr.. 2024. 1. 1.

티스토리툴바