전체 글
-
Map() 으로 임시 저장소 만들기JavaScript 2023. 10. 20. 09:20
라디오 버튼으로 탭을 만들 때, html 요소의 값만 저장해서 변경할 수 있는 기능을 만들고 싶었다. 이미지1 이미지2 회사명 선택 a b c d let radioMap = new Map(); radioMap.set(1, { companyNameIndex: 0, content: '', placeHolder: "Place Holder" }); radioMap.set(2, { companyNameIndex: 0, content: '', placeHolder: "Place Holder" }); let currentRadioValue = parseInt(document.querySelector('input[type="radio"][name="imageTabs"]:checked').value); const ima..
-
이벤트를 바인딩하는 2가지 방법JavaScript 2023. 10. 20. 08:34
이벤트를 바인딩할 때 기본적으로 이벤트를 걸고싶은 요소에 eventListener를 추가하거나, 태그 내부에 함수를 추가하는 것으로 걸 수 있다. 만일 특정 요소에 동적으로 이벤트를 부여하는 상황에서, 렌더링 시 문제가 발생해서 이벤트가 바인딩되지 않고 있다면 어떻게 이벤트를 걸 것인가? 워드프레스의 숏코드를 활용하여 요소에 이벤트를 부여하는 과정에서, 간헐적으로 이벤트가 바인딩되지 않는 상황이 발생했다. 1. 요소에 이벤트를 걸기 jQuery('#buttonId').unbind().bind('click', function () { popupObject.showPopup(); }); 위와 같이, 특정 버튼 요소에 팝업 이벤트를 바인딩하는 함수가 있다. 이 경우 버튼에 직접 이벤트를 바인딩 하기 때문에, ..
-
class 에서 자기 자신을 instance하기php 2023. 10. 19. 09:11
클래스를 instance할 때, 자기 자신을 instance해서 클래스 내부의 함수를 사용하고싶다면 주의해야할 점이 있다. class Test{ private $testObject; public function __construct() { $this->testObject = new Test(); } } 만일 다음과 같은 형태로 작성되어있는 class를 instance 한다면, 생성된 testObject 내부에서 또 testObject가 생성되는 무한 루프가 되어서 메모리를 소진시켜버린다.. class Test{ private $testObject; public function __construct() { $this->testObject = $this; } } 이를 방지하기 위해서 현재 instance 된..
-
워드프레스 기초 (hook)WordPress 2023. 9. 22. 13:55
워드프레스는 블로그 포스팅 처럼 홈페이지를 만들 수 있는 장치이다. 워드프레스의 특징은 DB와 연동해서 홈페이지의 구성 요소들을 DB로 부터 불러올 수 있기 때문에, 비슷한 모양의 홈페이지를 대량으로 찍어낼 때 유용하게 사용된다. 페이지의 프레임 뿐만 아니라 각 요소들의 CSS 나 세팅 까지도 DB에 연동시킬 수 있다. 1. 워드프레스 시작 워드프레스 페이지를 불러오면, 워드프레스의 버전이나 서버 세팅부터 로그인 여부 까지 기본적으로 필요한 세팅을 마치고 DB와 연동한다. DB와 연동한 이후에는 홈페이지를 나타내기 위한 요소들을 불러오는데, Java Script나 boot strap , 플러그인 , hooks 등이 있다. 2. 플러그인 플러그인은 워드프레스에 유저가 커스터마이징 한 기능을 넣어서 사용할 ..
-
canvas로 이미지 편집하기기타 2023. 9. 21. 09:48
브라우저에서 업로드한 이미지를 편집할 수 있는 기능이 있다. canvas는 html5 이상에서 사용할 수 있는 라이브러리로, 2D, 3D(특정 버전의 브라우저만 지원) 형식으로 파일을 편집할 수 있고 편집한 파일을 출력할 수 있다 input에 파일 형태로 업로드한 이미지를 canvas에서 각 모서리를 둥글게 깍아서 저장해보자 const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); const blobImages = []; function drawRoundedImage(img) { const borderRadius = 30; // 둥글게 만들고자 하는 모서리 반경 ctx.save(); ctx.beginPa..
-
form에 이미지 파일 전송하기JavaScript 2023. 9. 21. 09:28
form 태그에 이미지 파일과 text 데이터를 담은 json을 넣어서 php 서버로 request 하고 response를 받아보자 1. 이미지 파일 업로드, 변수에 저장하기 -> 일반적인 문자, 숫자와 다르게 이미지, 동영상 등의 미디어 파일이나 json 형태의 데이터를 원본 그대로 전송하고 싶다면, blob 객체로 만들어서 전송해야한다. 이미지를 가져오려면 input에 file 타입을 선언하고 파일의 형식을 accept에 지정해줘야한다. multiple 속성을 선언하면 여러개의 파일을 가져올 수 있다. const text1 = document.querySelector("#text1"); const text2 = document.querySelector("#text2"); const userImg = ..
-
HTTP GET 데이터 수신카테고리 없음 2023. 9. 14. 09:00
1. GET 방식이란? http://domain.url?name1=value1&name2=value2 위의 형식으로 URL에 데이터를 담아서 보내는 것을 말한다. 즉 key 와 value가 함께 전달된다. $variable = $_GET['key'] 이 코드로 GET 방식 데이터를 변수에 저장해서 사용할 수 있다. 2. GET으로 데이터를 받을 시 유의할 점 2-1 . 데이터 누락 여부 확인 isset 함수 사용 $variable = isset($_GET['key']) ? $_GET['city'] : '' 널 병합 연산자 사용 $variable = $_GET['key'] ?? $_GET['city'] : '' 키가 존재하면 ture 없다면 false를 반환하는 isset() 함수와 3항 연산자를 활용해서..
-
상수php 2023. 9. 14. 08:28
상수 define('NAME', 'Value'); define 함수를 사용해서 상수를 선언할 경우 한번 값이 설정되면 변경할 수 없다. 그리고 PHP 페이지 전역에서 접근할 수 있다. 옵셔널로 불리언은 상수명이 대소문자를 구분하는지 여부를 나타낸다 (구분하면 true , 아니라면 false) -> 상수는 사이트가 동작하는데 필요한 정보를 저장하기 위해 자주 사용되지만, 상수의 값은 사이트가 설치될 때만 값이 변경된다 (사이트가 새로운 서버로 처음 옮겨질 때, 동일한 코드가 다른 웹사이트에서 사용될 때) const NAME = 'Value'; 위의 방식으로 선언하면 클래스 내부에 상수를 정의하는데 사용할 수 있다 (define은 불가능)