html/ 시멘틱 구조시멘틱 태그hedading 구조를 해야하는 이유seo를 맞추기위해, 검색엔진이 콘텐츠를 이해하는데 도와주고 웹 접근성에 도움을 준다.링크 a와 버튼의 차이링크 a: 페이지 이동버튼: 동작 실행 버튼, 키보드 동작까지 고려한 것 웹 접근성키보드 접근키보드 tab으로 이동 가능하게 제작한다.focus 관리모달, 드롭다운, 열림닫힘 후 포커스가 어디로 이동가야하는지를 생각하면서 코드 제작스크린리더정의: 화면에 보이는 내용을 음성이나 점자 형태로 사용자에게 전달해주는 보조 기술회원가입이메일가입하기이렇게 제작이 되어 있다면 스크린리더가"회원가입, 제목 1""이메일, 편집창""가입하기, 버튼"이렇게 읽어준다. ARIA정의: html 요소에 부족한 접근성 정보를 보완해준다.role 사용 방법삭제..

한눈에 이전 복습조회(GET)fetch() + setPosts()등록(POST)fetch() + setPosts()삭제(DELETE)fetch() + filter() + setPosts()GET서버 >> 데이터 가져오기POST새로운 데이터 추가DELETE기존 데이터 삭제PATCH기존 데이터 수정1단계. 수정 버튼 만들기 handleUpdate(post.id)}> 수정 DELETE와 똑같이 어떤 게시글을 수정할지 id를 전달한다.2단계. PATCH 요청async function handleUpdate(id) { await fetch( `https://jsonplaceholder.typicode.com/posts/${id}`, { method: "PAT..

이제 post로 추가한것을 delete 즉 삭제해보기이다.일단 이전에 만든 post에 삭제 버튼을 추가해줘야한다.import { useState } from "react";export default function Delete() { const [posts, setPosts] = useState([]); const [title, setTitle] = useState(""); const [body, setBody] = useState(""); async function handleSubmit(event) { event.preventDefault(); await fetch("/posts", { method: "POST", ..

리스트를 완료했으니 이제 리스트에 나오도록 새글을 작성시 나오는 방법을 실습해보자.POST는 브라우저에서 서버로 새로운 데이터를 보내는 것간단 흐름등록 버튼 >> post 요청 >> 서버저장 >> 목록갱신 >> 화면에 새 게시글 추가GET과 POST의 차이GETPOST가져오기생성하기서버 → 브라우저브라우저 → 서버조회등록method: "POST" = HTTP 요청 방식을 POST로 지정하여 서버에게 "데이터를 생성(등록)하는 요청"POST 코드 작성 방법GET은 fetch("/posts"); 였다.POST는fetch("/posts", { method: "POST",}); 서버에는 무엇을 보낼까?body: JSON.stringify({ title: "React 공부", body: "useEffect ..

api 호출과 기본 상태관리까지 배웠으니 실제로 제작하는 것을 실습해보자.get은 서버에 있는 데이터를 가져오는 것오늘 만들 화면────────────────────────게시글 목록──────────────1. React 공부2. TypeScript 공부3. Next.js 공부────────────────────────첫번째 사용할 State 정의const [posts, setPosts] = useState([]);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);두번째 API 함수 만들기async function fetchPosts() { try { setLoading(true); co..

api를 호출했다면 이제 어떻게 보여줄지를 고민해야하는 단계이다.Loading Stateconst [posts, setPosts] = useState([]);useEffect(() => { fetchPosts();}, []);여기서 질문. API가 3초 걸린다면? 3초동안 아무것도 안보인다.그래서 필요한 것이 Loading State이다.Error StateAPI 서버가 죽었다.GET /posts↓500 Error 그러면? posts = []사용자는 게시글이 없는 건가? 라고 생각한다.사실은 서버가 죽은 것 이때 보여줘야 할 화면 Error StateEmpty StateAPI는 성공했다. 그런데 [] 빈 배열을 반환했다. 이건 에러가 아니다.실제로 게시글이 없는 것이다. 그래서 " 게시글이 없습니다."..

promise(.then)방식import { useEffect, useState } from "react";function App() { const [posts, setPosts] = useState([]); useEffect(() => { fetch("https://jsonplaceholder.typicode.com/posts") .then((response) => response.json()) .then((data) => { setPosts(data); }) .catch((error) => { console.log(error); }); }, []); return ( {posts.map((post) => ..

프론트엔드 개발자의 핵심 업무는"API로 데이터를 요청하고(Request), 응답(Response)을 받아 State에 저장한 뒤,사용자에게 보기 좋은 화면(UI)으로 출력하는 것"이다. 각 개념 정리개념역할핵심API프론트와 백엔드가 통신하는 창구URL + HTTP Method로 구성된다.HTTP MethodAPI에게 무엇을 할지 알려주는 명령GET(조회), POST(생성), PUT/PATCH(수정), DELETE(삭제)fetch / axiosAPI에 Request를 보내는 도구둘 다 목적은 같고, axios가 편의 기능이 더 많다.Request프론트 → 백엔드 요청"게시글 주세요."Response백엔드 → 프론트 응답JSON 형태의 데이터를 반환한다.Promise비동기 작업의 결과를 나중에 전달하겠다..

promise가 필요한 이유fetch("/posts") 이걸 실행했습니다.그런데 아직 백엔드가 응답을 안 했습니다.그럼 JavaScript는 무엇을 반환해야 할까요?데이터도 없고 아무것도 안하는 것도 안된다. 그래서 등장한게 promise이다.지금 데이터가 없지만 , 나중에 데이터가 준비되면 전달해 줄게라는 약속이다."응답이 올 때까지 기다리는 상자" 그래서 fetch는 실제로 무엇을 반환할까?많은 사람들이const response = fetch("/posts"); 에서 response가 게시글이라고 생각합니다.하지만 아닙니다. const promise = fetch("/posts"); 가 더 정확한 표현입니다.fetch()는 게시글을 반환하는 함수가 아니라 Promise를 반환하는 함수 입니다.Prom..

then() 이란?그다음에, 응답이 도착한 그 다음에 이 코드를 실행해"응답이 도착한 후에 실행할 코드를 등록하는 메서드"fetch("/posts") .then((response) => { console.log(response); }); 1. fetch 실행↓2. Request 전송↓3. JavaScript는 다른 코드 실행↓4. 응답 도착↓5. then 안의 함수 실행↓6. response 전달 async / await는 왜 만들어졌을까?만들어진 스토리실무에서는 API를 한 번만 호출하는 경우가 거의 없습니다.예를 들어 로그인 기능을 만들어 봅시다.1. 로그인 요청↓2. 로그인 성공하면 사용자 정보 가져오기↓3. 사용자 정보를 가져오면 알림 목록 가져오기↓4. 알림을 가져오면 화면 출력.th..