# 외부 CDN의 위험성회사에선 UI 라이브러리로 vuetify2를 사용 중이다.공식 홈페이지에서는 폰트나 Material Design 아이콘을 사용하기 위해 외부 CDN을 연결하는 방법을 제시하고 있다.📌 문제 상황오늘 회사 서비스에 Material Design 아이콘이 제대로 나오지 않고, 폰트도 깨지는 현상이 발생했다.원인은 사용하고 있는 외부 CDN 서비스(jsdelivr)에서 발생한 문제였다.확인해보니, jsdelivrd에서 ssl 인증서 만료됐는데 갱신되지 않아 발생한 이슈였다. [문제의 코드] 📌 해결 방법✅ 방법1. 해당 스크립트를 다운받아 웹서버에서 제공하는 방식 (CDN에서 제공하는 아이콘,폰트 관련 파일을 직접 다운 받아, public폴더에 소스를 넣고 웹서버에서 제공하는 방..
✅ HTTP 데이터 구조HTTP는 문자형태로 데이터 전송되고, 필요한 부분을 파싱함시작줄- 시작줄과 헤더는 줄 단위로 분리되있음- 줄바꿈 문자열은 'CRLF' 라고 씀. 그러나 그냥 개행 문자로 받아들일 수 있어야 함- 사유구절 : 숫자로 된 상태 코드를 사람이 이해할 수 있도록 설명한 짧은 문구- 버전정보: HTTP/. ex)HTTP/1.1: 메이저,마이너는 정수고, 각각 분리된 숫자로 다뤄진다: HTTP/2.22 는 HTTP/2.3보다 크다 (22>3): 요청은 HTTP/1.0으로, 응답은 HTTP/1.1로 받을 경우 : 이는 응답 보내는 애프리케이션은 1.1까지 이해할 수 있음을 뜻하는 것이다. 헤더- 헤더는 빈줄(CRLF)로 끝남. 본문body가 없더라도! 본문- 본문body는 비어있을 수도 ..
✅ 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요청을 쿼리..
1. 이미지 최적화 - 이미지 CDN화면에 렌더될 이미지의 크기가 100px인데 다운받은 사진이 1000px일 경우 리소스 낭비됨.때문에 CDN을 이용해 처음에 다운받을 때 부터 사이즈를 조절해서 다운받거나미국서버가 아닌 좀 더 가까운 한국 서버에서 다운 받도록 하여 다운 속도를 향상시킬 수 있음 ※ CDN 사이트 예제 : https://developers.cloudflare.com/images/image-resizing/url-format/'100px로 렌더될 이미지라면 2배수인 200 사이즈로 줄이고, 품질을 낮춰서 다운받는다// https:///cdn-cgi/image//2. 병목코드 최적화performance 탭에서 컴포넌트가 렌더링 될 때 오래걸리는 부분을 파악 -> 그 부분의 코드 수정하여 최..
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( ( ) => ), []);- 캐시하길 원하는 값을 계산하는 함수- 캐시하길 원하는 값을 반환해야 함..
✅ 웹개발자가 모바일 웹뷰 디버깅하기 회사 서비스는 웹뷰 환경이다. 기존에 웹뷰 디버깅 환경이 구축되어있지 않아 처음엔 alert찍어가며 값을 확인해보곤 했다. 그러나 웹뷰 브라우저를 디테일하게 디버깅 해봐야 하는 상황이 왔고, 디버깅 방법을 알아보았다. 시도1. chrome 디버깅을 하기 위해선, 앱개발 쪽에서 setWebContentsDebuggingEnabled(true) 함수를 실행해야 한다. 그러나 회사 유니티팀에선 디버그모드를 켜는 기능이 없어서 저 함수를 실행할 수 없다고 한다. 덧붙여서 안드로이드에 디버깅 툴을 쓸 수 있는 방법이 없을거라 한다..! 시도2. charles라는 Proxy툴을 사용해서 디버깅하는 법을 선택하기로 했다. 모바일 -> 프록시 서버(charles) -> 서버 모바일..
최근 웹앱에서 백그라운드 푸시알림 기능을 구현하게 되었다. 푸시알림 기능을 위해 pwa 방식 웹앱이 앱처럼 설치될 수 있도록 하고자했다. (근데 알고보니 pwa가 아니여도 백그라운드 알림이 구현가능한다고 한다) pwa방식 웹앱이 설치될 수 있기위해 manifest.json 파일을 적용시키면 된다. ✅ manifest.json 이란? - 앱에 대한 정보를 제공함. - 웹앱을 사용자 모바일의 홈 화면에 저장하는 데 필요한 필수 정보와 사용자 경험 측면에서 어떻게 보일지에 대한 정보가 담긴 json 파일. (배경색, 앱 이름, 앱 아이콘, 등등...) manifest.json 예제 { "name": "Rice Bowl", "short_name": "Rice Bowl", "description": "Fluffl..
사실 나는 웹뷰에 대해 막연히 '모바일위에 브라우저 띄우는거~' 라고만 생각했다. 그러나 최근에 여러 상황으로 인해 이 개념에 대해 제대로 파악할 수 있는 계기가 되었다. 상황1 회사에서는 유니티(모바일)과 웹뷰(브라우저)간에 통신이 안되는 에러를 해결하며 이 둘이 통신하는 원리에 대해 알게되었다. 또한 우리회사 제품은 웹앱이 아닌 웹뷰 개발 방식이다. 웹앱과 웹뷰의 차이에 대해 알게되었다. 상황2 그리고 최근 사이드 프로젝트를 진행하면서 팀원 모두 어플 개발을 원했는데, 나는 웹 개발자라 웹뷰 형태로 가는 것에 대해 설명하느라 좀 애먹었던 시간이 있었다. 프론트 개발자 끼리라면 그냥 용어를 말하면 되지만, 웹,앱 개발을 모르는 분들에게 설명하는건 좀 당혹스럽기도 했다. 나에겐 당연한 개념이 이들에겐 당..
