라이언 코딩일기

[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] 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] = ..

[React] 간단한 카카오 굿즈샵 만들기 리뷰2

저번에 기록한 카카오 굿즈샵 2편이다. 이번에 추가한 기능은 아래와 같다.장바구니에 상품 추가 시 중복방지장바구니 페이지 체크리스트 활성화장바구니 페이지 선택된 상품의 총 가격, 개수 구하기 function handleAddToBtn() { // UI 핸들링 setShow(!show); // 로컬 저장소 값 가져오기 const localCart = localStorage.getItem('cart'); const parsedCart = JSON.parse(localCart); // 로컬스토리지에 상품 정보가 없다면 item 추가 후 저장 if(!localCart) { localStorage.setItem('cart', JSON.stringify([item])); } else { // 로컬스토리지에 상품 정..

[React] 간단한 카카오 굿즈샵 만들기 리뷰

이번 프로젝트는 카카오 프렌즈샵을 보고 일부 디자인 및 이미지만 따서 간단한 페이지를 만들어 보았다. 나름 이런저런 기능을 추가해보고 싶었기에 꽤나 시간이 들어갔다. 이번 프로젝트를 하면서 localStorage 기능과 모달창 핸들링, CSS의 미디어 쿼리 기능에 많은 노력을 기울였던 것 같다. 조만간 로그인 기능 및 장바구니 체크박스 기능을 추가할 예정이다. ** 평소에는 관심도 없다가 만드는 내내 굿즈가 하나같이 귀여워서 다 사버리고 싶었다.

[React] TMDB API로 간단한 영화 리스트 만들기

이번 프로젝트는 유튜버 '인브로즈'님의 강의를 참고해서 만들었다. 처음 영상을 접했을 때는 '촬쓰'? 라는 이름으로 활동하셨던 기억이 있는데, 강의를 본격적으로 하기 위해 활동명을 변경하신 모양이다. 이번 프로젝트는 useState, useEffect, useParams, axios, react-router-dom 등을 이용하였다. import './CSS/index.css'; import { Routes, Route } from 'react-router-dom'; import { useState, useEffect } from 'react'; import axios from 'axios'; // import components import MainNavbar from './components/MainN..

[React] 간단한 투두리스트(Todo-List) 만들기

리액트를 이용해 간단한 투두리스트를 만들었다. 사용한 기능은 useState Hook과 Array.map() 메소드뿐이다. (props도 이용 안 함.) 로컬 저장소, 중복방지, useEffect 등의 부가기능은 일절 없다. 나중에 이 프로젝트를 활용해 부가기능 연습을 할 예정이다. import { useState } from 'react'; import './index.css'; function App() { const [inputValue, setInputValue] = useState(''); const [todoList, setTodoList] = useState([]); // 서브밋 핸들러 function handleSubmit(e) { e.preventDefault(); const copyTo..