Hooks는 React v16.8 이후 새로 도입된 기능으로, 기존의 함수 컴포넌트에서 할 수 없었던 기능을 가능하게 해 준다. useState 함수 컴포넌트에서 가변적인 상태를 지닐 수 있게 도와준다. 다음은 버튼을 클릭해 Count를 올리고 내리는 컴포넌트다. import { useState } from 'react'; const Test = () => { const [count, setCount] = useState(0); // 비구조화 할당 return ( Count value = {count} setCount(count + 1)}> +1 setCount(count - 1)}> -1 ); }; export default Test; useReducer useState보다 더 다양한 컴포넌트 상황에 ..
Symbol은 몇 번은 들어보았지만, 사용할 기회도 없고 생소한 타입이기에, 기억하기 위해 작성한다. Symbol Type? Symbol 타입이란, 객체의 프로퍼티 키를 고유하게 설정함으로서 프로퍼티 키의 충돌을 방지하기 위해 사용한다. 얼핏 보면 무슨 소린가 싶지만, 결국 객체 내에서 유일한 식별자를 만들고 싶을 때 사용한다는 뜻이다. const voidSymbol = Symbol(); // 변경 불가능한 원시값 const mySymbol = Symbol('conative'); console.log(voidSymbol);// Symbol() console.log(mySymbol);// Symbol(conative) console.log(typeof mySymbol);// symbol Symbol은 생성..
Type Script의 Type Checker는 타입 추론이라는 기능을 가지고 있어서, 사용자가 직접 타입을 입력하지 않아도 알아서 타입을 체크한다. // 이렇게 쓰지 말자 let letNum1: number = 11; const constNum1: number = 33; // 직접 타입 작성을 하지 않아도, 알아서 추론해준다. let letNum2 = 11;// number type const constNum2 = 33;// Union type(33) 심지어 복잡한 객체 구조까지 추론이 가능하다. // 아래 두 코드는 동일하게 타입이 추론된다. // 너무 안타깝다 const person1: { name: string; born: { when: Date; where: string; }, age: numb..
타입스크립트를 처음 시작할 때 타입 단언방식은 사용하지 말고, 타입 선언 방식만 사용하라고 들었는데 왜 그래야 하는지 궁금해 찾아보고, 정리했다. 타입 지정 방식 타입 지정에는 두 가지 방법이 있다. 설 명 타입 단언 선택된 값을 해당 타입으로 간주한다. 타입 선언 선택된 값이 선언된 타입임을 명시한다. interface Person { name: string; age: number; gender: boolean; } // 타입 단언 const user1 = { name: 'Conative', age: 25, gender: true } as Person // 타입 선언 const user2: Person = { name: 'Contia', age: 27, gender: false } 아래 간단한 예시를 ..
모든 리액트 컴포넌트에는 라이프 사이클이 존재하는데, 컴포넌트의 수명은 페이지에 렌더링되기 전 준비 과정부터 시작하여 페이지에서 사라질 때 끝난다. 기본적으로 클래스형 컴포넌트만 사용할 수 있으며 함수형 컴포넌트에서 사용하기 위해서는 Hooks를 사용해야 한다. 접두사로 알아보는 라이프사이클? Will 접두사가 붙은 메서드는, 어떤 작업을 작동하기 전에 실행되는 메서드이며 Did 접두사가 붙은 메서드는, 어떤 작업을 작동한 후에 실행되는 메서드다. 메서드들은 크게 세 가지 카테고리 로 나뉜다. Mount DOM이 생성되고 웹 브라우저상에 나타나는 것 메서드명 설 명 constructor 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps props에 있..
개요 Redux는 어렵게 생각할 필요 없이, 3단계로 이루어져있다. 설 명 Action 상태 변경을 일으키는 이벤트에 대한 정적인 정보로서, 대부분 객체 형식으로 이루어져있다. Reducer Action을 받아, 어떻게 수행할지를 정하는 함수 Store State를 관리하는 장소 예제로 살펴보기 아래는 간단하게 JS에서 테스트해본 것이다. // 테스트에서는 CDN으로 불러오는 방식을 사용했다. // const Redux = require('redux'); // 리듀서 const myReducer = (state = 0, action) => { switch(action.type) { case 'add_number': return state + 1; case 'minus_number': return stat..
Redux는 해도해도 헷갈리는 느낌이기에, 한 번 정리해보려 글을 작성한다. React에서 이야기하는 상태는 무엇을 의미할까? React에서 사용되는 상태(State)란, 컴포넌트 내 존재하는 변수를 의미한다. React는 Vue나, Angular와 다르게 데이터가 한 방향으로 흐르는 단방향 바인딩 방식인데, 이는 Props drilling을 발생시킨다고 한다. Prop Drilling이란, '리액트의 컴포넌트 트리에서 데이터를 전달하기 위해서 필요한 과정' 이라고 하는데, 쉽게 풀이해보자면 React 내에서 상탯값을 전달하기 위해 하위 컴포넌트를 계속 타고 가는 과정이라고 생각하면 된다고 한다. 결국, 상태 관리 라이브러리는 이러한 Props drilling을 방지하기 위해 사용한다고 보면 된다. 상태..
개요 PHP 4.0 └ PHP 3.0 + 프레임워크(Zend 엔진) └ 모듈화 및 웹 서버 인터페이스 부문이 추가되었다. └ 이식성 측면이 상향되었다. PHP 5.0 └ 객체지향 문법이 추가되었다. ( PHP 3.0/4.0 버전에서는 Class를 만들고, 상속받는 기능 외엔 없었음) └ xml 지원이 강화되었다. └ SQLite 등 sql이 확장되었다. └ Tidy 확장을 지원하였다. (이를 통해 HTML 문서를 표준에 맞게 관리할 수 있음) PHP의 장점 ① 무료다. (고급 기술은 유료지만..) ② 플랫폼에 독립적이다. ③ PHP 내부 소스 코드를 수정할 수 있다(고수용) ④ 웹 개발에 적합하다(C, Java는 애시당초 웹 개발 용이 아니였다.) ⑤ 에러를 무료로 해결이 가능하다(?) ⑥ 대중적이다. ..
$_Files 안에 뭐가 들어있는지 먼저 확인해보자 var_dump($_FILES); // name : 실제 이름 // type : 이미지, png타입이다 // tmp name : 임시 이름 - 서버의 임시 디렉토리에 들어가게 됨 // error : 에러 // size : byte단위 크기 파일을 업로드하는 부문이다. test.php // 에러 출력 -> 트러블슈팅 편하게 하는 옵션 ini_set("display_errors", "1"); // 임시 디렉토리에서 파일 디렉토리로 옮기는 변수 // Window 운영체제의 경우, 끝에 \\를 붙여야한다. $uploaddir = 'C:\Bitnami\wampstack-8.0.5-0\apache2\htdocs\upload\files\\'; // 보안을 위해 ba..
pwd, cd // 현재 디렉토리 확인 echo getcwd().' '; // 위치 이동 chdir('../'); echo getcwd().' '; ls //현재 디렉토리 사용 $dir = './'; //현재 디렉토리에 대한 파일들 출력 $file1 = scandir($dir); // 일반 $file2 = scandir($dir, 1); // 1 옵션 : 정렬순서 바꾸기 //출력 print_r($file1); print_r($file2); mkdir //폴더만들기 mkdir("1/2/3/4",// 디렉토리명 0700, //권한 true //첫 번째 인자의 경로가 만약 없다면 만들어줄까? );
