본문 바로가기

전체 글92

리액트 개발 시 사용하면 편리한 도구 Prettier : 자동으로 코드의 스타일을 관리해주는 도구 → 문자열을 사용할 때, ‘와 “ 중 무엇을 사용할지, 세미콜론(;)을 코드 뒤에 붙일지 말지, 들여쓰기 정도 등을 관리 코드 스타일을 마음대로 쉽게 커스터마이징 가능 [사용법] { "trailingComma": "es5", "tabWidth": 4, "semi": false, "singleQuote": true } trailingComma: “none”, “es5”, “all”으로 설정 가능, 객체 또는 배열이 여러 줄로 구성되어 있으면 맨 마지막 줄에 쉼표 붙여줌 “none”: 쉼표 붙이지 않음 “es5”: 객체, 배열 사용하게 될 때 쉼표 붙임 “all”: 함수 사용할 때, 인자를 전달 할 때 쉼표 붙임 tabWidth: 들여쓰기 크기 정.. 2022. 12. 2.

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.

이전 1 ··· 12 13 14 15 16 17 18 ··· 23 다음

티스토리툴바