일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 |
- mysql
- 혼프
- Porject
- setTimeout()
- https://m.blog.naver.com/tt2t2am1118/221010125300
- sql
- Import
- slow and steady
- webpack
- 비동기
- execCommand
- 동기
- database
- db
- JS #프로젝트
- Project
- async
- addEventListener
- await
- promise
- 게임
- object
- ajax
- callback
- eport
- json
- js
- prj
- https://youtube.com/playlist?list=PLuHgQVnccGMA5836CvWfieEQy0T0ov6Jh&si=FTaYv8m21EhO-A2K
- 참고블로그
- Today
- Total
목록2024/02 (45)
C-log
[FE] json-server를 통해 임시 API를 가지고 문제들을 출력한다. by 4BFC · Pull Request #4 · 4BFC/sample_Capstone 확인 시 json-server 설치 요망 github.com 나만의 시험지를 편집할 수 있는 페이지를 제작 중이다. 백엔드에서 제작한 sample json파일을 가지고 시험지에 들어갈 문제들을 호출해 볼 것이다. API를 불러오기 위해선 우선 fetch와 useEffect를 알아야하고 이를 활용해서 코드를 작성할 것이다. 아직 API가 정식으로 배포가 되지 않았기 때문에 임시로 사용할 수 있는 json-server를 가지고 임시주소로 API를 호출할 것이다. 문제를 불러오는 개수 제한은 다음 이슈에 다루어 볼 것이다. 우선 아래 코드를 살펴..
나만의 시험지는 졸업작품 프로젝트이다. 모든 내용을 담으면 좋겠으나. github에서 발행되는 issue를 기준으로 개발 노트를 기록 할 것이다.
이번 시간에는 영화 웹사이트를 만드는 연습을 해볼 것이다. 지금까지 배운 것들의 반복이기에 복습 연습을 한다고 생각하고 포스팅을 보면 좋을 것 같다. 먼저 API를 연결 해야한다. 해당 API는 yts라는 영화 정보 사이트에서 받아 올 수 있다. 아래 코드를 살펴보자. import { useEffect, useState } from "react"; export default function SubApp() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); useEffect(() => { fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating..
우리는 우선 순위 큐(priority Queue)를 알기 위해서 queue를 알아야 한다. queue는 FIFO이다. 즉, Stack과는 반대로 먼저 들어간 인자가 먼자 출력되는 것이다. 먼저 코드를 살펴보자. #FIFO 이기때문에 먼저 들어간 인자가 먼저 나온다. stack과 반대이다. from collections import deque queue = deque([1,2,3]) queue.append(4) print(queue) print(queue.popleft()) print(queue) deque([1, 2, 3, 4]) 1 deque([2, 3, 4]) 위의 코드에서 보이 듯 popleft로 먼저 들어왔던 인자를 pop했다. queue에는 enque와 deque라는 개념이 존재하는데 enque..
이번 포스팅에선 이전 포스팅에 이어서 ToDo List를 마무리 해볼 것이다. 우리가 input태그에 작성한 값들이 useState 배열에 값을 저장하게 했다. 이 배열 값들을 우리는 브라우저 UI로 나올 수 있게 코드를 작성할 것이다. 이전에도 우리가 해보았듯 배열 값을 jsx에 효율 적으로 반복시키기 위해선 map함수를 사용 해야한다. 아래 코드를 살펴보자. import { useState } from "react" export default function SubApp() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target..
이번 포스팅은 우리가 지금까지 배운 것들을 가지고 간단한 ToDo List를 만들어 볼 것이다. 지금까지 배운 것을 잘만 따라 왔다면 어려움 없이 진행할 것이다. 코드는 아래와 같다. import { useState } from "react" export default function SubApp() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === "") { return; } setToDo("..
이번 포스팅에서는 useEffect에서 사용되는 cleanup 함수를 배워 볼 것이다. cleanup 함수는 주로 useEffect 훅에서 사용되는 함수이다. 해당 useEffect가 더 이상 필요하지 않을 때 어떻게 정리할 것인지를 정의하는 역할을 한다. useEffect 훅은 컴포넌트가 렌더링될 때마다 특정 효과를 발생시키는 데 사용된다. 이때, 해당 효과가 필요하지 않아지면 그에 대한 정리 작업을 수행하기 위해 cleanup 함수가 활용된다. cleanup 함수는 useEffect 안에서 반환되는 함수로 컴포넌트의 렌더링이 사라질 때 또는 특정 조건이 변할 때 실행된다. 코드를 우선 살펴보자. import { useState, useEffect } from "react"; function Hello..