Junu’s Dev-log
Backend Developer / 백엔드 개발자
내가 보려고 만든 사이트
워드프레스 플러그인 없이 외부 코드 적용
외주 받은 워드프레스 사이트에서 자체 로그인 페이지를 따로 만들고 워드프레스 메인에서 로그인 Cookie값이 있으면 특정 폼을 노출해주는 기능이 필요했다. 스니펫 플러그인은 구상한 작업에 적절하지 않았고, 약간의 편법을 섞어서 사용할 수 있는 코드를 만들었다. 워드프레스에서 플러그인 없이 PHP 조건에 부합하는 JavaScript 동작을 구현하는 코드에 대하여 설명하겠다. 1. 동작 구현 파일 작성…
JavaScript 스크롤 정도에 비례한 애니메이션 효과
구글링을 통해 얻은 코드들이 수학적으로 모두 틀려서 다시 만들어낸 코드.. 웹 페이지에서 스크롤에 비례한 애니메이션 효과를 구현하는 코드에 대하여 설명하겠다. 동작 구현 파일 작성 먼저 내장 함수 offsetTop을 사용하여 요소의 Y축 상대 위치 값을 불러온다. 다음으로 내장 함수 window.pageYOffSet을 사용하여 웹 페이지가 세로 방향으로 스크롤 된 px값을 불러온다. 값들이 정확하게…
PHP & JavaScript 게시판 사이트 제작 3
저번 글에서는 글 목록 및 글쓰기 기능을 구현하는 코드에 대하여 설명하였다. 이번 글에서는 글 페이지 및 글 수정, 삭제를 구현하는 코드에 대하여 설명하겠다. 글 페이지에는 댓글 쓰기, 수정, 삭제 기능도 포함되어있다. 모든 디자인은 부트스트랩을 사용했다. 1. 댓글 DB 생성 및 설정 댓글 작성 시 댓글 정보가 저장되는 DB를 생성한다. 댓글 내용은 300자로…
PHP & JavaScript 게시판 사이트 제작 2
저번 글에서는 회원가입 및 로그인 기능을 구현하는 코드에 대하여 설명하였다. 이번 글에서는 글 목록 및 글쓰기 기능을 구현하는 코드에 대하여 설명하겠다. 모든 디자인은 부트스트랩을 사용했다. 1. Header 파일 작성 로그인 이후 상단 바에 사용자 정보와 로그아웃 버튼을 출력한다. (로그아웃 코드는 저번 글을 참고) 로그인 정보 없이 접근하면 로그인 폼으로 돌아간다. 2.…
PHP & JavaScript 게시판 사이트 제작 1
약 2년 전에 만들었던 게시판 사이트 소스 코드를 살펴보았는데, 소스 코드가 뒤죽박죽 섞여있고 기초적인 부분에서도 부족한 점이 많이 보여 이참에 다시 작성하기로 했다. 이번 글에서는 회원가입 및 로그인 기능을 구현하는 코드에 대하여 설명하겠다. 모든 디자인은 부트스트랩을 사용했다. 1. 부트스트랩 및 jQuery 스크립트 태그 추가 파일 최상단 또는 Head 파일에 다음과…
PHP & JavaScript 엑셀 파일 다운로드 및 업로드 구현 (PhpSpreadsheet 사용)
PHP 환경에서 엑셀 파일을 다뤄야 할 때, 보통 PHPExcel을 많이 사용하는데 이는 이미 서비스가 2019년에 종료되었으며 공식 문서도 PhpSpreadsheet를 권고한다고 명시되어있다. (현재 PhpSpreadsheet는 PHP 8 이상부터 지원되므로 참고) PhpSpreadsheet를 사용한 간단한 목록의 엑셀 파일 다운로드 및 업로드(후 데이터 수정) 기능을 구현하는 코드에 대하여 설명하겠다. 1. PhpSpreadsheet 설치 웹 서버에 PhpSpreadsheet를…
PHP Simple HTML Dom을 사용한 웹 크롤링
웹 크롤링이 불법인가? 합법인가? 에 대한 여론은 항상 있었다. 정확히 말하면 웹 크롤링 자체는 불법이 아니며 수집한 데이터를 상업적으로 이용하는 경우, 데이터를 수집하는 과정에서 상대 서버에 문제를 일으킨 경우는 불법으로 간주할 수도 있으니 이를 잘 숙지하고 문제 되지 않게 이용하면 된다. Simple HTML Dom을 사용한 간단한 웹 크롤링 방법에 대하여…
PHP & JavaScript 날짜 입력 버튼 및 jQuery Datepicker 적용
날짜 데이터로 검색할 때 오늘, 어제, 3일 전, 한 달 전, 당월의 날짜를 버튼으로 입력하고 입력한 날짜 클릭 시 jQuery Datepicker를 사용해서 날짜를 달력 형태로 수정할 수 있는 폼을 구현하는 코드에 대하여 설명하겠다. 1. jQuery 및 jQuery UI 스크립트 태그 추가 파일 최상단 또는 Head 파일에 다음과 같이 작성하여 jQuery와…
PHP & JavaScript Naver SmartEditor 2.0 적용
게시판같이 글을 업로드하는 페이지를 만들 때 Naver에서 제공하는 SmartEditor를 적용하면 더욱 간편하게 글 작성 폼을 제공할 수 있다. SmartEditor를 사용해서 글 작성 및 업로드를 구현하는 코드에 대하여 설명하겠다. 1. SmartEditor 설치 여기에서 SmartEditor를 설치한다. 2.9.0 이상은 사진 업로드가 제한되므로 이전 버전을 설치하는 것을 추천한다. 설치 후 웹 서버에 폴더를 업로드한다.…
PHP & JavaScript Drag and Drop 구현 (Dropzone 사용)
Dropzone에 대한 심화 정보는 국내에 많이 없어서 디버깅이 진짜 어려웠다… 잊기 전에 이미지 Drag and Drop 업로드 및 수정, 삭제, 다운로드 모두 구현하는 코드에 대하여 설명하겠다. 1. DB생성 및 설정 설명을 위해 다음과 같이 간단한 DB를 생성해 구현했지만 실제로 사용할 것이라면 컬럼만 추가해도 무방하다. 2. jQuery 및 Dropzone 스크립트 태그…