C-log

나만의 시험지는 졸업작품 프로젝트이다. 모든 내용을 담으면 좋겠으나. 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..

이번 포스팅에서는 useEffect로 특정 상태가 변화 되었을 때 React가 랜더링이 될 수 있게 할 것이다. 먼저 아래 코드를 살펴보자 import { useEffect } from "react"; export default function SubApp() { function onClick() { console.log("Click!"); } console.log("I run all the time"); useEffect(() => { console.log("Call The Api.."); }, []) return ( useEffect Click me ) } SubApp.js:7 I run all the time SubApp.js:9 Call The Api.. //클릭시 호출 되는 함수 SubApp.j..