본문 바로가기

전체 글55

LifeCycle Method 생명주기 메서드 컴포넌트가 브라우저 상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 (+ 에러발생 시 호출되는 메서드도 존재) 클래스형 컴포넌트에서만 사용 가능 React Lifecycle Methods diagram React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl 마운트될 때 발생하는 생명주기 메서드 1. constructor 컴포넌트의 생성자 메서드 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드 constructor(props){ super(props); console.log("constructor"); } 2. get.. 2022. 12. 2.
클래스형 컴포넌트 → 현재는 함수형 컴포넌트를 사용하지만, 나중에 컴포넌트를 사용하는 프로젝트를 유지보수하거나, 함수형 컴포넌트+Hooks로 못하는 작업의 경우 등 클래스형 컴포넌트를 써야하는 상황 존재 import React, {Component} from 'react'; class App extends Component{//class키워드 필요, Component로 상속 받아야함 state={//constructor없이 바로 state초기값 설정 가능, 객체 형식monsters:[], userInput:"", }; onClick={()=>{//this.setState 함수로 state 값 변경 가능this.setState({number:number+1}); }} render(){//render()메소드 필요const .. 2022. 12. 2.
HTTP 메서드 활용 클라이언트에서 서버로 데이터 전송 데이터 전달 방식 1. 쿼리 파라미터를 통한 데이터 전송 GET 주로 정렬 필터(검색어) 2. 메시지 바디를 통한 데이터 전송 POST, PUT, PATCH 회원 가입, 상품 주문, 리소스 등록, 리소스 변경 4가지 상황 1. 정적 데이터 조회 이미지, 정적 텍스트 문서 조회는 GET 사용 정적 데이터는 일반적으로 쿼리 파라미터 없이 리소스 경로로 단순하게 조회 가능 2. 동적 데이터 조회 주로 검색, 게시판 목록에서 정렬 필터(검색어) 조회 조건을 줄여주는 필터, 조회 결과를 정렬하는 정렬 조건에 주로 사용 조회는 GET 사용 GET은 쿼리 파라미터 사용해서 데이터 전달 GET도 메시지 바디에 데이터 넣어서 전송할 수 있지만 실무에서는 권장 안함 3. HTML Form.. 2022. 12. 1.
HTTP 메서드 HTTP API 만들어보기 ex) 요구사항: 회원 정보 관리 API 만들기(회원 목록 조회, 회원 조회, 등록, 수정, 삭제) API URI에서 가장 중요한 것은 리소스 식별 리소스? 회원을 등록하고 수정하는 것이 리소스가 아님 → 회원이라는개념 자체가 리소스 ex) 미네랄을 캐라 → 미네랄이 리소스 리소스를 어떻게 식별? 회원을 등록하고 수정하고 조회하는 것을 모두 배제 회원이라는 리소스만 식별하면 됨 → 회원 리소스를 URI에 매핑 API URI 설계 → 리소스 식별, URI 계층 구조 활용 회원 목록 조회 /members 회원 조회 /members/{id} 회원 등록 /members/{id} 회원 수정 /members/{id} 회원 삭제 /members/{id} ? 어떻게 구분? → 리소스와 행위를.. 2022. 11. 30.

티스토리툴바