목록2022/12 (28)
Silver Library (Archived)
생각한 것 과는 달리 너무 허망할 정도로 늘 하던 react 와 유사했지만, 그래도 기록을 남겨봅니다. 아마 저와 비슷한 생각을 한 분이 분명히 지금 이 글을 보고 있을테니까요. import React from 'react' import videoBackground from '../assets/sampleVideo.mp4' const BackgroundPage = () => { return ( Welcome To this page. ) } export default BackgroundPage 그리고 css 에서는 사이즈에 맞게 html의 video tag를 선언 후, 사이즈를 조정해서 넣으면 됩니다. 끝! How to play video in react.js using html video tag? Doe..
일단 createContext 에 대한 용도적 정의를 먼저 내릴 필요가 있습니다. createContext context object 를 생성하기 위해 쓰이는 react hook api. useContext function component 에서 context object 를 불러오기 위해 쓰이는 react hook api. 그리고 이들을 사용 할 때, Provider component 가 사용되는데, 주로 영향을 끼치게 할 대상을 wrapping 을 함으로써 하위 child component 측에 context object 를 전달 하는 용도로 쓸 수 있다는 점. 예시. import React from 'react' import { createContext } from 'react' // context..
Next.js 를 사용하기 시작한 가장 큰 이유는 다음과 같았습니다. 1. Server Side Rendering (SSR) 이 가능한 점. 2. react-router-dom 을 대체해 볼 수 있는 유사점. 이번에는 사용중 기억나던 것들을 위주로 하나씩 기록해보고자 합니다. react-router-dom 에는 Link 가 있습니다. App.js 쪽에서, 아니면 Router.js 라고 하나 파일을 만들어 둔 후에 보통 각 연결 대상 페이지 마다 표기하죠. Next.js 로는 이렇게 가능합니다. 거의 똑같지만, 차이점이 있다면 import 의 source 가 next 라는 점. import React from 'react' import Link from 'next/link' class MyApp exten..
Side project title. Anime Biased Exhibition Room Description. 본 사이드 작업물은 react.js 로 카트 기능을 구현하기 위해 필요한 기능을 구현 해 보는 것에 목적을 두고 진행하였습니다. 컨셉은 '분기별 추천작'을 앱 관리자가 선별 하여 나열 해 둔 것을, 방문자가 마음에 드는 아이템을 몇 개 북마크 하도록 버튼을 클릭 해서 Bookmark 메뉴란에 저장되게 합니다. 이러한 기능을 구현하고자 react cart 를 구성하는 것을 목적으로 구글링 하며 조사 하던 중, useContext, createContext 를 접목하였습니다. 이는 props 의 보일러플레이트 같은 형태의 코드 구성을 피하고, 파일별로 접근이 용이할 필요 및 높은 직관성 및, 코드 ..