자바스크립트40 [리액트 네이티브] 로그인 페이지 Bcrypt 암호화 하기 안녕하세요! 오늘은 리액트 네이티브에서 로그인 페이지를 개발할 때 Bcrypt 암호화 기술을 활용한 암호화 처리 방법에 대해 포스팅하려고 합니다. 보안은 소프트웨어에서 로그인 기능을 구현할 때 항상 중요한 고려 사항입니다. 따라서 이번 포스팅에서는 Bcrypt라는 강력한 암호화 기법을 사용하여 사용자의 비밀번호를 안전하게 암호화하여 처리할 수 있는 방법에 대해 알아보겠습니다. 이번 예제를 통해 간단하고 명확하게 암호화 기능을 이해하고 구현할 수 있도록 설명해 드리겠습니다. 사용자의 비밀번호를 보호하는 데 안전하고 신뢰할 수 있는 암호화 방법으로 Bcrypt를 사용함으로써 더욱 안전한 로그인 페이지를 구현할 수 있습니다. 그러면 이제 예제를 통해 Bcrypt 암호화 기법을 적용하는 방법을 자세히 알아보도록.. 2023. 7. 8. [자바스크립트 + Chart.js] Radar Chart 만들기 (레이더 차트) 안녕하세요. 오늘은 자바스크립트와 Chart.js를 활용하여 Radar Chart를 만들어 보려고 합니다. 레이더 차트는 보통 제품이나 서비스들을 비교해야 하는 경우, 사람의 분석 능력 비교, 이상치를 식별해야 하는 경우 등에서 활용할 수 있습니다. 저는 아직까지 레이더 차트를 사용해 본 적은 없지만 한 번쯤은 사용해보고 싶었기 때문에 이렇게 포스팅을 통해서라도 학습을 하고자 했습니다. 차트 관련 라이브러리들은 사용법이 워낙 간단하고 데이터 세팅만 잘해준다면 어렵지 않기 때문에 한 번만 학습해 놔도 필요한 상황이 온다면 활용하기 좋을 것 같습니다. 레이더 차트 동일한 지점에서 시작하는 축에 표시된 3개 이상의 정량적 변수의 2차원 차트 형태로 다변량 데이터를 표시하는 그래픽 방법입니다. 차트의 형태는 거.. 2023. 2. 15. [자바스크립트 + Chart.js] 폴라 차트 (Polar Chart) 만들기 안녕하세요. 오늘은 자바스크립트와 Chart.js를 활용하여 Polar Chart를 만들어 보려고 합니다. Polar Chart란 원형에서 각 축과 반경축을 사용하여 시각화하는 차트입니다. 지난번 포스팅의 파이 차트와 유사하면서 다른 느낌의 차트입니다. 어떻게 다른지 예제를 통해서 알아보고 파이 차트와 비교까지 해보도록 하겠습니다. 1. Polar Chart 예제 import Chart.js 우선 Chart.js 라이브러리를 cdn 방식을 통해 연동해 줬습니다. HTML canvas 요소 추가 다음은 HTML 영역에 canvas 태그 요소를 추가해 줍니다. Chart.js는 canvas를 기반으로 차트를 그리기 때문에 반드시 canvas 태그로 생성해 줘야 하며, 자바스크립트에서 canvas를 호출할 값.. 2023. 2. 14. jQuery 천단위 콤마 자동 적용하기 (input 활용) 안녕하세요. 오늘은 jQuery에서 input 태그 요소에 숫자 천 단위 콤마를 추가하는 방법을 포스팅하려고 합니다. 화면을 개발하다보면 input 요소에 숫자값을 입력하는 경우가 있는데, 입력값이 금액인 경우에는 자동으로 입력이 되도록 처리해야 하는 경우가 있습니다. 콤마를 추가해 주는 기능은 기본적으로 자바스크립트로 처리를 하며, input 요소를 컨트롤하는 이벤트와 값을 처리하는 부분이 jQuery로 처리를 하게 하였습니다. 그러면 어떤 식으로 처리를 하면 되는지 예제를 통해서 알아보도록 하겠습니다. 1. 천단위 기준으로 콤마 추가하기 import jQuery 먼저 jQuery 라이브러리를 import 시켜줍니다. html input 요소 추가 input 요소를 추가해 주고, type은 text로 .. 2023. 2. 13. [자바스크립트 + Chart.js] Pie 차트 예제 만들기 (Pie Chart, Doughnut Chart) 안녕하세요. 오늘은 자바스크립트와 Chart.js를 활용하여 Pie 모양의 차트와 Doughnut 모양의 차트를 만들어 보려고 합니다. 요즘 차트 만드는 것을 많이 하다 보니 계속 차트 관련 글을 작성하고 있는데요. 차트 만드는 게 처음에는 조금 어려운 것 같아도 하다 보면 시각적인 효과가 크다 보니 재미있기도 하고 배우는 것도 금방인 것 같아요! 지난번에는 막대 차트와 라인 차트를 만들었고, 오늘은 이어서 Pie와 Doughnut 차트를 만들려고 합니다. 두 모양 모두 원 모양으로 Pie는 피자 조각처럼 생겼고, Doughnut은 가운데가 뚫려있는 도넛의 모양을 하는 차트입니다. 이런 모양의 차트는 유사한 데이터의 비중을 서로 비교할 때 적절한 것 같아요! 그럼 Pie 차트와 Doughnut 차트는 어.. 2023. 2. 12. 자바스크립트 Chart.js Uncaught Error: "undefined" is not a registered controller 에러 해결하기 안녕하세요. 오늘은 자바스크립트와 Chart.js를 활용해서 차트를 개발하다가 발생할 수 있는 에러인 'Uncaught Error: "undefined" is not a registered controller' 내용에 대해 정리를 하려고 합니다. 먼저 에러가 발생하는 예시 코드를 통해 에러가 발생하는 상황을 확인해 보도록 하겠습니다. 1. 에러 발생 예시 위의 예시 코드를 보게 되면 에러가 발생하기엔 크게 문제는 없어 보입니다. 하지만 위의 코드를 실행하게 되면 에러가 발생하게 되는데요. 실행 결과를 보도록 하겠습니다. 실행 결과 위의 실행 결과 화면처럼 에러가 발생을 하였습니다. Chart.js를 사용하다 보면 위와 같은 에러가 종종 발생을 합니다. 에러가 발생하는 원인은 차트의 type을 설정하지 않.. 2023. 2. 9. 자바스크립트 Failed to create chart: can't acquire context from the given item 에러 해결하기 (chart.js 에러) 안녕하세요. 오늘은 자바스크립트와 chart.js를 연동하여 차트를 만들다 보면 발생할 수 있는 에러인 'Failed to create chart: can't acquire context from the given item'에 대한 내용과 해결 방안을 정리해 보려고 합니다. 에러 내용은 차트를 생성하기 위해 DOM 요소를 호출할 때 DOM 요소가 맞지 않는 경우에 발생하는 에러입니다. 1. 에러 발생 예시 위의 예시 소스 코드를 보게 되면 크게 문제가 되보이진 않습니다. 하지만 위의 코드는 에러가 발생하고 있습니다. 에러가 발생하는 이유는 new Chart() 함수를 사용할 때 첫 번째 인자값은 만들고자 하는 DOM 요소를 입력해야 하는데, Chart.js는 canvas 요소를 기준으로 차트를 그리고 있.. 2023. 2. 8. 자바스크립트 chart.js 라인 차트 만들기 (line chart) 안녕하세요. 오늘은 자바스크립트와 chart.js를 활용한 Line Chart를 만들어 보려고 합니다. Line Chart는 말 그대로 라인 형태의 시각화 차트입니다. Line Chart는 보통 날짜, 시간 기준으로 해서 데이터의 변화하는 과정은 라인으로 이어서 볼 때 효과가 좋습니다. 그 외에도 기준만 잘 잡아준다면 데이터의 흐름을 파악하는데 활용도가 정말 높습니다. 정말 간단하면서도 활용도 높은 Line Chart를 하나씩 배워보도록 하겠습니다. 1. Line Chart 기본 예시 chart.js 라이브러리 import chart.js를 사용하기 위해 위와 같이 chart.js 라이브러리를 import 시켜줍니다. 저는 간단하게 cdn 방식으로 연동을 하였고, 상황에 따라 직접 설치하여 import .. 2023. 2. 6. 자바스크립트 chart.js Stacked Bar Chart 만들기 (스택 Bar 차트) 안녕하세요. 오늘은 지난 포스팅에 이어서 bar chart를 응용한 stacked bar chart를 만들어보려고 합니다. stack은 의미 그대로 쌓아 올리는 개념으로 bar chart를 데이터 유형별로 쌓이는 형태로 만드는 방식입니다. stack 형태의 bar chart도 활용하기가 아주 좋습니다. 하나의 시스템에서도 다양한 데이터를 시각화하기 위해서 다양한 방식의 차트를 필요로 합니다. 그럼 stacked 형태의 bar chart 만들기를 시작해 보겠습니다. 1. Stacked Bar Chart 예시 chart.js 라이브러리 import 가장 먼저 chart.js 라이브러리를 cdn 형식으로 import 시켜줬습니다. DOM canvas 요소 추가 chart.js는 기본적으로 canvas 요소에 .. 2023. 2. 5. 자바스크립트 Chart.js 바(Bar) 차트 만들기 (막대차트) 안녕하세요. 오늘은 Chart.js를 활용한 bar 형태의 차트를 만들어 보려고 합니다. Chart.js는 다양한 데이터의 시각화를 하기 위해 만들어진 오픈 소스 라이브러리입니다. 차트의 유형은 여러 가지가 있는데 오늘은 그중에서 Bar 유형의 차트를 만들어보려고 합니다. 점점 데이터의 양은 많아지고, 데이터의 분석을 위해 시각화를 많이 하기도 합니다. 그래서 많은 분들이 Chart.js와 같은 시각화 라이브러리를 많이 찾아주시는 것 같습니다. 저도 회사에서 몇 년째 데이터 시각화를 위한 차트 개발을 많이 하고 있습니다. 그래서 이렇게 간단한 기능부터 하나씩 포스팅을 해보려고 합니다. :) Bar 차트란 데이터를 막대 형식으로 시각화한 차트입니다. 그러면 예제를 통해 하나씩 보도록 하겠습니다. 1. Ba.. 2023. 2. 4. 이전 1 2 3 4 다음 728x90
