본문 바로가기

Web Programming50

[Html5, JavaScript] image resizing (이미지 리사이징) HTML5와 Vanilla.js로 이미지를 넣고, 크기를 리사이징하는 걸 만들어보겠습니다. index.html script를 작성하기 전에 html은 간단한 input 버튼만 있는 화면만 만들었습니다. 이제 script를 작성해줄건데요 resizeImage 함수를 이용해서 파일을 리사이징 하는 걸 만들어봤습니다. html화면을 열어주면 이러한 모양이 되구요 파일을 선택해서 올려주면 이런식으로 이미지 리사이징된 모습을 볼 수 있습니다. 2024. 2. 7.
[Redis] 우분투 환경에서 Redis 설정하기 Redis 설치를 하지 않으신 분은 아래 링크로 들어가서 먼저 설정해주세요. 2024.01.30 - [Web Programming/DB] - [Redis] 윈도우 환경에서 redis 설치/실행하기 [Redis] 윈도우 환경에서 redis 설치/실행하기 윈도우 설치 Redis 공식문서입니다. https://redis.io/docs/install/install-redis/install-redis-on-windows/ Install Redis on Windows Use Redis on Windows for development redis.io 레디스 공식문서에는 위처럼 사용하면 된다라고 써 jaey0ng.tistory.com 설치가 완료되었다는 가정하에 설명 진행하겠습니다. 환경설정 파일 진입 sudo nan.. 2024. 1. 30.
[Redis] 윈도우 환경에서 redis 설치/실행하기 윈도우 설치 Redis 공식문서입니다. https://redis.io/docs/install/install-redis/install-redis-on-windows/ Install Redis on Windows Use Redis on Windows for development redis.io 레디스 공식문서에는 위처럼 사용하면 된다라고 써져있습니다. 윈도우는 레디스를 직접 지원해주지 않기 때문에 우분투를 깔아서 진행해야합니다. WSL 설치 cmd를 실행시켜 아래 명령어를 입력해줍니다. wsl --install 설치가 완료되었으면 컴퓨터 재부팅을 해줍니다. Redis 설치 우분투를 실행시킨 뒤 아래 명령어를 입력해줍니다. curl -fsSL https://packages.redis.io/gpg | sudo .. 2024. 1. 30.
[React + SpringSecurity + DB] 로그인 구현하기 (frontend) 리엑트와 스프링을 연결할 때 리엑트 설정을 하셨을 겁니다. axiosInstance.jsx를 만들었다던가, App.jsx를 수정했다던가 저는 둘다 수정했기 때문에 전부 있는 상황에서 구현하겠습니다. App.jsx function App() { useEffect(() => { // 서버에서 렌더링된 HTML 문서에서 CSRF 토큰을 가져오는 로직 const csrfTokenMeta = document.querySelector("meta[name='_csrf']"); // CSRF 토큰이 존재하는지 확인 후 요청 헤더에 추가 if (csrfTokenMeta) { const csrfToken = csrfTokenMeta.content; axios.defaults.headers.common["X-XSRF-TOK.. 2024. 1. 18.