하얀성의 개발 메타인지

localStorage와 cookie의 보안성 비교하기 1. XSS 공격 공격 유형: XSS (Cross-Site Scripting)공격 목적: 쿠키 탈취를 통한 세션 하이재킹방어 방법: HttpOnly 속성을 설정하여 클라이언트 측 스크립트가 쿠키에 접근하지 못하게 함. localStorage 처럼 httpOnly 속성이 없음을 가정해서 XSS 공격을 가해보았다. DOCTYPE html>html lang="en">head>  meta charset="UTF-8">  meta name="viewport" content="width=device-width, initial-scale=1.0">  title>XSS Attack Testtitle>head>body>  h1>XSS Attack Test Pageh..

기존 차트를 지난번에 사용해본 nivo 차트를 통해서 바꾸기로 했다.https://elecch.tistory.com/600 nivo를 통한 Graph chart 생성하기[자신감up 실습13]렌더링 모습 새로 설치해야 할게 많다. 그리고 스타일링을 좀 해줘야 한다. 그것말곤 data든 코드든 nivo 페이지에 다 나와있어서 설명대로 따라하면 출력이 손쉽게 된다.elecch.tistory.com 바뀐 차트 내용 1. 기존 1개월만 있던 차트에서 당일 작성날짜를 기준으로 1개월과 6개월 간의 내역을 표시하도록 했다.2. line chart, pie chart 두 가지 차트를 활용하였다.pie 차트는 6개월 간의 각 수입, 지출의 비중을 눈으로 파악할 수 있도록 하였다.

네이버 image API를 통해서 오른쪽 맨 끝의 빨간색 카메라 버튼을 누르면왼쪽에 있는 목록 컴포넌트의 아래에 검색된 이미지가 출력되도록 했다. 핵심은 contextAPI를 관리 하는 것. try {      const response = await fetch(url);      if (response.ok) {        const data = await response.json();        setResults(data.items);        return data.items;      } else {        console.error("Error:", response.status, response.statusText);        return [];      }    } catch (..

상황 : dalle 3 이미지 생성 ai를 활용한 이미지 시각화 기능을 만들고 있었음.문제1 . 이미지가 내가 원하는대로 생성해주지 않음.   ex) 외주비라고 prompt를 통해 이미지를 생성하면왜나라 거주지의 비내리는 장면을 생성해준다. 문제2. 이미지 url 리소스 기간 만료 문제 mern 프로젝트에서 dalle 를 통해 이미지를 생성해서 cloudinary에 저장한 후 mongodb에 url을 저장해서 불러오는 프로젝트를 채택했는데 문제가 생성이미지를 다듬어 놓은 cloudinary의 url 리소스 기간이 만료가 된다는 것.(늘릴 수는 있지만 개인적으로 감당하기 어려운 보안 문제들이 발생)  아래의 내 코드와 구상 및 설계가 무효가 되는...설계내역기존 이미지가 없다면 업데이트. 있다면 못바꾸고 ..

https://console.cloudinary.com/ Image and Video Upload, Storage, Optimization and CDNStreamline media management and improve user experience by automatically delivering images and videos, enhanced and optimized for every user.cloudinary.com 윗 링크에 들어가서 가입한다.가격 정책은 아래와 같다.월간 변환 횟수: 지난 30일 동안 처리된 모든 새 자산(원본 업로드 및 파생 이미지 및 비디오 프레임 포함)의 수입니다. (자세한 정보)관리되는 저장소: Cloudinary 계정에 저장된 모든 자산의 누적 크기, 백업이 활성화..

https://platform.openai.com/docs/overview 1. 윗 링크로 들어간다.2. 아래 블로그를 참조해서 키를 발급한다.https://velog.io/@yeomja99/DALLE3-API-%EC%82%AC%EC%9A%A9%EB%B2%953. dalle 3 생각보다 너무 비싸다. 그래서 free tiral 쓸까해서 봤더니 아래와 같다. 그냥 유료를 최대한 덜 사용해 보도록하자.(그리고 dalle 2는 이제 가입을 막아놨다. 기존 이용자만 사용이 가능하다.) 다른 추천  알아봤더니 하루 500개를 무료로 해주는 모델이 있는데 막상 한글로 생성 명령할 경우 알아먹을지는 모르겠다.dalle 3 는 챗gpt 연계라 가능할것 같아서 우선 해본다.카드 등록   5달러로 우선 구매하고 자동 충전..

build 과정프론트 폴더에 들어가서npm run build 입력. build폴더 = dist 아래 과정 참고https://velog.io/@front_mower_man/React-Vite-aws-s3-cloudfront%EB%A1%9C-%EB%B0%B0%ED%8F%AC React Vite aws s3 + cloudfront로 private 배포누구나 따라할 수 있는 aws s3 + cloudfront 배포velog.io  1. public 폴더안에 파일 넣기2. index.html 파일의 head태그 안에 아래 코드 추가link rel="icon" href="/a.png">분명 간단한 코드인데 프로젝트 build할 때 나오는 부분이라 자주 쓰이지 않아서 많이 낯설다.그래서 정리하게 되었다.react-v..

1. 가계부 내용 git 버전관리로 추가. 2. 로그인 기능의 각 server,client의 package.json을 가계부 기능에 추가해준다. 3. 경로 수정. 라우터 등은 통합. 필요없는 라이브러리 삭제. -두 기능의 통합하여 렌더링해준 화면- 현 상황 문제점 - 시작 창이 로그인 된 창부터인데.. 이걸 로그인 화면으로 봐꿔야됨. - db에서 사용자 한명당 손실 , 수입 관리 할 수 있도록 해야함. - 화면 밑부분이 안나옴 현재 front/backend 구조. 📦src ┣ 📂assets ┃ ┗ 📜react.svg ┣ 📂Components ┃ ┣ 📂Button ┃ ┃ ┗ 📜Button.jsx ┃ ┣ 📂Chart ┃ ┃ ┗ 📜Chart.jsx ┃ ┣ 📂Dashboard ┃ ┃ ┗ 📜Dashboard.js..

jwt 인증을 사용해서 jwt 를 쿠키에 담은 다음 프론트로 받아와서 db에서 들고온 데이터와 일치하면 로그인을 허락하는 기능을 구현했다. 힘들었던 점. -jwt에 대한 이해가 없어서 이 jwt가 어떤 방식으로 돌아가는 지 등에 대해 새롭게 공부. -jwt를 byrcpt를 통해서 해쉬 암호화 한 뒤, 전송해야 하는데 이것 때문에 코드가 너무 지저분해짐. -로그인, 메인화면, 로그아웃 등의 서버 동작 방식과 컴포넌트를 다 구성했지만 라우터와 header를 분리할 생각을 못해서 컴포넌트 간의 이동경로를 구현하는데 힘들었음. 윗 내용을 해결하고 코드를 줄여나가는 부분에 많은 시간을 할애 했다. (아래 내용이 도움이 많이 됬다. 물론 내 코드는 영상에서 다루는 access , set token 내용을 지우고 더..