라이언 코딩일기

[JavaScript] HTML, JS 에서 빈공간(space)을 넣고싶을 때

&nbsp \u00A0 .replace(/\s/g, ' ') 위 셋 활용 필요에 따라 모두 사용 가능하지만 .replace(/\s/g, ' ')가 가장 바람직함. 출처 : https://chaika.hatenablog.com/entry/2019/07/15/083000

[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; }

[Git, Github] 로컬에서 원격저장소 연결하기

git config --global user.name "Ryan" // 사용자 이름 등록 git config --global user.email "userEmail@gmail.com" // 사용자 이메일 등록 git config --list // 등록된 이름, 이메일 확인 git init // 깃 저장소 초기화 git remote add origin 원격저장소링크 ex) git remote add origin https://github.com/mediumryan/TMDB_basic.git // 원격 저장소 연결 git remote -v // 연결 확인 git add . // 파일 스테이징 ( . 원격 데이터 업로드)

[Git, Github] Git 초기설정

git config --global user.name "Ryan" // 사용자 이름 등록 git config --global user.email "userEmail@gmail.com" // 사용자 이메일 등록 git config --list // 등록된 이름, 이메일 확인 git init // 깃 저장소 초기화 git add . // 파일 스테이징 ( .

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

[HTML, CSS, JS] Animation 효과로 눈내리는 배경화면 만들기

이번 프로젝트는 유튜버 '수코딩'님의 무료강의를 토대로 진행했다. 강의를 본지는 좀 된 것 같고, 이번 프로젝트는 그때 기억을 되살려 혼자 해보았다. 핵심 기능 CSS : animation, @keyframes, nth-child JS : Math, for loop 완성본 HTML에는 아무런 요소도 추가하지 않았다. body { width: 100%; height : 100vh; background : linear-gradient(#0C1C3E,#394269); overflow: hidden; } #snow { background-color: #FFF; width: 25px; height: 25px; opacity: 0; border-radius: 50%; animation : snow 3s infini..

[HTML, CSS, JS] scrollIntoView와 scrollBy를 이용한 섹션 이동

사용자의 마우스 커서를 따라다니는 요소 만들기를 이은 JS 좌표공부 2탄이다. 핵심 기능은 타이틀에 적혀있는 scrollIntoView와 scrollBy 함수이다. 완성본 Next Section Move to One Move to Ten 1Page 2Page 3Page 4Page 5Page 6Page 7Page 8Page 9Page 10Page HTML 코드 상단 버튼 3개와 10개의 섹션박스를 만들었다. 지금 생각하니 첫 번째와 열 번째 섹션에만 id 값을 주는 게 맞는 것 같다. body { height: 100%; width: 100%; background-color: #000; display: flex; flex-direction: column; align-items: center; } butto..