프로그래밍 공부방

🙄 SVG 이미지란?픽셀 기반인 JPEG, PNG와 달리 SVG는 확장할 수 있는 벡터 그래픽입니다. 벡터 파일은 그리드 위의 점과 선을 기반으로 하는 수학 공식을 통해 이미지를 저장합니다. 아래는 SVG 이미지에 포함된 코드 형식입니다. JPEG 이미지와는 달리 코드로 수정이 가능합니다. 💛 JPEG 이미지일 때와 SVG 이미지일 때의 차이점왼쪽이 JPEG이미지, 오른쪽이 SVG이미지입니다. 두 이미지 모두 확대했을 때의 모습입니다. SVG는 JPEG와는 달리 확대를 해도 이미지가 깨지지않는 것을 확인할 수 있습니다.💛 HTML에서 SVG 이미지 사용하는 방법html에서 svg이미지를 사용하는 방식은 다른 확장자의 이미지와 마찬가지입니다! src에 svg 이미지의 경로를 적어주면 끝!

🔥에러 내용: net::ERR_UNSAFE_PORT 포트 6000번을 사용하는데 다음과 같은 오류가 발생했습니다. 🤷‍♀️Why?🤷‍♀️ 크롬 브라우저 보안에서 에러가 발생되는 문제로 해당 포트가 안전하지 않은 포트이기 때문에 발생하는 오류이다. ✨해결 방법 포트를 바꾸면 간단하게 해결할 수 있습니다.

메뉴를 클릭할 때마다 전체 페이지가 이동해서 바뀌는 것이 아니라 특정 화면만 바뀌도록 만들어보겠습니다 ~.~ 아래 이미지가 완성된 결과물입니다. 코드 설명우선 메뉴 클릭에 따라 보여줄 html 코드를 한 파일에 다 짜기에는 너무 길기 때문에 나눠줍니다. 저는 메뉴별로 js파일로 나누어서 따로 저장했습니다. 그리고 이 파일들을 import로 불러옵니다. import Own_contents from "./own_contents"; // 내가 쓴 글 메뉴 파일 import Like_contents from './like_contents'; // 좋아요한 글 메뉴 파일 메뉴를 클릭할 때 userState로 만든 change변수의 값을 변경합니다.let [change, setChange] = useState('o..

다른 분들이 저와 같은 문제를 겪지 않기를 바라고, 저도 이번 경험을 확실히 기억하기 위해 적는 포스팅입니다..! 일단 저는 AWS의 S3를 사용하고 있었고, 코드로 작성한 내용은 깃허브에 올라가고 있는 상황이였습니다. AWS를 처음 사용했기 때문에 Key의 중요성에 대해 잘 몰랐던 저는 Key를 환경변수 처리를 하지 않고 깃허브에 올려버렸습니다ㅠㅠ 그 이후로 AWS에서 이메일이 왔더라구요. 저는 별 거 아닌 이메일일 거라고 생각해 읽지 않았습니다. 근데 제 Key가 노출되어 위험하다는 내용이였습니다.. 후 ( AWS에서 날아오는 이메일은... 꼭 확인하시기를....) 그걸 읽고 바로 결제 대시보드를 확인했는데 50만원이 찍혀있더라구요?!?!?!?😲 진짜 금액 보자마자 기절할 뻔했습니다. 일단 Key가 ..

오늘은 저번에 이어서 글 목록을 출력하는데 이에 페이징을 추가해보겠습니다. 글 목록 아래에 페이지 수가 나오고 페이지를 누를 때마다 글목록 부분만 변경됩니다! 클라이언트 코드 전체 코드import React, { useState, useEffect } from 'react'; import { useNavigate, Link, useParams } from "react-router-dom"; import axios from "axios"; function Plant_info_share() { const navigate = useNavigate(); // 페이지 이동을 위해 필요 let one_page_contents = 20; // 한 페이지 당 게시글의 개수 const [contents, setConte..

/* 색에 대한 정보 파일 : color.js */ const colorConfig = { main_color: "rgb(107, 164, 255)", sub_color: "rgb(255, 255, 255)" } export {colorConfig}; 우선 색 정보를 담은 color config를 만들어줍니다. 저는 메인 컬러를 파란색, 서브 컬러를 하얀색으로 설정했습니다. 그 후에 colorConfig 변수를 export 해주어서 다른 파일들에서 사용할 수 있게 합니다. 꼭 이렇게 색 정보를 따로 저장해놓을 필요는 없지만 이렇게 하면 나중에 메인컬러와 서브컬러를 바꾸고 싶을 때 이 파일에서만 색을 바꾸어주면 모든 파일에서 바뀌기 때문에 더 편리합니다!! ^_^ !! /* header.js : 헤더파일 ..

우선 회원가입을 할 때 입력받은 패스워드를 암호화해서 db에 넣어야겠죠? 그렇기 때문에 회원가입 코드에서 패스워드를 암호화하는 작업을 해줍니다. 사용한 패스워드 암호화 방식은 bcrypt 모듈을 이용한 단방향 암호화입니다. 단방향 암호화이기 때문에 복호화를 해서 원래의 패스워드는 확인이 불가능합니다! 원래는 아이디는 양방향 암호화를 해서 넣으려고 했지만 그렇게 되면 아이디 중복 등과 같이 비교를 할 때 힘들어질 것 같아서 따로 암호화는 하지 않았습니다. 단방향 암호화: 암호화를 한 후에 다시 복호화하는 것이 불가능하다. 양방향 암호화: 암호화를 한 후에 다시 복호화하는 것이 가능하다. bcrypt로 패스워드 암호화 bcrypt.hashSync() /* signup.js */ const express = ..

클라이언트 측에서 httpRequest를 서버로 보낸 후 서버에서 request를 하려고 하는데 문제가 생겼습니다. 왜 문제가 생겼을까요? 코드는 아래와 같습니다. /* signup.js 클라이언트 코드*/ signup_btn.addEventListener("click", function(e) { if(pw.value && pw.value === pw_check.value){ // pw값과 pw체크값이 같다면 if (id.value == ''){ // id 값이 비어있다면 alert("아이디를 입력하세요"); } else { // id값이 비어있지 않다면 makeRequest('http://localhost:5000/signup/process', id.value, pw.value); } }else{ //..