F개발자의 에러로그

자바스크립트에서 함수 호이스팅이란? 함수를 먼저 실행시키고 함수선언문(Function Declarations)을 나중에 작성해도 자바스크립트에서 해당 함수를 실행시킬 수 있는 것. 함수선언문(Function Declarations) - fucntion MyFunc(){} 형태의 함수 선언문 함수표현식(Function Expressions) - 변수에 함수를 할당하는 방식(JS의 유연한 특성) → JS 컴파일 시점에 나중에 선언된 함수에 대한 메모리를 할당해놓은 상태이기 때문에, 실행 시점에 선언된 함수의 식별자 정보를 이미 알고 있음. 정확히 말하면 자바스크립트는 함수만 호이스팅 할 수 있는게 아니라 변수까지 호이스팅 가능하다. 그 전에 자바스크립트가 변수를 할당하는 과정을 알아야 한다. 자바스크립트가 ..

노션으로 깔끔하게 보기: https://glistening-seashore-ed4.notion.site/useSWR-stale-while-revalidate-0e829551bc624b338b9bcfae97faa4a1 useSWR, 그리고 stale-while-revalidate useSWR을 사용하는 이유: 전역 상태관리를 위해 + 캐시를 효과적으로 사용하기 위해 glistening-seashore-ed4.notion.site useSWR을 사용하는 이유: 전역 상태관리를 위해 + 캐시를 효과적으로 사용하기 위해 잠깐, SWR이 뭔데? 공식문서에도 나와있지만, 다들 눈에서 자동으로 필터링 했을 것이므로 한번 더 언급하자면 useSWR에서 SWR은 stale-while-revalidate의 약자이다. 📌 ..

1. 클라우드플레어 작동원리 2. 클라우드플레어 사이트 최적화 - 캐싱 3. 클라우드플레어 사이트 최적화 - 스피드 클라우드플레어 스피드 메뉴에서는 사이트의 속도를 분석해주면서 다양한 최적화 서비스를 제공한다. Speed 개요 탭에서는 속도 분석 결과를 제공하는데 자세히 보면 기준이 South Carolina, USA다. 즉, 미국 기준으로 1.1초 후에 페이지 로딩이 시작된다는 뜻으로 우리나라의 기준과 다소 맞지 않다. 이 부분은 그냥 패스하면 된다. (구글 개발자도구로도 충분히 분석이 가능하니..) 최적화 탭을 보면 속도 개선을 위한 다양한 옵션이 있다. 이미지 크기 조정, Polish, 자동최소화, Brotli, URL 프리패치, 로켓 로더 등 엄청 많지만, 대부분이 유료이고 무료로 쓸 만한 것들로..

1. 클라우드플레어 작동원리 2. 클라우드플레어 사이트 최적화 - 캐싱 3. 클라우드플레어 사이트 최적화 - 스피드 클라우드플레어를 이용해 웹페이지 최적화를 하고 싶다면 수많은 메뉴 중 캐싱, 스피드 2가지만 알아도 충분하다. 1. Caching 2. Speed 이 페이지에서는 이 중 캐싱을 다룬다. 1. Caching 상태 분석 ①Analytics 메뉴 활용하기 클라우드플레어는 기본적으로 모든 리소스를 캐시한다. Analytics > Traffic 메뉴를 보면 친절하게 캐시된 요청과 캐시되지 않은 요청을 보기 쉽게 차트로 보여준다. ②네트워크창에서 헤더로 분석하기 캐싱이 잘 되었다면 Size에 memory cache(또는 disk cache)로 나오고 Time이 모두 0이다. 캐시파일의 경우 TTFB가..

1. 클라우드플레어 작동원리 2. 클라우드플레어 사이트 최적화 - 캐싱 3. 클라우드플레어 사이트 최적화 - 스피드 1. 클라우드플레어는 어떻게 작동하는가 클라우드플레어(Cloudflare)는 DNS와 CDN 서비스를 제공하는 미국 기업이다. 도메인 네임 서비스를 제공하면서 트래픽 필터링도 해주고 Ddos도 차단해주고 분석도 해주고 CDN도 알아서 해주고.. 보안이나 성능, 사이트 안정화 등 여러 면에서 아주 우수한 서비스를 제공한다. 많은 서비스가 있지만 프론트 엔지니어라면 사이트 성능 개선과 최적화에 초점을 맞추어 클라우드플레어를 이용해야 한다. 그 전에 알고 가야할 것이 있다. ①클라우드플레어에서는 기본적으로 캐싱을 해준다. ②(만약 프록시서버에서 캐싱 설정을 했으면)클라우드플레어에서 캐싱이 먼저 ..

** 노션에서 더 편하게 보기 https://glistening-seashore-ed4.notion.site/f4a5838d303248918c146b40c9ac4b8a 캐시에 관한 최소한의 모든 것 캐시란? glistening-seashore-ed4.notion.site 캐시란? 요청에 대한 응답의 복사본을 어딘가에 저장해놓고, 같은 요청이 들어오면 (서버에) 재요청하지 않고 저장한 복사본 데이터를 보내주는 것. 어떤 요청인가? 유저의 GET요청. 보통 POST요청은 캐시하지 않는다. 일반적으로 200, 301, 404 응답을 캐싱한다. 어디에 저장하나? 프록시 서버에 생성된 캐시 메모리 또는 클라이언트의 개인적인 공간(브라우저 등)에 저장한다. 이는 추후 설명하게 될 공유캐시(Public)/사설캐시(P..

회문문자열(palindrome)은 거꾸로 읽어도 알파벳이 똑같은 글자를 말한다. 알고리즘의 가장 기초적인 문제로 자주 등장하는데, 자바스크립트에서는 reverse 메소드를 이용하여 많이 푼다. 여기에서는 재귀함수와 splice 메소드를 이용하여 풀어보겠다. 먼저 args로 넘어온 문자를 split을 이용해 Array로 만들어주고, 재귀함수(recursive)로 돌린다. 재귀함수를 사용할 때는 무조건 if/else 구문으로 조건을 만들 것. 특정 조건을 통과하면 true을 리턴, 아니면 false을 리턴하면 된다. 여기서 특정 조건은 두 개가 되는데,하나는 배열의 길이가 1 이하일 때.글자가 1글자면 무조건 회문문자열이 된다. ex) 'a', 'i', 'x', ... 나머지 하나는? "첫번째 글자와 마지막..

사실 자바스크립트에서는 Object.prototype.toString() 이라는 Web API로 진수 변환을 바로 할 수 있다. toString의 인자로 radix(기수)을 넣으면 바로 변환을 해준다. (2~36까지만) 그래서 3을 2진수로 바꾸고 싶으면 아래와 같이 하면 된다. let n = 3; let res = n.toString(2); console.log(res); 위 결과는 '11'이 될 것이다. 그러나 개발자라면 웹 API를 이용하지 않고 그냥 만들 수 있어야 한다. 코드로 구현하기 전에 수학(!!)으로 10진수를 2진수로 바꿔보자. 10진수로 된 정수 a를 2진수로 바꾼다고 하면 a를 2로 나눈 나머지와 몫을 다시 2로 나눈 나머지, 몫을 다시 2로 나눈 나머지,, 이렇게 몫을 더이상 2로..

nodejs + nextjs로 앱을 실행하던 중 갑자기 로컬에서 아래와 같이 패키지 에러가 났다. 로그는 Error: Package subpath './lib/parser' is not defined by "exports".. (이하 생략) 뭘 잘못 건드렸나.. npm 모듈을 다 지우고 다시 깔아봐도 같은 에러다. 구글링을 해보니 node 버전이 16 버전 이상인 경우 위 에러가 발생할 수 있다고 한다. (원인은 모른다..) nvm current로 현재 버전을 확인해보니 버전이 갑자기 16으로 올라가있었다. 14 버전으로 급히 다운그레이드 후 재실행하니 아주 잘~된다. 오늘의 교훈: 알수없는 에러가 뜨면 node js 버전 호환성을 확인해보자!

문제 보러 가기: https://programmers.co.kr/learn/courses/30/lessons/92334 코딩테스트 연습 - 신고 결과 받기 문제 설명 신입사원 무지는 게시판 불량 이용자를 신고하고 처리 결과를 메일로 발송하는 시스템을 개발하려 합니다. 무지가 개발하려는 시스템은 다음과 같습니다. 각 유저는 한 번에 한 명의 programmers.co.kr function solution(id_list, report, k) { var answer = Array.from({length: id_list.length}, ()=>0); var report_map = new Map(); // 신고 명단 id_list.forEach((id)=>{ report_map.set(id, []); // 신고 ..