JS 동기/비동기 처리 - 콜백부터 async/await

비동기 처리란 무엇인가?동기 vs 비동기동기 처리: 요청과 결과가 동시에 일어난다. 즉 특정 작업이 완료될 때까지 다음 작업은 대기해야 한다.비동기 처리: 요청 후 결과를 기다리지 않고 다음 작업을 먼저 실행한다. 결과는 나중에 준비되면 처리한다.자바스크립트와 비동기자바스크립트는 싱글 스레드 언어입니다. 즉, 한 번에 하나의 작업만 처리할 수 있다.하지만 setTimeout, AJAX 요청, DOM 이벤트 등 많은 작업들이 시간이 걸린다. 이러한 작업들을 동기적으로 처리하면 사용자 경험이 굉장히 나빠진다 (브라우저 멈춤 현상)따라서 자바스크립트는 비동기 처리를 통해 이러한 문제를 해결한다.비동기 처리 방식의 종류 콜백 함수가장 기본적인 비동기 처리 방식이다.비동기 작업이 완료되면 호출될 함수를 미리 등록..

• format_list_bulleted Frontend/JavaScript
• · 2024. 8. 14.
• textsms

가비아에서 도메인 구매하기 + Vercel 프로젝트

최근에 사이드 프로젝트로 계산기 기능을 제공하는 프로젝트를 제작하여 배포까지 완료하였습니다.Next.js 14 버전으로 개발과 Vercel로 배포까지 무난하게 진행되었지만 뭔가 아쉬움이 남았습니다.제 프로젝트도 멋진 도메인을 가지길 원해서 바로 가비아로 달려가 보았습니다. 제가 가비아에서 어떻게 도메인을 구매하고 프로젝트에 연결하였는지 이번 포스팅에서 설명드리겠습니다.이번 포스팅은 Vercel 배포, 가비아 회원 가입 등 부수적인 내용은 완료된 상태에서 진행되어 도메인을 구매하고 등록하는 것 외 내용은 생략 되어있습니다. 1. 가비아 접속 및 도메인 검색가비아에 접속하여 WWW. 뒤에 원하는 도메인을 입력하여 검색을 합니다.검색 시에는 최상위 도메인은 포함하지 않고 도메인 네임만 포함하여도 검색 가능합니..

• format_list_bulleted .ect
• · 2024. 8. 13.
• textsms

Next.js의 빌드를 알아보자

Next.js는 React 기반 웹 애플리케이션 개발을 위한 강력한 프레임워크이다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 이미지 최적화, 라우팅 등 다양한 기능을 제공하여 개발 생산성과 사용자 경험을 향상시킨다.이번 포스팅에서는 Next.js 프로젝트를 빌드하는 방법과 빌드 과정 그리고 빌드 결과물에 대해 알아보겠습니다.Next.js란?Next.js는 React를 기반으로 하는 웹 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 코드 스플리팅, 이미지 최적화, 라우팅 등 다양한 기능을 제공합니다.서버 사이드 렌더링(SSR): 페이지 로딩 속도를 개선하고 SEO(검색 엔진 최적화)를 향상시킵니다.정적 사이트 생성(SSG): 빌드 시점에 HTML 파일을 생성하여..

• format_list_bulleted Frontend
• · 2024. 8. 13.
• textsms

MPA와 SPA 그리고 SSR과 CSR을 알아보자

MPA (Multi Page Application)란?MPA는 전통적인 웹 애플리케이션 형태로, 여러 개의 HTML 페이지로 구성된다. 각 페이지는 독립적인 HTML 파일로 존재하며 사용자가 페이지를 이동할 때마다 서버에서 해당 HTML 파일을 받아와 브라우저에서 렌더링합니다. 이러한 방식은 웹 개발 초창기부터 사용되어 왔으며 간단한 웹사이트나 콘텐츠 중심의 웹 서비스에 적합하다. MPA의 장점검색 엔진 최적화(SEO)에 용이: 각 페이지가 독립적인 URL과 콘텐츠를 가지므로 검색 엔진이 페이지를 쉽게 크롤링하고 색인할 수 있다.브라우저 호환성 문제가 적다: MPA는 오래된 브라우저에서도 잘 작동하며, 특별한 기술이나 라이브러리가 필요하지 않다.서버 측 렌더링으로 인해 서버에서 추가적인 보안 제어가 가능..

• format_list_bulleted Frontend
• · 2024. 8. 13.
• textsms

웹서버 : Monolithic과 MSA 차이

Monolithic 아키텍쳐와 MSA의 차이를 비교하기 전에?먼저 두가지를 비교해보기 전에 사전 내용을 알아보자.두 방식은 소프트웨어 설계에서 가장 널리 알려진 두 가지 방법론이다. 모놀리식 아키텍처는 전통적인 방식으로 모든 기능을 하나의 단일 애플리케이션으로 통합하는 접근법이다.이 방식은 간단하고 초기 개발 속도가 빠르지만 시간이 지남에 따라 유지보수가 어려워지고 확장성이 제한되는 단점이 있다.반면, 마이크로서비스 아키텍처는 시스템을 작은 독립적인 서비스로 나누어 각 서비스가 별도로 개발되고 배포될 수 있도록 하는 현대적인 접근법이다.  이 글에서는 모놀리식 아키텍처와 마이크로서비스 아키텍처의 개념과 특징 그리고 각 방법론의 장단점에 대해 살펴보고아키텍처를 선택하는 것이 더 적합한지에 대해 알아보자. ..

• format_list_bulleted 소프트웨어 아키텍쳐
• · 2024. 8. 9.
• textsms

[Node.js] 업비트 API로 트레이딩 봇 만들기 - 매도/매수

이전 글에서 다룬 업비트 지갑 연동에 이어,이번 포스팅에서는 매도와 매수 기능을 추가한 코인 매매 트레이딩 봇을 만드는 방법을 소개합니다.프로젝트 환경 세팅과 업비트 업비트 지갑연동이 궁금하시다면 아래 링크의 이전 글을 참고 부탁드립니다.2024.04.28 - [사이드프로젝트] - [Node.js] 업비트 API로 트레이딩 봇 만들기 - 업비트 지갑 연동 [Node.js] 업비트 API로 트레이딩 봇 만들기 - 업비트 지갑 연동제작 계기최근에 코인에 대한 관심이 높아지면서 저 역시 코인 투자를 시작하게 되었습니다. 투자를 진행해보니, 생각보다 많은 시간이 소요되는 것을 느꼈습니다. 이에 "혹시 내fabric0de.tistory.com 참고문서이전 글에서 말씀드린 업비트에서 제공하는 API 문서를 참고하였..

• format_list_bulleted 사이드프로젝트
• · 2024. 5. 20.
• textsms