프론트엔드

1. interceptor를 컴포넌트로 만들기✅ 문제처음엔 api에러시 공통 에러메세지를 팝업으로 띄우기 위한 interceptor를 js파일로 만들었다.그랬더니 공통 에러 메세지는 자동으로 관리되지만, 팝업을 띄우기 위한 UI는 컴포넌트에서 별도로 구현해야했다. ✅ 해결이러한 번거로움을 해결하기 위해 interceptor도 컴포넌트로 만들어 사용했다. ✅ 결과→ 에러메세지 팝업창을 interceptor에서 한번만 관리하면 된다.→ 단순히 로직만 공통하는게 아니라 UI까지 공통화 할 수 있어 더 편하다→ 앞으로 확장성을 고려해 js가 아닌 컴포넌트로 만들어 놓는게 좋겠다고 생각됐다.  2. 인터셉터 관리하기 - eject✅ eject메서드: 여러개 인터셉터를 설정한 후, 특정 인터셉터가 더 이상 필요하지..

✅ 문자열을 sort로 정렬시 문제점sort메서드는 문자열을 유니코드 값(아스키 코드)에 따라 정렬한다.그래서 한글의 사전 순서와 다를 수 있고, 대소문자/특수문자가 있는 경우 예기치 않은 결과가 나올 수 있다.유니코드와 아스키코드 대해서  sort로 정렬시 유니코드 순서로 정렬, 대소문자 구분이 되지 않는다.const words = ["apple", "Banana", "apple-pie", "Apple", "banana", "applepie"];words.sort(); // 결과 : [ "Apple", "Banana", "apple", "apple-pie", "applepie", "banana"]  ✅ localeCompare란문자열을 특정 언어의 규칙에 따라 비교 가능.- 언어별로 올바른 ..

회사에서 순수js로 디바운스를 구현해야 하는 일이 생겼다.프로젝트 내에 lodash를 여기저기 쓰고있어서 나는 디바운스 로직을 직접 구현하지 않고 편하게 쓰고있었다. 막상 직접 로직을 구현하려하니 많이 버벅였다.라이브러리를 쓰기 전에 그 로직의 원리를 이해해야 하는데 라이브러리에 너무 기대고 있었던걸까 다시 기본을 다지도록✅ 디바운스1.개념 : 여러번 발생하는 이벤트에서, 가장 마지막 이벤트 만을 실행되도록 제한함 2. 사용: 사용자가 검색어를 입력할 때, 입력이 멈추면 서버에 요청을 보낼 때: 버튼 연타시 불필요한 api호출을 막기 위해 3. 효과 : 불필요한 이벤트 핸들러의 실행을 줄일 수 있음 4. 내가 구현한 코드- 버튼 클릭시 setTimeout함수가 반환한 Id를 Clear해서  setTime..

✅ 문제피그마 규격대로 똑같이 구현을 했는데 버튼의 너비가 틀어지는 현상 발생이유는 버튼 안의 글자가 피그마와 브라우저간 다르게 나타나기 때문이다. font weight나 자간이 다르게 출력된다. ✅ 원인1. 피그마는 자체 폰트 렌더링 방식이 있기 때문에 피그마는 브라우저등 사용자 환경에 구애받지 않고, 일관된 플래폼을 보여주기 위해 자체 렌더링 방식(antialiasing)을 사용한다. 안티앨리어싱 이란?: 픽셀로 되있어 나타나는 계단 현상을 줄이고 이미지를 부드럽게 만드는 기술.👉해결법피그마와 완전 동일한 표현은 불가하다.css속성을 사용하여 글꼴을 피그마와 비슷하게 표현해줄 뿐이다. 1. macOS : font-smooth 사용Font-smooth 속성은 글꼴이 렌더링될 때 앤티앨리어싱 적용을 막..

✅ 동일한 setState 함수를 ”setState(value) 형태로” 여러번 호출한다면?맨 마지막 업데이트된 state로만 반영됨.value = 6 , 12 , 18… 이 아닌, 3, 6, 9가 됨.const InputPrac = () => { const [value, setValue] = useState(0); // value = 3 6 9 ... const addNum = (e) => { setValue(value + 1); setValue(value + 2); setValue(value + 3); }; return ( {value} 클릭 );};export default InputPrac;설명리액트는 setState가 호출되면 state가..

# 외부 CDN의 위험성회사에선 UI 라이브러리로 vuetify2를 사용 중이다.공식 홈페이지에서는 폰트나 Material Design 아이콘을 사용하기 위해 외부 CDN을 연결하는 방법을 제시하고 있다.📌 문제 상황오늘 회사 서비스에 Material Design 아이콘이 제대로 나오지 않고, 폰트도 깨지는 현상이 발생했다.원인은 사용하고 있는 외부 CDN 서비스(jsdelivr)에서 발생한 문제였다.확인해보니, jsdelivrd에서 ssl 인증서 만료됐는데 갱신되지 않아 발생한 이슈였다. [문제의 코드]    📌 해결 방법✅ 방법1. 해당 스크립트를 다운받아 웹서버에서 제공하는 방식 (CDN에서 제공하는 아이콘,폰트 관련 파일을 직접 다운 받아, public폴더에 소스를 넣고 웹서버에서 제공하는 방..

✅ SOP(Same-Origin-Policy)같은 출처(origin) 끼리만 리소스를 공유할 수 있음sop정책 위반 여부는 '브라우저'가 확인하는 것임. (브라우저 정책임)     ✅ CORS (Cross-Origin-Resource-Sharing)cors에러는 "브라우저"가 막는 것임 (브라우저 정책임)sop의 예외 조항으로 cors 정책을 지킨 리소스 요청이면 브라우저는 다른 출처간의 리소스 공유를 허용해줌.다른 출처끼리도 요청을 보낼 수 있도록 허용해줌브라우저 정책이기 떄문에, 브라우저를 통하지 않고 api요청하는 경우는 이 정책이 적용되지 않음. (예를들면 postman으로 api호출)   ✅ CORS 동작 방식1. 요청 헤더 : 브라우저가 현재 요청을 보내는 곳의 origin값을 요청헤더에 설정..

회사에서 파일을 업로드,다운,삭제 하는 기능을 종종 접하게 된다.사실 구현은 어찌저찌 했지만 개념을 정확히 이해하고 있는 것 같지 않다.뒤돌아서면 까먹는걸 보니ㅠㅠ이번 기회에 개념을 확실히 알고 자신있게 코드를 다루고싶다.1. 서버로 파일 업로드시✅ formData란?* 브라우저에서 파일을 전송하기 위한 포맷은 formdata 형식* "multipart/form-data"로 인코딩해야 하는 경우 사용함.*  폼 데이터에 반복작업할 땐 for...of를 돌면서 append로 하나하나 넣어줘야 한다. const formData = new FormData(); for(let value of fileList){ formData.append("key", value); }* formData를 get요청을 쿼리..

https://www.typescriptlang.org/ko/docs/handbook/2/generics.html 단일 타입이 아닌, 다양한 타입을 동적으로 정의할 수 있음.코드의 재사용성과 유연성 증가, 코드를 추상화된 형태로 작성할 수 있게 됨1. 제네릭 함수function identity(arg: T): T { return arg;}let result1: number = identity(42); // result1의 타입은 number let result1: number = identity(42); // 타입 추론 사용let result2: string = identity("hello"); // result2의 타입은 stringlet result2: string = identity("hell..

useMemo계산 비용이 높은 연산 결과 "값"을 메모이제이션 함.해당 값이 변경되지 않는 한 다시 계산하지 않아, 렌더링 중에 불필요한 계산을 방지함탑레벨에서 한번 호출되야 함. (hook은 무조건 한번은 호출되야 해서)형태 const memoizedValue = useMemo(() => { return computeExpensiveValue(a, b); // 계산 비용이 높은 연산 또는 값}, [a, b]); 사용 : 복잡한 계산 처럼 비용이 높은 연산을 피하고 싶을때 사용함. ✅ calculateValue- 초기 렌더시 한번 호출됨- 순수 함수여야 함- 인자를 받지 않음 ( useMemo( (   )  =>  ), []);- 캐시하길 원하는 값을 계산하는 함수- 캐시하길 원하는 값을 반환해야 함..