본문 바로가기

전체 글353

Next.js - next dev / build / start 명령어 및 포트 변경하기 요즘은 Next.js 를 공부하는 중이다. 최근까지 CSR 방식을 사용해 개발하며 느꼈던 단점들을 SSR 과 SSG 방식을 통해 보완할 수 있게 되어 매우 들떠있다. Next.js 를 시작하며 명령어가 너무 헷갈렸다. 정확한 명령어를 알고 사용하기 위해 정리해보았다. dev - Runs next dev to start Next.js in development mode // 디벨롭 모드 시작하기 build - Runs next build to build the application for production usage // 프로덕션 빌드할 떄 start - Runs next start to start a Next.js production server // 프로덕션 서버 시작하기 - next dev 는 so.. 2023. 4. 7.
웹 최적화 - 구글폰트 워닝 "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.
반응형

티스토리툴바