티스토리

코딩 공부

검색하기

블로그 홈

코딩 공부

ohcodingoh.tistory.com/m

오이연우오 님의 블로그입니다.

구독자: 16

방명록 방문하기

주요 글 목록

REACT - 시작하기 1. Node.js 설치 1) Node.js 설치 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2) node 버전, npm버전 확인 (설치 확인) node --version npm --version 2. react 설치 1) 설치 할 폴더로 경로 이동 Documents폴더에 test폴더 생성, test폴더 이동 2) npx create-react-app testreact 3) 설치 확인 test폴더에 testreact 설치 확인 4) 패키지 설치 npm install axios npm install react-rout.. 공감수 0 댓글수 0 2022. 4. 18.
PHP - 게시글 수정하기 (6) 수정이 반영된 게시글 변경 PHP - 게시글 수정하기 (5) modifySave.php 추가 >> ) 2. 결과 1) 수정 안한 게시글 2) 수정 한 게시글 ~이상 얕은 지식으로 게시글 수정 구현하기 였습니다~ 공감수 0 댓글수 0 2022. 4. 18.
PHP - 게시글 수정하기 (5) modifySave.php 추가 PHP - 게시글 수정하기 (4) 파일 삭제, 바꾸기 구현하기 >> 블로그 게시글 수정 영역 공감수 0 댓글수 0 2022. 4. 18.
PHP - 게시글 수정하기 (4) 파일 삭제, 바꾸기 구현하기 PHP - 게시글 수정하기 (3) 제목, 내용, 파일 불러오기 >> PHP - 게시글 수정하기 (3) 제목, 내용, 파일 불러오기 PHP - 게시글 수정하기 (2) 카테고리 불러오기>> PHP - 게시글 수정하기 (2) 카테고리 불러오기 1. 수정 버튼 경로 설정 blogModify.php에 get방식으로 blogID 넘겨준다. 2. blogModify.php 만들기 (blogWrite.ph.. ohcodingoh.tistory.com 1. form 수정 공감수 0 댓글수 0 2022. 4. 18.
PHP - 게시글 수정하기 (3) 제목, 내용, 파일 불러오기 *데이터 흐름 get으로 받아온 blogID값 -> mysql 쿼리문에 where절에 씀 -> query결과를 배열에 저장 -> 배열에 저장된 데이터를 알맞게 form태그에 뿌려준다. PHP - 게시글 수정하기 (2) 카테고리 불러오기>> 공감수 0 댓글수 0 2022. 4. 18.
PHP - 게시글 수정하기 (2) 카테고리 불러오기 *데이터 흐름 수정버튼에서 get형식으로 blogID 전달 -> 수정 페이지에서 get으로 blogID받아오기 -> mysql로 해당 게시글 정보 받아오기 -> 게시글 정보 중 카테고리 정보를 switch문으로 구분하기 -> 구분한 값을 select태그의 option에 반영하기 PHP - 게시글 수정하기 (1) 구현 대상 정리 >> PHP - 게시글 수정하기 (1) 구현 대상 정리 1. 게시글에 구현된 기능 정리 -> 게시글은 제목, 내용, 카테고리, 작성자, 조회수, 좋아요, 파일, 삭제버튼, 수정버튼, 등록일 기능이 있다. 2. 구현 할 기능 정리 카테고리 데이터 불러오기 제목, ohcodingoh.tistory.com 1. 수정 버튼 경로 설정 blogModify.php에 get방식으로 blogID.. 공감수 0 댓글수 0 2022. 4. 18.
PHP - 게시글 수정하기 (1) 구현 대상 정리 1. 게시글에 구현된 기능 정리 -> 게시글은 제목, 내용, 카테고리, 작성자, 조회수, 좋아요, 파일, 삭제버튼, 수정버튼, 등록일 기능이 있다. 2. 구현 할 기능 정리 카테고리 데이터 불러오기 제목, 내용, 파일 데이터 불러오기 기존 파일 삭제, 파일 새로 등록 수정 시간 불러오기 PHP - 게시글 수정하기 (2) 카테고리 불러오기>> 공감수 0 댓글수 0 2022. 4. 18.
PHP - 좋아요 구현 (3) 데이터 조작하기 (jQuery) *데이터의 흐름 php -> jquery -> mysql -> jquery -> php 이전글 좋아요 구현 (2) 테이블 추가, 데이터 불러오기>> 공감수 0 댓글수 0 2022. 4. 18.
PHP - 좋아요 구현 (2) 테이블 셋팅, 데이터 불러오기 좋아요 구현 (1) codepen에서 버튼 가져오기 >> PHP - 좋아요 구현 (1) 버튼 생성 1. 코드펜에서 버튼 가져오기 https://codepen.io/aaroniker/pen/ZEbLZrK Thumbs up button ... codepen.io 2. 버튼 구조 정리하기 HTML 원본 Liked Liked 수정 dark모드와 dribbble, twitter은 지운다. Liked CS.. ohcodingoh.tistory.com 테이블 셋팅하기 데이터 불러오기 1. 해당 게시글의 좋아요 데이터 불러오기 Liked 좋아요 : 2. 로그인 상태의 사용자가 해당 게시글에 좋아요를 눌렀는지 안눌렀는지 여부 데이터 불러오기 좋아요 구현 (3) 데이터 조작하기(jQuery) 공감수 0 댓글수 0 2022. 4. 17.
자바스크립트 - 이벤트 객체 01. 이벤트 메서드 : addEventListener('click') : 클릭했을 때 02. 이벤트 메서드 : addEventListener('scroll') : 스크롤 했을 때 03. 이벤트 메서드 : addEventListener('resize') : 브라우저 사이즈 변경 됐을 때 04. 이벤트 메서드 : addEventListener('selectstart') : 텍스트 선택을 시작 했을 때 05. 이벤트 메서드 : addEventListener('visibilitychange') : 브라우저의 탭 상태가 변경 했을 때 06. 이벤트 메서드 : addEventListener('DOMContentLoaded') : 로딩이 된 후 07. 이벤트 메서드 : addEventListener('mousedo.. 공감수 0 댓글수 0 2022. 4. 17.
자바스크립트 - 요소 객체 01. 요소 메서드 : 선택자 : Document.querySelector() : 요소 선택자 02. 요소 메서드 : 선택자 : Document.querySelectorAll() : 모든 요소 선택자 03. 요소 메서드 : 선택자 : Document.getElementById() : 아이디 요소 선택자 04. 요소 메서드 : 선택자 : Document.getElementByClassName() : 클래스 요소 선택자 05. 요소 메서드 : 요소 : Document.createElement() : 요소 만들기 06. 요소 속성 : 선택자 : Element.firstElementChild : 첫 번째 자식 요소 선택자 07. 요소 속성 : 선택자 : Element.lastElementChild : 마지막 번.. 공감수 0 댓글수 0 2022. 4. 17.
자바스크립트 - 브라우저 객체 01. 브라우저 객체 : window 객체 메서드 : window.alert() : 알림창 표시하기 02. 브라우저 객체 : window 객체 메서드 : window.confirm() : 확인창 표시하기 03. 브라우저 객체 : window 객체 메서드 : window.prompt() : 입력창 표시하기 04. 브라우저 객체 : window 객체 메서드 : window.open() : 새로운 창 열기 05. 브라우저 객체 : window 객체 메서드 : window.close() : 새로운 창 닫기 06. 브라우저 객체 : window 객체 메서드 : window.focus() : 페이지 포커스 설정 07. 브라우저 객체 : window 객체 메서드 : window.blur() : 페이지 포커스 벗어났을.. 공감수 0 댓글수 0 2022. 4. 17.
자바스크리트 - Math 메서드 01. 수학 메서드 : Math.round() : 반올림 : 반환(숫자) 02. 수학 메서드 : Math.floor() : 버림 : 반환(숫자) 03. 수학 메서드 : Math.ceil() : 올림 : 반환(숫자) 04. 수학 메서드 : Math.trulc() : 값의 정수 부분만 반환 : 반환(숫자) 05. 수학 메서드 : Math.random() : 0과 1사이의 난수 값을 반환 : 반환(숫자) 06. 수학 메서드 : Math.max() : 가장 큰 값을 반환 : 반환(숫자) 07. 수학 메서드 : Math.min() : 가장 작은 값을 반환 : 반환(숫자) 08. 수학 메서드 : Math.abs() : 절대값 반환 : 반환(숫자) Math 메서드 참고 사이트 >> 공감수 0 댓글수 0 2022. 4. 17.
자바스크립트 - 배열 메서드 01. 배열 속성 : length : 배열 길이 구하기 : 반환(숫자) 02. 배열 메서드 : join() : 배열 요소 문자열 결합 : 반환(문자열) 03. 배열 메서드 : push() : 배열 마지막 요소에 추가 : 반환(숫자) 04. 배열 메서드 : pop() : 배열 마지막 요소에 삭제 : 반환(삭제된 요소) 05. 배열 메서드 : unshift() : 배열 처음 요소에 추가 : 반환(숫자) 06. 배열 메서드 : shift() : 배열 처음 요소 삭제 : 반환(삭제된 요소) 07. 배열 메서드 : reverse() : 배열 요소의 순서를 반대로 정렬 : 반환(배열) 08. 배열 메서드 : sort() : 배열 요소를 정렬할 때 : 반환(배열) 09. 배열 메서드 : concat() : 배열 요소.. 공감수 0 댓글수 0 2022. 4. 17.
자바스크립트 - 문자열 객체 01. 문자열 : 문자열 결합 / 템플릿 문자열 02. 문자열 속성 : length : 문자열 길이 구하기 : 반환(숫자) 03. 문자열 메서드 : toUpperCase() : 문자열 대문자 변경 : 반환(문자열) 04. 문자열 메서드 : toLowerCase() : 문자열 소문자 변경 : 반환(문자열) 05. 문자열 메서드 : trim() : 문자열 공백 제거 : 반환(문자열) 06. 문자열 메서드 : indexOf : 문자열 검색 : 반환(숫자) 07. 문자열 메서드 : lastIndexOf() : 문자열 검색 : 반환(숫자) 08. 문자열 메서드 : search() : 문자열 검색 : 반환(숫자) 09. 문자열 메서드 : includes() : 문자열 포함 여부 검색 : 반환(불린) 10. 문자열 .. 공감수 0 댓글수 0 2022. 4. 17.
CSS - 리셋 세팅하기 CSS 리셋 세팅하기. 1. 여백초기화 body, div, dl, dt, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, button, article, aside, details, footer, header, hgroup, menu, nav, section, figure, figcaption { margin: 0; padding: 0; box-sizing: border-box; } 2.시멘틱 태그 초기화 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav.. 공감수 0 댓글수 0 2022. 4. 17.
PHP - 좋아요 구현 (1) 버튼 생성 1. 코드펜에서 버튼 가져오기 https://codepen.io/aaroniker/pen/ZEbLZrK Thumbs up button ... codepen.io 2. 버튼 구조 정리하기 HTML 원본 Liked Liked 수정 dark모드와 dribbble, twitter은 지운다. Liked CSS 원본 .button { --color: #1E2235; --color-hover: #1E2235; --color-active: #fff; --icon: #BBC1E1; --icon-hover: #8A91B4; --icon-active: #fff; --background: #fff; --background-hover: #fff; --background-active: #362A89; --border: #E1E6.. 공감수 0 댓글수 0 2022. 4. 17.
MYSQL - 집계함수 집계 함수 집계함수의 종류 SELECT count(javascript) from myrecode; SELECT sum(javascript) from myrecode; SELECT avg(javascript) from myrecode; SELECT max(javascript) from myrecode; SELECT min(javascript) from myrecode; 그룹별 집계 GROUP BY SELECT 필드명 FROM 테이블명 GROUP BY 필드명 SELECT memberID avg(javascript) from myrecode WHERE memberID IN(1,2,3,4) GROUP BY memberID; 공감수 0 댓글수 0 2022. 4. 17.
MYSQL - 테이블 합치기(JOIN) 테이블 합치기 JOIN 사용하기 SELECT 필드명 FROM 테이블명 앨리어스 JOIN 연결할 테이블명 엘리어스 ON(조건문); CREATE TABLE myMember ( memberID int(10) unsigned auto_increment, youEmail varchar(40) NOT NULL, youName varchar(20) NOT NULL, youPass varchar(20) NOT NULL, youBirth int(20) NOT NULL, youAge int(20) NOT NULL, youPhone int(20) NOT NULL, regTime int(11) NOT NULL, PRIMARY KEY (memberID) ) charset=utf8 comment "회원 정보 테이블"; CREAT.. 공감수 0 댓글수 0 2022. 4. 17.
MYSQL - 테이블 데이터 테이블 데이터 데이터 입력하기 INSERT INTO 테이블이름(필드명) VALUES(데이터); INSERT INTO myMember(youEmail, youName, youPass, youBirth, youAge, youPhone, regTime) VALUES('ohwehoh@naver.com','이연우','dldus1358','19950720','28','01014141441','12341234'); 데이터 불러오기 SELECT * FROM 테이블명; 전체 데이터 불러오기 mysql> select * from myMember; 조건 데이터 불러오기 mysql> SELECT * FROM 테이블 명 WHERE 조건; 회원 아이디가 10번인 경우 mysql> SELECT * FROM myMember WHER.. 공감수 0 댓글수 0 2022. 4. 17.
MYSQL - 테이블 수정 테이블 수정 필드 추가하기 ALTER TABLE 테이블명 ADD 추가할 필드명 AFTER 필드명 위치; ALTER TABLE myMember ADD youGender enum('m', 'w', 'x') default 'x' comment "남성은 m, 여성은 w" AFTER youBirth; desc mymember; +------------+-------------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +------------+-------------------+------+-----+---------+----------------+ | myMemberID | int(10.. 공감수 0 댓글수 0 2022. 4. 17.
MYSQL - 테이블 테이블 테이블 만들기 create table 테이블 이름; CREATE TABLE myMember ( memberID int(10) unsigned auto_increment, youEmail varchar(40) NOT NULL, youName varchar(20) NOT NULL, youPass varchar(20) NOT NULL, youBirth int(20) NOT NULL, youAge int(20) NOT NULL, youPhone int(20) NOT NULL, regTime int(11) NOT NULL, PRIMARY KEY (memberID) ) charset=utf8 comment "회원 정보 테이블"; CREATE TABLE myReview ( reviewID int(10) uns.. 공감수 0 댓글수 0 2022. 4. 17.
MYSQL - 데이터베이스 데이터베이스 데이터베이스 만들기 create database 데이터베이스 이름; mysql> create database sample01; Query OK, 1 row affected (0.00 sec) 데이터베이스 보기 show databases; mysql> show databases; +--------------------+ | Database | +--------------------+ | information_schema | | mysql | | performance_schema | | sample01 | | sys | +--------------------+ 5 rows in set (0.00 sec) 데이터베이스 사용 use 데이버베이스 이름; mysql> use sample01; Datab.. 공감수 0 댓글수 0 2022. 4. 17.
Javascript - 반복문으로 테이블 출력하기 1. 테이블 출력하기 1.1 for문을 이용해서 테이블을 출력하시오 { let table = ""; for(let i=1; i 공감수 0 댓글수 0 2022. 4. 16.
CSS - transform 선택자 종류 예시 설명 translate translate() transform: translate(10px, 20px) X좌표, Y좌표 이동을 나타냅니다. translate3d() transform: translate3d(10px, 20px, 30px) X좌표, Y좌표, Z좌표 이동을 나타냅니다. translateX() transform: translateX(10px) X좌표 이동을 나타냅니다. translateY() transform: translateY(10px) Y좌표 이동을 나타냅니다. translateZ() transform: translateZ(10px) Z좌표 이동을 나타냅니다. scale scale() transform: scale(2, 2) 선택한 요소의 X축과 Y축 확대를 설정합니다... 공감수 0 댓글수 0 2022. 4. 16.
CSS - 애니메이션 종류 속성 설명 변형 transform transform 속성은 요소의 움직임을 일괄적으로 설정합니다. transform-orgin transform-origin 속성은 요소의 움직임 방향을 설정합니다. transform-style transform-style 속성은 요소의 움직임 스타일을 설정합니다. perspective perspective 속성은 3D 위치 요소에 약간의 원근감을 주기 위해 z=0 평면과 사용자 사이의 거리를 결정합니다. perspective-orgin perspective-origin 속성은 3D를 표현할 때 원근점의 방향을 정의합니다. backface-visibility backface-visibility 속성은 요소의 뒷면을 정의합니다. 애니메이션 animation animat.. 공감수 0 댓글수 0 2022. 4. 16.
CSS - IR 효과 IR 효과 IR 효과는 이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다. 여러 기법 중에서 Phark Method와 WA IR, Screen out 기법을 주로 사용하여 대체텍스트를 제공할수있다. Phark Method 의미있는 이미지의 대체 텍스트를 제공하는 경우 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으 로 (-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하 는 방법 .ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} WA IR 의미있는.. 공감수 0 댓글수 0 2022. 4. 16.
PHP - 조건문 Boolean '비교 수업'에서 비교 연산의 결과로 참(true)이나 거짓(false)을 얻을 수 있다고 배웠다. 여기서 참과 거짓은 '숫자와 문자 수업'에서 배운 숫자와 문자처럼 언어에서 제공하는 데이터 형이다. 이를 Boolean(불린)이라고 부르고 불린으로 올 수 있는 값은 true와 false 두가지 밖에 없다. 불린은 조건문에서 핵심적인 역할을 담당한다. 조건문 조건문이란 주어진 조건에 따라서 에플리케이션을 다르게 동작하도록 하는 것이다. 조건문의 문법 if 조건문은 if로 시작한다. if 뒤에 괄호가 오고, 괄호 안에 조건이 위치한다. 조건이 될 수 있는 값는 Boolean이다. Boolean의 값이 true라면 조건을 감싸고 있는 괄호 다음의 중괄호 구간이 실행된다. 아래 예제의 실행결과는 .. 공감수 0 댓글수 0 2022. 4. 16.
php - form 에플리케이션의 입력값과 폼 프로그램은 입력 값을 가질 수 있다. 그리고 입력 값에 따라서 동작 방법이 달라지거나 입력된 값을 저장/삭제/출력 할 수 있다. 이번 시간에는 PHP의 문법에 대한 내용에서 잠깐 빠져나와서 PHP 에플리케이션이 데이터를 입력 받는 방법에 대해서 알아본다. 우선 코드를 보자. 1 2 3 위의 코드를 브라우저로 열어보자. 이 때 파일명 뒤에 ?id=k8805이라고 입력한다. 예를들면 아래와 같다. 결과는 k8805다. URL의 k8805를 egoing으로 변경해보자. 화면에는 egoing이 출력될 것이다. 이것을 통해서 유추할 수 있는 것은 코드 상의 $_GET['id']는 URL의 내용 중에서 '?id=' 뒤에 따라오는 데이터로 치환된다는 것을 추정 할 수 있다. 이것이 의미하는.. 공감수 0 댓글수 0 2022. 4. 16.
PHP - 연산자 연산자 연산자란 값에 대해서 어떤 작업을 컴퓨터에게 지시하기 위한 기호인데 우리는 이미 연산자를 사용했다. 아래 예제 중에서 '='는 우항의 값인 1을 좌항의 변수 a에 대입하는 '대입 연산자'다. PHP의 주요 연산자는 PHP의 메뉴얼을 참고하자. 연산자가 무엇인가에 대한 이해를 돕기 위한 것일 뿐 외울 필요는 없다. 차차로 알게 된다. 1 $a=1; 비교 연산자 프로그래밍에서 비교란 주어진 값들이 같은지, 다른지, 큰지, 작은지를 구분하는 것을 의미한다. 이 때 비교 연산자를 사용하는데 비교 연산자의 결과는 true나 false 중의 하나다. true는 비교 결과가 참이라는 의미이고, false는 거짓이라는 뜻이다. 아래는 주요한 비교 연산자들의 종류와 그에 따른 예제들이다. == 좌항과 우항을 비교.. 공감수 0 댓글수 0 2022. 4. 16.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.