- 방문자수
전체 방문자
오늘 방문자
어제 방문자
-
[PHP] 페이지네이션 (페이징) 만들기
💡 관리자 회원정보 페이지에 페이징 처리를 해보자! ⭐️ 완성샷 🔴 페이징 처리하기 - 1 /* paging : 한 페이지 당 데이터 개수 */ $list_num = 5; /* paging : 한 블럭 당 페이지 수 */ $page_num = 3; /* paging : 현재 페이지 */ $page = isset($_GET["page"])? $_GET["page"] : 1; /* paging : 전체 페이지 수 = 전체 데이터 / 페이지당 데이터 개수, ceil : 올림값, floor : 내림값, round : 반올림 */ $total_page = ceil($num / $list_num); // echo "전체 페이지 수 : ".$total_page; /* paging : 전체 블럭 수 = 전체 페이지 수..
-
[PHP] 관리자 페이지 만들기 - 1
💡 관리자 페이지를 만들어보자 ⭐️ 완성샷 📌 관리자 아이디는 admin이다! 🔴 index.php ""님, 안녕하세요. 관리자 로그아웃 정보수정 index.php 페이지에 관리자로 로그인 했을 때 관리자 링크가 보이게 끔 해놨다. 🟠 admin/inc/admin_session.php 관리자 페이지는 무조건 관리자만 접근 가능 해야한다. 주소창에 입력해서 들어오는 방식도 막아야한다. 그렇게 하기 위해서 admin_session.php를 만들어 외부 접속자를 걸러낸다. 🟡 admin/admin.php * 관리자 페이지 * ""님, 안녕하세요. 홈으로 게시판 관리 회원 관리 로그아웃 inc/admin_session.php를 맨 위에 include 해준다. 관리자는 게시판 관리, 회원 관리를 할 수 있다.
-
[PHP] 관리자 페이지 만들기 - 2
💡 관리자 페이지에서 회원정보를 리스트로 확인하자! 페이징 부분은 나중에 확인하자!! 젤 마지막에 ⭐️ 완성샷 🔴 list.php 🟤 DB 가져오기 admin_sesion과 dbcon 둘 다 include 해야한다. 🟤 쿼리 작성 전체 데이터테이블에 있는 정보를 가져와야한다. * 관리자 페이지 * ""님, 안녕하세요. 홈으로 게시판 관리 회원 관리 로그아웃 총 명 번호 이름 아이디 생년월일 주소 이메일 전화번호 가입일 수정 삭제
-
[PHP] 로그인 페이지 만들기 - 1 (login, login_ok)
💡 로그인, 로그아웃 동적 페이지를 만들어 보자! ⭐️ 완성샷 🖼️ 로그인 전 index.php 🖼️ login/login.php -> login_ok.php 🖼️ 로그인 후 index.php 🔴 login.php 로그인 로그인 아이디 비밀번호 이전으로 로그인 그 전 회원가입 폼과 유효성검사에서 부분적으로 가져 오면된다.(아이디, 비밀번호) form태그 action속성에 login_ok.php로 이동하라고 알려준다. button을 2개 만들어 줬다. 이전으로 버튼에는 뒤로가기 버튼을 만들어 준다. => history.back() 🟠 login_ok.php (로그인 처리 페이지) login_ok.php에서 로그인 폼에서 받은 값들을 처리한다.
-
[PHP] 로그인 페이지 만들기 - 2 (index, logout)
로그인 페이지 만들기 - 1 (login, login_ok) 💡 로그인, 로그아웃 동적 페이지를 만들어 보자! ⭐️ 완성샷 로그인 전 index.php login/login.php -> login_ok.php 로그인 후 index.php 🔴 login.php 로그인 로그인 아이디 비밀번호 이전으로 로그인 그 전 회 dpdnjs402.tistory.com 위 글에서 이어지는 내용이다. 🟡 index.php isset() 함수를 이용해 세션 아이디와 이름이 있으면 값을 가져오고, 없으면 값을 가져오지 않는다는 문장을 만든다. 로그인 회원가입 ""님, 안녕하세요. 관리자 로그아웃 정보수정 세션 아이디가 없으면 -> 로그인, 회원가입 링크만 보이게 해주고 세션 아이디가 있으면 이름, 로그아웃, 정보수정이 보인다..
-
tailwind custom color가 적용이 안될때
tailwind theme에 색상을 지정해줬는데 적용이 안될 때 해결하는 방법 text-어떤색상 이렇게 적용하고 싶었는데 화면에 적용이 안된다. tailwind.config.js에 추가 설정을 해주어야한다.safelist: [ { pattern: /^text-|^bg-|^border-/, // You can display all the colors that you need }, ],
-
[eslint] react/prop-types, missing in props validation
Vite로 리액트 프로젝트를 진행하다가 빨간 줄이 거슬려서 해결 방법을 찾아 봤다. eslint에서 나는 에러이다..eslintrc.json 또는 .eslintrc.cjs 페이지 중 한곳rules에 "react/prop-types": "off" 이 조건을 추가해주면 된다. rules : { "react/prop-types": "off"}
-
1과목 소프트웨어 구축
01 소프트웨어 공학 개념 위기를 극복하고 품질 높은 소프트웨어를 효율적으로 개발하기 위한 학문 소프트웨어 공학의 3R 1. 역공학 : 이미 개발된 시스템 분석해 문서를 추출 2. 재공학 : 기존 소프트웨어를 기능 개선하고나 재활용하는 공법 분석 -> 재구성 -> 역공학 -> 이관 3. 재사용 : 이미 개발된 SW 일부 또는 전체 다시 사용 - 합성 중심 : 모듈을 만들어 조합해 SW 완성 - 생성 중심 : 추상화 형태 구체화해 프로그램 만들기 소프트웨어 개발단계 계획 -> 요구사항 분석 -> 설계 -> 구현 -> 테스트 -> 유지보수 - 요구사항 분석 : 요구사항 분석서 - 설계 : 모델링, DFD, DD, Mini-spec, ERD, STD(상태전이도) - 구현 : IDE, 형상, 배포, 협업 - 테..
-
React에 네이버 SmartEditor2 적용하기
네이버 스마트 에디터가 생각보다 좋아서 리액트에 적용하고 싶은데... 네이버 스마트 에디터는 npm으로 설치가 불가한 것 같다. 그래서 생각해 낸 방법이 public 폴더에 에디터 html 을 만들고 그 html 파일을 컴포넌트 iframe에 넣어서 가져오는 방식이다!! 해봤더니 잘돼서 공유한다. https://github.com/naver/smarteditor2/releases Releases · naver/smarteditor2 Javascript WYSIWYG HTML editor. Contribute to naver/smarteditor2 development by creating an account on GitHub. github.com smarteditor2를 받아준다. 나는 표시한 파일을 받..
-
React에 CKEditor5 적용하기 (Online Builder)
React에 CKEditor5을 적용하는데 설명이 너무 없는 것 같다... (내가 문서를 잘 이해 못하는 것일수도...) npm으로 CKEditor를 설치하게 되면 안깔린 플러그인들은 또 별도로 설치해줘야하는데 그렇게 하면 중복? 되었다는 에러가 계속난다... 그래서 찾은 방법이 CKEditor 홈페이지에 내가 필요한 플러그인들을 넣고 파일을 다운로드해서 프로젝트에 적용하는 것이다. 에디터 타입은 클래식으로 선택했다. UI 보고 원하는 것 선택하면 될듯!!! 필요한 플러그인들을 ADD 해준다. PREMIUM 뱃지가 붙은건 넣지말자! 아래 처럼 나중에 돈든다고 나온다... 30일만 사용가능하게된다. 나는 왠만한 플러그인들을 다 넣어줄 것이다!! 내가 추가한 플러그인들이다! 툴바에 보여졌으면 하는 플러그인들..
-
Mac 카라비너 키 맵핑하기
카라비너를 이용한 키맵핑 방법 사람들이 만들어놓은 형식을 import해서 써도 되지만 내가 원하는것은 내가 만들어쓰는게 빠른 것같다!! json 파일만 수정해서 폴더에 잘 넣어주고 enable만 해주면 되서 생각보다 간단하다!! 그러면 나한테 찰떡인 키맵핑을 할 수 있다~! 파일경로는 ~/.config/karabiner/assets/complex_modifications 일단 캡스락키 매직펑션으로 만들어주는 설정 (대문자 고정은 어떻게? shift+캡스락 같이 누르면 대문자로 된다) { "description": "Change caps_lock key to command+control+option+shift. (Use shift+caps_lock as caps_lock)", "manipulators": ..
-
react에서 alias가 상대경로로 지정 될 경우
분명 tsconfig.paths.json에 alias를 설정했는데 경로가 상대경로로 잡힌다. "typescript.preferences.importModuleSpecifier": "relative", vscode setting.json에 저 값이 relative로 되어있어서 그랬다. "typescript.preferences.importModuleSpecifier": "non-relative", non-relative로 바꿔준다. settings에서 바꿔줘도 된다.
-
라툴 뽀모도로 타이머 후기
라툴 뽀모도로 타이머를 구입하게 되었습니다. 그전에 쓰던것은 소리 아니면 불 깜박임 기능 밖에 없어서 외부에서 소리로 해놓을 수 없는 단점이 있었습니다. 그리고 집중하다보면... 불 깜박임으로 설정해놓으면 못보고 지나칠 때가 많더라고요ㅠㅠ 근데 라툴 뽀모도로 제품은 진동모드가 있어서 너무 좋습니다. 소리보다는 조용하고 피해가 안돼서 진동모드를 애용하고 있어요. 무음모드도 있는데 무음모드는 화면이 깜박 깜박 합니다. 시간 타임을 직관적으로 설정할 수 있는 것도 큰 장점인 것 같습니다. 빨간색이 아주 강렬해서 시간이 잘보여요!! 화면 밝기도 설정할 수 있습니다. 타이머 셋팅은 4번과 7번을 이용해서 주로 셋팅합니다!! 사용방법이 아주 쉬워요!! 스톱워치 기능도 있습니다. 사이즈가 작아서 휴대용으로 딱이에요~..
-
yarn berry eslint 에러
프로젝트에 eslint를 설정해 놓고, fix해주는 코드를 package.json에 작성해놨다. 그 후 터미널에서 fix해주는 명령어를 입력했는데 아래 이미지와 같은 에러가 났다 Oops! Something went wrong! :( ESLint: 8.56.0 Error: synckit tried to access ", but it isn't declared in its dependencies; this makes the require call ambiguous and unsound. Required package: " (via ""/var/folders/1v/r80_zlpj7f507kxk80jycc0c0000gn/T/6025ddaa198df01ef650d59d6f3f5c98.cjs"") Required..
-
리액트 context 사용하는 방법
✏️ context context는 전역적으로 데이터를 관리할 수 있게 도와 줄 수 있는 리액트 Hook 부모 -> 자식 -> 손자 이런 구조로 되어있고, 부모에서 손자까지 데이터를 공유하고 싶은면 항상 차례대로 데이터를 전달해 줘야했는데 context를 사용하면 바로 부모 -> 손자로 넘겨줄 수 있다. 🔥 주의점 다양한 레벨에 네스팅된 많은 컴포넌트들에게 데이터를 전달하는 용도 context를 사용하면 컴포넌트를 재사용하기 어려워진다. context 또는 컴포넌트 합성 둘 중에 더 상황에 맞는 것을 이용하도록! 나는 작업할 때 context 폴더를 만들어서 context를 관리하는 편! 응집도는 높이고, 결합도는 낮추기 위해 context 관련 소스는 해당 폴더, 해당 파일 안에서 관리하는 것이 좋은 ..
-
라이브러리 버전관리와 설치
라이브러리는 기본적으로 1.0.0 부터 시작 버전 업데이트 하는 방식에 대한 설명은 공식문서를 확인해 보자 About semantic versioning | npm Docs Documentation for the npm registry, website, and command-line interface docs.npmjs.com 테스트 해볼 수 있는 사이트도 있다. 애매하면 테스트 사이트가서 테스트해보자! npm semantic version calculator Use the caret (aka hat) symbol, ^ Examples ^2.2.1 ^0.1.0 ^0.0.3 Note: caret behavior is different for 0.x versions, for which it will only..
-
npm 명령어와 셋팅하기 (+라이선스)
npm 명령어 공식문서 CLI Commands | npm Docs Documentation for the npm registry, website, and command-line interface docs.npmjs.com npm 셋팅하기 // package.json 일일히 먼저 설정 npm init // 한번에 package.json 만들기 npm init --yes npm init --yes으로 빠르게 package.json파일을 생성 후, json파일을 직접 수정하는게 더 편한 것 같다. npm script 작성하기 script 부분에 명령어를 작성할 수 있다. 내가 지정한 명령어일 경우 실행할 때는 run 키워드를 꼭 같이 사용해야한다. // start는 원래 있는 명령어라서 run 필요없음 npm..
-
구글 앱 비밀번호 생성하는 방법
구글 앱 비밀번호 생성하는 방법 구글 계정관리 보안 -> 2단계 인증 앱 비밀번호 젤 밑으로 스크롤 내리면 앱비밀번호라고 있다. App name에 아무 이름이나 작성해준다. (그냥 구분용) 만들기 클릭하면 앱 비밀번호가 나온다 바로 ctrl + c 해서 메모장에 작성해놓자!! 확인 누르면 다신 볼 수 없는 것 같다. 중간에 띄어쓰기가 들어가 있는데 .env 파일에 작성할 때는 띄어쓰기는 모두 붙이면 된다. 끝이다!
-
picture태그 & source 태그 기분 문법
srcset 속성 파일위치, 픽셀 밀도, 너비값 지정 가능 콤마를 이용해 다중 지정 가능 해당 속성은 생략 불가능 (파일 위치 필수, 픽셀 밀도와 너빗값은 생략 가능) 파일위치 : 이미지 파일 위치 픽셀 밀도 : 해상도의 배수 너빗값: sizes 속성과 뷰포트 크기와 연계되어있음 media 속성 (생략가능) 미디어 쿼리를 뜻함 (모든 미디어 쿼리의 조건문을 사용할 수 있는 것은 아님, 너비값에 대해서만 지원) sizes 속성 (생략가능) 이미지가 표현될 영역의 크기 설정, 너빗값과 미디어 쿼리 지정 가능 type 속성 불러올 파일의 유형 지정 가능 img 태그 src 속성에 기본으로 출력될 이미지 경로 입력 picture, source 태그 지원하지 않는 브라우저를 위한 용도 (크로스 브라우징) 마지막에..
-
prettier 줄바꿈 방지 방법
vscode에서 prettier 사용할 때, 저장할 때마다 자동으로 줄바꿈 되는 것 방지하는 방법 Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io 주석으로 줄바꿈 하고 싶지 않은 부분 바로 위에 아래 코드 넣기 주석 형식은 각 확장자에 맞게 고쳐야함 아래는 css일 때, /* prettier-ignore */