본문 바로가기

분류 전체보기361

웹 최적화 - 구글폰트 워닝 "The resource was preloaded using link preload but not used within a few seconds from the window's load event." 지난번 폰드 다운로드 속도를 해결했더니 또다른 워닝이 나왔다. 지난번에 해결했던 구글 폰트 최적화 ↓ ↓ ↓ 웹 최적화 - 구글 폰트 속도 빠르게 만들기 (TEST) 웹 사이트의 성능을 측정해 보았더니 구글 폰트를 다운 받는데 시간이 꽤 걸렸다. 브라우저 렌더링을 할 때, 폰트 다운로드가 끝날때까지 기다렸다가 다음 태그를 읽어와서 그런 것 같았다. 참 devbirdfeet.tistory.com 1. 첫번째 이슈 The resource https://fonts.googleapis.com/css2?family=Noto+Sans+KR was preloaded using link preload but not used within a few seconds from the window's load event. Pl.. 2023. 3. 27.
JavaScript - 호이스팅(hoisting)과 클로저(closure)의 쉬운 이해 JavaScript 를 공부할 때면 알아야할 호이스티와 클로저의 개념 여러번 숙지할때마다 조금 더 깊이 들어가게 된다. (다 - 다익선) 오늘도 의식의 흐름에 따라 정리를 해보았다. JavaScript - 호이스팅(hoisting)과 클로저(closure)의 쉬운 이해 스코프 코드를 짤 때, 모든 시작은 변수를 선언하고 값을 넣는 것에서 출발한다. 근데 변수가 인기가 많아서 이곳 저곳 불려다니면 혼선이 생길 것이다. 그래서 스코프라는 개념으로 변수가 돌아다닐 수 있는 바운더리를 정해두었다. 글로벌 레벨 스코프는 코드 이곳저곳을 누빌 수 있다. 함수 레벨 스코프는 function() { 함수 안 } 에서만 누빌수 있다. 블록 레벨 스코프는 { 요런 블록 안 } 에서만 뛰놀 수 있다. (if 문이나 for .. 2023. 3. 17.
npm 실행오류 - Cannot find module 'are-we-there-yet' nvm 을 설치해서 npm 버전을 바꾸려고 npm install 하다가 다음과 같은 에러를 만났다. 난 are-we-there-yet 을 설치한적도 없었는데 왜 이 모듈이 없다고 하는 걸까 are-we-there-yet 모듈은 npm log 를 구성하고 있는 디펜던시중 하나이다. 즉, node 의 디펜던시에 문제가 있어 이런 에러가 뜨는 것이다. 인터넷에 찾아보니 여러가지 해결방법이 있었지만 나와는 맞지 않아 직접적으로 찾아해맸다. nvm 에 설치된 node 버전과 현재 나의 node 버전이 맞지 않아 일어나는 문제로 판단하였고, (그렇기 때문에 디펜던시가 서로 달랐던 것으로 추측한다.) nvm 디렉토리로 직접 들어가 잘못 설치된 버전이 있어 그 폴더를 삭제해 주었다. 다시 npm install 을 해보.. 2023. 3. 16.
JavaScript - 동기와 비동기의 쉬운 이해 Updated 03/16/23 항상 헷갈렸던 부분을 의식의 흐름에 따라 정리해보려고한다. 요청과 응답 HTTP 통신을 할때는 클라이언트와 서버가 서로 커뮤니케이션을 한다. 통신을 할 때는 순서가 중요하다. 그래서 통신을 할 때 동기적 처리가 필요하게 되었다. 요청 - 클라이언트 → 서버 응답 - 서버 → 클라이언트 동기와 비동기 동기는 하나가 완료하고 차례차례 그 다음 테스크를 처리하는 방식이다. 비동기는 동시에 병렬적으로 핸들링하는 방식이다. 자바스크립트는 싱글쓰레드 언어이다. 싱글쓰레드는 이 말인즉슨 일꾼이 한명이다. 동시 진행이 안된다. 하나의 함수를 실행하고 있으면, 다른 함수는 블로킹(Blocking)이 된다. 멀티쓰레드는 병렬진행이 가능하다. ex) 크롬 창을 보면 알수있다. 한탭에서 에러가 .. 2023. 3. 9.
JavaScript - 유용한 정규식 예제들 내가 보려고 만든 유용한 정규식 예제들 🤩 정규식은 사랑입니다 💝 (계속 업데이트 해서 채워나갈 예정) JavaScript - 유용한 정규식 예제들 URL 검사 const validURL = (url: string): boolean => { if (!url) { return false; } const regex = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/g; return regex.test(url); }; 이메일 검사 const validEMAIL = (email: string): boolean => { if (!email) { return false; } const regex = /^([\w._-])*[.. 2023. 3. 2.
JavaScript - 재귀함수 만들기(feat. 반복문 비교) 프로그래머스 코테 문제를 풀어보다가 while 문을 사용한 함수를 → 재귀함수로 바꾸어 한번 더 풀어보았다. 처음에는 어렵지만 유형을 익히고 이해하게 될수록 참 재미있어 지는 것 같다. JavaScript - 재귀함수 만들기(feat. 반복문 비교) 문제를 간단히 설명해보면 다음과 같다. (출처 : 프로그래머스 - 콜라문제) 콜라 빈병 2개를 가져가면 → 새것 1병으로 교환해준다. 나는 총 빈병 20개를 가지고 있다. → 그럼 새것 10병을 받을 것이다. 10병을 그자리에서 마신다 → 그럼 새것 5병을 받을 것이다. 5병을 그자리에서 마신다 → 그럼 새것 2병을 받을 것이다. + 빈병 1개가 남을 것이다. 2병을 그자리에서 마신다 → 그럼 새것 1병을 받을 것이다. 새병 1개 마셔버리고 + 아까있던 빈병.. 2023. 3. 1.
Docker - 도커 컨테이너 각티슈 케이스 리뷰 오늘 포스팅할 친구는 도커를 사랑하는 개발자라면 지나칠 수 없는 도커 컨테이너 각티슈 케이스를 소개해보려고 한다 :) 도커는 컨테이너 기반으로 실행된다. 그 컨테이너 개념을 쉽게 설명할 때는 배에 실은 실제 컨테이너에 비유한다. 오늘 소개하는 도커 컨테이너 각티슈 케이스는 도커에 진심인 인카토스가 만든 소장용 도커 컨테이너의 등장이다. 도커를 사용(혹은 사랑)하는 서버 개발자라면 누구나 가지고 싶은 소장 욕구를 불러 일으킨다. **해당 제품은 협찬을 받아 리뷰를 진행하게 되었습니다 Docker - 도커 컨테이너 각티슈 케이스 도커 러버인 우리 팀원들의 도움을 받아 조립된 케이스. 깔끔하고 디자인이 생각보다 힙했다. 일단 어디에나 놓아도 어울릴 정도로 인테리어 용품으로도 손색이 없을 정도였다 :) 조립 후.. 2023. 3. 1.
React(94) useState 알아보기 (공식문서정리) updated 03/09/23 리액트에서 상태(state) 값은 매우매우 중요하다. 화면에서 일어나는 모든 변화들은 변수(state) 안에 담아서 표현될 수 있고, 업데이트도 자주 일어나기 때문에 렌더링(a.k.a 새로고침) 되면서 항상 최신 데이터(a.k.a state)를 유지해야 한다. 너무너무 기본이지만 확실히 알고 넘어가고자 공식문서를 참고하여 한번 더 정리해보았다. React(93) useState 알아보기 (공식문서정리) useState 는 리액트 내장 함수이고, state 를 나타내는 변수로 사용할 수 있다. useState 는 리액트 훅이기 때문에 컴포넌트 최상단에서 호출하여야 한다. 조건문이나 반복문에서의 사용은 안된다. (strict 모드에서는 pure func 인지 검사을 위해 2번 .. 2023. 2. 21.
React(93) TypeScript - 유사객체배열에서 원하는 값 사용하기 유사 객체 배열은 {객체 안에 {객체} 들이 배열} 처럼 들어있는 객체 형식을 말한다. 배열과 유사객체배열의 차이는 Array 와 Object 의 차이와 같다. 배열은 순서가 있으며, index 로 요소를 찾는다. 유사객체배열은 순서가 없으며, key 로 요소를 찾는다. 순서가 있고 없고의 차이는 크다. 배열은 메모리에서 연속된 공간을 할당 받는다. 그래서 맨 앞에 요소를 추가한다면 배열의 요소들은 순서대로 한 칸씩 옆으로 옮겨야만 한다. 객체는 메모리에 할당될 때 객체의 값에 참조 값을 통해 접근한다. 그렇기 때문에 순서를 가진 것 같이 나열해놔도 각자 주소가 다르다. 그래서 동적으로 생성되는 데이터의 경우 배열보다는 객체 형식으로 표현하는게 성능 상 더 좋다. 자 그럼 유사객체배열에서 원하는 값을 핸.. 2023. 2. 16.
반응형

티스토리툴바