본문 바로가기

메소드6

리액트[기초] 라이프사이클 메서드 모든 리액트 컴포넌트에는 라이프 사이클(수명주기)이 존재하는데 컴포넌트의 수명은 페이지 렌더링 되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝이 난다 라이프사이클 메서드란 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드이다 클래스형 컴포넌트에서만 사용할 수 있으며 함수 컴포넌트에서는 사용할 수 없다(대신 Hooks 기능을 사용해 비슷한 작업을 처리할 수 있다) 이 메서드 들은 서드파티 라이브러리를 사용하거나 DOM을 직접 건드려야 하는 상황에서 유용하다 라이프사이클 메서드의 종류는 총 9가지이다 Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전 실행되는 메서드이고, Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드이다 이 메서드들은 컴포넌트 클래스에서 덮어써 선언.. 2022. 5. 29.
자바스크립트[기초] 프로미스 후속 처리 메소드 then | catch | finally 프로미스 후속 처리 메서드란? 프로미스가 fulfilled(성공) 상태 일 때는 프로미스의 처리 결과(데이터)를 가지고 무언가를 해야 하고 프로미스 rejected(실패) 상태 일 때는 프로미스 처리결과(에러)를 가지고 후속 처리를 해주어야 하는데 이때 필요한 후속 처리 메서드가 then | catch | finally이다 프로미스의 비동기 처리 상태가 변화하면 후속 처리 메소드에 인수로 전달한 콜백 함수가 선택적으로 호출된다 이때 후속 처리 메서드의 콜백 함수에 프로미스의 처리 결과가 인수로 전달된다 모든 후속 처리 메소드는 프로미스를 반환하며 비동기로 동작한다 . then() 프로미스를 반환한다 then의 콜백 함수가 프로미스를 반환하면 그대로 반환하고 콜백 함수가 프로미스가 아닌 값을 반환하면 그 .. 2022. 5. 1.
자바스크립트[기초] window 객체 속성 https://developer.mozilla.org/ko/docs/Web/API/Window [window 객체 참고] Window.history 뒤로 가기/ 돌아가기 부분이고 브라우저의 세션 기록을 조작할 때 사용한다. Window.location url 부분이며 location 속성을 사용해 url 이동도 가능하다. Window.document 브라우저가 불러온 웹 페이지를 나타내며 document 속성들도 많이 가지고 있다 https://developer.mozilla.org/ko/docs/Web/API/Document 2022. 4. 19.
자바스크립트[기초] JSON | JSON.stringify | JSON.parse JSON 클라이언트와 서버 간의 HTTP 통신을 위한 텍스트 데이터 포맷이다. 자바스크립트에 종속되지 않는 언어 독립형 데이터 포맷이다. JSON은 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트이다. JSON의 키는 반드시 큰따옴표(작은따옴표는 사용 불가)로 묶어야 한다. 값은 객체 리터럴과 같은 표기법을 그대로 사용할 수 있다. 하지만 문자열은 반드시 큰따옴표(작은따옴표는 사용 불가)로 묶어야 한다. { "name" : "Lee", "age" : 20, "alive" :true, "hobby" : ["traveling", "tennis"] } JSON.stringify 객체를 JSON 포맷의 문자열로 변환한다. 클라이언트가 서버로 객체를 전송하려면 객체를 문자열화 해야 하는데 .. 2022. 4. 18.
자바스크립트[기초] Array.prototype.join | Array.prototype.flat Array.prototype.join 원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달받은 문자열, 즉 구분자로 연결한 문자열을 반환한다. 구분자는 생략 가능하며 기본 구분자는 콤마(',')이다. const arr =[1,2,3,4]; // 기본 구분자는 콤마 , 이다 // 원본 배열 arr의 모든 요소를 문자열로 변환한 후 기본 구분자로 연결한 문자열을 반환한다. arr.join(); // '1,2,3,4'; // 원본 배열 arr의 모든 요소를 문자열로 변환한 후 빈 문자열로 연결한 문자열을 반환한다. arr.join(''); // '1234' // 원본 배열 arr의 모든 요소를 문자열로 변환한 후 구분자 ':'로 연결한 문자열을 반환한다. arr.join(':');// '1:2:3:4' .. 2022. 4. 18.
자바스크립트[기초] 배열 메소드 종류 Array 생성자 함수는 정적 메소드를 제공하며, 배열 객체의 프로토타입인 Array.prototype은 프로토타입 메소드를 제공한다. 배열에는 원본 배열(배열 메소드를 호출한 배열, 즉 배열 메소드의 구현체 내부에서 this가 가리키는 객체)을 직접 변경하는 메소드 와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메소드 가 있다 원본 배열을 직접 변경 하는 메소드 Array.prototype.push 인수로 전달 받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 프로퍼티 값을 반환한다. const arr =[1]; arr.push(2); console.log(arr); //[1,2] Array.prototype.pop 원본 배열에서 마지막 요소를 제거하고 제거한.. 2022. 4. 18.
728x90

티스토리툴바