전체 글

[아티클 정리] 사용자 경험은 어떻게 측정할까요? - 오의택

아티클 원본 링크 사용자 경험은 어떻게 측정할까요? | 요즘IT 사용자 경험은 기업에서 더 나은 비즈니스 성과를 위한 핵심 요소로 인식되고 있으며, 이에 따라 사용자 경험을 측정하고 관리하는 활동이 더욱 중요해지고 있습니다. 그렇지만 UX에 대해 위키 yozm.wishket.com 좋은 UX 가 필요한 이유 이윤의 극대화 좋은 UX 와 이윤의 관련성 좋은 UX 는 고객을 만족 (Satisfaction) 시킴 만족도가 올라간 고객은 해당 브랜드에 애정을 갖는 충성 고객 (Loyalty) 이 됨 충성 고객 충성도가 높은 고객은 SNS 를 통해 스스로 홍보 제품의 구매가 어려워도 (비용, 웨이팅 등) 구매함 예시) Apple 좋은 UX 를 측정하는 방법 측정에 필요한 데이터 아래 세 개의 데이터를 바탕으로 측..

서버의 부하를 줄이는 법 (feat. 로드밸런싱)

서버의 부하는 어떻게 줄일까 고오급 서버 사용 (a.k.a. 성능 확장, Scale up) 서버 대수 증가 (Scale out) 단순히 서버의 대수를 늘리면 될까? 사용자는 어디로 가야되는지 어떻게 알까? (데이터 동기화 등의 문제들도 있겠지만 그건 여기선 다루지 않는걸로…) → 로드밸런서 로드밸런서 말 그대로 Load 를 Balance 있게 나눠주는 것 로드밸런서의 종류 L2 - MAC 주소를 바탕으로 Load Balancing L3 - IP 주소를 바탕으로 Load Balancing L4 - Transport Layer(IP와 Port) Level 에서 Load Balancing L7 - Application Layer (사용자 Request) Level 에서 Load Balancing L# ? OS..

SSR, CSR 비교

렌더링 이란 브라우저 렌더링이란 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(view)에 표시해주는 작업을 말함 즉, 브라우저가 서버로부터 HTML, CSS, JavaScript 문서를 전달받아 브라우저 엔진이 각 문서를 해석해 브라우저 화면을 그려주는 것 만약 www.naver.com 을 입력한다면, 네이버의 서버로 화면을 그릴 내용을 요청하고 받아서 화면에 그림 Client 에서 그린다면 CSR, Server 에서 그린다면 SSR 임 CSR CSR 이란? CSR = Client Side Rendering 사용자가 요청할 때 마다, 리소스를 서버에서 보내주면 클라이언트 (브라우저) 는 이를 해석 해서 화면에 그려줌 예시 body 안에는 id="root" 만 달랑 하나 들어있고, 어플리케이션에..

서버 상태관리 라이브러리 비교

대상 라이브러리 React Query (@tanstack/react-query, react-query) TanStack Query 와 같음, 과거에는 React Query 였으나 최근 TanStack Query 라는 이름 사용중 SWR Redux Toolkit (@reduxjs/toolkit) Apollo Client (@apollo/client) 비교 @apollo/client 는 React 외에도 다른 곳에서도 사용할 수 있음 Redux Toolkit 은 상태관리 용도로 다운받는 경우도 많음 ReactQuery 는 @tanstack/react-query + react-query 를 합쳐야 함 간단 비교 React Query SWR Redux Toolkit Query Apollo Client 러닝커브 ..

상태관리 라이브러리 비교 (Redux Toolkit, Zustand, Recoil)

대상 라이브러리 Redux Toolkit (@reduxjs/toolkit) Zustand Recoil 비교 NPM Trends 간단 비교 Redux Toolkit Zustand Recoil 러닝커브 Redux 를 알고 있으면 거의 없음 매우 낮음 낮음 (개인적으로는 안낮음 ^~^..) 디버깅 툴 Redux Devtools Redux Devtools 있으나 불안정함 제작자 Dan Abramov (Redux 개발자) 카토 다이시 (Jotai 개발자) Facebook 현재 버전 v1.9.2 v4.3.2 v0.7.6 출시 연도 2020 2019 2020 비고 Redux 에서 영감을 받아 만들었다고 함 아직 1.0 이 나오지 않았음 자잘한 버그가 종종 있다고 함 소개 및 사용 예제 Redux Toolkit RTK..

라이브러리와 프레임워크 (feat. 리액트는 라이브러리일까 프레임워크일까)

들어가며 김영한님의 스프링 강의를 듣던 중… 이런 내용이 나왔다. 프레임워크 vs 라이브러리 프레임워크가 내가 작성한 코드를 제어하고, 대신 실행하면 그것은 프레임워크가 맞다. (JUnit) 반면에 내가 작성한 코드가 직접 제어의 흐름을 담당한다면 그것은 프레임워크가 아니라 라이브러리다. 리액트를 프레임워크가 아닌 라이브러리라고 부르는 이유는 단지 상태관리 때문이라고만 알고 있는데… 제어의 흐름을 담당하지 않아서라고? life cycle 은 리액트가 실행시키는게 아니었나? 그럼 리액트는 왜 프레임워크가 아니라 라이브러리인거지? 그러고보니 함수형 컴포넌트를 사용할 경우에는 life cycle 을 따로 타지 않는데… 그러고보니 프레임워크와 라이브러리의 정확한 차이는 뭘까?? 😋 그렇게 시작되었습니다~ 가장 ..

[프로그래머스] Lv.3 가장 먼 노드 (BFS) + 시간초과, 메모리초과 해결

가장 먼 노드 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1번 node 에서 모든 node 로 가는 길이를 구한다. 이 때 모든 edge 의 가중치는 1이다. 즉 1 > 2 = 1 , 1 > 2 >5 = 3 , 1 > 3 > 6 = 3, ... 이다. BFS인 이유 한 지점에서 갈 수 있는 위치 (동일 depth) 를 순차적으로 방문해야 한다. 따라서 가능한 경우의 수를 queue 에 쌓아서 동일 depth 에서 처리해줘야 한다. [프로그래머스] Lv.2 게임 맵 최단거리 (BFS) + 반례 14개, 연습용 좌표판 PDF 게임 맵 최단거리 시작 지점부..

[프로그래머스] Lv.2 배달 (다익스트라)

배달 1번 node 에서 모든 node 로 이동할 때, cost K 보다 적게 이동할 수 있는 마을의 갯수를 구하는 문제이다. 한 점(1) 에서 모든 점으로 가는 cost 를 구하는 문제이며, cost 는 양수이므로 다익스트라 이다. 풀이 코드 구조 갈 수 있는 node 를 먼저 구한다. (candidates) 그리고 그 node 까지 갈 수 있는 path 들을 모두 구한다. (pq). 그리고 거기서 최단거리만을 뽑아 계산한다. 코드 let totalCost; let adjacent; let N; function solution(n, roads, K) { N = n; totalCost = new Array(n); adjacent = new Array(n); // Infinity 로 초기화 totalCos..