티스토리

드림오구

검색하기

블로그 홈

드림오구

dreamogu59.tistory.com/m

드림오구 님의 블로그입니다.

구독자: 12

방명록 방문하기

주요 글 목록

🌱 CSR과 SSR 🌊 CSR과 SSR CSR과 SSR은 개발을 처음 배우기 시작했을 때 부터 자주 듣던 용어다. 단순히 React에서 만들면 CSR, 아니면 SSR로 기억해두었지만 Next.js로 프로젝트를 진행하게 되므로 확실히 개념을 짚고 넘어가려 한다. CSR이란? CSR(Client-side Rendering)은 클라이언트에서 페이지를 렌더링을 하고 사용자가 다른 경로를 요청할 때 마다 페이지를 새로고침 하지 않고 동적으로 관리한다는 특징을 가지고 있으며 데이터 가져오기, 라우팅 등 모든 로직이 클라이언트에서 처리 된다. CSR의 특징 자바스크립트 번들 크기의 영향을 많이 받아 코드 분할을 통해 필요한 것만 필요할 때 제공해야 한다. 사용자가 웹페이지에 방문하면 최소한의 HTML 파일을 다운로드 한 후 HTML .. 공감수 0 댓글수 0 2023. 6. 27.
🐻 [TypeScript] Class 🌊 Class TypeScript의 클래스는 JS의 클래스와 비슷하지만 몇 가지 추가된 기능이 있다. 예를 들어 TS는 클래스 속성과 메서드에 대한 타입을 명시할 수 있다. class Student { // constructor를 이용하여 초기화하기 전에 상단에서 타입을 정으한다. name: string; age: number; private grades: number[]; // 외부로 드러내지 않는 값은 private 키워드로 명시한다. constructor(name: string, age: number, grades: number[]) { // 인자 타입 정의 this.name = name; this.age = age; this.grades = grades; } getAverageGrade(): n.. 공감수 0 댓글수 0 2023. 5. 31.
🐻 [TypeScript] 인터페이스와 타입 별칭 🌊 인터페이스와 타입 별칭 인터페이스 인터페이스는 객체의 구조를 정의하는데 사용되며, 객체가 특정 속성을 가지고 있음을 보장하는데 유용하다. interface Address { city: string; country: string; } interface Person { name: string; age: number; address: Address; } let john: Person = { name: 'ogu', age: 30, address: { city: 'Ogu city', country: 'Ogu Land' } } console.log(ogu.address.city); // 'Ogu city' 인터페이스 확장 인터페이스는 클래스처럼 확장이 가능하다. interface Color { name: str.. 공감수 0 댓글수 0 2023. 5. 31.
🐻 [TypeScript] 함수 🌊 함수 함수 타입 선언 function sum(a: number, b: number): number { return a + b; } funrtion log(text: string):void { console.log(text) } 기본적으로 변수에 타입 선언을 했을 때와 동일하다. 함수의 반환 값이 없을 경우 :void를 사용한다. Optional parameter function sum(a: number, b?: number): number{ return a + b; } sum(10, 20) // 30 sum(10, 20, 30) // error sum(10); // 에러 없음 // b 파라미터에 ?를 붙여 optional parameter로 사용도 가능하다. Default parameter funct.. 공감수 0 댓글수 0 2023. 5. 30.
🐻 [TypeScript] 프로젝트 환경 구성하기 🌊 프로젝트 환경 구성하기 TS 설치하기 프로젝트 폴더 초기화하기 // yarn 사용시 yarn init -y // npm 사용시 npm init -y // -y는 사용자에게 추가 질문을 하지 않고 기본값으로 설정하는 옵션이다. 빠른 프로젝트 생성이 가능하다. 프로젝트를 할 폴더를 생성한 후 폴더 경로의 터미널에서 프로젝트를 초기화한다. 타입스크립트 설치 // --save-dev, --dev는 개발 종속성으로 패키지를 설치하는 옵션이다. // 타입스크립트는 개발 과정에만 필요하고 후에 JS로 컴파일링 할 예정이므로 dev 옵션으로 설치한다. // npm으로 설치할 시 npm install typescript --save-dev // yarn으로 설치시 yarn add typescript --dev tsc.. 공감수 0 댓글수 0 2023. 5. 30.
🐻 [Type Script] 연습하기 type Operator = 'add' | 'substract' | 'multiply' | 'divide' | 'remainder'; function calculate(operator: Operator, num1: number, num2: number): number { switch (operator) { case 'add': return num1 + num2; case 'substract': return num1 - num2; case 'multiply': return num1 * num2; case 'divide': return num1 / num2; case 'remainder': return num1 % num2; default: throw new Error('에러다옹'); } } Union Ty.. 공감수 0 댓글수 0 2023. 5. 30.
🐻 [TypeScript] 타입 추론 🌊 타입 추론 타입 추론 (Type Inference) let num = 59; num = 'ogu'; // Type 'string' is not assignable to type 'number'. // num = 'ogu'; 변수 num은 타입이 지정되지 않았지만 숫자열을 할당 할당했기 때문에 자동으로 number type으로 유추하기 때문에 다른 타입으로 재 할당하면 오류가 발생한다. 문맥상의 타이핑 (Contextual Typing) 표현식의 context를 사용하여 그 표현식에 대한 유형을 추론하는 것을 의미하는데, 이 기능은 함수의 매개변수, 표현식, 타입이 명시적으로 주어지지 않는 상황에서 유용하게 사용됩니다. type Animal = { name: string; age: number; } c.. 공감수 0 댓글수 0 2023. 5. 30.
🐻 [TypeScript] Union type, Intersection Type 🌊 Union type, Intersection Type Union Type Union Type은 자바스크립트 논리연산자 ||와 같은 의미다. type ValueType = number | string | boolean; function formatValue(value: ValueType): string { return String(value); } union type으로 만들어진 ValueType 덕분에 formatValue함수는 number, string, boolean를 안전하게 전달받을 수 있어 안정성을 제공할 수 있다. // any type 사용 function addPrefixAny(prefix: string, value: any) { return prefix + value.toString.. 공감수 0 댓글수 0 2023. 5. 30.
🐻 [TypeScript] 기본 타입 🌊 기본 타입 타입스크립트 첫 시작이다 뿌셔뿌셔 Boolean Number String Object Array → 자바스크립트에선 Object인데 타입스크립트에선 Array가 따로 있다. Tuple Enum Any Void Null Undefined Never :을 통해 자바스크립트 코드에 타입을 표기(Type Annotation)할 수 있다. String let name: string = 'Ogu'; Number 16진수, 10진수 외에도 ES6에서 도입된 2진수와 8진수를 지원한다. let age: number = 59; Boolean let isLoading: boolean = false; Undefined let name: undefined; // 이렇게 쓰는 경우는 거의 없으며 let name.. 공감수 0 댓글수 1 2023. 5. 29.
⭐️ [라이브러리] TanStack Query 🌊 TanStack Query (리액트 쿼리) * 아직 공부 중입니다. 리액트를 사용하여 개발하면 웹에서 데이터를 받아 관리해야하는 일이 많습니다. React Query, 현재는 이름이 변경된 TanStack Query는 강력한 비동기 상태 관리 라이브러리로, 서버의 데이터를 클라이언트에 가져오거나 캐시를 관리, 데이터 업데이트 등 비동기 과정을 더욱 편하게 하는데 사용됩니다. 예를 들어, useEffect로 데이터를 받아오는 컴포넌트를 만들고 그 컴포넌트를 다른 컴포넌트에서 호출하였을 때, 값을 재사용하거나 같은 상태를 공유하는 것이 아닌, 컴포넌트를 호출하는 여러 컴포넌트를 걸쳐 계속해서 새로운 값을 받아오며 네트워크 통신이 발생하게 됩니다. 따로 캐싱을 관리하지 않아서인데요. TanStack Que.. 공감수 0 댓글수 2 2023. 5. 19.
🌊 [javascript] 이진탐색 🌊 이진 탐색 🐤 문제 설명 부분적으로 오름차순 정렬*된 정수의 배열(rotated)과 정수(target)를 입력받아 target의 인덱스를 리턴해야 합니다. 부분적으로 정렬된 배열: 배열을 왼쪽 혹은 오른쪽으로 0칸 이상 순환 이동할 경우 완전히 정렬되는 배열 예시: [4, 5, 6, 0, 1, 2, 3]은 왼쪽으로 3칸 또는 오른쪽으로 4칸 순환 이동할 경우 완전히 정렬됩니다. 🐣 제한사항 rotated에 중복된 요소는 없습니다. target이 없는 경우, -1을 리턴해야 합니다. 🐥 입출력 예 let output = rotatedArraySearch([4, 5, 6, 0, 1, 2, 3], 2); console.log(output); // --> 5 output = rotatedArraySearch.. 공감수 0 댓글수 0 2023. 5. 4.
🌱 [Web] Hashing & Token 🌊 Hashing Hashing은 암호화 방식 중 하나로, 복호화가 가능한 다른 암호화 방식과 달리 해싱은 암호화만 가능하다. 해싱은 해시 함수(Hash Function)를 사용하여 암호화를 진행한다. 해쉬 함수의 특징 항상 같은 길이의 문자열을 리턴한다. 서로 다른 문자열을 동일한 해시 함수를 사용하면 반드시 다른 결과값을 반환한다. 동일한 문자열에 동일한 해시 함수를 사용하면 항상 같은 결과값이 나온다. 해쉬 함수 SHA1 생성기 https://www.convertstring.com/ko/Hash/SHA1 SHA1 해시 - 온라인 SHA1 해시 생성기 www.convertstring.com 해싱의 목적 해싱은 복호화 불가능한 암호지만 비밀번호 또한 해싱하여 저장하므로 해싱값이 서로 확인하여 일치하는 .. 공감수 0 댓글수 0 2023. 5. 3.
⭐️ [Redux] 상태 관리 라이브러리 🌊 Redux 리덕스를 사용하면 컴포넌트 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 전달, 업데이트할 수 있다. Redux는 React에 종속되는 라이브러리가 아니며, 리액트에서 사용되려고 만들어졌지만 실제로 다른 UI 라이브러리/프레임워크와 함께 사용할 수 있으며 예 : angular-redux, ember-redux 등, Vue도 가능하지만 Vue에선 리덕스와 유사한 vuex를 주로 사용) 바닐라 자바스크립트와 함께 사용할 수 있다. Redux 키워드 Action 액션 : 상태에 어떠한 변화가 필요하면 액션이 발생한다. 액션은 객체 형태로 표현한다. { type : 'INCREASE.. 공감수 0 댓글수 0 2023. 5. 3.
🌱 [Web] cookie & session 🌊 cookie & session cookie HTTP 프로토콜의 무상태성을 보완해주는 도구. 원래 보안이 목적이 아니지만 요즘은 인증, 보안의 용도로 자주 사용한다. 쿠키는 서버에서 클라이언트에 전송하는 작은 데이터 조각이다. 쿠키는 영속성 있는 데이터를 저장하는 방법이다. 서버는 클라이언트의 쿠키를 이용하여 데이터를 가져올 수 있으며 반대로 클라이언트에서 서버로 쿠키를 다시 전송할 수도 있다. 쿠키를 이용하면 상태가 없는(statelss) HTTP 프로토콜에서 상태 정보를 기억시켜주어 사용자의 로그인 상태를 유지할 수 있다. 팝업창 오늘 하루 보지 않기 로그인 상태 추천광고 쿠키의 목적 세션 관리 (session management) 서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리.. 공감수 0 댓글수 0 2023. 5. 2.
🌱 [HTTP/네트워크] 네트워크 기초 🌊 네트워크 기초 웹 어플리케이션 아키텍처 인터넷 연결이 없다면 네이버나 여러 앱은 정상적으로 동작할 수 없다. 그 이유는 우리가 보고자 하는 정보를 인터넷 어딘가에 존재하는 서버로부터 받아오기 때문이다. 만약 정보를 제공해주는 서버가 없다면 정보가 업데이트 될 때 마다 우리는 어플리케이션 스토어에서 끊임없이 업데이트를 해야할 것이다. 클라이언트 - 서버 아키텍처 리소스가 존재하는 곳과 리소스를 사용하는 앱을 분리시킨 것을 2티어 아키텍처, 또는 클라이언트-서버 아키텍처라고 부른다. 리소스를 사용하는 앱이 바로 '클라이언트', 리소스를 제공하는 곳은 '서버'라 부른다. 클라이언트 - 서버 - 데이터베이스 아키텍처 일반적으로 서버는 리소스를 전달해 주는 역할만 담당한다. 리소스를 저장하는 공간을 별도로 마.. 공감수 0 댓글수 2 2023. 4. 26.
🌱 [사용자 친화 웹] 웹 표준 & 접근성 🌱 웹 표준 & 접근성 웹 표준 웹 표준은 W3C에서 제시한 권고 사항으로, 웹에서 표준적으로 사용되는 기술이나 규칙을 의미합니다. 어떤 브라우저를 사용하더라도 웹 페이지가 동일하게 보이고 정상적으로 작동할 수 있도록 하는 웹 페이지 제작 기법을 포함하고 있으며 이러한 웹 표준을 준수하는 것은 사용자에게 좋은 사용자 경험을 제공하고, 검색 엔진 최적화 등의 이점을 가져다줍니다. 최신 웹 브라우저, 크롬, 엣지, 사파리, 오페라, 파이어폭스 등은 모두 웹 표준을 지원하므로, 웹 페이지를 웹 표준에 맞춰 작성하면 어떤 브라우저를 사용하더라도 동일한 결과물을 얻을 수 있습니다. 웹 표준은 W3C에서 제공하는 '권고' 사항이지만, 사용자에게 좋은 사용자 경험을 제공하기 위해 웹 표준을 준수하는 것이 좋습니다. .. 공감수 0 댓글수 2 2023. 4. 26.
🌙 [React] yarn 설치 후 eslint 오류 발생 해결법 yarn으로 react 설치 후 파일 내용을 수정하면 eslint가 react-app을 찾을 수 없다며 오류가 발생합니다. 저는 yarn을 처음 설치 했을 때 부터 생긴 오류였고 이를 해결하기 위해 node 재설치 등 여러가지 방법을 해보았으나 해결이 되지 않았습니다. [eslint] Failed to load config "react-app" to extend from. 결론부터 얘기하면 이 오류는 eslint, eslint-config-react-app 패키지를 삭제 후 재설치 하여 해결하였습니다. eslint, eslint-config-react-app 삭제하기 yarn remove eslint eslint-config-react-app eslint, eslint-config-react-app 재설.. 공감수 0 댓글수 2 2023. 4. 24.
🌙 [React] Codestates - React Custom Component 🌊 React Custom Component 과제 오늘은 리액트 hook을 사용하여 Custom Component 과제를 하였습니다. Bare minimum Requirement로 Modal, Toggle, Tab, Tag를 구현 과제가 나왔고 Advanced Challenge는 내일 도전해볼 생각입니다. 오늘 구현한 Modal, Toggle, Tab, Tag를 소개하고 코드 작성시 고려했던 점을 리뷰하려 합니다. Modal export const ModalContainer = styled.div` // TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. display: flex; justify-content: center; align-items: center; height: 10.. 공감수 0 댓글수 2 2023. 4. 20.
🌊 [JAVASCRIPT] 비동기 프로그래밍 🌊 비동기 프로그래밍 const foo = () => {}; const bar = () => {}; foo(); bar(); 위 예시 이미지와 코드를 보면 foo 함수와 bar 함수는 호출된 순서대로 스택 자료구조인 실행 컨텍스트 스택에 푸시되어 실행된다. 함수가 실행되려면 '함수 코드 평가 과정'에서 생성된 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되어야 한다. 실행 컨텍스트 스텍에 함수 실행 컨텍스트가 푸시 되는 것은 바로 함수 실행의 시작을 의미한다. 함수가 호출된 순서대로 순차적으로 실행되는 이유는 함수가 호출된 순서대로 함수 실행 컨텍스트가 실행 컨텍스트 스택에 푸시되기 때문이다. (들어온 순서대로 스택에 들어가 실행된다.) 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 갖는다. 이는.. 공감수 0 댓글수 2 2023. 4. 19.
🌙 [React] Hook - useCallback 🌊 Hook - useCallback : useCallback은 useMemo와 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에 사용한다. 컴포넌트 내에서 함수를 선언하면 컴포넌트가 리렌더링 될 때 마다 새로 만들어진 함수를 사용하게 되는데, 대부분은 문제 없지만 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 useCallback을 사용하여 최적화한다. 즉, 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. useCallback import React, { useCallback, useMemo, useState } from 'react'; const getAverage = (numbers) => { console.log('평균값 계산 중.... 공감수 0 댓글수 2 2023. 4. 18.
🌙 [React] useMemo 🌊 Hook - useMemo : useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 액션 값은 주로 다음과 같은 형태로 이루어져 있다. 리덕스에서 사용하는 액센 객체에는 어떤 액션인지 알려 주는 type 필드가 꼭 있어야 하지만, useReducer에서 사용하는 액센 객체는 반드시 type을 가지고 있을 필요는 없으며, 객체가 아니라 문자열이나 숫자열이어도 상관 없다. { type : 'INCREMENT', // 다른 값들이 필요하다면 추가로 들어감 } useMemo 리스트에 숫자를 추가하고 추가된 숫자들의 평균을 보여주는 함수형 컴포넌트 import React, { useState } from 'react'; const getAverage = (numbers) => .. 공감수 0 댓글수 2 2023. 4. 18.
🌙 [React] Hook - useReduce 🌊 Hook - useReducer : useReducer는 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다. Reducer는 현재 상태, 그리고 업데이트를 위한 필요한 정보를 담은 액션 값을 전달받아 새로운 상태로 반환하는 함수이다. Reducer 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜야 한다. function reducer(state, action){ return {...}; // 불변성을 지키면서 업데이트한 새로운 상태를 반환한다. } 액션 값은 주로 다음과 같은 형태로 이루어져 있다. 리덕스에서 사용하는 액센 객체에는 어떤 액션인지 알려 주는 type 필드가 꼭 있어야 하지만, useReducer에서 사용하는 액센 객체는 반드시 type을 가지고 있을 필요.. 공감수 0 댓글수 2 2023. 4. 18.
🌙 [React] Hook - useEffect 🌊 Hook - useEffect : useEffect는 렌더링될 때 마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. useEffect import React, { useState } from 'react'; export default function Info() { const [name, setName] = useState(''); const [nickname, setNickname] = useState(''); useEffect(() => { console.log('렌더링 완료'); console.log({ name, nickname }); }); const onChangeName = (e) => { setName(e.target.value); }; const onChangeNickname.. 공감수 0 댓글수 2 2023. 4. 17.
🌙 [React] Hook - useState 🌊 Hook - useState : useState는 가장 기본적인 Hook이며, 함수형 컴포넌트에서도 가변적인 상태를 지닐 수 있게 해준다. useState import React, { useState } from 'react'; export default function Counter() { const [value, setValue] = useState(0); return ( 현재 카운터 값은 {value}입니다.{' '} setValue(value + 1)}> setValue(value - 1)}> ); } useState는 다음과 같이 사용합니다. const [value, setValue] = useState(0); useState함수의 파라미터에는 상태의 기본값, 초기값을 넣어줍니다. 현재 0인.. 공감수 0 댓글수 2 2023. 4. 17.
🌊 [JAVASCRIPT] 타이머 🌊 타이머 : 시간이 경과된 이후에 호출되도록 함수 호출을 예약하려면 타이머 함수를 사용한다. 타이머 함수는 브라우저 환경과 Node.js 환경에서 모두 전역 객체의 메서드로서 제공하는 함수이다. 타이머 생성 함수 : 일정 시간이 경과된 이후 콜백 함수를 호출, 비동기 처리 방식으로 동작한다. setTimeout : 단 한 번 동작한다. setInterval : 반복해서 동작한다. 타이머 제거 함수 clearTimeout clearInterval 타이머 함수 setTimeout / clearTimeout const timeout = setTimeout(func|code[, delay, param1, param2]) func : 타이머가 만료된 뒤 호출될 콜백함수 delay : 타이머 만료 시간은 밀리초.. 공감수 0 댓글수 2 2023. 4. 16.
🌊 [javascript] 프로그래머스 - k의 개수 🌊 k의 개수 - Lv.0 🐤 문제 설명 1부터 13까지의 수에서, 1은 1, 10, 11, 12, 13 이렇게 총 6번 등장합니다. 정수 i, j, k가 매개변수로 주어질 때, i부터 j까지 k가 몇 번 등장하는지 return 하도록 solution 함수를 완성해주세요. 🐣 제한사항 1 ≤ i { // input i, j, k // for문을 돌리기? let result = 0; for (let num = i; num { // input i, j, k // for문을 돌리기 let result = 0; for (let num = i; num 공감수 0 댓글수 2 2023. 4. 13.
🌸 [UI/UX] UI/UX의 이해 🌊 UI/UX의 이해 UI (User Interface) : 사용자 인터페이스. 사람들이 컴퓨터와 상호 작용하는 시스템. 요즘은 화면상의 그래픽 요소를 UI라고 지칭하지만, 키보드, 마우스 같은 컴퓨터와 상호 작용하는 물리적 요소도 UI라 부른다. 레아이우스 폰트, 색상 등의 시각적인 요소 뿐만 아니라 효과음 등의 비시각적인 부분도 UI라고 할 수 있습니다. GUI는 UI중에서도 시각적인 부분만을 표현하는 개념입니다. 요즘에는 화면과 상호 작용을 통해 사용하는 기기들을 어렵지 않게 찾아볼 수 있습니다. 현대 사회에서는 GUI가 굉장히 중요한 역할을 하게 되었습니다. 일반적인 웹, 앱 디자인을 의미하며, 사실상 국내에선 UI와 GUI를 구분하지 않고 있습니다. UX(User Experience) UI와 긴.. 공감수 0 댓글수 2 2023. 4. 13.
🌊 [JAVASCRIPT] AJAX 🌊 AJAX AJAX(Asynchronous JavaScript and XML)란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작하며 이 객체는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. Ajax는 웹페이지의 변경에 필요한 데이터만 ₩₩비동기 방식₩으로 전송받아 웹페이지를 변경할 필요가 없는 부분은 렌더링 하지 않고, ₩₩변경할 필요가 있는 부분₩만 한정적으로 렌더링 하는 방식 JSON(JavaScript Object Notation) JSON은 클라이언트와 서버 간의 HTTP 통신을 .. 공감수 0 댓글수 2 2023. 4. 12.
🌊 [JAVASCRIPT] 재귀함수 🌊 재귀함수 : 재귀 함수는 자기 자신을 호출하는 함수를 말합니다. 재귀 함수를 이용하면 반복적인 작업을 해야하는 문제를 좀 더 간결한 코드로 풀어낼 수 재귀(再歸) : 원래의 자리로 되돌아가거나 되돌아옴. function recursion () { console.log("This is") console.log("recursion!") recursion() } 재귀로 문제 해결하기 문제를 좀 더 작게 쪼갠다. 1번과 같은 방식으로, 문제는 더 작아지지 않을 때 까지, 가장 작은 단위로 문제를 쪼갠다. 가장 작은 단위의 문제를 풂으로써 전체 문제를 해결한다. //arrSum 함수는 배열[1,2,3,4,5]의 합을 반환하는 함수. arrSum([]) === 0; // 공감수 0 댓글수 2 2023. 4. 11.
[기술면접] Java Script Promise의 기능과 필요한 이유에 대해서 설명해주세요. Promise를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 최종 결과를 반환하는 것이 아니고 어떤 시점에 결과를 제공하겠다는 '약속'을 반환합니다. Promise 이전에는 비동기 처리로 콜백 패턴을 주로 사용했으나 콜백 지옥으로 인해 가독성이 나쁘고, 비동기 처리 중에 발생한 에러 처리가 까다로워 Promise는 이러한 단점을 보완하기 위해 나온 대안이며 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있습니다. Promise는 결과를 값으로 받아서 저장할 수 있다는 것이 특징이고 결과 그 자체를 값으로 받기 때문에 연속으로 실행하는 코드에선 then()을 이용하여 더 가독성 있는 코드.. 공감수 0 댓글수 1 2023. 4. 10.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.