본문 바로가기

전체 글

(20)
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); }); 특징 2 Promise.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-compression html2canvas와 browser-image-compression 라이브러리는 설치되어있어야 한다 const handle..
[프로그래머스] 같은 숫자는 싫어 (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보다 크거나 같고..
[프로그래머스] 가운데 글자 가져오기 (Javascript) 문제 설명 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두 글자를 반환하면 됩니다. 제한사항 s는 길이가 1 이상, 100이하인 스트링입니다. 입출력 예 s return "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]; return answer; } 입..
[프로그래머스] 2016년 (Javascript) 문제 설명 2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a , b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN, MON, TUE, WED, THU, FRI, SAT입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 "TUE"를 반환하세요. 제한 조건 2016년은 윤년입니다. 2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일 같은 날짜는 주어지지 않습니다) 입출력 예 a b result 5 24 "TUE" 나의 풀이 나는 월마다 각각의 일 수를 모두 더한 후, 요일 수인 7을 나누어 나머지 값을 이용해 요일을 반환하려..