본문 바로가기
728x90
반응형

전체 글136

[PHP] cookie 와 session 1. 쿠키(cookie) 사용자가 웹페이지에 접속할때 브라우져에 저장하는 데이터 웹페이지에서는 쿠키를 확인하여 로그인이나 장바구니 상태등을 확인할 수 있습니다. 1) 쿠키 생성 setcookie(키(username),값(green))함수를 호출하면 쿠키를 생성 setcookie(키, 값, 유지시간) 유지시간: time()+60 PHP슈퍼글로벌 내장배열변수 $_COOKIE["keyname(username)"] 2) 쿠키삭제 setcookie("username","",time()-1) ex13_cookie.php 쿠키 삭제하기 ex13_cookieunset.php 출력값 시간 유지 후 제거 2.세션(session) 세션은 서버에 정보를 저장하고 사용자컴퓨터에서는 세션의 아이디만을 저장해둠 브라우져에 직접 값.. 2023. 1. 15.
[PHP] 날짜 관련 함수 php 날짜 관련 함수 1) time() 초단위로 측정된 현재시간 기준 1970년 1월 1일부터 현재까지의 시간을 초단위로 리턴 2) mktime(hour, minute, second, month, day, year) 특정날짜의 시간 구하기 ex) $time = mktime(0,0,0,12,27,2022) 3)strtotime("형식", 시간) 날짜간 차이 구하기 ex) strtotime("-1 day", $time) "10 day" 10일 다음 "50 day" 50일 다음 "1 week" "1 month" "last Monday" "next Monday" 4) date(포멧, 시간) 사람이 읽을 수 있는 날짜와 시간 2023. 1. 14.
[React] Hook 함수정리3(useReducer) useReducer를 알기전에 상태를 업데이트 할때는 useState를 사용해서 새로운 상태를 설정해주었는데 상태를 관리하게 될 때 useState를 사용하는거 말고도 또 다른 방법 useReducer!!!!! 새로운 상태관리~~ useState는 설정하고 싶은 상태를 직접 설정하고 지정해서 상태를 업데이트했지만 userReducer은 액션 객체를 기반으로 상태를 업데이트함!!!!! dispatch 호출하면 reducer 응답 action은 가지고있는 객체 전달~ reducer는 state 업데이트 Dispatch(Action) =====> Reducer(state, Action)) useReducer() 1) 상태초기화 2) reducer함수 구현 3) 상태와 dispatch 생성 ====> useRe.. 2023. 1. 14.
[React] Hooks함수 정리2(useMemo, useCallback) 1. useMemo 리액트 성능 최적화 함수형 컴포넌트는 함수이다 jsx를 반환하는 함수 컴포넌트가 렌더링 되는것은 그 컴포넌트 함수를 호출해서 실행되는 것을 말함 함수가 실행 될 때 함수 내부에 선언된 표현식(변수, 다른 함수)도 다시 선언되어 사용됩니다. 컴포넌트는 자신의 state가 변경되거나 부모에게서 받는 props가 변경될 때 마다 리렌더링 됩니다 예를들어 state.props가 여러가지라면 state1, state2, state3 state1을 리렌더링 시켜주었는데 state2, state3 도 리렌더링 된다면?? 원하는 props만 리렌더링시켜주기 위해 useMemo와 useCallback 함수가 있다 useMemo 란? 컴퍼넌트 성능 최적화에 사용 함수니깐 여기에 정의된 변수도 다시 리렌.. 2023. 1. 13.
[React] node-Sass설치 & Styled-component node-Sass 설치 1. node버전에 맞게 설치하기 (8버젼) npm install node-sass@8 2. node sass 제거 npm uninstall node-sass 실습) ScssCompenent.scss //변수 사용하기 $red : #fa5252; $orange: #fd7e14; $yellow: #fcc419; $green: #40c057; $blue: #339af0; $indigo : #5c7cfa; $violet : #7950f2; //믹스인 만들기 @mixin square($size) { $calculated: 32px * $size; width: $calculated; height: $calculated; } .SassComponent { display: flex; .box .. 2023. 1. 13.
[javascript] Modules 자바스크립트 모듈 1. Module은 코드를 관리하는 작은 단위 2. Module을 이용하면 코드관리와 재활용이 편리해짐 3. 자바스크립트 파일을 분리하고 사용하는 기술 *es6부터 import문과 export문이 추가됨 export 내보내기!!!! 지시자를 변수나 함수앞에 붙이면 다른 외부 모듈에서 해당 변수나 함수를 import해서 사용할 수 있음 선언부 앞에 export 변수, 함수, 클래스 앞에 export 붙일 수 있음 //함수 export function ss() { 실행 구문 } //변수 export let ss = 5; //클래스 export class user { constructor(name) { this.name = name } } 선언부와 떨어진 곳 //함수 function ss().. 2023. 1. 11.
[React]Hooks함수 정리1(useState, useRef, useEffect, useContext) 용어 정리 ● 렌더(render) : 화면에 그리다(생성) ● 리렌더링/업데이트: 재정의/변경 (변수가 바뀔때는 리렌더링 안함!!!) 변경 하려면!!!!!! 1) 부모요소가 주는 props가 변경 되었을 때!!! 2) 상태가 변경 되었을 때!!!!! ● 마운트 : 화면에 나타남 ● 언마운트: 화면에 사라짐 1. useState 2. useRef 3. useEffect 4. useContext 1. useState useState 가져오기 import React,{useState} from 'react'; 구문) const [number, setNumber] = useState(0) * state생성(구조분해할당) return array[상태, 상태업데이트 함수] = useState(초기값) 배열로 받음(.. 2023. 1. 10.
[React]배열 렌더링하기 실습 App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import './App.css'; import IterationSample from './components/IterationSample'; function App() { return ( ); } export default App; Colored by Color Scripter cs IterationSample.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 import React,{useState} from 'react'; const Iterat.. 2023. 1. 6.
[Javascript DOM]Scroll 이벤트 See the Pen Untitled by namminimi (@namminimi) on CodePen. 스크롤 이벤트 1) 스크롤값 반환 document.documentElement.scrollTop; ex)console.log(위에값) 2) document.addEvnetListener("scroll", function(){ 스크롤 될때 동작하는 코드 } 3)스크롤 위치 이동 - window.scrollTo(xpos, ypos) - window.scrollTo({top: 0, behavior: "smooth"}) scrollTo 메서드는 지정된 좌표로 스크롤해주는 기능(window는 생략가능) behavior의 값에는 auto, instant, smooth가 있다. (문자이므로 따옴표가 필요하다.) .. 2023. 1. 5.
[javascript]구조분해할당과 spread,rest 1. 배열의 요소를 직접 변수에 할당하는 것보다 코드를 줄일 수 있습니다. 2. , 를 사용하면 필요하지 않는 배열 요소는 제외시킬 수 있습니다 3. 할당할 값이 없을 때 기본값을 설정할 수 있음. 1. 배열구조분해할당 구문 let [new변수1, new변수2, new변수3] = 배열명 let fruits = ["🤦‍♂️", "🤦", "😁", "😢", "😎",] let [fruit1, fruit2, ...fruit3] = fruits; console.log(fruit1); //0번째 새로운 변수 출력 console.log(fruit2); //1번째 새로운 변수 출력 console.log(fruit3); //3번째 끝까지 새로운 변수 출력 let str1 = "green"; let str2 = "blue".. 2023. 1. 5.
[React]react 첫걸음 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 리액트(virtual DOM) 메모리에 가상으로 존재하는 DOM 자바스크립트 대표 라이브러리 리액트, 뷰, 앵귤러 리액트 장점 컴퍼넌트 단위 개발(생상성 향상, 유지보수 용이) / (자바스크립트의 클래스를 배웠을때 파일 하나씩 쪼개서 사용해본적 있음) 싱글페이지 어플리케이션(사용자 경험 개선) 높은 인지도 브라우저DOM보다 훨씬 속도 빠름 JSX구문 중요!!!!! 닫혀야 하는 태그(태그는 꼭 닫혀야 합니다.) 하나의 태그로 감싸져 있어야 함.(,) jsx안에 자바스크립트 값사용은 {}감싼다. class지정은 classname속성을 사용 주석 {/*주석 */} 상태 state props : 컴포넌트에게 값 전달하기 props는 object객체임 ex).. 2023. 1. 4.
[MySQL]데이터 백업과 복원 보호되어 있는 글 입니다. 2022. 12. 28.
728x90
반응형

티스토리툴바