무딘붓의 코딩기록

fetch() 함수란? fetch 함수는 JavaScript에서 제공하는 API 중 하나로, 서버에서 데이터를 가져오기 위해 사용됩니다. fetch 함수는 네트워크 요청을 보내고, 서버로부터 응답을 받습니다. 응답은 promise 객체로 반환되며, 이를 통해 비동기적으로 데이터를 처리할 수 있습니다. ChatGPT에 물어봤을때 나온 답변인데, 다른곳에서 찾아본 내용과 비교했을 때 큰 차이가 없어 가져와 봤다. 위의 설명대로, fetch API는 백엔드 서버와 데이터를 주고받는데 사용한다. 간단하게 설명하자면 React에서는 Node.js 등과 데이터를 주고받기 위해 fetch 함수를 사용한다. 자세한 내용은 다음 링크들에 정리되어 있다. https://developer.mozilla.org/ko/docs..

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다. React를 이용하여 CRUD( Create, Read, Update, Delete )기능을 구현한 게시판이다. 예전에 Node.js로 같은 기능을 구현한 적이 있는데, React로 구현하니 더 깔끔한것 같다. Node.js로 구현했던 CRUD 게시판은 아래 링크를 참고. https://sirius7.tistory.com/48 [Node.js] 8. CRUD 게시판 구현 CRUD CRUD란 Create(생성), Read(읽기), Update(갱신), Delete(삭제) 의 약자로, 사용자 인터페이스가 갖추어야 할 기능을 말한다. Node.js로 CR..

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다. 1. State의 정의 state란? prop 과 함께 컴포넌트 함수를 다시 실행해서 새로운 리턴값을 만들어 준다. prop과 state 모두 이 값이 변경되면 새로운 리턴 값을 만들어서 ui를 바꾼다. state는 값이 변경되면 HTML이 자동으로 다시 랜더링 된다. (= 새로고침 하지 않아도 됨) 일반 변수는 값이 변경되어도 HTML이 자동으로 다시 랜더링 되지 X (= 새로고침 해야함) 변수 외에 데이터를 저장하는 또 다른 옵션으로 생각해도 됨 문자, 숫자, object, array 등을 저장 가능하다. useState()를 이용해서 만들어야 ..

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다. 1. 컴포넌트 소스코드 정리정돈의 핵심 : 서로 연관된 것을 모은 다음(그룹핑) 이름을 붙인다. 리액트는 사용자 정의 태그를 만드는 기술이므로, 사용자 정의 태그를 이용해 연관된것을 모아 정리 정돈한다. 사용자 정의 태그 만들기 사용자 정의태그를 만들때는 함수를 정의한다. 사용자 정의태그를 만들때는 반드시 대문자로 시작해야 한다. 리액트에서는 사용자 정의태그를 컴포넌트(component)라고 부른다. 컴포넌트를 사용할 때의 장점 각 코드가 이름을 가지고 있기 때문에 어떤 취지의 코드인지 금방 파악 가능하다. 한번의 수정으로 컴포넌트를 사용하는 모든 ..

생활코딩 React 2022년 개정판 강의(https://opentutorials.org/course/4900)를 듣고 개인 학습용으로 정리한 게시글입니다. 1. 리액트 소개 메타에서 개발한 오픈 소스 자바스크립트 라이브러리 SPA (Single Page Application)을 전제로 한다 웹 앱을 만드는 라이브러리 React, Angular, Vue 중 가장 사용자가 많다. 리액트의 핵심적인 역할 : 사용자 정의 태그를 만드는 것 사용자 정의 태그 부품으로 사용된다 남들에게 공유할 수 있고, 남들의 부품을 사용할 수 있음 거대한 리액트 부품 공유망으로 들어가는 것은 큰 가능성을 열어준다 리액트를 만드는 2가지 방법 클래스(class) 문법 사용 → 이전 강의 참고 함수(function) 문법 사용 :..