javascript79 axios interceptor를 사용하여 token 처리하기 SPA 개발을 하다 보면 axios로 통신하는 경우가 많이 있는데 서버와 분리된 환경이다 보니 로그인 정보는 token을 이용해서 처리하는 경우가 많다. 그런데 axios를 사용하여 통신할 때마다 token값을 매번 header에 세팅하여 넘겨주는 것은 가독성이 떨어지고 비효율적이기 때문에 interceptor를 활용하여 처리해 주는 것이 좋다. interceptor란? interceptor는 보통 http 클라이언트 요청 및 응답을 가로채어 전처리 작업을 수행하도록 도와주는 기능이다. 예를 들어, axios에서는 요청을 보내기 전에 interceptor를 사용하여 요청에 대한 설정을 추가하거나 응답을 받은 후에 interceptor를 사용하여 응답 데이터를 가공하거나 오류 처리를 할 수 있다. 이를 통.. 2024. 4. 12. Vue의 생산성을 위해 vite를 사용하는 이유 vue를 개발한지는 몇 년 되었지만 vue project를 구동할 때 느리다고 생각했던 적이 없었다. 늘 그렇듯 어떤 서버를 구동하든지 컴파일되고 올라가는 데에 어느 정도 시간이 걸렸기 때문에 vue를 구동하는데도 크게 신경을 쓰지 않았던 것 같다. 이번 프로젝트를 진행하면서 vite 정보를 얻고 알아보다가 과감하게 vite를 이용해서 project 세팅을 하게되면서 차이를 느끼고 정리를 하게 되었다. (http://econoflow.co.kr) vite를 사용하여 프로젝트를 진행한 결과 기존의 구동 방식과는 다르게 엄청난 속도 차이가 난 것이다. 기존에는 별 생각없이 보낸 시간들이 아까울 지경이었다. 서버 구동 명령어를 통해서 실행하고 콘솔이 올라갈 때에는 속도를 제외하고는 어떤 부분이 바뀌었는지 알 .. 2024. 4. 2. [리액트 네이티브] CheckBox has been removed from React Native ... 에러 알아보기 안녕하세요! 오늘은 리액트 네이티브 개발 중 마주할 수 있는 에러에 대해 알아보려고 합니다. 그러면 에러 내용을 먼저 보고 하나씩 정리를 해보도록 하겠습니다! * 에러 내용 'CheckBox has been removed from React Native. It can now be installed and imported from '@react-native-community/checkbox' instead of 'react-native'. See https://github.com/react-native-checkbo/react-native-checkbox' * 설명 에러 내용은 위와 같이 발생을 하였고, 에러 메시지 내용으로는 'CheckBox' 컴포넌트가 'react-native'에서 제거되었고, 대신 .. 2023. 7. 12. [Vue] Component 컴포넌트 만들기 안녕하세요! 오늘은 Vue에서 컴포넌트를 만드는 방법에 대해 포스팅하려고 합니다. 컴포넌트를 만들어 사용하면 여러 가지 장점을 살릴 수 있습니다. 기능의 재사용성, 코드의 가독성, 그리고 모듈화 등 다양한 장점을 활용하여 원하는 기능을 간편하게 구현할 수 있습니다. 컴포넌트를 만들고 활용하는 방법은 간단하지만 중요한 내용이기 때문에 한 번 정리해 보는 것이 좋습니다. 그럼 예제를 통해서 어떻게 구현이 되는지 알아보도록 하겠습니다~ vue 컴포넌트의 장점 1. 재사용성 컴포넌트 기반 접근 방식은 기능을 독립적으로 구성할 수 있어 재사용성이 뛰어납니다. 컴포넌트를 작성하고 필요한 곳에서 여러 번 사용할 수 있으며, 코드의 중복을 줄여 개발 효율성을 높입니다. 2. 모듈화 각각의 컴포넌트는 자체적인 템플릿, .. 2023. 7. 11. [리액트 네이티브] 로그인 페이지 Bcrypt 암호화 하기 안녕하세요! 오늘은 리액트 네이티브에서 로그인 페이지를 개발할 때 Bcrypt 암호화 기술을 활용한 암호화 처리 방법에 대해 포스팅하려고 합니다. 보안은 소프트웨어에서 로그인 기능을 구현할 때 항상 중요한 고려 사항입니다. 따라서 이번 포스팅에서는 Bcrypt라는 강력한 암호화 기법을 사용하여 사용자의 비밀번호를 안전하게 암호화하여 처리할 수 있는 방법에 대해 알아보겠습니다. 이번 예제를 통해 간단하고 명확하게 암호화 기능을 이해하고 구현할 수 있도록 설명해 드리겠습니다. 사용자의 비밀번호를 보호하는 데 안전하고 신뢰할 수 있는 암호화 방법으로 Bcrypt를 사용함으로써 더욱 안전한 로그인 페이지를 구현할 수 있습니다. 그러면 이제 예제를 통해 Bcrypt 암호화 기법을 적용하는 방법을 자세히 알아보도록.. 2023. 7. 8. jQuery change 이벤트 배우기 (select, input 요소) 안녕하세요. 오늘은 jQuery의 change 이벤트에 대해서 알아보려고 합니다. change 이벤트는 이름에서도 알 수 있듯이 선택한 요소의 변경이 발생했을 때의 이벤트를 핸들링하는 기능입니다. click과 같은 이벤트처럼 사용 빈도가 높은 이벤트이며, 보통은 select box, input text, input checkbox, input radio 등 선택 요소를 변경할 때 많이 사용합니다. 그럼 예제 소스 코드를 통해서 하나씩 정리해 보도록 하겠습니다. import jQuery v3.6.1 예제 소스 코드를 설명하기 전에 먼저 jQuery 라이브러리를 import 시켜줍니다. 저는 cdn 방식으로 연동을 하였고, jQuery 버전은 3.6.1입니다. 사용하는 환경의 라이브러리 버전을 꼭 확인하고 .. 2023. 2. 16. 이전 1 2 3 4 5 6 ··· 14 다음
