whatisthis?

(1) 환경 setting - 터미널 명령어 touch index.html style.css// 파일 생성 mkdir assets// 디렉터리 생성 - font 가져오기 (import) - 기본 css 적용 (box-sizing이나 font-family 등) * { box-sizing: border-box; margin: 0; } body { font-family: "DM Sans", sans-serif; } - 부트스트랩의 grid 시스템 가져오기 지난번처럼 아래 코드를 붙여넣어도 됨. 하지만 우리는 grid만 쓸거니까 아래 css 파일을 쓰자! 전체 css를 복사해서 새 파일 생성한 후 붙여넣음. grid.min.css .sr-only{position:absolute;width:1px;height:1..

Interior Sheets Project - 디자인 시안 Figma Created with Figma www.figma.com 아직 백엔드+DB작업을 하지 않은 프론트엔드+간단한 js만 적용한 단계임. (22.02.24 기준) 아래는 각 페이지의 로직을 gif로 제작한 것 🔻 1 / 로그인 화면 2/ 메뉴창 (로그인 성공시)

220221 day 1 HTML audio 태그 play, stop 버튼을 마크업해 controls가 아닌 버튼으로 제어하게 한다. (스타일 적용을 위해) index.html Your Browser Does NOT support the audio format! Now Playing ... 0:00 app.js // DOM obj const audioContainer = document.querySelector("#audioContainer"); const playBtn = document.querySelector(".playBtn"); const stopBtn = document.querySelector(".stopBtn"); const timeStamp = document.querySelector("...

React JS - Movie App project Detail.js (수정) import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; function Detail() { const [loading, setLoading] = useState(true); const [info, setInfo] = useState([]); const { id } = useParams(); const getMovie = async () => { const json = await ( await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id=${id}`) ).json()..

> id라는 이름의 prop 새로 만듬 Home.js import { useEffect, useState } from "react"; import Movie from "../components/Movie"; function Home() { const [loading, setLoading] = useState(true); const [movies, setMovies] = useState([]); const getMovies = async () => { const json = await ( await fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year` ) ).json(); setMovies(json.data.movies)..

React JS - Movie App project (part 2) { fet.." data-og-host="mywebproject.tistory.com" data-og-source-url="https://mywebproject.tistory.com/355" data-og-url="https://mywebproject.tistory.com/355" data-og-image="https://scrap.kakaocdn.ne.. mywebproject.tistory.com 🔺 지난시간 진행사항 - props 이용 - component 구분 (App.js / Movie.js / Home.js / Detail.js) - 디렉터리 구분 (components / route) 1/ 우선 React Router을 설치해..

React JS - Movie App project (part 1) React JS Movie App (part 1) step1. API fetch 하고 / loading창 만들기 import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); useEffect(() => { fet.. mywebproject.tistory.com 🔺 지난번 진행사항 - fetch(async-await 이용) API - Arr.map() 으로 각 요소 렌더링 지금까지의 코드 🔻 App.js import { useEffect, useState } from "react"; function App()..

React JS Movie App (part 1) step1. API fetch 하고 / loading창 만들기 import { useEffect, useState } from "react"; function App() { const [loading, setLoading] = useState(true); useEffect(() => { fetch( `https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year` ) .then(response => response.json()) .then(json => console.log(json)); }, []); return {loading ? loading... : null}; } export defau..

보호되어 있는 글입니다.

보호되어 있는 글입니다.