왓누씨의 개발일기
close
프로필 배경
프로필 로고

왓누씨의 개발일기

  • 분류 전체보기 (60)
    • DEVELOPMENT (58)
      • HTML & CSS (1)
      • JavaScript (18)
      • React.js (14)
      • Typescript (11)
      • Next.js (2)
      • Node.js (1)
      • PROJECT NOTES (9)
      • PROJECTS (2)
    • 일상 (0)
      • 생각나누기 (0)
    • ...기타 (2)
      • BOOK CLIP (0)
      • REVIEW (2)
  • 홈
  • 태그
  • 방명록
[TS] 제네릭 (Generics)

[TS] 제네릭 (Generics)

01제네릭이란?제네릭은 간단하게 "함수나 클래스, 객체 등이 다양한 타입을 처리할 수 있도록 도와주는 도구"라고 할 수 있습니다. 예를 들어, 우리가 숫자나 문자를 다루는 함수가 필요할 때, 각기 다른 타입을 처리하려면, 그때마다 함수를 따로 만들어야 할 수도 있죠. 그런데 제네릭을 사용하면, 한 번만 작성한 함수로 다양한 타입을 처리할 수 있게 됩니다. 1. 제네릭이 필요한 이유예를 들어, 우리가 받은 값에 대해 그 값을 그대로 반환하는 함수가 있다고 생각해 볼게요.처음에는 이런 방식으로 작성할 수 있죠:function func(value) { return value;}이 함수는 어떤 타입이든 받을 수 있지만, 타입스크립트에서 any나 unknown을 사용하게 되면 그 타입이 추론되지 않아서 문제가 ..

  • format_list_bulleted DEVELOPMENT/Typescript
  • · 2025. 3. 3.
  • textsms
[JS] fetch와 REST API

[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] 프로미스 (Promise)

[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] 동기와 비동기, 둘이 싸우면 누가 이길까?

[JS] 동기와 비동기, 둘이 싸우면 누가 이길까?

01동기란동기란 여러 작업이 있을 때 이 작업들을 순서대로 한 번에 하나씩 처리하는 방식을 말합니다. 쉽게 말해, 앞에 있는 작업이 끝나야만 다음 작업을 시작할 수 있는 구조입니다.예를 들어, A작업, B작업, C작업이 있다고 가정해 보겠습니다. 동기 방식에서는 다음과 같은 순서로 작업이 진행됩니다:'' A작업 시작 -> A작업 종료 -> B작업 시작 -> B작업 종료 -> C작업 시작 -> C작업 종료 ''이 작업들을 실제로 실행하고 처리하는 역할을 하는 것이 바로 쓰레드(Thread)입니다.장점코드의 가독성이 높습니다. 순서대로 실행되기 때문에 로직의 흐름을 이해하기 쉽습니다. 단점작업 중 하나라도 오래 걸리면, 전체 프로그램이 멈춘 것처럼 보일 수 있습니다. 예를 들어, A작업이 5초 걸린다면, 그..

  • format_list_bulleted DEVELOPMENT/JavaScript
  • · 2025. 1. 23.
  • textsms
  • navigate_before
  • 1
  • navigate_next
공지사항
전체 카테고리
  • 분류 전체보기 (60)
    • DEVELOPMENT (58)
      • HTML & CSS (1)
      • JavaScript (18)
      • React.js (14)
      • Typescript (11)
      • Next.js (2)
      • Node.js (1)
      • PROJECT NOTES (9)
      • PROJECTS (2)
    • 일상 (0)
      • 생각나누기 (0)
    • ...기타 (2)
      • BOOK CLIP (0)
      • REVIEW (2)
최근 글
인기 글
최근 댓글
태그
  • #Promise
  • #page router
  • #실습예제
  • #html
  • #TypeScript
  • #css
  • #React
  • #모던자바스크립트 deep dive
  • #JavaScript
  • #한입챌린지
전체 방문자
오늘
어제
전체
Copyright © 쭈미로운 생활 All rights reserved.
Designed by JJuum

티스토리툴바