Router를 통해 movie id를 가져올 수 있다. react-router-dom의 useParams를 사용하여 movie id를 얻을 수 있고, 이를 request 보내어 해당 영화의 세부 페이지로 접속할 수 있다. {id:'47571'}은 App.js에서 Route path로 지정한 /movie/:id 의 id를 의미한다. id를 통해 API에 request를 보냈다. 그러면 response를 통해 해당 페이지의 상세 정보를 확인할 수 있다. 사실 팀 프로젝트를 하며 react는 몰랐지만 routing은 해본 적이 있어서 이번 강의는 어렵지는 않았다. 하지만 detail 화면도 꾸며야 하고 앞으로 발전해야 할 길이 많다.. 열심히 하자
movie API 사용하기 useEffect(() => { fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=8.8&sort_by=year` ) .then((response) => response.json()) .then((json) => console.log(json)); }, []); useEffect를 사용하여 처음 render 될 때만 실행되도록 하였다. import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useSt..
https://studywithzpqmdh.tistory.com/86 Day 8 - ReactJS로 TodoList 만들기 #1 ToDo 만들기 프로젝트를 하려고 했는데, 마침 강의에서도 간단한 todo project를 만들길래 따라 만들고 그것을 발전시키는 방향으로 공부를 해야겠다. form tag는 submit event를 가지고 있다. 여러 개의 To studywithzpqmdh.tistory.com 기존 ToDo 의 문제점은 정말 많다. 기존의 코드를 살펴보며 수정할 부분들을 차근 차근 수정시켜 Todo program을 발전시켜보겠다. 문제점을 살펴보면 다음과 같다. 1. 할 일을 체크 할 수 없다 -> 체크 박스 구현하기 2. 한 일과 할 일을 따로 볼 수 없다. 3. 오늘의 할 일이지만 오늘의..
ToDo 만들기 프로젝트를 하려고 했는데, 마침 강의에서도 간단한 todo project를 만들길래 따라 만들고 그것을 발전시키는 방향으로 공부를 해야겠다. form tag는 submit event를 가지고 있다. 여러 개의 ToDo를 받을 수 있는 배열 만들기 const [toDos, setToDos] = useState([]); setToDos((currentArray) => [toDo, ...currentArray]); 기본 값으로 비어있는 배열을 준다. modifier인 setToDos 함수는 toDo의 값을 input에서 가져와 currentArray(toDos)에 추가해준다. toDos array에 있는 각각을 컴포넌트로 바꿔주려면 map()을 사용하면 된다. map의 인자에는 함수가 들어가는..
노트북이 너무 너무 너무 너무 느려서 초기화를 하고 다시 세팅했다. (1년만 더 버텨봐.. ) 1. 전역적인 css style을 원하지 않음 2. style을 직접적으로 넣고 싶지도 않음 => css를 사용하면서 해당 css 파일이 적용하려는 파일의 모든 부분에 import 되지 않게 하기 위해서는 어떻게 해야 하는가? create-react-app은 css 코드를 javascript object(styles)로 변환해준다. 해당 javascript object(styles)는 btn을 안에 가지고 있음. create-react-app은 무작위적인 random class를 갖는다는 것을 알 수 있음. => style들이 모듈러가 될 수 있음! (짱) 이제 컴포넌트를 분리해서 만들 수 있고, 그 컴포넌트를..
react app 사용하기 위해서는 node.js가 설치되어 있어야 한다. 기존에 node.js 가 다운로드 되어 있어서 바로 될 줄 알았는데.. npx 명령어를 쳐도 아무런 반응이 없었다.. (왜?) 찾아보니 node 버전 문제인 것 같아서 node를 삭제하고 다시 다운로드 하였다. node 버전 문제를 저번에도 겪었었는데 또 겪으니.. 조금 짜증이 나서 해결할 수 있는 방법이 없나 검색하다가 nvm을 통해 node를 설치하면 버전관리가 된다는 것을 알고! 따라해보았다. 굿! 근데 노트북이 너무 너무 너무 너무 느려서 npx create-react-app react-practice 명령어를 완료하는 데 15분 정도 걸린 것 같다.. (이거 맞나?) npm start 위의 명령어를 통해 react-app..
https://school.programmers.co.kr/learn/courses/30/lessons/49994 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr def solution(dirs): x, y = 0, 0 dir = {'U':(0, 1), 'D':(0, -1), 'R':(1, 0), 'L':(-1, 0)} answer = 0 path = [] for i in dirs: nx = x + dir[i][0] ny = y + dir[i][1] if -5
https://school.programmers.co.kr/learn/courses/30/lessons/12953 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr import math def lcm(a, b): return (a * b) // math.gcd(a,b) def solution(arr): answer = arr[0] for i in range(1, len(arr)): answer = lcm(answer, arr[i]) return answer math library에 lcm 함수를 지원하는 줄 알았는데 없었다..? 그래서 내가 만들어줬음 arr..
- Total
- Today
- Yesterday
- 러스트
- 브루트포스
- 백트래킹
- 싸피
- 자료구조
- 딕셔너리
- 2805
- heapq
- 삼성청년소프트웨어아카데미
- 빌림
- dp
- 파이썬
- 1764
- 1759
- 덱
- 스택
- 조합
- 수학
- 프로그래머스
- 1182
- 큐
- 10815
- 10845
- 10816
- 17478
- 10971
- 11051
- 1715
- 백준
- 1358
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 30 |