본문 바로가기

IT/javascript71

자바스크립트 팩토리 함수(Factory Function) 자바스크립트에서 팩토리 함수(Factory Function)란, 객체를 생성하여 반환하는 함수를 말합니다. 객체 지향 프로그래밍에서는 객체를 생성하는 것이 중요한 작업 중 하나이며, 팩토리 함수는 이를 쉽게 구현할 수 있도록 도와줍니다. 팩토리 함수는 보통 객체 리터럴 형태로 객체를 생성하는 것과는 달리, 동적으로 객체를 생성합니다. 팩토리 함수는 매개변수를 받아서 새로운 객체를 생성하고, 이를 반환합니다. 따라서 팩토리 함수를 사용하면 객체 생성에 필요한 로직을 모듈화하고, 재사용성을 높일 수 있습니다. 사용법 예를 들어, 사용자 정보를 가지고 있는 객체를 생성하는 팩토리 함수를 만들어보겠습니다. function createUser(name, age, gender) { return { name, age.. 2023. 4. 20.
자바스크립트 axios 사용법 Axios는 Promise 기반의 HTTP 클라이언트 라이브러리로, 브라우저와 Node.js에서 모두 사용할 수 있습니다. 이 라이브러리는 XHR(XMLHttpRequest)을 기반으로 하지만, fetch보다 더 많은 기능과 광범위한 브라우저 호환성을 제공합니다. Axios는 간단하고 직관적인 API를 가지고 있으며, 다양한 요청과 응답 인터셉트(intercept)를 지원합니다. 또한, 요청과 응답 데이터를 자동으로 직렬화(serialization)하고 역직렬화(deserialization)합니다. 기능 Axios를 사용하면 다음과 같은 기능을 수행할 수 있습니다. HTTP 요청을 보내기(GET, POST, PUT, DELETE 등) 요청 URL에 매개변수 전달하기 요청 본문에 데이터 전송하기 요청 헤더.. 2023. 4. 20.
자바스크립트 fetch 함수 fetch() 함수는 자바스크립트에서 제공하는 비동기 네트워크 요청 메서드로, 서버로부터 데이터를 받아오는 데 사용됩니다. fetch() 함수는 Promise를 반환하며, Response 객체를 resolve하는 새로운 Promise를 생성합니다. 사용법 fetch() 함수는 다음과 같은 문법을 가집니다. fetch(url, options); 여기서 첫 번째 매개변수인 url은 요청을 보낼 서버의 주소를 의미하며, 두 번째 매개변수인 options은 옵션 객체입니다. 옵션 객체는 HTTP 요청에 대한 다양한 옵션을 설정할 수 있는데, method, headers, body 등이 있습니다. fetch() 함수로 요청을 보내면, 응답으로 Response 객체가 반환됩니다. Response 객체는 HTTP 응.. 2023. 4. 20.
HTTP 헤더(header)란? HTTP 헤더는 HTTP 요청과 응답에서 메시지의 부가 정보를 전송하는 데 사용되는 메타데이터의 모음입니다. 이는 클라이언트와 서버 간의 통신을 효율적으로 관리하고 개선하기 위해 사용됩니다. HTTP 헤더는 일반 헤더, 요청 헤더, 응답 헤더 및 엔터티 헤더로 분류됩니다. 일반 헤더는 요청과 응답 모두에서 사용되며 메시지에 대한 일반적인 정보를 제공합니다. 요청 헤더는 클라이언트가 서버로 전송하는 요청 메시지에 대한 정보를 포함합니다. 응답 헤더는 서버가 클라이언트로 전송하는 응답 메시지에 대한 정보를 포함합니다. 마지막으로, 엔터티 헤더는 HTTP 메시지의 엔터티 부분에 대한 정보를 제공합니다. HTTP 헤더에는 다양한 정보가 포함될 수 있습니다. 예를 들어, 일반적인 헤더에는 메시지에 대한 전반적인 .. 2023. 4. 20.
쿼리 스트링(Query String) 웹 개발에서 쿼리스트링은 URL 끝에 ?을 시작으로, 키=값 형태로 여러 쌍의 데이터를 전송하는 방법 중 하나입니다. 이를 통해 웹 페이지에 요청한 데이터를 서버로 전송하거나, 서버로부터 받은 데이터를 웹 페이지에 출력하는 등의 작업을 할 수 있습니다. 쿼리스트링은 HTTP GET 요청에서 자주 사용됩니다. GET 요청은 웹 서버에게 웹 페이지나 이미지, 스타일시트 등을 요청할 때 사용됩니다. GET 요청은 URL에 쿼리스트링을 포함시켜 데이터를 전송하며, 서버는 URL에서 쿼리스트링을 추출하여 해당 데이터를 처리합니다. 사용법 쿼리스트링은 다음과 같은 형식으로 작성됩니다. http://www.example.com/path/to/file?name1=value1&name2=value2&name3=value.. 2023. 4. 19.
HTTP 상태 코드(status code) HTTP 프로토콜에서 클라이언트 요청에 대한 서버의 응답 결과를 나타내는 HTTP 상태 코드(HTTP status code)는 3자리 숫자로 이루어져 있으며, 각각의 숫자 범주에 따라 그 의미가 정해져 있습니다. 이번 글에서는 HTTP 상태 코드의 의미와 그에 따른 사용 예시를 살펴보겠습니다. 1xx (Informational) 클라이언트의 요청이 처리 중임을 나타내며, 추가 작업이 필요한 경우에는 추가적인 응답 코드와 함께 보내질 수 있습니다. 일반적으로 사용되는 코드는 100(Continue)과 101(Switching Protocols)입니다. 2xx (Successful) 클라이언트의 요청이 성공적으로 처리되었음을 나타내며, 가장 많이 사용되는 코드는 200(OK)입니다. 그 외에도 201(Cre.. 2023. 4. 19.
HTTP 요청 메서드(Request method) HTTP는 인터넷에서 데이터를 전송하는 프로토콜입니다. HTTP 요청 메서드는 서버에게 클라이언트에서 요청한 특정 동작을 수행하도록 지시하는 방법입니다. 이번 글에서는 HTTP 요청 메서드에 대해서 자세히 살펴보겠습니다. GET GET은 서버로부터 정보를 가져오기 위해 사용됩니다. 예를 들어, 브라우저에서 웹 페이지를 요청하거나 이미지 파일을 다운로드하는 등의 작업에 사용됩니다. GET은 요청 시 데이터를 URL의 쿼리 문자열에 포함시켜 전송합니다. POST POST는 서버에 데이터를 제출하는 데 사용됩니다. 예를 들어, 로그인 정보나 사용자가 작성한 글을 전송할 때 사용됩니다. POST 요청은 요청 본문에 데이터를 포함시켜 전송합니다. PUT PUT은 서버에 리소스를 추가하거나 업데이트하기 위해 사용됩.. 2023. 4. 19.
자바스크립트 async와 await JavaScript의 async/await 함수는 비동기 처리를 더 쉽게 할 수 있도록 하는 기능입니다. async 키워드를 함수 앞에 붙여 해당 함수를 비동기 함수로 만들 수 있으며, 이 함수 내에서 await 키워드를 사용하여 다른 비동기 함수의 결과를 기다릴 수 있습니다. async/await는 Promise를 기반으로 구현되어 있습니다. async 함수는 내부적으로 Promise 객체를 반환하며, await 키워드를 사용한 함수 호출은 Promise가 완료될 때까지 대기합니다. async/await를 사용하면 코드의 가독성이 향상되고, 오류 처리가 용이해집니다. 이는 Callback Hell과 같은 콜백 함수를 연속적으로 사용해야 하는 경우를 피할 수 있습니다. 사용법 아래는 async/await.. 2023. 4. 19.

티스토리툴바