[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

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

[Review] 한입 React.js 강의 후기

01강의소개이 강의는 리액트를 처음 배우는 사람들을 위한 강의입니다! 이 강의를 들으면 리액트가 무엇인지, 어떻게 사용하는지 기본 개념을 배울 수 있어요.처음에 자바스크립트 기초개념을 먼저 복습느낌으로 배우고 리액트를 시작해서 더 강의가 잘 들어옵니다.강사님이 설명을 굉장히 깔끔하고 쉽게 해 주셔서 어려운 부분도 쉽게 이해할 수 있고 질문에 대한 답도 빨라서 좋습니다! 특히 강사님께서 챌린지를 같이 운영해주셔서, 하루하루 강의를 듣고 과제를 하면서 개념을 반복적으로 익힐 수 있었습니다. 이 과정을 통해 리액트에 대한 자신감도 생기고, 실제로 리액트를 활용한 웹 애플리케이션을 만드는 데 필요한 기술을 배울 수 있었습니다.  👉인프런 강의 바로가기 한 입 크기로 잘라 먹는 리액트(React.js) : 기초..

• format_list_bulleted ...기타/REVIEW
• · 2025. 2. 18.
• 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