스히네 스히네

트리세이킹과 코드 스플리팅에 대해 말해보시오. 웹 애플리케이션은 규모가 커질수록 번들 크기도 함께 커집니다. 초기 로딩 속도가 느려지고, 불필요한 코드까지 포함되면서 사용자 경험이 저하되기도 하죠.이 문제를 해결하는 핵심 기술이 바로 트리세이킹(Tree Shaking) 과 코드 스플리팅(Code Splitting) 입니다. 모듈이란?독립적인 기능을 가진 코드 블록으로, 재사용성과 코드 관리의 용이성을 높이기 위해 사용된다. 번들링이란?모듈들을 하나의 파일로 결합하는 과정!웹 어플리캐이션의 로딩 시간을 줄이고, 성능을 최적화는 데 도움을 준다.번들링을 통해 여러 자바스크립트 파일들이 하나의 파일로 합쳐져 브라우저에 전달되는 것! 대표적인 번들링 도구 : Vite, Webpack, Rollup 트..

웹 개발을 하며 OAuth 2.0 프로토콜을 사용하는 경험이 많은데요,구체적인 동작 원리를 알아보겠습니다. 🌱 0. OAuth의 등장 배경사용자를 대신하여 구글 캘린더에 일정을 추가하거나, 트위터에 글을 남기는 기능을 만들고 싶습니다.사용자로부터 구글과 트위터의 아이디, 비밀번호를 직접 제공받아 서비스에 저장하고 활용할 수 있을 것입니다. 그러나 안전하지 않아요!!사용자는 처음 보는 서비스를 신뢰하고 자신의 구글 계정 정보를 맡길 수 없을 것이고,구글과 트위터의 아이디, 비밀번호가 유출되면 큰 피해가 발생할 것입니다.또한, 구글과 트위터는 사용자의 민감한 정보를 직접 저장하고 관리해야 한다는 부담이 생길 것입니다. 이러한 문제를 해결하기 위해 구글의 AuthSub, 야후의 BBAuth 등 각 회사가 ..

프론트엔드 개발을 하면서 "로그인 기능"은 가장 기본적인 요구사항이었습니다.그러나 실제 서비스를 구현하고 사용자 보호와 보안을 고려하다 보니, 인증과 인가 / 세션과 JWT / 토큰 저장 위치 등 고려할 점이 무척 많았습니다. 이 글에서는 인증/인가의 핵심 개념과 실무 적용 방법을 공유하고자 합니다. 1. 인증(Authentication)과 인가(Authorization)의 차이 인증: 사용자가 누구인지 확인 (예: 로그인)인가: 사용자가 특정 자원에 접근 가능한지 확인 (예: 관리자만 글 삭제 가능) 인증은 사용자가 누구인지 신원을 확인하는 과정입니다.오프라인에서는 코딩테스트 전, 신분증 제시를 통해 본인을 확인하거나 비행기 탑승 전 신분 확인을 위해 여권을 제시하곤 합니다. 이처럼 온라인에..

Link 라우터 내에서 직접적으로 페이지 이동을 하고자 할 때 사용되는 컴포넌트html의 태그와 비슷한 역할을 한다import React from 'react';import {Link} from 'react-router-dom';function Nav(){ return ( Home About );}export default Nav;   NavLink 와 거의 동일한 기능을 하지만, 현재 라우트 경로와 일치 여부를 판단하여 스타일 혹은 클래스를 추가할 수 있게 해준다ex) 네비게이션 바 구현 시, 현재 선택된 메뉴에 특수한 스타일을 주기 위해 사용한다. ({ fontWeight: isActive ? "bold" : "normal", textDecora..

나는 트리가 너무 어렵다. package algorithm;import java.io.*;import java.util.*;public class Main { static int N, R, Q; static ArrayList[] tree; static int[] sizes; static boolean[] visited; // 서브트리 크기 구하는 배열 static int getSizes(int node) { visited[node] = true; int cnt = 1; for (int next : tree[node]) { if (!visited[next]) { cnt += getSizes(next); } } sizes[node] = cnt; return cnt;..

useMemo는 React에서 제공하는 훅으로, 값을 메모이제이션(Memoization) 하여 불필요한 계산을 방지하고 성능을 최적화하는 데 사용됩니다. 특정 값이나 계산이 의존성(dependencies)이 변경되지 않는 한 재계산되지 않도록 보장합니다.기본 개념useMemo는 복잡한 계산이나 무거운 연산을 수행해야 하는 값이 컴포넌트 렌더링 때마다 재계산되는 것을 방지합니다. 이를 통해 성능을 최적화할 수 있습니다.const memoizedValue = useMemo(() => { return computeExpensiveValue(a, b);}, [a, b]);computeExpensiveValue(a, b): 계산을 수행하는 함수.[a, b]: 의존성 배열로, 이 값들이 변경될 때만 compute..

Computed()계산된 속성을 정의하는 함수로, 미리 계산된 속성을 사용하여 템플릿에서 표현식을 단순하게 하고 불필요한 반복 연산을 줄인다. const food = ref([ {text: '햄버거'}, {text: '초밥'}, {text: '부대찌개'}]){{ food.length > 0 ? 'food left' : 'no food' }}  위 코드에 computed를 적용해보자 const food = ref([ {text: '햄버거'}, {text: '초밥'}, {text: '부대찌개'}])const { createApp, ref, computed } = Vueconst restOfFood = computed(() => { return food.value.length ..

Template SyntaxDOM을 기본 구성 요소 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문을 사용  1. Text Interpolation- 이중 중괄호 구문 (콧수염 구문) 사용- 콧수염 구문은 해당 구성 요소 인스턴스의 msg 속성 값으로 대체- msg 속성 변경 시마다 업데이트  2. Raw HTML- 콧수염 구문은 데이터를 일반 텍스트로 해석함- 실제 HTML 출력하려면 v-html 사용해야 함  3. Attribute Bindings- 콧수염 구문은 HTML 속성 내에서 사용할 수 없기 때문에 v-bind 사용- html의 id 속성 값을 vue의 dynaminId 속성과 동기화 되도록- 바인딩 값이 null이나 undefined라면 렌더링 요소에서 제거  4..