[2023.11.17] 개발자 교육 40일 차 : 강의-JavaScript with 실습 [구디 아카데미]

DaramGee·2023년 11월 17일

API CRUD Firebase storage 라우터 호이스팅

오늘 정리

복습

강의 내용

강의 마무리

클라우드 활용 자바개발자 양성과정(구디)

목록 보기

40/95

오늘 정리

호이스팅 이슈란?지역변수인데 마치 전역변수처럼 끌어올려져서 호출이 되는 상황

복습

호이스팅 이슈

💡호이스팅 이슈 필요여부에 따라 일반함수, 화살표함수를 잘 사용해야 함.
호이스팅 이슈란?지역변수인데 마치 전역변수처럼 끌어올려져서 호출이 되는 상황
호이스팅이 필요할 때가 언제??

(https://mong-blog.tistory.com/entry/JS-호이스팅hoisting)
⚙️라우터
- router.get(url, function(req, res, next)) → req, res 없이 서비스 구현 x
  - request : 요청 객체, 정보 담기, 사용자가 입력한 값 받아옴
  - response : 응답 객체, 확장자가 mime type 결정, 페이지 이동 처리(라우팅)
  - next : 다른 서비스(미들웨어)를 호출(연결)
- res.render : 화면 그려줌
- res.send(’값’) : 인자 값 전송 → 전송할 때의 확장자의 형태로 전송(값이 json일수도, html일수도 있음. 중요하지 x)
  
  ⇒ myBook에 쓰인 express 모듈은 위처럼 req, res, next를 제공해주며 이를 통해 Restful 지원받을 수 있고, 웹서비스를 구현하고 제공할 수 있음.(마치 서블릿처럼)

강의 내용

[myBook}

캐러셀 너비 동기화 처리 → 반응형 웹설정(미디어쿼리)
- https://www.daleseo.com/css-media-queries/
수정, 삭제버튼 활성화(토글처리)
- 로컬스토리지 email(로그인 시 담김) = 현재 게시글의 작성 email(글 작성시 담김)이라면 활성화!!
- 같다면 수정, 삭제 버튼 활성화하고 다르다면 버튼을 그대로 숨겨둠(display : none)

게시글 수정하기
- 기능 : 수정버튼 누르면 수정되는 페이지로 이동, firebase 연결 필요x (그 페이지 가서 할 거)
- XXX.on(’click, async function(){ })
- 비동기처리 필요→ promise → async/await
게시글 삭제하기

💡 **CRUD 패턴화 ✍️** 입력 : 새로 쓰기 -> UI -> 입력 -> 저장(DB연동 - await addDOC) -> 목록으로 이동 🤔 수정 : 기존 것 바꾸기 -> DB 경유 -> UI 출력(수정페이지) -> 수정내용 작성 -> 저장(DB연동 - setDoc) -> 목록으로 이동, 내가 어디서 왔지?(정보의 관리) -> '이전' 버튼을 눌렀을 때 내가 있던 곳으로 가도록!(고객에 대한 배려) 🗑️ 삭제 : 기존 것 삭제하기 -> 비번 유무에 따라 로직 달라짐(업무 프로세스에 따라 달라짐) 🔍 조회 : 기존 것 꺼내오기 -> DB 경유 -> 조회 -> 가져오기(여러개? 한개?)

place holder
- https://via.placeholder.com/200x200

리액트 템플릿(https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html)

리액트 생성
```
npx create-react-app my-app
```
https://ko.legacy.reactjs.org/

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>