전체 글745 티스토리 <작심삼주 오블완 챌린지> 🚩 작심삼주 오블완 챌린지오늘 블로그 완료! 21일 동안 매일 블로그에 글 쓰고 글력을 키워보세요.www.tistory.com 티스토리에서 11월 7일 (목)부터 21일 동안 매일 글쓰기에 도전하는 "작심삼주 오블완 챌린지"를 개최한다고 하는 데요즘 블로그에 어떤 걸 적으면 좋을까 고민만 하다가 결국 적지 못하는 날이 많았었는 데이번 기회로 개발과 관련 없더라도 흥미있는 주제가 있다면 적어보려고 합니다! 예전에 네이버에서도 비슷한 챌린지를 진행하여서 즐거운 마음으로 진행했었는 데 좋은 챌린지라고 생각합니다! 전 21일 완주해서 아이폰 16 Pro를 받아보고 싶어요 2024. 10. 29. 웹 서버 정의웹 서버는 "사용자가 웹 브라우저를 통해 요청한 데이터를 처리하고, 그 결과를 사용자에게 전달하는 컴퓨터 시스템"입니다.쉽게 말해서, 인터넷에서 우리가 웹사이트를 열면 그 웹사이트의 내용을 보여주는 역할을 합니다. 역할요청 처리 : 사용자가 웹사이트에 접속하면 브라우저가 서버에 요청을 보냅니다. 예를 들어, "네이버 보여줘!"라는 요청을 서버로 보내는 것입니다.응답 전송 : 서버는 그 요청을 받고, 요청에 해당하는 데이터를 찾아 사용자에게 응답합니다. 웹 서버는 주로 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. [프로그래머스] 전화번호 목록 문제 설명 전화번호부에 적힌 전화번호 중, 한 번호가 다른 번호의 접두어인 경우가 있는지 확인하려 합니다. 전화번호가 다음과 같을 경우, 구조대 전화번호는 영석이의 전화번호의 접두사입니다. 구조대 : 119 박준영 : 97 674 223 지영석 : 11 9552 4421 전화번호부에 적힌 전화번호를 담은 배열 phone_book 이 solution 함수의 매개변수로 주어질 때, 어떤 번호가 다른 번호의 접두어인 경우가 있으면 false를 그렇지 않으면 true를 return 하도록 solution 함수를 작성해 주세요.제한사항phone_book의 길이는 1 이상 1,000,000 이하입니다. 각 전화번호의 길이는 1 이상 20 이하입니다. 같은 전화번호가 중복해서 들어있지 않습니다.입출력 예 입출력 예 .. 2024. 7. 17. 이전 1 2 3 4 ··· 83 다음 728x90
