더 알아보기166 웹 서버 정의웹 서버는 "사용자가 웹 브라우저를 통해 요청한 데이터를 처리하고, 그 결과를 사용자에게 전달하는 컴퓨터 시스템"입니다.쉽게 말해서, 인터넷에서 우리가 웹사이트를 열면 그 웹사이트의 내용을 보여주는 역할을 합니다. 역할요청 처리 : 사용자가 웹사이트에 접속하면 브라우저가 서버에 요청을 보냅니다. 예를 들어, "네이버 보여줘!"라는 요청을 서버로 보내는 것입니다.응답 전송 : 서버는 그 요청을 받고, 요청에 해당하는 데이터를 찾아 사용자에게 응답합니다. 웹 서버는 주로 HTML, CSS, JS, 이미지, 비디오와 같은 정적 파일(서버에서 수정 없이 그대로 전달하는 파일)을 사용자에게 보냅니다.데이터베이스와 연결 : 동적인 웹 페이지(로그인 정보, 사용자 맞춤형 페이지 등은 서버에서 처리하고 생성된 데이.. 2024. 10. 15. [StoryBook] Vue 3 + Typescript + StoryBook 프로젝트에 fontAwesome 설정하기 [StoryBook] Vue 3 + Typescript 프로젝트에 StoryBook 적용하기Vue 3와 TypeScript를 사용한 프로젝트에서 폴더 구조를 고민하던 중, 컴포넌트를 테스트하고 문서화할 수 있는 방법으로 Storybook을 도입하기로 결정했다. StoryBook에 대해 알아보니, Vue에서 적용하는eundol1113.tistory.com이번 포스팅은 앞서 정리했던 [StoryBook] Vue 3 + Typescript 프로젝트에 StoryBook 적용하기에서 fontAwesome을 적용하는 방법을 다루고 있습니다. React를 사용하다가 Vue를 사용하다 보니 느끼는 거지만.. Vue에 부가적은 라이브러리를 사용할 때마다 구글링을 해보면 정보가 많이 없고, ChatGPT를 사용하더라도 정.. 2024. 9. 30. [StoryBook] Vue 3 + Typescript 프로젝트에 StoryBook 적용하기 Vue 3와 TypeScript를 사용한 프로젝트에서 폴더 구조를 고민하던 중, 컴포넌트를 테스트하고 문서화할 수 있는 방법으로 Storybook을 도입하기로 결정했다. StoryBook에 대해 알아보니, Vue에서 적용하는 방법에 대한 자료가 React보다 적기도 하고, 현재 진행 중인 프로젝트는 서브모듈을 사용하고 있어서 이번 기회에 정리해 두면 좋을 것 같았다. 사용 후기부터 얘기하자면, 처음에 적용할 때는 좀 낯설기도 하고 자동으로 문서화가 된다고 해도 설정을 해줘야 하니까 시간이 꽤 걸릴 것 같아서 비효율적이지 않을까? 하는 의문이 들었는데, 막상 해보니 예상보다 쉽게 설정할 수 있었고, 문서화가 잘 돼서 일일이 코드를 파악하지 않아도 된다는 점이 정말 좋았다. 설치 및 설정 방법※ node .. 2024. 9. 27. [Mockoon] Route에 paramer 설정하기 새로운 프로젝트에서 UI를 개발하던 중, API 개발이 지연되어 Mockoon을 활용해 mock 데이터를 사용하여 기능을 구현하게 되었습니다. 이 과정에서 Mockoon에 파라미터를 설정하는 방법에 대한 자료가 부족한 것 같아 짧게 정리해 보았습니다. Mockoon에 대한 설명이나 설치 방법은 아래 블로그를 참고하시면 좋을 것 같습니다. Mockoon을 활용한 프론트엔드 개발 효율성 향상: 가상서버 및 Proxy 설정1. Mockoon이란? Mockoon은 로컬 환경에서 REST API 모킹을 설계하고 실행할 수 있는 가장 간편하고 빠른 방법을 제공한다. 또한 시간을 절약할 수 있고, OpenAPI 사양과 호환이 되는 완벽한 도구이다. (출baekspace.tistory.com Parameter 설정하는.. 2024. 9. 25. Axios에서 요청 취소 설정하기 웹사이트에서 버튼 클릭이나 특정 동작 후 로딩 화면이 표시되고, 검색 중에는 '검색 취소' 버튼을 제공하는 경우가 많은 데, 그런 기능은 어떻게 구현할 수 있을까?를 고민하다 2가지 방법을 알게 되었습니다. 1. CancelToken 사용하기 1️⃣ axios.CancelToken.source()를 사용하여 취소 토큰을 생성한다.2️⃣ API 요청을 보낼 때 cancelToken 옵션에 토큰을 삽입한다.3️⃣ 해당 요청을 취소할 때 source.cancel()를 호출한다.import axios from 'axios';// CancelToken 생성const source = axios.CancelToken.source();axios.get('/api/endpoint', { cancelToken: so.. 2024. 8. 28. Axios의 timeout 옵션으로 요청 시간 제한 설정하기 단점 Axios를 사용하던 중 API 요청에 제한 시간을 둬야 하는 기능을 개발하게 되었고,그 과정 중 timeout 옵션을 알게 되어 짧게 정리해보았습니다. 역할API 요청이 timeout 옵션으로 설정한 시간 내에 완료되지 않을 경우 자동으로 요청을 취소하고 오류를 발생 시킵니다.기본값은 0으로, 옵션을 설정하지 않거나 0을 설정한 경우 무제한으로 요청을 대기할 수 있습니다. timeout을 설정하면 애플리케이션의 응답성을 높이고, 불필요한 대기를 방지할 수 있습니다.설정 방법import axios from 'axios';// 1분 (60초)으로 타임아웃 설정const axiosInstance = axios.create({ timeout: 60000});axiosInstance.get('/api/e.. 2024. 8. 28. TanStack Query TanStack Query란?: TanStack Query는 현대 웹 애플리케이션에서 데이터 패칭, 캐싱, 동기화 및 상태 관리를 간편하게 처리할 수 있도록 돕는 라이브러리입니다. React, Vue, Svelte 등 다양한 프레임워크와 호환되며, 비동기 데이터와 서버 상태를 효율적으로 관리할 수 있는 강력한 도구입니다. 이 라이브러리는 API 호출, 데이터 캐싱, 폴링, 배경 업데이트와 같은 데이터 관련 작업을 간단하게 처리할 수 있도록 설계되었습니다. 개발자들은 복잡한 데이터 관리를 간소화하고, 애플리케이션의 성능을 향상시킬 수 있습니다. TanStack Query와 React Query의 차이점이름과 브랜드React Query : React 전용TanStack Query : 다양한 프레임워크와 라이.. 2024. 8. 12. [Error] Vue import Error Vue 프로젝트 보고 있는 데 import 사용한 곳마다"export default를 사용해야 합니다", "모듈 또는 해당 형식 선언을 찾을 수 없습니다."이런 오류가 발생해서 2시간을 머리를 뜯고 있었는 데 다행히 팀장님이 도와주셔서 금방 해결할 수 있었다. Cannot find module "파일 경로" or its corresponding type declarations. 라는 에러가 발생했고, Vuex Extension을 삭제했더니 문제가 해결되었다. Error가 어디서 발생하고 있는 건지 잘 읽어보자해결하고 나니까 오른쪽 끝에 vetur라는 글자가 보였다. 코드 설정뿐만 아니라 익스텐션도 의심해봐야 한다. Vetur뿐만 아니라 Material Icon도 문제다.json을 json이라고 인식하지.. 2024. 6. 3. [Postman] WebSocket Mock Server 사용법 Postman 설정Postman에 접속한다.사이드바에서 Mock Servers에 접속한다. (없을 경우 Configure workspace sidebar에서 활성화시킨다.)New에서 WebSocket을 선택한다.연결 테스트를 진행한다. URL은 테스트용이기 때문에 wss://ws.postman-echo.com/raw를 사용해 주었다.Mock Server이기 때문에 Message를 Send 했을 때 동일한 값이 넘어온다.Vue에 연결하여 테스트 Postman Mock Servers Test 전송 2024. 5. 21. 이전 1 2 3 4 ··· 19 다음 728x90
