본문 바로가기

분류 전체보기542

<img/> 이미지의 사이즈 구하기 && 이미지 원본 사이즈 구하기 { const img = e.target; console.log("img 넓이" , img.width); console.log("img 높이" , img.height); console.log("img 원본 넓이" , img.naturalWidth); console.log("img 원본 높이" , img.naturalHeight); }} /> onLoad는 이미지가 로드된후 실행하는 함수이다. img.width를 찍어보면 이미지가 출력된 후의 조정된 사이즈(상의 div등에 의해) 가 출력된다 Intrinsic size (원본사이즈)가 알고싶다면, img.naturalWidth 로 알수있다. Rendered size => img.width Intrinsic size => img.naturalWidth 2022. 9. 6.
웹 창 크기에 따른 페이지 우회 window.innerWidth / setInterval 윈도우창 사이즈 체크는 간단하게 가능 let winSize = window.innerWidth 아래 코드의 경우 1025사이즈를 기준으로 페이지 우회를 하였다. 자바스크립트는 리액트 useEffect처럼 해당 값이 변화하면 실행하는 로직이 존재 하지않음으로 setInterval 사용하여 초마다 윈도우 창의 크기를 체크해야한다. clearInterval(checked); 를 해주지 않은 이유는 페이지를 이동하기 때문이다. 페이지를 이동하지않고, setInterval 을 멈춰야한다면, clearInterval 을 사용해줘야한다. 2022. 8. 31.
[React] 암호화 AES CryptoJS 사용하여 암호화/복호화 하기 id값을 암호화시켜 url에 넣어 호출하는 예제 아이디값이 단순 숫자인 경우 보안에 상당히 취약함으로 암호화가 필요하다. 나는 암호화 = 리액트 / 복호화 = nestJS를 사용하였다. 😎 install npm i crypto-js 😎 import import CryptoJS from 'crypto-js'; 😎crypto.js import CryptoJS from 'crypto-js'; const secretKey = process.env.REACT_APP_AES_SECRETKEY //암호화 export const encrypt = (val) => { let text = val.toString(); const data = { id:text }; const encrypted = CryptoJS.AES.en.. 2022. 8. 30.
접속 기기 [모바일,태블릿,웹 등등] 체크 사이트를 접속한 기기가 컴퓨터(웹)인지 모바일(핸드폰,태블릿)인지~ 간단한 코드로 확인 가능하다. var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent); or var isMobile = /Mobi/i.test(window.navigator.userAgent); isMobile 값은 TRUE / FALSE 로 나온다. if(isMobile){ location.href="../mobile/index.html"; } 첫 접속 화면이 모바일 일시, 모바일 반응형 페이지로 우회 2022. 8. 30.
[React] image 마우스 wheel 로 zoom In/Out 하기 (라이브러리 사용) react-zoom-pan-pinch 라이브러리 사용하여 스크롤로 이미지를 확대/축소 하는 기능 https://www.npmjs.com/package/react-zoom-pan-pinch 리액트로 이미지를 확대 축소하는 많은 라이브러리들이 있지만 비교적 사용이 쉽고 최근(대략 8개월) 전에 업그레이드도 진행된 편 (다른라이브러리들은 3-4년전 이 마지막 업데이트 현 리액트버전과 맞지 않은 경우도 있었다) 😎install npm i react-zoom-pan-pinch 😎 import import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch"; 😎 code 이미지를 감싸주기만 하면 줌 인/아웃 가능 https://prc5.gith.. 2022. 8. 30.
[VS code] 글자 크기 조절 ctrl + , VScode 에서 컨트롤 + 쉼표 키를 누르면 setting창이 켜진다. 검색창에 font size 입력 숫자 단위로 글자크기 조절 가능 # 마우스 스크롤로 크기 조절 zoom 검색 체크박스 체크후 ctrl + s 컨트롤 누른 상태에서 마우스 스크롤로 글자 크기 조절 가능하다. 2022. 8. 23.
[IT용어] 개발 서버(Dev), 스테이지 서버(Stg), 운영 서버(Prod) 개발 서버(Dev)테스트용 서버로, 개발자들이 마음대로 테이블이나 서비스를 추가,수정,삭제 하면 여러가지 서비스를 테스트 할 수 있는 자유로운 서버이다.ex) 개발서버에서 형상관리에 커밋된 파일이나 ftp등의 업로드 수정 스테이지 서버(Stg)운영 서버의 클론 서버처럼 똑같이 운영되는 서버로서 스테이징에서 문제가 없으면 운영 서버에 그대로 배포하기 위한 최종 검수하는 테스트 서버이다. (최종 검수 환경이기 때문에 개발 팀 뿐 아니라 기획팀이나 어떤 클라이언트 업체에게 공유하여 중간보고나 스테이징 도메인을 기준으로 시연하기도 한다.)ex) 스테이싱 서버에서 형상관리로 커밋된 파일들이 어떤건지 추리고 올려서 확인운영 서버(Prod)실제 스테이징 서버에서 정상 반영된 경우 운영서버에 해당 부분을 반영하는 운영.. 2022. 8. 2.
[중화맛집] "장군 솥뚜껑 삼겹살" 낭만 아입니꽈~~ 중화맛집 솥뚜껑 삼겹살 중화동으로 이사온지 어언~ 한달 이사짐도 슬슬 풀었겠다 맛집 탐방을 시작해보았따. 앞으로 이동네 최소 4년 살것으로 예상하니 익숙하지 않은 동네는 여전히 낯설고 무섭다ㅎㅎ 그치만 밤산책하면서 골목골목 여기엔 이런곳이 있네~? 하는 재미도 있다 퇴근후 중화역에 내려 집으로 걸어가는 길 새로운 길로 가보고 싶어서 이리저리돌아 다니다가 사람이 북적북적 하길래 찜꽁 해놨던 삼겹살집이다. 삼겹살 = 낭만 솥뚜껑 삼겹살이면서 심지어 옆에 세차장?카센터 의 넓은 공간에 야외 테이블을 깔아준다 어떻게 보면 위생적이지 않아보이나 이런 여름 비오는날 야외에서 삼겹살은 빠질수 없다. 새벽 1-2시쯔음 방문했는데 여전히 사람이 많았다. 너무 더우면 실내에 앉아도되지만 밖에서 먹어야 제맛 솥뚜껑을 업어주.. 2022. 7. 21.
[창동 삼겹살 맛집] "북청 식당" 엄마가 좋은고기 사다 집에서 꾸버주는 맛 창동 맛집 삼겹살 맛집 노원 삼겹살 맛집 북청식당 약간 친숙한 삼겹살 집이다. "북청 식당" 엄마가 정육점 가서 진짜 좋은 고기 사서 꾸버주는 느낌? 사진보면 알수이땅.. 여기선 삼겹살밖에 안먹어바쯤 ㅎ_ㅎ 이 날은 더웠던 6월 이었다. 그치만 저녁은 선선해서 야외 테이블에 앉았다. 야외에서 고기꾸어먹을라고 오는 곳이다 여긴 ㅎㅎㅎ 마늘 고추를 사정없이 많이 주시고 미역국 무생채 파절이 등 반찬을 주신다. 근데 왜 엄마가 해주는 집밥 같냐면 자극적이지 않고 슴슴하다 (맛이 없다는게 아님) 내 최애 미역국 미역국이 기본 찬인 집들 너무 좋당ㅎㅎㅎㅎ 왜냐면.. 건강한 맛이라서 나능 좋아하니깡.. 자취 9년차로써 달래된장국과 오징어뭇국 같은건 하이클래스 집밥임으로 귀함 미역국 = 집밥 고로, 귀함 주문한 삼겹.. 2022. 7. 18.
728x90
반응형

티스토리툴바