본문 바로가기

전체 글

(21)

npm 라이브러리 설치 시 ETIMEDOUT 오류 원인과 해결 (registry 문제) msw를 사용하기 위해 다음과 같이 설치를 진행했다.npm i msw --save-dev 보통 오래 걸려도 1~2분이면 설치가 완료되는데 10분 넘게 설치 중인 게 이상했다.그래서 캐시 삭제 후 재설치했지만 똑같은 현상이 반복되었고 한참 기다린 끝에 나오는 건 다음과 같은 오류 메시지였다.npm error code ETIMEDOUT npm error syscall connect npm error errno ETIMEDOUT npm error network request to https://registry.npmjs.org/msw failed, reason: connect ETIMEDOUT 104.16.6.34:443 npm error network This is a problem related to ne..

REST API와 GraphQL 비교 그동안 저는 모든 프로젝트에서 서버 통신 시 REST API를 사용해 왔습니다. 그러나 최근 GraphQL 사용자가 늘어나는 것을 보고, REST API와 GraphQL의 차이점을 정확히 알아보고자 합니다. 이를 위해 REST API와 GraphQL을 비교하여 각각의 장단점을 살펴보겠습니다. REST APIREST(Representational State Transfer)는 HTTP 프로토콜을 기반으로 하는 아키텍처 스타일입니다. REST API는 리소스(URL) 기반으로 구성되며 각 리소스는 고유한 URL로 접근할 수 있습니다. 또한 리소스는 HTTP 메서드(GET, POST, PUT, DELETE 등)를 통해 조작됩니다.REST API의 장점표준화: REST는 잘 정의된 표준을 따르기 때문에 많은 개..

Next.js에서 Tailwindcss 사용해보기 항상 Scss나 styled-components를 선호해 왔지만, 새로운 프로젝트를 시작하면서 다른 CSS 라이브러리를 시도해보고 싶다는 생각이 들었다. 사용해 보니 사용법이 매우 간편하고, 무엇보다도 클래스명을 고민하는 시간을 아낄 수 있다는 점이 가장 좋았다. https://tailwindcss.com/docs/installation Installation - Tailwind CSSThe simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.tailwindcss.com 1. 프로젝트에서 tailwindcss, postcss, autoprefixer를 설치한다i..

Promise란? 자바스크립트는 비동기적으로 수행되는 언어이다. 이러한 비동기 작업을 효율적으로 처리해 줄 수 있는 객체가 바로 Promise이다. Promise를 활용하여 웹 요청, 파일 읽기, 데이터 베이스 쿼리 등 시간이 걸리는 작업을 효율적으로 처리할 수 있다. 특징 1작업 성공 시 then() 메서드를 사용하고, 실패 시 catch() 메서드를 사용하여 작업을 처리한다.myPromise .then((result) => { console.log('성공: ' + result); }) .catch((error) => { console.error('실패: ' + error); });특징 2Promise.all() 메서드를 사용하여 여러 Promise를 병렬적으로 처리가 가능하며, 이러한 작업들을 모..

클로저란? [참고] https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures 클로저 - JavaScript | MDN클로저는 주변 상태(어휘적 환경)에 대한 참조와 함께 묶인(포함된) 함수의 조합입니다. 즉, 클로저는 내부 함수에서 외부 함수의 범위에 대한 접근을 제공합니다. JavaScript에서 클로저는 함수 생developer.mozilla.org 웹 개발자라면 기본적으로 알아야 하는 개념이지만 그동안 소홀해지며 정확한 개념을 많이 잊었다는 생각이 들었습니다. 따라서 오늘 확실하게 개념을 잡아놔서 앞으로는 잊지 않기 위해 간단히 정리를 해보려고 합니다. 의미클로저란 함수와 함수가 선언될 때의 범위를 기억하고 이 범위를 나중에 참조할 수 있는 함수입니다. ..

browser-image-compression을 활용하여 이미지 최적화하기 프로젝트 진행 중 웹 프로젝트의 일부 화면을 캡처한 이미지를 서버에 저장해야 되는 기능을 구현하게 되었다.하지만 업로드한 이미지와는 다르게 html2canvas를 활용하여 캡처한 이미지는 데이터가 너무 커 서버에 전달하는데 오류가 많이 발생하는 문제가 생겼다.다행히도 browser-image-compression라는 라이브러리를 발견하게 됐고 이 라이브러리를 통해 이미지 압축, 포맷 설정 크기 조절 등 이미지를 최적화하여 프로젝트의 성능을 향상할 수 있었고, 서버와의 데이터 통신이 원활히 이루어졌다. npm i html2canvas browser-image-compressionhtml2canvas와 browser-image-compression 라이브러리는 설치되어있어야 한다 const handleC..

[프로그래머스] 같은 숫자는 싫어 (Javascript) 문제 설명배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면,arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1]을 return 합니다.arr = [4, 4, 4, 3, 3] 이면 [4, 3]을 return 합니다.배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요.제한사항배열 arr의 크기 : 1,000,000 이하의 자연수배열 arr의 원소의 크기 : 0보다 크거나 같고 9보다 작거..

[프로그래머스] 가운데 글자 가져오기 (Javascript) 문제 설명단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두 글자를 반환하면 됩니다.제한사항s는 길이가 1 이상, 100이하인 스트링입니다.입출력 예sreturn"abcde""c""qwer""we" 나의 풀이function solution(s) { let answer = ''; const sList = s.split(''); const sListLength = sList.length; sListLength % 2 ? answer = sList[Math.floor(sListLength/2)] : answer = sList[sListLength/2 - 1] + sList[sListLength/2..

이전 1 2 3 다음

티스토리툴바