[JS] 콜백 (Callback)

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

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

API와의 첫 데이트, 너무 떨지 마!

✅❌📌👉01API (Application Programming Interface) 란API는 Application Programming Interface(애플리케이션 프로그램 인터페이스)의 줄임말로, API는 애플리케이션 간에 데이터를 주고받을 수 있도록 돕는 "언어"라고 할 수 있습니다. 예를 들어, 날씨 앱을 켤 때, 앱은 날씨 정보를 제공하는 API에 "오늘 날씨가 어때요?"라고 묻고, API는 날씨 정보를 반환합니다. 이렇게 서버와 클라이언트 간에 데이터를 교환할 때 API가 중요한 역할을 하죠. 1. API 역할API는 클라이언트와 서버 간에 데이터를 주고받는 중요한 역할을 합니다.예를 들어, 우리가 웹사이트에서 정보를 요청할 때, 서버에서 데이터를 받아오는 방식을 API가 처리한다고 생각하..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2025. 2. 19.
• textsms

[React] Redux와 Redux Toolkit

01Redux 란Redux는 애플리케이션에서 여러 컴포넌트들이 공통으로 사용하는 데이터를 전역 상태라고 부르는데,이 상태를 효율적으로 관리하는 도구입니다. React 같은 라이브러리에서는 컴포넌트들이 서로 독립적으로 동작하는데,여러 컴포넌트들이 같은 데이터를 필요로 할 때 Redux를 사용해서 상태를 한 곳에서 관리할 수 있습니다. ✅ 필요한 모듈: redux와 react-redux 모듈을 사용합니다.  📌 왜 Redux를 배워야 할까? Redux는 많은 개발자들이 사용하는 인기 있는 라이브러리입니다.예를 들어, npm trends에서 Redux의 다운로드 수를 보면 얼마나 많은 사람들이 이 도구를 사용하고 있는지 알 수 있습니다. 📌 FLUX 패턴?FLUX 패턴은 상태를 효율적이고 예측 가능한 방식..

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

[React] 최적화 전략 2탄 (lazy, Suspense와 코드 스플리팅, Debounce, Throttle)

01lazy와 Suspense1. lazy lazy는 컴포넌트를 필요할 때만 로딩하는 기능으로, 초기 로딩을 최적화할 수 있습니다.이는 대개 큰 애플리케이션에서 유용하게 쓰입니다. ✅ 사용법import React, { Suspense, lazy } from 'react';const MyComponent = lazy(() => import('./MyComponent'));function App() { return ( Hello, world! Loading...}> );}export default App;React.lazy는 동적으로 컴포넌트를 불러오는 함수입니다.import() 구문을 사용하여 컴포넌트를 동적으로 불러옵니다.2. Suspense ..

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

[React] React 스타일링 (SCSS, Styled-Components, Tailwind CSS)

01SCSS (SASS의 최신 버전!)SCSS는 CSS의 확장방식으로, 더 편리하게 적용할 수 있고 강력한 기능을 제공합니다. 가능성 증가, 재용성 강화, 중차구조 가능, 반복문 및 단어를 사용하여 간단하게 작성할 수 있습니다. ✅  파일 확장자:. scss: .scss1. SCSS 설치 방법npm install sass그리고 확장자가. scss인 파일을 생성해서 사용하면 됩니다!예를 들어 App.scss 파일을 만들고 이렇게 작성할 수 있어요. 3. 기본 문법 1) 변수 사용하기한 번 설정한 변수는 여러 곳에서 재사용할 수 있어서 편합니다!$main-color: #FF6F3C;button { background-color: $main-color; color: white;}  2) 중첩(Nesting..

• format_list_bulleted DEVELOPMENT/React.js
• · 2025. 2. 17.
• 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

Vercel 배포, 누르기 전에 딱 5분만 확인!

React 프로젝트를 배포하기 전에 반드시 체크해야 할 사항들이 있습니다.이 과정을 건너뛰면 배포 후에 제목이 이상하게 나오거나, 썸네일이 안 뜨거나, 파비콘이 적용되지 않는 문제가 생길 수 있습니다.이 글에서는 배포 전 사전 작업부터 Vercel을 이용한 배포 과정까지 한 번에 정리해 보겠습니다!01배포 전 작업1. 페이지 타이틀 설정하기브라우저 탭에 표시되는 제목은 기본적으로 index.html의 태그에서 설정됩니다.  하지만 React는 SPA(Single Page Application)이므로,각 페이지마다 다른 타이틀을 설정하려면 추가 작업이 필요합니다.이를 위해 커스텀 훅을 사용하여 페이지별로 동적으로 타이틀을 변경할 수 있습니다.import { useEffect } from "react";..

• format_list_bulleted DEVELOPMENT/PROJECT NOTES
• · 2025. 2. 17.
• textsms

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

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

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