day40~

Hanna·2024년 12월 3일

KOSMO 24.10~25.03

목록 보기

6/12

day40. 2024-12-02-월요일

수업진도

js_step1/JSLab/7.동기와비동기 -> 어려운 내용이다, 10일정도 여유가지고 이해하도록 하자
: setTimeout
: fetch
: Promise(resolve, reject)
: module - 추가 정보 https://url.kr/39jn2a
bookApp_kakaoAPI/javascripts/authLogic.js
bookApp_kakaoAPI/users/update.ejs : 정보수정 - 사진 추가
bookApp_kakaoAPI/posts/read.ejs : 글정보 상세보기

동기와 비동기

동기(Synchronous)
동기는 사전적으로 '동시에 일어난다'는 의미를 갖고 있습니다.
프로그래밍에서 동기는 작업이 순차적으로 진행되는 것을 의미합니다.
즉, 한 작업이 시작되면 해당 작업이 완료될 때까지 다른 작업이 기다려야 합니다.
동기 방식은 호출한 함수 또는 작업이 반환될 때까지 대기하는 동안 실행 흐름이 차단되는 특징이 있습니다.

동기 방식은 일반적으로 간단하고 직관적인 코드를 작성하기 쉽습니다.
하지만 여러 작업이 동시에 실행되어야 하는 경우,
각 작업의 완료를 기다리는 동안 시간이 소요되어 전체 프로세스의 성능이 저하될 수 있습니다.
또한 한 작업이 지연되면 다른 작업들도 모두 지연되는 문제가 발생할 수 있습니다.

비동기(Asynchronous)
비동기는 사전적으로 '동시에 일어나지 않는다'는 의미를 갖고 있습니다.
프로그래밍에서 비동기는 작업이 독립적으로 실행되며,
작업의 완료 여부를 기다리지 않고 다른 작업을 실행할 수 있는 방식을 의미합니다.
즉, 비동기 방식은 작업이 시작되면 해당 작업이 완료될 때까지 기다리지 않고 다음 코드를 실행할 수 있습니다.

비동기 방식은 주로 I/O 작업이나 네트워크 요청과 같이 시간이 오래 걸리는 작업에 유용합니다.
이러한 작업을 비동기적으로 처리하면, 프로그램은 작업이 완료되기를 기다리는 동안
다른 작업을 처리할 수 있으므로 전체적인 성능이 향상됩니다.
비동기 방식은 콜백(callback), 프라미스(Promise), async/await 등의 메커니즘을 통해 구현될 수 있습니다.
(출처: https://won-percent.tistory.com/150)

Promise

프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다.
다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '프로미스(promise)'를 반환합니다.

Promise는 다음 중 하나의 상태를 가집니다.

대기(pending): 이행하지도, 거부하지도 않은 초기 상태.
이행(fulfilled): 연산이 성공적으로 완료됨.
거부(rejected): 연산이 실패함.
(출처: mdn Promise)

콜백 함수

콜백 함수(Callback Function)는 특정 조건이 만족되거나, 작업이 완료된 후 실행되도록 전달되는 함수를 말합니다. 즉, 다른 함수에 매개변수로 넘겨져 특정 시점에 호출되는 함수입니다. (출처: chatGPT)

day41. 2024-12-03-화요일

수업진도

JSLab: 7.module/step5, 8.동기와비동기/함수2, async와await
bookApp_kakaoAPI
: posts/update-글수정 = 안되다가 갑자기 또 됨. 와이라노 으읔
: users/cart - 장바구니 담고 빼기
React 탬플릿 구성: workspace_react
디자인 실습: D:\workspace_js\html_step1\디자인1

module

개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다.
이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.

모듈은 단지 파일 하나에 불과합니다. 스크립트 하나는 모듈 하나입니다.
모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다.

브라우저(HTML)에서 모듈 사용 하기

모듈은 특수한 키워드나 기능과 함께 사용되므로 <script type="module"> 같은 속성을 설정해 해당 스크립트가 모듈이란 걸 브라우저가 알 수 있게 해줘야 합니다. (포스팅 맨 마지막에 브라우저 코드를 작성했습니다.)
출처: https://inpa.tistory.com/entry/JS-📚-모듈-사용하기-import-export-정리 [Inpa Dev 👨‍💻:티스토리]
모듈은 로컬 파일에서 동작하지 않고, HTTP 또는 HTTPS 프로토콜을 통해서만 동작합니다.
로컬에서 file:// 프로토콜을 사용해 웹페이지를 열면 import, export 지시자가 동작하지 않습니다.
(출처: https://inpa.tistory.com/entry/JS-📚-모듈-사용하기-import-export-정리 [Inpa Dev 👨‍💻:티스토리])

bookApp_kakaoAPI/posts/write.ejs 메모

<script type="module"> /* import - */
ES6이 지원하기 시작한 모듈 개념이다.
js를 가지고 모듈화시켜서 재사용이 가능한 코드를 전개할 수 있다. - 백엔드 쪽 코드
<script type="text/javascript">: 오리지널 - commonjs - 기존 프론트 쪽 코드
한계: 다른 서버와 연계가 어렵다.
module일때 import와 export를 사용할 수 있다
그래서 javascripts/firebase.js 작성한 뒤 맨끝에 export를 추가하였다.
사용자가 정의한 XXX.js를 외부에서 사용할 수 있게 된다.

JSON.pars(), JSON.stringify()

JSON을 JS Object로 파싱하기 위해서 필요한 메소드: JSON.parse()
JS Object를 JSON으로 변환해주기 위해 필요한 메소드: JSON.stringify()

bookLis.ejs

//장바구니 담기
  $("#list_book").on("click",".card .cart", async function(){
    console.log("cart click");
    if(uid){
      const book = JSON.parse($(this).attr("book")) <<<<<여기!!!!!!!!!!!!!!!
      console.log(book);
      await set(ref(db,`cart/${uid}/${book.isbn}`),book)
      alert("장바구니에 등록되었습니다.")
      //console.log(book);
    }else{
      //uid가 undefined, null, 0, NaN
      location.href='/login'
    }
  })

React 시작

프로젝트 생성 명령어

npx create-react-app myblog-step1(프로젝트명)
cd myblog-step1(프로젝트명)
npm install //node-modules 설치(앞에서 되긴 함, 파일 확인후 실행)
npm start
npm run starat (브라우저 실행)

교과서
https://ko.legacy.reactjs.org/docs/introducing-jsx.html

day42. 2024-12.04-수요일

수업진도

오전) router-template2024: 웹 페이지 탬플릿 구현

: 배너 만들기 - w3schools.com, react-bootstrap, getbootstrap 등에서 디자인 코드 따와서 사용하는 법
오후)
react/workout_step1
react/news_step1
react/workout_step2_241205과제

react: router-template2024 - 기본 탬플릿 생성

디자인 참조: w3schools.com, react-bootstrap, bootstrap 유용하게 사용하자

브라우저는 http://localhost:3000/+(index.html 생략되어있음)로 디폴트 3000을 사용한다.
<div id="root"></div> in index.html에서 root에 대한 정보는 index.js에서 참조한다 => document.querySelector("#root") -> index.js에서 App import

- root.render() : render: 페이지(화면)를 보냄. send: 메세지를 보냄

index.js>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

import React from 'react';
import ReactDOM from 'react-dom/client';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';
import { BrowserRouter } from 'react-router';

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render( /* render: 페이지(화면)를 보냄. send: 메세지를 보냄 */
  <>
  <BrowserRouter>
    <App /> {/* App 내용 화면에 뿌려줘~ */}
  </BrowserRouter>
  </>
);


App.jsx>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

import { Route, Routes } from "react-router"; /* import!!!! */
import HomePage from "./commponents/pages/HomePage";
import LoginPage from "./commponents/auth/LoginPage";
import NoticePage from "./commponents/pages/NoticePage";

const App = () => {
  //선언부
  //return내용이 화면에 출력 - index.html문서에 root div태그 내부에 추가됨
  // <div id="root"></div>
  return ( // return에 있는 태그가 화면에 출력
    <>{/* <>안에 Fragment 생략가능  */}
      <Routes>
        <Route path="/" exact={true} element={<HomePage/>} /> {/* 열림/닫힘태그 동시에 작성 */}
        <Route path="/login" exact={true} element={<LoginPage/>} />
        <Route path="/notice/list" exact={true} element={<NoticePage/>} />
      </Routes>
    </>
  );
}

배너 Home, 로그인, 공지사항에 대한 이벤트 처리 -> `<Header/>`

이때, <Nav.Link href="#home">Home</Nav.Link> 를 사용하면 페이지 이동시 href를 사용하면 URL이 변한다. 이렇게 되면 기존 요청 끊기고(기존 정보 잃어버림), 새로운 요청 발생한다.

React의 기본 방향은 하나의 화면으로 사용하는 것, 즉 SPA(Single Page Application)이기 때문에, URL이 안바뀌도록 react-router-dom 제공 컴포넌트 import하여 사용한다. => <Link to="/">Home</Link>

workout_step1

중괄호로 태그를 만들 수 있다
좌우 중괄호 태그를 쓰면 데이터셋을 넘길 수 있다

workout_step2_241205과제 준비

https://www.npmjs.com/package/@fortawesome/fontawesome-free 터미널에 설치
과제! (-), (휴지통 삭제) 구현해보기
다른 것 복습하는 것도 good
못하겠으면 미리 예습하는 차원에서 교과서 문서 읽어보기
https://ko.legacy.reactjs.org/docs/introducing-jsx.html

day4. 2024-12-09-월요일

수업

REACT-BASIC/OO.DOM/00-1 : babel1~4, props
git merge하여서 로컬 웹 연결 방법 - 따로 글 작성

리액트 시작하기

아이디어
가상의 돔을 만들어서 기존의 돔과 비교하기
비교하려면 구분값이 필요한데, key속성을 사용한다.(ex, 세개의 tr태그 중 누가 변경될 것 인가?)

 [].map((item, index)=> {
    <li key={index}></li>
 })

상태값이 변하면 누가 변경되었는지 찾아낸다.(알고리즘 필요-리액드제공)
여러개의 돔 중에서 변경된 DOM을 찾아내어 그 부분만 새로 그린다(Re-rendering).

새로 렌더링 되는 경우

상태값이 변할 때
부모가 바뀌면 자손도 새로 렌더링 - 서로 그러함 (버블링<->캡처링)

리액트에서 컴포넌트 = 함수

컴포넌트는 사용자 정의 태그로 사용될 수 있다.
컴포넌트를 화살표 함수로 구현하면 된다(일급함수).
화살표 함수의 리턴값은 화면이거나 함수(고차함수)이다.

JSX란?

분명 자바스크립트 코드인데 HTML과 비슷하게 쓰고 있다
엄밀히 말하면 JSX도 JS이다

Babel

JS 컴파일러
Babel은 React와 함께 가장 널리 사용되는 컴파일러입니다.
- 언어 해석기, 특정 언어를 다른 프로그래밍 언어로 옮기는 기능
- https://babeljs.io/
역할: 태그와 JS가 섞인 코드를 HTML과 Javascript로 분리해준다.
- JS 코드로 비즈니스 로직을 작성할 수 있다

day45. 2024-12-10-화

수업진도

react-basic :
workspace_react/cloudinary-step1: 명함 디자인 만들기
git 연습
웹서비스 프로젝트2 day2회의

day46. 2024-12-11-수

수업진도

react-basic/03렌더링/todo: like2~, state1~ - useState, 91.workout:이벤트처리 태그호출
크롬 확장 프로그램: 리액트 디벨로퍼 툴 추가
workout-step2_241205과제 : 운동 종목 추가 및 카운트 - Navbar, AddForm.jsx

나의 역할: 큰 틀을 볼 줄 알아야 한다. 기능은 이미 AI가 구성해준다
프로젝트 : 완성이 목표가 아님! 트리를 그리면서 큰 틀을 보고 정리할 줄 아는 능력 키우면서 해나가는 방향

React의 장점

https://ko.legacy.reactjs.org/docs/rendering-elements.html

변경된 부분만 재렌더링 된다!

sort & filter : 새 배열 생성 차이

sort() 사용: 원본 배열이 변경되면 React에서 상태 변경을 감지하지 못할 수 있음
→ 새 배열 생성 후 상태로 설정 필요.
filter() 사용: 원본 배열은 변경되지 않고 새 배열을 반환
→ React에서 상태 변경 감지.
=> 그냥 항상 spread연산자 이용해서 복사본 만들어서 하자

sort()>>>>>>>>>>>>>>
const bookSort = () => {
  //const sortedBooks = books.sort(); //이거슨 원본 정렬이다..
  const sortedBooks = [...books].sort(); //복사본 정렬
  setBooks(sortedBooks);
  //useState를 사용하면 변경된 부분이 즉시 반영된다. - 동기화
  
filter()>>>>>>>>>>>>>
const handleDelete = (item) =>{
  const index = items.indexOf(item)
  console.log(`${item.name}, index ${index}`);
  ////////////filter((**여기파라미터**) =>{}) 이해!
  const updatedItems = items.filter((currentItem) => currentItem.id !== item.id);
  setItems(updatedItems) /* 삭제 반영 */
}
  
}

클릭 이벤트 처리 태그 호출:

91.workout/wsept4.html & 설명.md

리액트 태그 사용

태그 안에 js를 작성할 수 있음!!!!

적절한 예는 아니지만 일단 이것도 있고... 또 찾아보겠움

const element = (
    <>
    {/* 여기는 JSX 영역 - key값 사용시 반드시 unique해야 함 */}
    {/* js 복잡한 연산을 element 사용하는 곳에서 사용 가능 */}
        {[1,2,3,4,5,7,8,9,10].map((x, index) => 
            <Number2 key={index} number={x} selected={x%2===0}/>
        )}
    </>
)


workout-step2_241205과제/WorkoutApp.jsx >>>>>>>>>>>>>>>>

  <Navbar totalCount={items.filter(item => item.count > 0).length}/>

npm 라이브러리 설치

npm i react-router : i-install, react-router-라이브러리 이름
===> npm사이트 참고

day47. 2024-12-12-목

수업진도

react-basic/랜더링/리렌더링
render-phase1
cloudinary-step2: 구글 로그인 로그아웃
https://console.cloudinary.com/ 회원가입

day48. 2024-12-12-금

수업진도

react-basic : props, element, onChange, useState 기초 연습
youtube-step1 : API + props
이미지 움직임 줘서 애니메이션 만들기 : animation/town, animation/디자인1

youtube-step1 : props, useState 복습

번들러 만들기 : parcel-Youtube
- npm init -y : package.json 생성 -> html, css, js 묶어주도록 : 운영서버에 넘겨주기 쉽게!
axios 사용

Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.
axios와 fetch 차이점: https://velog.io/@sunkim/React-axios-와-fetch-차이점

useEffect(()=>{
	axios.get('https://youtube.googleapis.com/youtube/v3/videos?',{params}) >>>>>>>>>>>>>여기
     .then(result => {
        setVideos(result.data.items)
      }).catch(error => console.log(error))
    },[])

웹 애니메이션

File: animation/town

웹 메인화면 - 영상 및 배치

File : animation/디자인1

Hanna

computer sight

이전 포스트

day31~day39

다음 포스트

day40~

KOSMO 24.10~25.03

수업진도

동기와 비동기

Promise

콜백 함수

수업진도

module

브라우저(HTML)에서 모듈 사용 하기

bookApp_kakaoAPI/posts/write.ejs 메모

JSON.pars(), JSON.stringify()

React 시작

수업진도

react: router-template2024 - 기본 탬플릿 생성

배너 Home, 로그인, 공지사항에 대한 이벤트 처리 -> `<Header/>`

workout_step1

workout_step2_241205과제 준비

수업

리액트 시작하기

새로 렌더링 되는 경우

리액트에서 컴포넌트 = 함수

JSX란?

Babel

수업진도

수업진도

React의 장점

sort & filter : 새 배열 생성 차이

클릭 이벤트 처리 태그 호출:

리액트 태그 사용

npm 라이브러리 설치

수업진도

수업진도

youtube-step1 : props, useState 복습

웹 애니메이션

웹 메인화면 - 영상 및 배치

day31~day39

day50~

0개의 댓글

day40~

KOSMO 24.10~25.03

수업진도

동기와 비동기

Promise

콜백 함수

수업진도

module

브라우저(HTML)에서 모듈 사용 하기

bookApp_kakaoAPI/posts/write.ejs 메모

JSON.pars(), JSON.stringify()

React 시작

수업진도

react: router-template2024 - 기본 탬플릿 생성

배너 Home, 로그인, 공지사항에 대한 이벤트 처리 -> <Header/>

workout_step1

workout_step2_241205과제 준비

수업

리액트 시작하기

새로 렌더링 되는 경우

리액트에서 컴포넌트 = 함수

JSX란?

Babel

수업진도

수업진도

React의 장점

sort & filter : 새 배열 생성 차이

클릭 이벤트 처리 태그 호출:

리액트 태그 사용

npm 라이브러리 설치

수업진도

수업진도

youtube-step1 : props, useState 복습

웹 애니메이션

웹 메인화면 - 영상 및 배치

day31~day39

day50~

0개의 댓글

배너 Home, 로그인, 공지사항에 대한 이벤트 처리 -> `<Header/>`