[JS] fetch와 REST API

01fetch 란1. fetch의 배경fetch가 나오기 전에는 AJAX를 사용하여 자바스크립트에서 데이터를 서버로 요청하고 받는 것이 어려웠습니다.AJAX(Asynchronous JavaScript And XML) : 전체 페이지를 새로 고침 하지 않고 필요한 데이터만 서버에서 비동기적으로 가져오는 기법입니다.XMLHttpRequest : 데이터를 요청하고 받아오는 객체인데, 복잡하고 불편한 점이 있었습니다.예를 들어, 콜백 함수를 사용해야 하고 코드가 길어지는 단점이 있었습니다. 2. fetch란?fetch는 AJAX의 대체로, 네트워크 요청을 보내고 정보를 받아오는 더 간편하고 효율적인 방법입니다.fetch는 Promise 기반이기 때문에, AJAX보다 간편하고 효율적으로 사용할 수 있습니다. ✅ ..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2025. 2. 21.
• textsms

[JS] async와 await

01async와 await 이란?Promise를 더 쉽게 사용할 수 있게 해주는 자바스크립트의 기능입니다.async는 함수 앞에 붙여서 비동기 함수로 만들고, await는 Promise가 처리될 때까지 기다리게 만듭니다.1. 비동기란?왜 비동기가 필요한지 비동기(Asynchronous)는 동시에 여러 작업을 처리할 수 있는 방식입니다.예를 들어, 우리가 어떤 작업을 시작했을 때 그 작업이 끝날 때까지 기다리지 않고 다른 일을 할 수 있게 해주는 방식이죠.   ✅ 왜 비동기가 필요한가요?응답성 유지: 비동기를 사용하면, 네트워크 요청 중에도 웹 페이지나 앱을 계속 사용할 수 있습니다.리소스 효율성: 기다리는 동안 다른 일을 처리할 수 있어 자원을 더 잘 활용할 수 있습니다.시간 절약: 긴 작업을 기다리는 ..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2025. 2. 20.
• textsms

[JS] 프로미스 (Promise)

01Promise자바스크립트에서 비동기 작업이 끝날 때, 그 결과를 알려주는 "약속"과 같은 역할의 오브젝트입니다.예를 들어, 어떤 일이 잘 처리되면 결과를 알려주고, 문제가 생기면 에러를 알려주는 방식이죠. 1. Promise의 흐름: 생성, 사용, 결과 처리 ✅ Producing Code (프로듀서 코드): Promise를 생성하는 코드입니다.즉, 우리가 약속을 만들고 그 약속이 끝날 때까지 기다리는 코드라고 할 수 있습니다.이 코드는 어떤 일이 완료되기를 기다리고, 완료되면 결과를 알려줄 resolve 또는 에러를 알려줄 reject를 호출합니다.  ✅ Consuming Code (컨슘 코드) : Consuming Code는 Promise를 사용하는 코드입니다.즉, Promise가 완료될 때까지 기..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2025. 2. 20.
• textsms

[JS] 콜백 (Callback)

01콜백 (Callback) 이란?자바스크립트는 비동기적으로 작동하며, 싱글 스레드에서 한 번에 하나의 작업만 처리할 수 있습니다.이때 콜백은 다른 함수가 실행을 마친 후 실행되는 함수입니다.콜백을 사용하면 비동기 작업이나 특정 작업이 끝난 후 결과를 받아서 다음 작업을 실행할 수 있습니다.  return과 Callback 은 다른 건가요?: 네 return과 콜백함수는 다른 개념입니다.  ✅ return- 함수에서 값을 반환하는 데 사용되는 키워드입니다.- 함수에서 값을 반환하는 키워드로, 함수 실행을 종료하고 값을 반환하여 다른 곳에서 사용할 수 있게 합니다.  ✅ 콜백 함수 (Callback)- 다른 함수에 인자로 전달되어 나중에 호출되는 함수입니다.- 콜백 함수는 다른 함수에 전달되어, 해당 함수..

• format_list_bulleted DEVELOPMENT/JavaScript
• · 2025. 2. 20.
• textsms

[Project] 감정 일기장

01프로젝트 소개이 프로젝트는 "한입 크기로 잘라먹는 리액트" 강의의 마지막 실습 프로젝트입니다.React와 JavaScript를 활용하여 감정 일기장을 제작하였으며, 단순한 일기가 아니라 감정을 함께 기록할 수 있는 특별한 일기장입니다. 이번 프로젝트에서는 외부 폰트 적용법, 이미지 최적화 방법, 다양한 페이지 구성, 자주 사용하는 요소의 컴포넌트화, 그리고 실제 웹 배포 과정까지 실습했습니다. 1. 폴더 구조컴포넌트를 분리하여 구조를 깔끔하게 유지하였고, 스타일(CSS) 파일은 styles 폴더에서 관리한 후 global.css에서 한 번에 export하여 사용했습니다.\---src | App.jsx | index.css | main.jsx +---assets |..

• format_list_bulleted DEVELOPMENT/PROJECTS
• · 2025. 2. 17.
• textsms

[React] 웹 스토리지 (Web Storage)

React의 상태(state)는 기본적으로 자바스크립트 변수에 저장되기 때문에 페이지를 새로고침하거나 브라우저를 닫으면 초기화됩니다.하지만 웹 스토리지(Web Storage)를 활용하면 데이터를 브라우저에 저장하여 새 로고침해도 유지할 수 있습니다.데이터를 영구적으로 보관하려면 외부 데이터베이스를 사용해야 하지만,간단하게 데이터를 저장하고 관리하는 방법으로 웹 스토리지를 활용하는 것이 좋습니다.01웹 스토리지 란?웹 스토리지는 웹 브라우저에 기본적으로 내장된 데이터 저장소입니다.따로 라이브러리를 설치하지 않고, 자바스크립트 내장 함수만으로 쉽게 데이터를 저장하고 불러올 수 있습니다.주요특징으로는브라우저가 기본적으로 제공하는 데이터 저장소별도 설치 없이 자바스크립트 내장 함수로 접근 가능새 로고침해도 데이..

• format_list_bulleted DEVELOPMENT/React.js
• · 2025. 2. 16.
• textsms

[Node] Node.js & NPM 기초 개념

프론트엔드 개발을 하다 보면 자연스럽게 Node.js와 NPM을 접하게 됩니다.하지만 처음 배우는 개발자들에게는 "이게 뭔데?" 하는 의문이 들 수 있습니다.이번 글에서는 Node.js, NPM, 패키지 관리, Babel 등 꼭 알아야 할 개념을 쉽고 간단하게 정리해보았습니다!01Node.js란?Node.js는 브라우저 밖에서도 JavaScript를 실행할 수 있도록 만들어진 런타임 환경입니다.기존에는 JavaScript가 웹 브라우저에서만 실행되었지만, Node.js 덕분에 백엔드 개발도 가능해졌습니다. ✅  Node.js 등장 전: JavaScript는 프론트엔드(클라이언트 측)에서만 실행 가능✅ Node.js 등장 후: JavaScript를 백엔드(서버 측)에서도 실행 가능 즉, Node.js 덕분..

• format_list_bulleted DEVELOPMENT/Node.js
• · 2025. 2. 10.
• textsms

[Project] TODO LIST

01UI 구현1. 폴더구조 잡기먼저 컴포넌트의 역할을 명확히 구분하기 위해 폴더 구조를 설계했습니다.각 컴포넌트가 독립적으로 관리될 수 있도록 /components 폴더를 만들고 기능별 디렉터리를 생성했습니다. 각 폴더에는 index.jsx파일을 배치해서 import 경로를 단순화했습니다.이렇게 하면 코드가 모듈화 되어각 컴포넌트를 독립적으로 관리할 수 있게 됩니다. 또한 CSS는 module.css 파일을 활용해 스타일 충돌 방지를 했습니다.\---src |---App.css | App.jsx | index.css \---components +---header //상단 헤더 | index.jsx ..

• format_list_bulleted DEVELOPMENT/PROJECTS
• · 2025. 2. 6.
• textsms