Ella 프론트엔드일지

1. fetch 란 무엇인가? - fetch cheatsheet : https://devhints.io/js-fetch - 자바스크립트에서 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 하는 함수 - fetch API를 통해 다양한 주문 전송, 사용자 정보 읽기, 서버에서 최신 변경분 가져오기 등등 다양한 일을 페이지 새로고침 없이 수행할 수 있다. - fetch API는 Promise를 기반으로 동작한다. - 즉, CRUD 기능을 구현할 수 있다. 🔸CRUD란? - 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 아래 4가지 항목을 묶어서 일컫는 말이다. 즉, 데이터를 읽고 쓰고 삭제하는..프로그램에서 꼭 필요한 기능들이다. 이름 fetch method SNS 페이지에서 일..

0. 글을 쓰게된 계기 - 분명 외웠다고 생각했는데... 이벤트리스너, 셋타임 함수등을 쓰며..분명 이해했다고 생각했는데 아직도 이해못한 나 자신에게 이해시키기 위한 마지막 콜백함수 끝장내기 뿌시기 글이다. 1. 콜백함수 너가 뭔데!! 🔸콜백함수 뜻 - 함수의 파라미터(매개변수)로 들어가는 함수다. - 콜백함수는 대표적으로 setTimeout 함수와, addEventListener 함수에 쓰인다. - 아래 예제로 설명하자면, setTimeout과 addEventListener은 모두 콜백함수를 인자로 받는다. setTimeout 은 console.log(3)을 1초 뒤에 실행해줘~ addEventListener 은 버튼을 클릭하면 console.log('버튼클릭했음') 실행해줘~ 즉, 각 함수의 기능을 ..

- 정말 쉬운 예제코드라서 초보자들도 무리없이 이해할수있습니다. 1. 오늘의 삽질 원인 - props 실습을 하다가, props는 state와 문자,숫자 종류만 자식에게 물려줄 수 있는 줄 알았다. - 하지만, setState 함수도 물려줄 수 있었다. - 그런데, 알고있기로 props를 통해서 state를 물려줄때에는 state를 변경 불가능하다고 알고있었다. 즉, readonly라고만 알고있었는데... setState함수를 쓰니...자식의 값을 바꿔버리니 부모의 값도 바뀌는 것이었다... 또르르... 나는 자식의 값만 바꾸고 싶었는데, 부모의 값도 같이 바꿔버렸다... 1-1) 예제코드 - App.js 파일에 Main 자식 컴포넌트 안에 setState함수를 물려줄 이름을 이름변경이라고 짓고, 스테이..

이 블로그 글 특 : 아주 초보자도 이해할수있는 쉬운 예제(제가 개발한 예제)로 설명함. 특히 개념설명은 무조건 쉬운 예제로 설명해야한다는 고정관념이 있는 1인 1. props - 부모 컴포넌트가 자식 컴포넌트한테 전달하는 값 - 즉, 자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶으면 props로 전송해서 써야한다. 1-1) 예제코드로 살펴보자 - 아주 간단한 아래와 같은 코드가 있다. useState모르면 내 블로그에서 검색해보삼 - App 컴포넌트에 인삿말을 p태그 3개로 나열하고 이름을 useState 배열로 받아줬다. - 그리고 Main 컴포넌트에는 자기소개로 역시나 똗같이 p태그 3개로 나열해주었다. - 그런데 예제코드를 보면, useState의 배열에 들은 이름들이 Main 에도 ..

0. map() 요약 1) 왼쪽 array 자료만큼 내부코드 실행해줌 2) return 오른쪽에 있는걸 array로 담아줌 3) 유용한 파라미터 2개 사용가능(map 안의 요소 데이터, 인덱스) 1. HTML 요소가 반복되고 있는 계획표가 있다. //App.js /*eslint-disable*/ import {useState} from 'react' import style from './App.css' function App() { let [날짜,날짜변경] = useState(['22일','23일','24일']) let [계획,계획변경] = useState(['빨래하기','청소하기','공부하기']) return ( 11월 {날짜[0]} 일정 밥먹기 운동하기 {계획[0]} 11월 {날짜[1]} 일정 밥먹기..

0. 글을 쓰게된 이유 - useState를 이용하여 버튼을 클릭하면, 배열의 값을 변경하려고 하는데... 아무리 해도..안바껴서.. - spread 문법이 필요하다는 것을 알게됨 1. 예시 코드 - useState에 기념일들이 배열로 나열되어있고, html 태그에 각 기념일들이 데이터 바인딩 되어있다. useState에 대해서 알고싶다면 아래의 글 참고 부탁드립니다. 2022.11.21 - [프론트엔드 개발/리액트] - React 기초) state값이 자꾸 바뀔때는? useState - 9월 22일 기념일을 수정 버튼을 누르면 10월22일로 바뀌었으면 좋겠다. 어떻게 하면 좋을까?? App.js 파일 import { useState } from "react"; function App() { let [날..