라이언 코딩일기

[Git, Github] gh-page를 이용해 React 프로젝트 배포하기

저번 주말에 한국에서 시킨 맥북이 왔다. 근 30년간 윈도우만 사용하다가 Mac OS를 처음 접해본지라 당황스럽기만 하다 ^^;; gh-page란 정적인 웹 호스팅을 도와주는 노드 패키지 중 하나이다. 순서 깃허브에 저장소 생성 프로젝트 생성 프로젝트 터미널 -> 노드매니저를 통해 gh-pages 인스톨 ( npm i gh-pages ) 원격 저장소와 로컬 저장소 연결 ( remote add origin 저장소주소 ) package.json 파일에 http://사용자 이름.github.io/저장소 이름 추가하기 ( "homepage" : "http://mediumryan.github.io/mini-game-demo" ) package.json 파일의 script 내부에 "predeploy": "npm r..

[React] 영화 목록 + 검색기능

이번 프로젝트는 어제 공부했던 search bar 기능을 복습할 겸 만들어봤다. TMDB API를 통해 영화 데이터를 받아오고, 검색창을 추가해 사용자의 검색값에 맞게 해당 목록을 필터링해 주었다. 이번엔 저번과 다르게 영어가 아닌 한글로 필터링을 해보았다. 뭔가 훨씬 어렵고 특별한 무언가가 더 필요할 줄 알았는데 아니었다. import styled from 'styled-components'; import { useState } from 'react'; import { InputGroup, Form } from 'react-bootstrap'; // import components import NowPlayingItems from './../Components/NowPlayingItems'; const..

[React] styled-component 호버효과

import styled from 'styled-components'; const Container = styled.div` opacity = 0.5; &:hover { opacity = 1; } transition : 300ms opacity ease-in; ` &:hover { opacity = 1; }

[React] Filter 함수를 이용한 검색기능 만들기

오늘은 React로 필터 기능을 하는 검색창(Search bar)을 만들어봤다. 이전부터 해보고 싶었던 기능인지라 알고 나니 뿌듯했다. 공부는 유튜버 'Code Commerce' 님의 'React JS의 검색 필터 - 결과 필터링'이라는 글을 참고했다. (비교적 최근에 업데이트된 리액트 18 버전 이후의 강의들은 좀처럼 찾아보기 힘든지라 해외 글이나 영상, 공식문서에 의존해야 하기에 조금 힘든 것 같다 ㅜ..) 핵심 기능 array.filter() + array.map() onClick event 이번 작업 역시 repl.it을 이용 기본 마크업 + 스타일링은 react-bootstrap을 이용했다. array 자료는 https://www.mockaroo.com/ 를 이용. 자신이 원하는 랜덤객체 및 배..

[React] OpenWeatherMap API를 이용한 날씨앱 만들기 리뷰

React와 openweathermap api를 이용해 오늘의 날씨 및 사용자의 위치정보를 얻는 연습을 했다. 이전에 노마드 코더님의 모멘텀 클론코딩 실습을 할 때에도 사용했던 동일한 기능을 이번에는 React에서 해보기로 마음먹었다. 핵심 기능 JS 제공 Geolocaltion API (사용자 위치정보 얻기) axios + useEffect(API 정보 불러오기) import './index.css'; import axios from 'axios'; import { useState, useEffect } from 'react'; export default function App() { const [coords, setCoords] = useState(); const [datas, setDatas] = ..