ma5ter의 등록된 링크

키자드에 등록된 총 171개의 포스트를 확인하실 수 있습니다.

Naver Blog

회원별 작성 게시글 불러오기

장뽕뽕 웹게임 강화해서 광물캐기, 커뮤니티 hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 게시판에서 작성자를 누르게 되면 팝업창이 하나 뜹니다. html <ul class="navbar-nav ml-auto"> <li class="nav-item dropdown no-arrow mx-1"> <a class="nav-link dropdown-toggle" href="javascript:void(0);" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span><?=$board_result[$i]['write_user']?></span> </a> <!-- Dropdown - Messages --> <div class="dropdown-list dropdown-menu shadow animated--grow-in" aria-labell

원문보기 내부링크
Naver Blog

게시글에 댓글, 답글 기능 추가

장뽕뽕 웹게임 강화해서 광물캐기, 커뮤니티 hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 게시글에 댓글 기능과 답글 그리고 댓글 작성자 일시 해당 댓글의 수정, 삭제 권한을 얻어서 댓글 수정, 삭제까지 만들어볼게요. Comment 테이블 정보 CREATE TABLE `comment` ( `id` int NOT NULL, `board_menu` varchar(10) NOT NULL, `board_id` varchar(150) NOT NULL, `write_user` varchar(20) NOT NULL, `content` text NOT NULL, `date` datetime NOT NULL, `parent_id` int DEFAULT NULL, `deps` int NOT NULL, `level` int DEFAULT NULL, `del_yn` enum('Y','N') NOT NULL DEFAULT 'N' ) 순서대로.. 관리번

원문보기 내부링크
Naver Blog

닉네임 변경, 비밀번호 변경 추가

장뽕뽕 웹게임 강화해서 광물캐기, 커뮤니티 hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 비밀번호 변경과 닉네임 변경 기능을 추가해 볼게요. 제 사이트에선 미니게임을 통해 포인트를 얻을 수 있는데 닉네임 변경할 때 30만 포인트를 사용하도록 해볼게요. usersetting <? include $_SERVER['DOCUMENT_ROOT'].'/_common.php'; ?> <div class="container"> <!-- Page Heading --> <h1 class="h3 mb-2 text-gray-800">계정 설정</h1> <br> <!-- Content Row --> <div class="row align-items-center justify-content-center"> <!-- Content Column --> <div class="col-4"> <!-- Page Heading --> <div class="card

원문보기 내부링크
Naver Blog

상태가 변하는 1:1 문의 기능

장뽕뽕 웹게임 강화해서 광물캐기, 커뮤니티 hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 이번엔 1:1문의 기능을 추가해 봤어요. 지금.. 개발하면서 기능을 하나둘씩 추가하다 보니 게시판 한 개의 페이지에서 기능을 게시판 별로 나누고 권한 별로 나눴습니다. 이 게시글에서는 1:1 문의 기능 추가에 대한 소스만 추가합니다. 전체 소스가 필요하신 분은 다른 게시글에 있는 게시판 글을 참고해 주세요. 결과 기존 상태 : 1 ( 접수 완료 ) 관리자가 글을 확인했을 경우 상태 : 2 ( 처리 중 ) 관리자가 답변을 작성할 경우 : 3 ( 답변 완료 ) 로 구성했습니다. user_board 테이블에 state 칼럼을 추가했습니다. PHP 소스코드 if($type == "inquiry") { switch($board_result[0]['state']) { case '1': $state = "접수완료"; break; case '2': $s

원문보기 내부링크
Naver Blog

관리자 페이지 - 공통 정보

장뽕뽕 웹게임 강화해서 광물캐기, 커뮤니티 hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 게시판 한 페이지 당 불러올 개수, 상점에서 한 페이지 당 불러올 개수에 대한 정보를 관리자 권한을 가진 계정에서 관리할 수 있게끔 관리자 페이지를 만들어볼게요. 관리자 권한인 경우만 왼쪽 고객센터 밑에 관리 기능이 추가됩니다. 사실 지금 모든 관리기능을 추가하려고 틀을 잡아나가던 단계였거든요.. 허전하다..ㅜㅁㅜ 게시판 리스트 개수를 5개로 한 경우 한 페이지에서 5개의 게시글만 출력되고 나머지는 페이징 처리됩니다. 10개로 설정한 경우 잘 되죠? 이런 느낌이에요! admin.html <? include $_SERVER['DOCUMENT_ROOT'].'/_common.php'; ?> <? if($cf['permit'] != 2) { permit_load(); return false; } ?> <h1 class="h3 mb-2 text-g

원문보기 내부링크
Naver Blog

프리귀혼..!! 그리고 한글패치

과거에 귀혼이라는 게임은 8개국에서 서비스되었는데.. 하나둘씩 섭종을 하게 됐어요.. 그러다 보니 이 게임이 그리운 외국인들은 외국 귀혼을 베이스로 사설서버를 만들기 시작했고.. 어느 외국인이 프로젝트를 깃허브에 올려주셔서 저도 대만 귀혼 클라이언트로 귀혼 사설서버를 만들게 됐어요! 뭐 대충.. 요약하자면.. 소스코드를 받아서 DB 추가하고.. 로그인 서버 채널 서버 게임 서버 메시지 서버 순서대로 서버를 오픈하라고 하네요.. 깃허브에 소스코드를 올려놔서 끌어다가 저도 구축을 해봤어요. 로그인 서버, 채널 서버, 게임 서버, 메시지 서버 모두 정상적으로 작동합니다. 중국어 몰라서 일단 대미지만 30000으로 잡아놨어요.. 몹도 잘 나오는데 몇몇 몹은 고장 났더라고요.. 좌표만 조금 수정해 주면 될 듯.. 캐시 아이템도 DB에서 관리하며 추가, 삭제 그리고 섭음도 테스트해 봤어요.. 잘 되는 듯.. 중국어 보니까 토 나올 것 같아서 한글 패치를 조금씩 진행해 볼까 하는 마음에 대만 클

원문보기 내부링크
Naver Blog

Spring Boot - MVC 2

이번엔 GET 방식으로 파라미터를 받아서 페이지에 띄워보도록 할게요. hello-template <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Hello Page</title> </head> <body> <p>타임리프 템플릿</p> <p th:text="'hello ' + ${name}" >hello! empty</p> </body> </html> Controller package hello.hellospring.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.ann

원문보기 내부링크
Naver Blog

Spring Boot - API

package hello.hellospring.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; @Controller public class HelloController { @GetMapping("hello-api") @ResponseBody public Hello helloApi(@RequestParam("name") String name){ Hello hello = new Hello(); hello.setName(name); return

원문보기 내부링크
Naver Blog

Spring Boot - 빌드하고 실행하기

mac os 기준입니다. 우선 터미널을 통해 프로젝트가 있는 폴더로 이동합니다. 명령어를 통해 빌드 해줍니다. ./gradlew build 빌드 중.. 빌드 완료! build라는 폴더가 생겼어요. build - libs 폴더로 이동해 줍니다. jar 파일이 생성된 것을 확인할 수 있습니다. java -jar 빌드된파일.jar 실행을 확인해 줍니다. 저는 java -jar hello-spring-0.0.1-SNAPSHOT.jar 이 되겠네요. 8080포트가 이미 사용하고 있다네요.. 다른 개발 환경에서 실행되고 있으면 다음과 같이 에러가 뜹니다. 저는 인텔리 제이에서 실행되고 있었어요.. 꺼주고 다시 실행을 확인해 주면.. 실행 성공!!

원문보기 내부링크
Naver Blog

게시글 최신순, 조회 순으로 정렬하기

장뽕뽕 웹게임 강화해서 광물캐기, 커뮤니티 hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 게시판에 여러 기능을 추가했습니다. 전체 화면을 캡처하기 위해서 사이즈를 줄였어요.. 게시글 정렬 기능을 넣었는데 오른쪽 위에 게시글을 최신순, 조회 순으로 정렬해 주는 옵션을 추가했습니다. board_load 영역이 결과를 불러오는 영역입니다. GET 방식으로 파라미터를 넘겨주고 그에 대한 응답을 뿌려줍니다. html <div class="col d-flex justify-content-end"> <div class="dropdown"> <button class="btn btn-outline-dark dropdown-toggle" href="javascript:void(0);" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expan

원문보기 내부링크
Naver Blog

제목, 내용, 작성자 별로 게시글 검색하기

장뽕뽕 웹게임 강화해서 광물캐기, 커뮤니티 hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 게시판 밑에 제목, 내용, 작성자 별로 게시글을 검색하는 기능을 추가해 봤습니다. html <div class="row justify-content-center"> <div class="d-flex"> <div class="input-group"> <button class="btn btn-outline-dark dropdown-toggle" href="javascript:void(0);" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span id="footer-search-val" search="content">제목 + 내용</span> </button> <ul class="dropdown-menu"

원문보기 내부링크
Naver Blog

메인 화면에서 게시글 리스트 뽑아오기

장뽕뽕 웹게임 강화해서 광물캐기, 커뮤니티 hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 공지사항 / 이벤트 / 자유게시판 영역은 게시판 형식으로 되어있습니다. 메인 화면에서 공지사항, 이벤트는 최신 게시글 3개 자유 게시판은 최신 게시글 5개만 뽑아와서 출력해 보도록 할게요. 자유시장은 아직 미완성입니다 ㅋㅁㅋ 공지사항 게시판 ( 관리자 권한만 글쓰기 버튼이 노출됩니다. ) 이벤트 게시판 자유게시판 공지사항 테이블 - admin_board 이벤트 테이블 - admin_board 자유게시판 테이블 - user_board 쿼리문 $notice_sql = "select * from admin_board where 1=1 and menu='notice' and del_yn='N' order by id desc limit 0,3"; $event_sql = "select * from admin_board where 1=1 and men

원문보기 내부링크
Naver Blog

레벨순으로 랭킹 정하기

장뽕뽕 웹게임 강화해서 광물캐기, 커뮤니티 hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 홈페이지 메인화면에서 랭킹 부분을 출력하도록 하겠습니다. 각각 계정마다 레벨, 경험치, 포인트 등의 정보가 있는데 가장 높은 순으로 정렬 후 5개 뽑아와서 출력했습니다. 유저의 정보가 담긴 테이블은 2개가 있습니다. - users : id, pw, email, nickname 등 - user_info : level, exp, point, item 등 출력하고싶은 nickname과 정렬하고싶은 level이 다른 테이블에 있어서 조인해준 뒤 정렬해야됩니다. 쿼리문 $broadcast_sql = "select nickname from users inner join user_info on users.id = user_info.userid order by level desc limit 0,5"; $broadcast_total = $db_cls->e

원문보기 내부링크
Naver Blog

ckeditor로 유튜브 링크 삽입하고 불러오기

장뽕뽕 웹게임 강화해서 광물캐기, 커뮤니티 hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 게시판에서 게시글을 작성할 때, 유튜브 공유 URL을 가져와 내용 본문에 첨부하고 싶을 때가 있습니다. ckeditor에서 제공하는 기능을 이용해서 게시글 본문에 동영상을 넣어볼게요. ckeditor를 불러온 뒤, 비디오 모양을 누르면 url을 입력하라고 합니다. 유튜브 공유 링크를 누르고 초록색 체크 버튼을 누르면.. 본문 내용에 유튜브 동영상이 삽입됩니다. 이 상태로 게시글을 등록하게 되면.. db에 html 형식으로 내용이 입력됩니다. 하지만 게시글을 불러올 땐 동영상이 출력되지 않습니다. iframe으로 변환시켜서 출력해 줘야 돼요. db에 입력할 때 변환시켜서 저장해 줘도 되지만 저는 불러올 때 뷰 페이지에서 변환시켜서 사용해 줬어요. 뷰 패이지 스크립트 <script> $(document).ready(function() { do

원문보기 내부링크
Naver Blog

Spring Boot - 프로젝트 생성

Download the Latest Java LTS Free Subscribe to Java SE and get the most comprehensive Java support available, with 24/7 global access to the experts. www.oracle.com 자바가 설치되어 있지 않다면 스프링 부트 버전과 호환되는 jdk를 먼저 설치해 줍니다. 아마 오라클 회원가입해야 될 거예요.. {"_links":{"gradle-project":{"href":"https://start.spring.io/starter.zip?type=gradle-project{&dependencies,packaging,javaVersion,language,bootVersion,groupId,artifactId,version,name,description,packageName}","templated":true},"gradle-project-kotlin":{"href":"https

원문보기 내부링크
Naver Blog

Spring Boot - MVC 1

MVC : Model View Controller이라는 하나의 디자인 패턴 Spring MVC : 스프링이 제공하는 웹 전용 MVC Framework Model : 비즈니스 로직 처리 View : 사용자가 보는 UI Controller : Model과 View 사이에서 데이터를 처리 index <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello</title> </head> <body> <p>Hello Spring</p> <a href="/hello">Hello Page</a> </body> </html> Controller package hello.hellospring.controller; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.b

원문보기 내부링크
Naver Blog

Node.js Express - CRUD 게시판 만들기 2

Node.js Express - CRUD 게시판 만들기 1 시작하기에 앞서 기존에 만들었던 건 메뉴로 분류해버렸습니다.. 그리고 게시판도 하나의 메뉴로 사용할 거... blog.naver.com 이전 게시글에 이어 진행됩니다.. DB에 입력된 데이터를 출력해 보도록 할게요. board/index.ejs <%- include("../include/header") -%> <div class="container"> <h3>게시판리스트</h3> <table class="table table-border text-center"> <thead> <tr> <th scope="col">번호</th> <th scope="col">글쓴이</th> <th scope="col">제목</th> <th scope="col">작성일</th> </tr> </thead> <tbody> <% if(rows.length==0){ %> <td colspan="4">게시글이 없습니다.</td> <% } for(var i

원문보기 내부링크
Naver Blog

Node.js Express - CRUD 게시판 만들기 3

Node.js Express - CRUD 게시판 만들기 2 이전 게시글에 이어 진행됩니다.. DB에 입력된 데이터를 출력해 보도록 할게요. board/index.ejs router/... blog.naver.com 이전 게시글에 이어 진행됩니다.. 리스트 출력, 글쓰기, 글 보기를 만들었으니 이제 글 수정 기능을 만들어 봅니다. 만들어놓은 드롭 다운 버튼을 누르면 수정, 삭제가 나옵니다. 이 버튼을 누르면 /board/modify/<%=result.idx%> /board/delete/<%=result.idx%> 두 페이지로 나뉘게 됩니다. 하지만 라우터에선 modify와 delete를 변수로 전달받아 처리할 거예요. 그리고 해당 게시글에 수정, 삭제 작업을 하기 위해선 게시글의 비밀번호를 입력받는 인증 처리까지 해야 됩니다. auth.ejs <%- include("../include/header") -%> <div class="container"> <h3 class="mb-5">게시

원문보기 내부링크
Naver Blog

Node.js Express - CRUD 게시판 만들기 4

Node.js Express - CRUD 게시판 만들기 3 이전 게시글에 이어 진행됩니다.. 리스트 출력, 글쓰기, 글 보기를 만들었으니 이제 글 수정 기능을 만들어... blog.naver.com 이전 게시글에 이어 진행됩니다.. 마지막으로 삭제 기능을 만들어 볼게요. 이전 게시글에서 수정 기능을 만들 때 게시글의 비밀번호를 입력받았었는데 type에 따라 분기됐었습니다. type이 modify 일 때는 만들어줬으니 type이 delete 일 때만 만들어주면 됩니다. auth에서 비밀번호를 입력받은 뒤 처리되는 router/board.js 부분 router.post('/board/:type/:idx', function (req, res) { var type = req.params.type; var idx = req.params.idx; var password = req.body.password; var sql = "select password from board where 1=1 a

원문보기 내부링크
Naver Blog

Node.js Express - 게시판 첨부파일 업로드, 다운로드

게시글을 작성할 때 첨부파일을 노드 서버에 올리고 다운로드할 수 있습니다. 파일 업로드와 동시에 DB에 첨부파일 관련 정보를 입력합니다. 게시글에 test_file.txt를 첨부파일로 올려볼게요. 업로드할 test_file.txt 게시판 DDL 정보 CREATE TABLE `board` ( `idx` int(11) NOT NULL AUTO_INCREMENT, `writer` varchar(20) DEFAULT NULL, `password` varchar(20) DEFAULT NULL, `title` varchar(100) DEFAULT NULL, `content` text DEFAULT NULL, `date` datetime DEFAULT NULL, `del_yn` enum('Y','N') DEFAULT 'N', `file_o_name` varchar(100) DEFAULT NULL, `file_c_name` varchar(100) DEFAULT NULL, `file_path` va

원문보기 내부링크
Naver Blog

SQLMAP - DB 침투하기

sqlmap: automatic SQL injection and database takeover tool Introduction sqlmap is an open source penetration testing tool that automates the process of detecting and exploiting SQL injection flaws and taking over of database servers. It comes with a powerful detection engine, many niche features for the ultimate penetration tester and a broad range of switc... sqlmap.org - sql injection은 웹 해킹 기법 중 하나입니다. 웹과 DB에 쿼리를 보내는 과정 중 악의적인 의도를 갖는 구문을 삽입하여 공격자가 원하는 질의문을 실행합니다. 공격 종류 : 인증 우회, 데이터 노출, 원격 명령 실

원문보기 내부링크
Naver Blog

번호 저장없이 카카오톡 기본 프로필 확인하기 #카카오스캔

카카오스캔 - 카톡 프로필 조회 카카오톡 프로필을 몰래 조회 할 수 있습니다. 상대방은 조회 사실을 알 수 없습니다. kakaoscan.com 우리는 카카오톡을 통해서 사람들과 일상을 공유해요. 그러다보면 가끔은 상대방의 멀티프로필이 아닌 기본 프로필이 궁금해지기도 하고, 혹시 나를 차단한거 같다면, 정말 차단 한 건지 확인 해보고싶고, 번호는 있는데 저장하긴 싫고, 흔적 없이 프로필을 확인해 보고 싶기도 할거에요. 카카오스캔은 전화번호로 상대방의 프로필을 조회해줘요. 상대방은 조회 당한 사실을 전혀 알 수 없으니 안심해도돼요! 번호를 입력하면 순번 대기를 시작해요. 한명 당 20~30초 소요되니 약간의 인내심이 필요해요. 작업이 완료되기 전 까지는 절대 never! 새로고침 하거나 화면을 전환하시면 안돼요. 작업이 취소된답니다 ㅎㅎ. 간혹적으로 친구 동기화가 실패해서 올바른 전화번호를 입력해도 친구추가에 실패했다고 나올 수 있어요! 이럴 땐 다시 시도하시면 해결 됩니당. 작업이 완

원문보기 내부링크
Naver Blog

가위바위보 게임 만들기 - Front End

장뽕뽕 웹게임 강화해서 광물캐기, 커뮤니티 hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 홈페이지에 가위바위보 미니게임을 추가했어요. Front 단에 선 사용자의 정보를 불러와서 배팅금액을 입력받고 가위, 바위, 보를 입력받아서 서버로 넘겨보도록 할게요. 결과를 먼저 보여드리면.. 메인 화면 이겼을 경우 졌을 경우 비겼을 경우 모달창을 띄어줍니다. 프런트 단에선 가위, 바위, 보를 선택했을 때 이미지를 교체해 줍니다. 그리고 데이터를 입력받아 서버로 넘겨줍니다. 데이터 처리는 서버 측에서 합니다. rps_main.html <? include $_SERVER['DOCUMENT_ROOT'].'/_common.php'; ?> <? loginchk(); ?> <div class="container"> <!-- Page Heading --> <h1 class="h3 mb-2 text-gray-800">가위바위보</h1> <p class

원문보기 내부링크
Naver Blog

가위바위보 게임 만들기 - Back End

장뽕뽕 웹게임 강화해서 광물캐기, 커뮤니티 hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 프런트 단에 이어서 백단도 이어서 진행할게요. ajax_rps.php <? include $_SERVER['DOCUMENT_ROOT'].'/_common.php'; ?> <? $type = $_POST['type']; $option = $_POST['option']; $money = $_POST['money']; $user_id = $cf['user_id']; if(!$type) { echo "올바르지 않은 접근입니다."; return false; } if($type == "play" || $type == "go") { if($type == "play" && $money < 1000 || $money > 50000) { $result = array("state"=>"error", "message"=>"배팅금액을 1,000 ~ 50,000

원문보기 내부링크
Naver Blog

Node.js Express - EJS Engine 사용하기

ejs 엔진을 통해 HTML 소스에 데이터를 전달해 봐요. 먼저 노드에 ejs 모듈을 설치합니다. npm install ejs 설치가 완료되었으면 view를 만들어줍니다. 저는 프로젝트 폴더 안에 views/index.ejs 파일로 만들어줬어요! index.ejs <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Express</title> </head> <body> <h1>익스프레스 메인페이지 입니다.</h1> <h1>전달받은 값 : <%=data%></h1> </body> <footer> <p>&copy; Express_test</p> </footer> </html> js 파일도 수정해 줍니다. // express var express = require

원문보기 내부링크
Naver Blog

Node.js Express - Bootstrap 사용하기 + 헤더 분리

이전 게시글에서 ejs를 사용했는데 view로 ejs를 사용하면서 bootstrap을 적용해 볼게요. npm install bootstrap 해당 명령어로 노드에 부트스트랩을 설치합니다. package.json에 종속성이 알아서 추가됩니다. js 파일에서 부트스트랩을 설정해 줍니다. // bootstrap app.use('/js', express.static(__dirname + '/node_modules/bootstrap/dist/js')); // bootstrap JS app.use('/css', express.static(__dirname + '/node_modules/bootstrap/dist/css')); // bootstrap CSS 페이지에 적용시켜줍니다. // header에 추가 <link rel="stylesheet" href="/css/bootstrap.min.css"> // footer에 추가 <script src="/js/bootstrap.min.js"></sc

원문보기 내부링크
Naver Blog

Node.js Express - GET Method 전송

이전 게시글에서 노드 부트스트랩을 사용하면서 임의의 값을 입력받는 입력 폼을 만들었어요. 전송하기 버튼을 누르면 값 1, 값 2에 있는 값이 result 페이지로 전송됩니다. index.ejs <%- include("include/header") -%> <div class="container w-50"> <div class="form-floating mb-3"> <h1>익스프레스 메인페이지 입니다.</h1> </div> <h3>메소드를 GET으로 보내기</h3> <form action="result" method="get"> <div class="form-floating mb-3"> <div class="form-floating mb-3"> <input type="text" class="form-control" name="val1"> <label for="floatingInput">값 1 : </label> </div> <div class="form-floating mb-3"> <i

원문보기 내부링크
Naver Blog

Node.js Express - POST Method 전송

이전에 노드에서 GET 방식으로 메소드를 전달했는데 파라미터가 URL에 노출되지 않도록 이번엔 폼에서 POST 방식으로 메소드를 전달해 볼게요. 결과 화면 파라미터가 URL에 노출되지 않습니다. index.ejs에 저는 post로 보내는 폼을 하나 더 추가해 줬습니다. <%- include("include/header") -%> <div class="container w-50"> <div class="form-floating mb-3"> <h1>익스프레스 메인페이지 입니다.</h1> </div> <h3>메소드를 GET으로 보내기</h3> <form action="result" method="get"> <div class="form-floating mb-3"> <div class="form-floating mb-3"> <input type="text" class="form-control" name="val1"> <label for="floatingInput">값 1 : </label>

원문보기 내부링크
Naver Blog

Node.js Express - Routing

라우팅은 HTTP 요청에 대한 응답하는 방법을 결정하는 것입니다. 웹 페이지를 확장시켜 나가면서 코드가 길어지면 유지 보수하기가 상당히 까다롭습니다. 그래서 노드에서 라우터를 분리하여 개발하는 것이 효율적입니다. 분리하여 어떻게 모듈화할지는 개발자 나름입니다. 프로젝트 구조 router - index.js / result.js router 폴더를 만들어서 라우터를 분리했습니다. index.js var express = require('express'); var router = express.Router(); router.get('/', function (req, res) { res.render('index'); }); module.exports = router; result.js var express = require('express'); var router = express.Router(); router.get('/result', function (req, res) { var va

원문보기 내부링크
Naver Blog

Node.js Express - JQuery 사용하기

jquery JavaScript library for DOM operations. Latest version: 3.6.2, last published: a day ago. Start using jquery in your project by running `npm i jquery`. There are 19256 other projects in the npm registry using jquery. www.npmjs.com npm jquery 문서 노드에서 자바스크립트 라이브러리 jquery를 사용해 봐요. 먼저 npm으로 jquery를 설치합니다. npm install jquery 설치 완료 의존성 추가되었는지 확인해 주시고요 프로젝트 폴더 안에 node_modules 보시면 설치가 되어 있습니다. 이제 app.js에 jquery 경로를 설정해 줍니다. //jquery app.use('/js', express.static(__dirname + '/node_modules/jquery/d

원문보기 내부링크
Naver Blog

Node.js Express - 파일 업로드

노드에서 폼데이터와 Multer를 이용하여 파일 업로드를 진행해 볼게요. 하면서 파일 이름이 중복되면 안 되니까 파일 이름도 같이 바꿔보도록 할게요.. Multer 모듈을 먼저 설치해줍니다. npm install multer 하고 저는 업로드하는 Router를 따로 만들어 줬습니다. 프로젝트 구조 index.js에 파일 업로드 폼 추가 <form action="upload" method="post" enctype="multipart/form-data"> <h3>파일 업로드</h3> <div class="input-group mb-3"> <input type="file" class="form-control" name="file"> </div> <div class="d-grid gap-2 mb-3"> <input type="submit" class="btn btn-primary" value="전송하기"> </div> </form> upload.js var express = require

원문보기 내부링크
Naver Blog

Node.js Express - 이미지 불러오기

업로드한 이미지를 img src 태그로 출력해 볼게요. img src="폴더/파일명"으로 하면 출력이 안될 거예요. 먼저 노드에서 정적 파일을 제공해 줘야 됩니다. 저는 upload 폴더 안에 이미지를 업로드했습니다. app.js //img app.use(express.static('upload')) index.ejs <%- include("include/header") -%> <div class="container"> <img src="logo.png"> <img src="1671157986921_image.png"> </div> <%- include("include/footer") -%> logo.png랑 1671157986921_image.png는 동일한 이미지입니다. 제일 첫 페이지 메인 섹션에 이미지 두 개만 출력했습니다. 귀여운 루피가 두 마리!!

원문보기 내부링크
Naver Blog

Node.js Express - Mysql DB 접속

노드에서 Mysql을 사용하려면 Mysql 모듈을 먼저 설치해야 됩니다. npm install mysql 설치 후에 바로 연결을 해봐요. 저는 데이터베이스 설정 관련 부분을 따로 모듈화 시켜서 사용했습니다. lib/db.js var mysql = require('mysql'); var db = mysql.createConnection({ host : '호스트주소', user : '유저', password : '비밀번호', database : 'DB', dateStrings: "date", }); db.connect(); module.exports = db; db 변수에 연결할 때 사용되는 정보를 입력해 준 뒤 connect() 메서드가 mysql에 연결합니다. query('sql',callback) 을 통해 질의문을 사용합니다. 이제 사용할 다른 모듈에서 var db = require('../lib/db'); db 정보를 불러온 뒤 사용하면 편합니다.

원문보기 내부링크
Naver Blog

Node.js Express - CRUD 게시판 만들기 1

시작하기에 앞서 기존에 만들었던 건 메뉴로 분류해버렸습니다.. 그리고 게시판도 하나의 메뉴로 사용할 거예요! 이렇게 ㅋㅁㅋ 파일 구조는 다음과 같습니다. lib/db.js : DB 접속 관련 모듈 router/board.js : 게시판 라우터 view/board/~ : 게시판에 렌더링 될 페이지 게시판 DDL 정보 CREATE TABLE `board` ( `idx` int(11) NOT NULL AUTO_INCREMENT, `writer` varchar(20) DEFAULT NULL, `password` varchar(20) DEFAULT NULL, `title` varchar(100) DEFAULT NULL, `content` text DEFAULT NULL, `date` datetime DEFAULT NULL, `del_yn` enum('Y','N') DEFAULT 'N', PRIMARY KEY (`idx`) ) 회원가입, 로그인이 따로 없는 게시판이라 게시글에 글쓴이와 비밀번호

원문보기 내부링크
Naver Blog

권한에 따라 페이지 비정상 접근 방지

일반 유저의 경우 http://hoowave.dothome.co.kr/user/userpage.html 관리자의 경우 http://hoowave.dothome.co.kr/admin/adminpage.html 입니다. 비회원이 일반 유저, 관리자 페이지 접근 일반 유저가 관리자 페이지 접근 하는 것을 방지해 볼게요. 현재 폴더 구조가 이렇게 되어있어요. 아 참 hothome은 다른 이유 없이 dothome 치려다 오타 나서 hothome으로 됐어요.. main 폴더 안에서 회원가입, 로그인을 처리하고 /user /admin 페이지로 분기하게 되는데 동시에 DB에서 받아온 회원 정보로 세션 값을 부여받습니다. 그 안에 권한 값도 있어요. $localdir=explode("/",$_SERVER['REQUEST_URI']); $localdir=$localdir[1]; 세션 값을 가져오기 전에 현재 로컬에서 접속된 URL을 가져옵니다. 슬러시 문자열로 잘라서 첫 번째 디렉터리 명을 가져옵니다

원문보기 내부링크
Naver Blog

장뽕뽕 사이트를 오픈합니다.

장뽕뽕 공지사항 더보기 공지사항 사이트를 오픈합니다. 이벤트 더보기 무슨 이벤트를 올려야될까요~! 자유시장 더보기 컨텐츠 1 컨텐츠 2 컨텐츠 3 컨텐츠 4 컨텐츠 5 명예의 전당 LOVEFIRE 랭킹 2위 랭킹 3위 랭킹 4위 랭킹 5위 실시간 알림 user1님이 +12 강화에 성공했습니다. user2님이 +13 강화에 성공했습니다. user3님이 +14 강화에 성공했습니다. user4님이 +15 강화에 성공했습니다. user5님이 +16 강화에 성공했습니다. hoowave.dothome.co.kr 공부 한 내용을 사이트에 컨텐츠로 추가해 보고 사용된 기술은 블로그에 적으면서 복습할 생각입니다. 부트스트랩, Jquery를 이용해 프론트엔드 PHP, Mysql을 이용해 백엔드 ajax를 이용해 사이트 내 비동기 처리를 했습니다. 아직 많이 부족하고 배워나가는 단계이며 혼자 개발하는 사이트라 부족한 부분이 많을 수밖에 없습니다. 사용자나 개발자 입장 등 여러 관점에서 불편한 부분이나

원문보기 내부링크
Naver Blog

공지사항, 이벤트 등 게시판 만들기 - 글쓰기

장뽕뽕 공지사항 더보기 공지사항 사이트를 오픈합니다. 이벤트 더보기 무슨 이벤트를 올려야될까요~! 자유시장 더보기 컨텐츠 1 컨텐츠 2 컨텐츠 3 컨텐츠 4 컨텐츠 5 명예의 전당 LOVEFIRE 랭킹 2위 랭킹 3위 랭킹 4위 랭킹 5위 실시간 알림 user1님이 +12 강화에 성공했습니다. user2님이 +13 강화에 성공했습니다. user3님이 +14 강화에 성공했습니다. user4님이 +15 강화에 성공했습니다. user5님이 +16 강화에 성공했습니다. hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 먼저 admin_board 테이블을 만들어 줍니다. CREATE TABLE `admin_board` ( `id` int UNSIGNED NOT NULL, `menu` varchar(10) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL, `title` varchar(1

원문보기 내부링크
Naver Blog

글쓰기에서 콘텐츠 영역 ckeditor 사용하기

장뽕뽕 공지사항 더보기 공지사항 사이트를 오픈합니다. 이벤트 더보기 무슨 이벤트를 올려야될까요~! 자유시장 더보기 컨텐츠 1 컨텐츠 2 컨텐츠 3 컨텐츠 4 컨텐츠 5 명예의 전당 LOVEFIRE 랭킹 2위 랭킹 3위 랭킹 4위 랭킹 5위 실시간 알림 user1님이 +12 강화에 성공했습니다. user2님이 +13 강화에 성공했습니다. user3님이 +14 강화에 성공했습니다. user4님이 +15 강화에 성공했습니다. user5님이 +16 강화에 성공했습니다. hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 글쓰기 게시글에서 설명을 놓친 부분이 있는데, 게시글을 작성할 때 글자만 입력하고 작성하는 게 아니잖아요 뭐.. 폰트 스타일이나 사이즈, 굵기 등을 정하고 싶기도 하고.. 원하는 스타일이 있으니까.. 그래서 ckeditor라는 플러그인을 가져와서 적용해 볼게요. WYSIWYG HTML Editor with Collabora

원문보기 내부링크
Naver Blog

공지사항, 이벤트 등 게시판 만들기 - 리스트 출력

장뽕뽕 공지사항 더보기 공지사항 사이트를 오픈합니다. 이벤트 더보기 무슨 이벤트를 올려야될까요~! 자유시장 더보기 컨텐츠 1 컨텐츠 2 컨텐츠 3 컨텐츠 4 컨텐츠 5 명예의 전당 LOVEFIRE 랭킹 2위 랭킹 3위 랭킹 4위 랭킹 5위 실시간 알림 user1님이 +12 강화에 성공했습니다. user2님이 +13 강화에 성공했습니다. user3님이 +14 강화에 성공했습니다. user4님이 +15 강화에 성공했습니다. user5님이 +16 강화에 성공했습니다. hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 이전 게시글에서 작성한 게시글 리스트를 불러와보도록 할게요. 공지사항의 경우 이벤트의 경우 공지사항인지 이벤트인지 구분 짓기 위해 이 리스트 페이지로 이동할 때 파라미터 값이 붙습니다. ../menu/view_all.html?type=notice ../menu/view_all.html?type=event 이런 식으로요! 이

원문보기 내부링크
Naver Blog

페이징 클래스로 생산성 증가

장뽕뽕 공지사항 더보기 공지사항 사이트를 오픈합니다. 이벤트 더보기 무슨 이벤트를 올려야될까요~! 자유시장 더보기 컨텐츠 1 컨텐츠 2 컨텐츠 3 컨텐츠 4 컨텐츠 5 명예의 전당 LOVEFIRE 랭킹 2위 랭킹 3위 랭킹 4위 랭킹 5위 실시간 알림 user1님이 +12 강화에 성공했습니다. user2님이 +13 강화에 성공했습니다. user3님이 +14 강화에 성공했습니다. user4님이 +15 강화에 성공했습니다. user5님이 +16 강화에 성공했습니다. hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 불러올 데이터가 많아질수록 페이지에 그 데이터를 담기보다는 페이지 별로 나눠서 처리하면 더욱 보기 좋습니다. 사용자 입장에선 편한데 개발자 입장에선 까다롭기도 하고.. 저는 비동기 처리로 페이지를 로드하려다 보니까 그 과정에서 코드 루핑이 돌면서 트래픽이 미친 듯이 폭발해버렸어요.. 이런 식으로 만들었습니다. 매 페이지마다

원문보기 내부링크
Naver Blog

공지사항, 이벤트 등 게시판 만들기 - 게시글 보기

장뽕뽕 공지사항 더보기 공지사항 사이트를 오픈합니다. 이벤트 더보기 무슨 이벤트를 올려야될까요~! 자유시장 더보기 컨텐츠 1 컨텐츠 2 컨텐츠 3 컨텐츠 4 컨텐츠 5 명예의 전당 LOVEFIRE 랭킹 2위 랭킹 3위 랭킹 4위 랭킹 5위 실시간 알림 user1님이 +12 강화에 성공했습니다. user2님이 +13 강화에 성공했습니다. user3님이 +14 강화에 성공했습니다. user4님이 +15 강화에 성공했습니다. user5님이 +16 강화에 성공했습니다. hoowave.dothome.co.kr 개인 사이트에서 사용해 본 것을 토대로 작성하는 게시글입니다.. 이전에 작성하고, 리스트를 불러왔었습니다. 이번엔 게시글의 내용을 불러와볼게요. 불러온 게시글의 내용 view.html 소스코드 <? include $_SERVER['DOCUMENT_ROOT'].'/_common.php'; ?> <? $id = $_GET['id']; $sql = "select * from admin_boa

원문보기 내부링크
Naver Blog

Node.js Express - 설치하기

Node.js는 Javascript 런타임입니다. 싱글스레드, 논 블로킹 모델이라 처리 성능이 좋습니다. 그 말은 하나의 작업 자체가 많이 걸리는 웹 서비스에는 적합하지 않겠죠.. NPM(node pakage manger) 을 이용해 필요한 라이브러리와 모듈을 끌어다 쓴다는 큰 장점이 있습니다. 자세한 내용은 https://nodejs.org/ko/about/ 에서 확인하실 수 있습니다. Node.js Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 노드 공식 사이트입니다. 원하는 버전을 다운로드하시면 됩니다. 설치는 그리 어렵지 않아요. 그냥 경로설정하고.. Next.. Next.. Node.js를 설치하시면 NPM도 같이 설치가 됩니다. 설치가 완료되었다면 프롬프트 창을 켜서 설치된 버전을 확인해 줍니다. 설치된 노드 버전 확인 node -v 설치된 NPM 버전 확인 npm -v

원문보기 내부링크
Naver Blog

Node.js Express - Nodemon 사용하기

노드 서버를 개발할 때 자바 스크립트 파일을 수정할 때마다 매번 서버를 끄고 다시 실행해 주고.. 너무 번거롭습니다. Node monitor(Nodemon)이라는 모듈은 파일을 모니터링하고 있다가 저장(ctrl+s) 하면 자동으로 서버를 재실행 시켜줍니다. 상당히 편해요. npm install nodemon -g 커맨드 라인에서 명령어를 실행해야 되기 때문에 글로벌 옵션을 붙여줍니다. 설치 완료 기존엔 node app.js로 서버를 실행시켰지만 nodemon app.js nodemon으로 실행시켜줍니다. 이제 작업 창에서 파일을 수정할 경우, nodemon이 알아서 서버를 재실행 해줍니다.

원문보기 내부링크
Naver Blog

무료 호스팅 사이트를 이용해 개발 환경 세팅

리눅스나 윈도우 서버를 이용해 직접 웹서버를 운용할 수도 있지만 업체에 일정 금액을 지불하고 도메인, 호스팅 서비스를 이용할 수도 있습니다. 그 말은 웹서버를 따로 구축하고, 설정을 해 줄 필요가 없다는 말입니다. 그 업체에 있는 자원을 이용한다고 보시면 돼요. 닷홈 호스팅 닷홈은 도메인, 무료 웹호스팅, 웹빌더, 메일호스팅, SSL보안인증서, 서버호스팅, 코로케이션 등 다양한 호스팅 서비스를 제공하고 있습니다. www.dothome.co.kr 여러 업체가 있겠지만 저는 간단한 작업이나 테스트를 사용할 목적이기에 무료 호스팅을 사용했습니다. 뭐 하다가 규모가 커진다면 유료로 전환하면 되니.. 무료 호스팅은 SSH 접속 등의 제약을 받습니다.. FTP로 작업할 거니 괜찮아요! 개발 환경은 개인 취향에 맞게 세팅하시면 돼요. 저는 회사에선 Eclipse를 사용하는데 블로그 포스팅할 때는 맥북을 사용해서 그나마 가장 호환성이 괜찮다고 생각한 Brackets에 Synapse 플러그인을 사용

원문보기 내부링크
Naver Blog

DB Connection

웹페이지에서 DB에 접속합니다. <?php $db_host=""; $db_user=""; $db_password=""; $db_name=""; $connect = mysqli_connect("$db_host", "$db_user", "$db_password", "$db_name"); if(!isset($connect)) { echo "DB에러! 관리자에게 문의하세요."; } print_r($connect); ?> $db_host : 접속 호스트 $db_user : 접속 ID $db_password : 접속 PW $db_name : 접속 DB 입력받은 정보는 mysqli_connect 함수를 통해 DB에 접속하게 되고, 접속 DB정보는 connect 변수에 입력 됩니다. connect변수에 DB정보가 입력되지 않으면 DB에 접속하지 못한거니, 에러 메세지를 출력하고 정상적으로 접속이 완료되었다면 정상적으로 DB접속 정보가 출력됩니다.

원문보기 내부링크
Naver Blog

로그인 페이지 만들기 - 설계

웹 서버까지 세팅이 완료가 되었다면, 홈페이지 구조를 만들어줍니다. 홈페이지 구조 main : 로그인 페이지 관련 폴더입니다. admin : 관리자 전용 페이지입니다. js : javascript 파일 관련 폴더입니다. lib : db접속, 설정 관련 폴더입니다. testpage : 회사에서 테스트 하던 페이지입니다. 여기선 사용X user : 일반 유저 전용 페이지입니다. index.html : 도메인을 통해 홈페이지에 접속했을 때 가장 먼저 접하는 파일입니다. _common.php : 각 설정 파일들을 모두 불러오는 파일입니다. _common.php <?php include '../lib/dbcon.php'; include '../lib/config.php'; include '../lib/class.php'; include '../lib/common.php'; ?> index.html <!DOCTYPE> <html> <head> </head> <body> <script langu

원문보기 내부링크
Naver Blog

DB Connection - Class

DB Connection 웹페이지에서 DB에 접속합니다. $db_host : 접속 호스트 $db_user : 접속 ID $db_password : 접속 PW... blog.naver.com 이전 게시글에 이어 진행됩니다.. PHP로 DB에 값을 저장하고 검색하고 하는 작업을 하기 전에 질의문을 편하게 주고 받기 위해 클래스를 만들어서 사용합니다. Class DB { private static $connect; public function __construct() { $db_host=""; $db_user=""; $db_password=""; $db_name=""; $connect = mysqli_connect("$db_host", "$db_user", "$db_password", "$db_name"); self::$connect = $connect; } public function execute($sql, $type=null) { $sql = trim($sql); $sql_resul

원문보기 내부링크
Naver Blog

회원가입 페이지 만들기 - 1

로그인 페이지 만들기 - 설계 웹 서버까지 세팅이 완료가 되었다면, 홈페이지 구조를 만들어줍니다. 홈페이지 구조 main : 로그인 페이지... blog.naver.com 로그인 처리를 하기 전에, 회원가입 처리를 먼저 하는 것이 좋겠다 생각해서 회원가입 페이지 먼저 만들었습니다. join.html <? include '../_common.php'; ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>회원가입 페이지</title> </head> <body> <div align="center"> <h3>회원가입</h3> <p>ID : <input type="text" id="user_id"></p> <p id ="user_id_err" style="display: none">아이디는 4~20자로 입력해주

원문보기 내부링크
Naver Blog

회원가입 페이지 만들기 - 2

회원가입 페이지 만들기 - 1 로그인 처리를 하기 전에, 회원가입 처리를 먼저 하는 것이 좋겠다 생각해서 회원가입 페이지 먼저 만들었... blog.naver.com 회원가입 정보를 Front 단에서 입력받았다면 이번엔 Back 단에서 처리를 해볼게요 앞 게시글에서 완성하지 못한 script.js -> ajax 처리 함수 function call_ajax_main(type = null) { $.ajax({ url: 'ajax_main.php', type: "post", data: { type: type, id: $("#user_id").val(), pw: $("#user_pw").val(), }, success: function (result) { var result = JSON.parse(result); alert(result.message); if (result.url) { location.href = result.url; } }, error: function (xhr, stat

원문보기 내부링크
Naver Blog

로그인 페이지 만들기 - 처리

로그인 페이지 만들기 - 설계 웹 서버까지 세팅이 완료가 되었다면, 홈페이지 구조를 만들어줍니다. 홈페이지 구조 main : 로그인 페이지... blog.naver.com 회원가입 페이지 만들기 - 2 회원가입 정보를 Front단에서 입력 받았다면 이번엔 Back단에서 처리를 해볼게요 앞 게시글에서 완성하지... blog.naver.com 내용은 해당 게시글에 이어집니다.. 우선 공백 처리 방지를 위해 유효성 검사를 추가했습니다. main.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>로그인 페이지</title> </head> <body> <div align="center"> <h3>로그인</h3> <p>ID : <input type="text" id="user_id"></p> <p id ="

원문보기 내부링크
Naver Blog

reversing.kr Music Player 풀이

Reversing.Kr This site tests your ability to Cracking & Reverse Code Engineering. Now Challenge a problem for each environment. (Windows, Linux, .Net, Flash, Java, Python, Mobile..) Admin E-Mail: gogil @reversing.kr Notice 2014-12-12 New challenge 'CustomShell' was added. 2014-12-10 New challenge 'CRC2', 'Advent... reversing.kr 해당 사이트에서 여러 유형들의 예제 프로그램을 다운로드해 분석할 수 있습니다. 여기서 네 번째 문제인 Music Player 프로그램을 가져와서 실습을 진행해 봤습니다. 파일에 첨부된 readme 파일부터 읽어봅니다. 해당 MP3 플레이어는 1분까지만 들을 수 있게 되어있고 1분 이상 들으면 문제의 플래

원문보기 내부링크
Naver Blog

Cisco Packet Tracer #OSPF Routing

Cisco Packet Tracer Cisco Packet Tracer Gain real skills with our powerful network simulation and visualization tool, Cisco Packet Tracer. This virtual lab is an interactive way to practice networking, IoT, and cybersecurity skills – no hardware required! Use Packet Tracer as a learning environment for courses, distanc... www.netacad.com Cisco에서 제공하는 네트워크 실습 프로그램 Packet Tracer를 이용했습니다. OSPF ( Open Shoertest Path First ) : OSPF는 Network 확정에 한계가 없습니다. RIP의 한계를 극복하고 규모가 큰 Network를 위해 고안되었습니다. 디지크스트

원문보기 내부링크
Naver Blog

Cisco Packet Tracer #Router Password

Cisco Packet Tracer Cisco Packet Tracer Gain real skills with our powerful network simulation and visualization tool, Cisco Packet Tracer. This virtual lab is an interactive way to practice networking, IoT, and cybersecurity skills – no hardware required! Use Packet Tracer as a learning environment for courses, distanc... www.netacad.com Cisco에서 제공하는 네트워크 실습 프로그램 Packet Tracer를 이용했습니다. 1. 콘솔 라인 접근 암호 설정 패스워드를 hoowave로 저장해 주고 접근을 시도하면 패스워드를 요구합니다. 2. 관리자 모드 접근 암호 설정 패스워드를 hoowave로 저장해 주고 접근을 시도하면

원문보기 내부링크
Naver Blog

CentOS 6.8 #IP 수동으로 할당받기

VMware에서 IP를 DHCP로 할당받으면 192.168.1.128~로 받을 거예요. 하지만 수동으로 Client의 IP를 192.168.1.20으로 받아볼게요. Server OS IP 192.168.1.10 서브넷 255.255.255.0 게이트웨이 192.168.1.2 DNS 서버 168.126.63.1 로 세팅해 주고 OS를 Full Clone까지 한 뒤 Client OS의 IP를 192.168.1.20로 직접 수정해 보도록 할게요. Server ( 192.168.1.10 ) 에서 Clone 한 뒤 Client IP를 살펴보면 이더넷 1번으로 dhcp로 할당받는 걸 볼 수 있습니다. /etc/udev/rules.d/70-persistent-net.rules 를 vi로 열어볼게요. 맥 주소가 충돌 나서 이더넷 1번에 dhcp로 할당받습니다. 이더넷 0번으로 할당받게 하고 /etc/sysconfig/network-scripts/ifcfg-eth0 에서 맥 주소, IP도 수정 줍니

원문보기 내부링크
Naver Blog

CentOS 6.8 #VNC Server 시스템에 원격으로 접속

VNC : Virtual Network Computing / 리모트에 있는 시스템에 원격으로 접속하여 관리할 수 있는 프로그램. 설치가 간편하여 특별한 설정 없이 이용이 가능하고 원격 접속이 아닌 내 앞에 시스템 있는 것과 같은 해상도를 제공합니다. VNC 서버에선 세션 1개 = 계정 1개 = 포트 1개씩 설정을 해주셔야 돼요. 서버(192.168.1.11 / Putty 주황색), 클라이언트(192.168.1.20 / Putty 흰색)의 가상환경에서 VNC 서버를 구축하고 클라이언트에서 접속까지 해볼게요. 패키지 설치 및 확인 서버에는 tigervnc-server-1~ / 클라이언트에는 tigervnc-1~ 패키지로 설치해 줍니다. 2. 세션 생성 계정 생성이라고 생각하면 됩니다. 패스워드는 6자리 이상으로 설정해 주시고 만들어줍니다. 세션 생성 시 해당 폴더에 관련 vnc 관련 로그파일이나 계정 파일이 생성됩니다. 3. 방화벽 설정 5900 = VNCserver / 5901~ 60

원문보기 내부링크
Naver Blog

CentOS 6.8 #mount 파티션 나누기

하드디스크 장치를 추가하고 파티션을 나누고 포맷을 한 뒤 마운트까지 해봐요. 하드디스크 1GB를 추가합니다. sdb1 = 300MB / Physical Partition sdb2 = 300MB / Physical Partition sdb3 = etc.. / Extended Partition sdb5 = etc.. / Logical Partition 로 나눴습니다. 생성했던 파티션을 ext4형식으로 포맷합니다. mkfs -t ext4 /dev/sdb1 mkfs -t ext4 /dev/sdb2 mkfs -t ext4 /dev/sdb5 마운트 할 디렉터리를 생성하고 마운트하고 잘 되었는지 확인해 줍니다. mount -t ext4 /dev/sdb1 mount1 근데 이렇게 하면 휘발성이라 재부팅하면 날아갑니다. 재부팅해도 마운트 되게끔 /etc/fstab에서 설정해 줍니다. 필드에 해당하는 값을 입력해 주고 저장합니다. 이 작업하고 나서 mount -a로 fstab에 기술되어 있는 파일시스

원문보기 내부링크
Naver Blog

CentOS 6.8 #fstab 오류로 부팅이 안될 때

/etc/fstab 내용을 일부러 망쳐서 부팅이 안 되게끔 만들고 복구해 봐요. 정상적인 내용 경로를 일부러 망쳐놓고 저장한 뒤 재부팅을 해줍니다. 부팅 과정 중 파일시스템을 읽다가 오류가 납니다. root 패스워드를 요구하는데, 입력하고 나면 shell 모드로 바뀝니다. 이 상태에서 바로 /etc/fstab 내용을 수정하면 안 되고 Read, Write 권한을 따로 부여해야 수정하고 저장할 수 있습니다. mount -o remount,rw / 수정, 저장한 뒤 재부팅해 줍니다. 부팅 성공!!

원문보기 내부링크
Naver Blog

Cisco Packet Tracer #Static Routing

Cisco Packet Tracer Cisco Packet Tracer Gain real skills with our powerful network simulation and visualization tool, Cisco Packet Tracer. This virtual lab is an interactive way to practice networking, IoT, and cybersecurity skills – no hardware required! Use Packet Tracer as a learning environment for courses, distanc... www.netacad.com Cisco에서 제공하는 네트워크 실습 프로그램 Packet Tracer를 이용했습니다. 라우팅 기술 중 수동으로 목적지를 지정해 주는 Static Routing 물리적인 구성 PC1 <-> Router1 IP : 192.168.10.1 Subnet : 255.255.255.0 Gatew

원문보기 내부링크
Naver Blog

Cisco Packet Tracer #Dynamic Routing_RIP

Cisco Packet Tracer Cisco Packet Tracer Gain real skills with our powerful network simulation and visualization tool, Cisco Packet Tracer. This virtual lab is an interactive way to practice networking, IoT, and cybersecurity skills – no hardware required! Use Packet Tracer as a learning environment for courses, distanc... www.netacad.com Cisco에서 제공하는 네트워크 실습 프로그램 Packet Tracer를 이용했습니다. RIP은 동적 라우팅 프로토콜입니다. 관리자가 일일이 경로를 지정하지 않아도 길을 찾아갑니다. 디스턴스 벡터(Distance Vector) 라우팅 프로토콜로써 거리(홉)와 방향으로 길을 찾아갑니다.

원문보기 내부링크
Naver Blog

Wi-Fi 해킹 #WEP Key Crack

Kali Linux | Penetration Testing and Ethical Hacking Linux Distribution Home of Kali Linux, an Advanced Penetration Testing Linux distribution used for Penetration Testing, Ethical Hacking and network security assessments. www.kali.org 공격 대상은 제가 지금 있는 카페입니다. 목표는 카페의 WI-FI 비밀번호를 알아내는 것입니다. 운영체제는 kali / 무선랜카드 2개 사용했습니다. 먼저, 랜카드를 Monitor 모드로 전환해 줍니다. 주변에 있는 AP들의 신호를 확인합니다. 저는 제가 지금 있는 카페를 대상으로 잡았어요. 공격 대상이 무슨 채널을 사용하는지 확인하고, 눈높이에 맞게 채널을 맞춰줍니다. WEP 암호화 방식 사용 중 초기화 벡터 값을 반복해서 사용하는 RC4 알고리즘으로 인해 많은 IV

원문보기 내부링크
Naver Blog

CentOS 6.8 #SSH 취약점, 보안 설정

SSH는 Secure SHell, 시큐어 셸입니다. 원격으로 클라이언트가 서버에 접근해서 읽기, 쓰기 등의 작업을 하도록 해 주는 프로토콜입니다. 22번 포트를 사용해요. 서버에 접근한 클라이언트가 관리자의 권한을 얻어서 뻘짓거리를 못하도록 사전에 막도록 해요. Server IP : 192.168.1.10 ( Putty 노란색 ) Client IP : 192.168.1.20 ( Putty 흰색 ) 1. 애초에 관리자로 접속하는 계정 차단 이 서비스는 접속할 때 관리자로 접속하는 걸 허용하는데 따로 막아주셔야 됩니다. 서비스 설정 파일 ( /etc/ssh/sshd_config ) 을 열어서 확인해 보면, PermitRootLogin yes가 주석 처리되어 있는 걸 볼 수 있습니다. 주석 풀고 no 해주시면 끝 세팅 파일 수정해 줬으니 데몬 다시 돌려주시고 클라이언트로 가서 관리자로 접속을 시도해 봅니다. 막혔음 근데 Putty도 SSH 사용해서 이거 하면 Putty도 접속 안됩니다.

원문보기 내부링크
Naver Blog

CentOS 6.8 #Samba 윈도우와 리눅스 자원 공유

SMB(Server Message Block)는 디스크나 프린터와 같은 자원을 윈도우와 리눅스가 공유할 수 있도록 하기 위한 프로토콜입니다. 이걸 이용해서 공유 폴더를 만들어 윈도우와 같이 사용해 봐요. 1. 설치 먼저 samba 패키지를 설치하고 데몬을 실행시켜줍니다. 포트 열렸는지 확인해 주고 방화벽을 개방시켜줍니다. selinux는 disable 시켜놨어요. 2. 사용자 및 그룹 생성 계정 user1, 그룹 group1을 생성하고 group1에 user1을 가입시켜줍니다. 사용자 samba 패스워드도 설정해 줍니다. 3. 메인 설정 파일 구성 /etc/samba/smb.conf 내에 워크그룹을 윈도우와 동일하게 맞춰줍니다. 제일 마지막 라인에 공유 폴더도 2개 세팅해 줍니다. 해당 작업을 한 뒤 testparm으로 오타도 검증해 볼 수 있습니다. 실제 공유 디렉터리를 생성하고 직접 확인하기 위해 테스트 파일을 각 폴더다 하나씩 만들었습니다. 그리고 윈도우에서도 접근하기 위해 권

원문보기 내부링크
Naver Blog

reversing.kr Unpack 풀이

Reversing.Kr This site tests your ability to Cracking & Reverse Code Engineering. Now Challenge a problem for each environment. (Windows, Linux, .Net, Flash, Java, Python, Mobile..) Admin E-Mail: gogil @reversing.kr Notice 2014-12-12 New challenge 'CustomShell' was added. 2014-12-10 New challenge 'CRC2', 'Advent... reversing.kr 해당 사이트에서 여러 유형들의 예제 프로그램을 다운로드해 분석할 수 있습니다. 여기서 세 번째 문제인 Easy Unpack 프로그램을 가져와서 실습을 진행해 봤습니다. 파일에 첨부된 readme 파일부터 읽어봅니다. OEP를 찾으라네요. OEP는 패킹된 프로그램의 실행되는 실제 시작점입니다. 그렇담 아마

원문보기 내부링크
Naver Blog

CentOS 6.8 #grub 부팅 수동으로 하기

미리 백업 폴더를 만들어서 grub.conf를 백업해두고 원본 파일을 지운 뒤 재부팅합니다. 부팅에 필요한 grub 파일이 없으니, grub consol 창으로 넘어옵니다. 하드디스크, 커널 동작 실행 최상위 정해주시고 프로세스 동작 실행해 주시고 부팅 시켜주시면 됩니다. 쯔즈즌

원문보기 내부링크
Naver Blog

CentOS 6.8 #FTP-1 설정하고 접속하기

The CentOS Project Toggle navigation The CentOS Project Community-driven free software effort focused around the goal of providing a rich base platform for open source communities to build upon. We offer two Linux variants: ( What's the difference? ) CentOS Linux Consistent, manageable platform that suits a wide varie... www.centos.org 로컬 컴퓨터 한 대로 윈도와 가상화(CentOS)에서 FTP를 설정하고 접속해 보겠습니다. 먼저 패키지가 설치되어 있는지 먼저 확인합니다. 설치되어 있으면 해당 명령에 대한 Response가 출력됩니다. 미설치 시 패키지를 설치합니다. 설치 완료. 그리고 데몬을 시작시켜줍니다. 저는 이 과

원문보기 내부링크
Naver Blog

CentOS 6.8 #FTP-2 파일 올리고 가져오기

CentOS 6.8 FTP #1 설정하고 접속하기 로컬 컴퓨터 한 대로 윈도와 가상화(CentOS)에서 FTP를 설정하고 접속해 보겠습니다. 먼저 패키지가 ... blog.naver.com 이전 게시글에 이어 진행됩니다... 윈도우 참조 디렉터리 : C:\Users\hoowave 리눅스 참조 디렉터리 : /home/hoowave 1. 윈도우 -> 리눅스 파일 전송 윈도우 참조 디렉터리에 test 파일을 만들고 해당 내용을 적습니다. 프롬프트창으로 돌아와 test 파일을 전송합니다. 정상적으로 파일 전송 완료!! 2. 리눅스 -> 윈도우 파일 가져오기 진행하기에 앞서, 위에서 진행했던 test 파일은 양쪽 운영체제에서 지워주도록 합니다. 리눅스 참조 디렉터리에 test파일을 만들고 해당 내용을 적습니다. 프롬프트창으로 돌아와 test 파일을 가져옵니다. 정상적으로 파일 가져오기 완료!!!

원문보기 내부링크
Naver Blog

Classful

IP Address는 한 디바이스 당 하나씩 부여됩니다. 같으면 절대 안 됩니다. 충돌 나요. IPv4주소체계에서 8Bit.8Bit.8Bit.8Bit = 1Byte.1Byte.1Byte.1Byte 2^8.2^8.2^8.2^8 = 256.256.256.256 0~255.0~255.0~255.0~255 등 다양하게 표현할 수 있으며 전 세계에서 2^32 = 4,294,967,296개의 IP를 할당받을 수 있습니다. 우리는 한정된 자원(IP)을 최대한 효율적으로 사용해야 됩니다. X X X X X X X X . ~ 2^7 2^6 2^5 2^4 2^3 2^2 2^1 2^0 . ~ 128 64 32 16 8 4 2 1 . ~ A Class 0.0.0.0 ~ 127.255.255.255 0.0.0.0 | 0 0000000.00000000.00000000.00000000 127.255.255.255 | 0 1111111.11111111.11111111.11111111 B Class 128.0.0

원문보기 내부링크
Naver Blog

Subnetmask

Classful IP Address는 한 디바이스 당 하나씩 부여됩니다. 같으면 절대 안 됩니다. 충돌나요. IPv4주소체계에... blog.naver.com 이전 게시글 Classful 내용과 이어집니다. 서브넷 마스크는 IP 대역대를 나누기 위해서 사용합니다. 대역대가 다르면 통신 안됩니다. D Class는 장비 연결 시 사용 E Class 연구용, 고갈 대비용 Classful A 0.0.0.0 ~ 127.255.255.255 B 128.0.0.0 ~ 191.255.255.255 C 192.0.0.0 ~ 223.255.255.255 Default Subnetmask | Prefix A 255.0.0.0 | /8 B 255.255.0.0 | /16 C 255.255.255.0 | /24 즉, 대역대 당 A = 2^24 , 16,777,216개 B = 2^16 , 65,536개 C = 2^8 , 256개의 IP를 할당받을 수 있습니다. 하지만, 각 대역대 당 예약 주소가 두 개 있습

원문보기 내부링크
Naver Blog

지뢰 찾기 게임을 이용한 RPM/WPM 사용

윈도에서 제공하는 ReadProcessMemory , WriteProcessMemory 함수를 사용해서 지뢰 찾기 게임의 시간 값을 예로 메모리를 읽고 수정할 수 있습니다. 윈도에서 제공하는 기본 지뢰 찾기 ( XP 버전 ) 첨부파일 Minesweeper.exe 파일 다운로드 <실행 화면> 콘솔로 제작된 하찮은 프로그램입니다. 응용하면 다른 곳에 사용할 수 있습니다. 해당 프로그램의 시간 값을 증가, 감소시키는 부분 <소스코드> #include <iostream> #include <windows.h> using namespace std; DWORD pid; DWORD value_addr = 0x0100579C; //메모리 주소 직접 구해야 됨 DWORD asm_addr = 0x01002FF6; //메모리 주소 직접 구해야 됨 int mainmenu_value; int original_value; int change_value; int original_addr_value = 5; in

원문보기 내부링크
Naver Blog

reversing.kr Keygen 풀이

Reversing.Kr This site tests your ability to Cracking & Reverse Code Engineering. Now Challenge a problem for each environment. (Windows, Linux, .Net, Flash, Java, Python, Mobile..) Admin E-Mail: gogil @reversing.kr Notice 2014-12-12 New challenge 'CustomShell' was added. 2014-12-10 New challenge 'CRC2', 'Advent... reversing.kr 해당 사이트에서 여러 유형들의 예제 프로그램을 다운로드해 분석할 수 있습니다. 여기서 두 번째 문제인 Easy Keygen 프로그램을 가져와서 실습을 진행해 봤습니다. 프로그램을 실행했을 때 나오는 화면과 프로그램과 같이 첨부된 ReadMe 파일 이름과 특정 키값을 입력하면 성공과 실패를 나누는 듯합니다

원문보기 내부링크
Naver Blog

reversing.kr Crack 풀이

Reversing.Kr This site tests your ability to Cracking & Reverse Code Engineering. Now Challenge a problem for each environment. (Windows, Linux, .Net, Flash, Java, Python, Mobile..) Admin E-Mail: gogil @reversing.kr Notice 2014-12-12 New challenge 'CustomShell' was added. 2014-12-10 New challenge 'CRC2', 'Advent... reversing.kr 해당 사이트에서 여러 유형들의 예제 프로그램을 다운로드해 분석할 수 있습니다. 여기서 첫 번째 문제인 Easy Crack 프로그램을 가져와서 실습을 진행해 봤습니다. 프로그램을 실행했을 때 나오는 화면입니다. 제작자가 요구하는 문자를 입력하라는 것 같네요. 아무 문자나 넣어서 확인을 눌러봤는데 예상대로

원문보기 내부링크
1 2